/* ==========================================================================
   JCI NomCom — frontend application shell

   The credential bar, the screen navigation in the header, and shims for the
   handful of wp-admin classes the reused views emit (.notice, .regular-text,
   .description and friends). wp-admin's own stylesheet is not loaded on the
   frontend, so without these the views would render unstyled.

   admin.css supplies everything scoped to .jci-nomcom, which the views emit
   themselves; this file only supplies the chrome around them, the shims, and
   the responsive behaviour those views need on a phone.

   LAYOUT NOTE. This shell deliberately does not try to break out of the theme's
   content column. The usual full-bleed trick (position:relative; left:50%;
   margin-left:-50vw; width:100vw) is silently broken by block themes: the
   constrained-layout rule sets margin-left and margin-right to auto with
   !important on every direct child of the content area, so the negative margin
   is dropped and only the left:50% survives, which shoves the app half a
   container to the right and pushes it off the page. Instead the app takes the
   full width of whatever container it is given, and only its own max-width and
   margins are forced, which no theme rule can undo.
   ========================================================================== */

.jci-app{
  --nc-ink:#10192B; --nc-navy:#16325C; --nc-blue:#0B5FA5;
  --nc-paper:#F5F7FA; --nc-rule:#D3D9E3; --nc-seal:#8A2027; --nc-amber:#8A6410;
  --nc-mute:#5A6A82;
  --nc-grotesk:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --nc-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --nc-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Fill the container and defeat the theme's constrained-layout box. Both
     declarations need !important because the theme sets them that way. */
  display:block;width:100%;max-width:none!important;
  margin:0!important;padding:0;
  position:static;left:auto;right:auto;float:none;
  min-height:60vh;background:var(--nc-paper);
  font-family:var(--nc-grotesk);color:var(--nc-ink);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-align:left}
/* Specificity insurance. The theme's constrained-layout rule carries !important
   as well, and at equal specificity the winner would be decided by which
   stylesheet the theme happened to print last. Doubling the class settles it. */
.jci-app.jci-app{
  max-width:none!important;
  margin:0!important;
  margin-block-start:0!important;margin-block-end:0!important;
  margin-inline-start:0!important;margin-inline-end:0!important}

.jci-app *{box-sizing:border-box}
.jci-app *:focus-visible{outline:2px solid var(--nc-blue);outline-offset:2px}
.jci-app img{max-width:100%;height:auto}
.jci-app input,.jci-app select,.jci-app textarea{max-width:100%}

/* ------------------------------ header bar ------------------------------
   Credentials on the first row, the screens on the second. The navigation
   belongs to the header rather than to a side rail: on a phone a rail either
   eats a third of the width or collapses into something that needs script.
   ---------------------------------------------------------------------- */
.jci-app-bar{
  background:var(--nc-ink);color:#fff;position:sticky;top:0;z-index:60;
  box-shadow:0 1px 0 rgba(0,0,0,.2)}
.admin-bar .jci-app-bar{top:32px}
@media(max-width:782px){
  .jci-app-bar{position:static}
  .admin-bar .jci-app-bar{top:0}
}
.jci-app-bar-in{
  max-width:1300px;margin:0 auto;padding:0 22px;display:flex;align-items:center;
  gap:16px;min-height:58px;flex-wrap:wrap}
.jci-app-mark{display:flex;align-items:baseline;gap:9px;padding:8px 0;min-width:0}
.jci-app-mark b{font-weight:800;letter-spacing:-.02em;font-size:15px;white-space:nowrap}
.jci-app-mark span{
  font-family:var(--nc-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#8FA4C4;white-space:nowrap}
.jci-app-who{
  margin-left:auto;text-align:right;padding:8px 0;font-size:13px;color:#DCE4F0;
  line-height:1.35;min-width:0}
.jci-app-who small{
  display:block;font-family:var(--nc-mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:#8FA4C4;margin-top:2px}
.jci-app-out{
  font-family:var(--nc-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:#8FA4C4;text-decoration:none;border:1px solid #33456A;border-radius:3px;
  padding:6px 11px;white-space:nowrap}
.jci-app-out:hover{background:#1E2C45;color:#fff}
@media(max-width:600px){
  .jci-app-bar-in{padding:0 14px;gap:10px;min-height:0}
  .jci-app-mark{width:100%;padding:11px 0 0;flex-wrap:wrap}
  .jci-app-mark b{white-space:normal}
  .jci-app-mark span{font-size:9px}
  .jci-app-who{margin-left:0;text-align:left;padding:0 0 11px;font-size:12.5px}
  .jci-app-out{margin-left:auto;margin-bottom:11px}
}

/* ------------------------------- screen tabs ---------------------------- */
.jci-app-tabs{background:var(--nc-navy);border-top:1px solid rgba(255,255,255,.08)}
.jci-app-tabs-in{
  max-width:1300px;margin:0 auto;padding:0 18px;
  display:flex;flex-wrap:wrap;align-items:stretch;gap:1px}
.jci-app-tabs a{
  flex:0 0 auto;
  display:block;padding:11px 12px;font-size:13px;line-height:1.3;color:#B9C7DD;
  text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.jci-app-tabs a:hover{color:#fff;background:rgba(255,255,255,.07)}
.jci-app-tabs a.is-on{
  color:#fff;font-weight:600;background:rgba(255,255,255,.1);border-bottom-color:#9FB8DC}
/* One swipeable row on a phone. Wrapping sixteen screens there would push the
   content most of a screen down the page. */
@media(max-width:782px){
  .jci-app-tabs-in{
    flex-wrap:nowrap;overflow-x:auto;padding:0 12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .jci-app-tabs-in::-webkit-scrollbar{display:none}
  .jci-app-tabs a{padding:11px 10px;font-size:12.5px}
}

/* -------------------------------- layout -------------------------------- */
.jci-app-body{max-width:1300px;margin:0 auto;padding:22px 22px 72px}
@media(max-width:782px){.jci-app-body{padding:14px 14px 48px}}
@media(max-width:600px){.jci-app-body{padding:12px 12px 40px}}
/* A candidate has no navigation: no registry screen matches their capability,
   so the examination centres in the full width instead. */
.jci-app.has-no-nav .jci-app-body{max-width:920px}

.jci-app-main{min-width:0;overflow-x:auto;padding-bottom:2px}
/* A candidate's examination carries a sticky timer, and an overflow container
   would become its containing block and strand it. Candidates are exactly the
   no-navigation case, so exempt them. */
.jci-app.has-no-nav .jci-app-main{overflow:visible}
/* the views open with .wrap, which wp-admin would have given margins */
.jci-app-main .wrap{margin:0;padding:0;max-width:none}
.jci-app-main h1{
  font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 14px;padding:0;
  color:var(--nc-ink)}
@media(max-width:600px){.jci-app-main h1{font-size:20px}}

.jci-app-scope{
  max-width:1300px;margin:0 auto;padding:0 22px 40px;
  font-size:11.5px;line-height:1.55;color:var(--nc-mute)}
@media(max-width:782px){.jci-app-scope{padding:0 14px 28px}}

/* ------------------------- responsive screen bodies ---------------------
   The reused views were written for a wide admin screen: the consolidated
   table alone carries fifteen columns. Rather than restructure them, the wide
   tables scroll inside the page on a narrow viewport, which keeps every figure
   readable and its column heading with it.
   ---------------------------------------------------------------------- */
@media(max-width:900px){
  /* The region scrolls; keeping cells on one line stops a fifteen column table
     collapsing into a tower of wrapped words as it does. */
  .jci-app-main .widefat,
  .jci-app-main .jci-f7-scores,
  .jci-app-main .jci-f7-matrix{white-space:nowrap}
  .jci-app-main .jci-crit-desc,
  .jci-app-main .jci-flags,
  .jci-app-main td.jci-withheld{white-space:normal}
  .jci-app-main .jci-form7{padding:22px 16px}
  .jci-app-main .form-table th,
  .jci-app-main .form-table td{display:block;width:auto;padding:6px 0}
  .jci-app-main .jci-picker{flex-direction:column;align-items:stretch}
  .jci-app-main .jci-picker select{width:100%}
}
@media(max-width:600px){
  .jci-app-main .jci-form7{padding:16px 13px}
  .jci-app-main .jci-cand-bar{padding:10px 12px}
  .jci-app-main .jci-cand-count{margin-left:0;width:100%}
  .jci-app-main .jci-comp-actions .button{width:100%;text-align:center}
}

/* ======================= wp-admin class shims ===========================
   Only what the reused views actually emit. Counted from the views: button,
   button-primary, button-small, button-hero, button-link-delete, notice,
   notice-error, notice-warning, notice-info, description, regular-text,
   large-text, form-table, widefat, striped. The button and form-table rules
   live in admin.css already, scoped to .jci-nomcom; these are the rest.
   ======================================================================== */
.jci-app .notice,
.jci-app div.updated,
.jci-app div.error{
  border:1px solid var(--nc-rule);border-left-width:2px;border-radius:0 3px 3px 0;
  background:#fff;padding:3px 15px;margin:16px 0}
.jci-app .notice p{font-size:13px;line-height:1.6;margin:10px 0}
.jci-app .notice-success,.jci-app div.updated{border-left-color:#0C5A34;background:#EDF7F1}
.jci-app .notice-error,.jci-app div.error{border-left-color:var(--nc-seal);background:#FBF0F1}
.jci-app .notice-warning{border-left-color:var(--nc-amber);background:#FCF6E9}
.jci-app .notice-info{border-left-color:var(--nc-blue);background:#EFF3F9}
.jci-app .notice.is-dismissible .notice-dismiss{display:none}

.jci-app .regular-text{width:100%;max-width:26em}
.jci-app .large-text{width:100%}
.jci-app .small-text{width:88px}
.jci-app .button-hero{padding:11px 22px;font-size:14px}
.jci-app .hidden{display:none}
.jci-app .description{
  font-family:var(--nc-mono);font-size:10.5px;line-height:1.55;color:var(--nc-mute);
  font-style:normal;margin-top:5px}

/* links inside a screen */
.jci-app-main a{color:var(--nc-blue)}
.jci-app-main a:hover{color:var(--nc-navy)}

/* the candidate examination centres itself */
.jci-app .jci-front{max-width:820px}
/* admin.css sticks the timer 32px down, clearing wp-admin's bar. Here it is the
   credential bar that has to be cleared, and on a phone that bar is static. */
.jci-app .jci-exam .jci-timer{top:68px}
@media(max-width:782px){.jci-app .jci-exam .jci-timer{top:0}}

@media print{
  .jci-app-bar,.jci-app-tabs,.jci-app-scope{display:none!important}
  .jci-app{margin:0!important;min-height:0;background:#fff}
  .jci-app-body{display:block;padding:0;max-width:none}
  .jci-app-main{overflow:visible}
  .jci-app-main .widefat,
  .jci-app-main .jci-f7-scores,
  .jci-app-main .jci-f7-matrix{white-space:normal}
}
@media(prefers-reduced-motion:reduce){.jci-app *{transition:none!important;animation:none!important}}