/* Group E: staff console (o- pages) and examiner read (x- pages). UI/UX audit fixes, 17 Oct 2026.
   Linked only from o- and x- pages. Reads tokens only; no new colors. */

/* spacing utilities that replace inline styles (E-38) */
.mt-1{margin-top:var(--s1)}
.mt-2{margin-top:var(--s2)}
.mt-4{margin-top:var(--s4)}
.mt-6{margin-top:var(--s6)}
.mb-4{margin-bottom:var(--s4)}
.mb-5{margin-bottom:var(--s5)}
.lead-sm{font-size:var(--fs-16);max-width:var(--measure);margin:0 0 var(--s5)}
.panel-narrow{max-width:640px}
.form-wide{max-width:none}
.row-nowrap{flex-wrap:nowrap}
.h-sm{font-size:var(--fs-18);margin:0}

/* notice strip with an action: staff role, examiner key (E-01, E-07, E-16).
   The examiner's key notice stays on screen while scrolling, under the sticky header, at every width. */
@media (min-width:600px){.shell-x .notice-strip{position:sticky;top:56px;z-index:45}}
@media (min-width:960px){.shell-x .notice-strip{top:60px}.shell-x .app-rail{top:101px;height:calc(100vh - 101px)}}
.notice-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s3)}
.notice-row form{margin:0}
.btn-link{background:none;border:0;padding:0;font:inherit;font-weight:500;color:var(--link);text-decoration:underline;text-underline-offset:2px;cursor:pointer;min-height:24px}
@media (pointer:coarse){.btn-link{min-height:44px}}

/* rail grouped by heading, scoped by staff role (E-11, E-24) */
.rail-h{font-size:var(--fs-12);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin:var(--s4) 0 var(--s1);padding:0 12px}
.rail-note{font-size:var(--fs-12);margin:var(--s4) 0 0;padding:0 12px;max-width:28ch}
.rail-mobile-links .rail-h{grid-column:1 / -1;padding:0 var(--s3);margin:var(--s2) 0 0}
@media (max-width:959px){
  .bottom-bar [aria-current="true"]{color:var(--link);background:var(--tint)}
  /* E-37 (rail hidden below 960 px) superseded by D105: the phone menu now carries Help and support, Learn and Request a feature */
}

/* prototype: view the console as another staff role */
.proto-role-list{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0;padding:0 0 6px}
.proto-role-list li{margin:0}
.proto-role-list a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid transparent;border-radius:var(--radius);color:var(--fg);font-size:var(--fs-14);font-weight:500;text-decoration:none}
.proto-role-list a[aria-current="true"]{border-color:var(--line);background:var(--bg)}
.proto-note{width:100%;margin:0 0 6px;font-size:var(--fs-12)}

/* tables: headers wrap instead of hiding columns sideways at tablet width (E-37) */
.shell-o thead th,.shell-x thead th{white-space:normal}
tr.row-new td{background:var(--tint)}

/* status line inside a form, filled by app.js data-saved */
.status-line{margin:var(--s2) 0 0;font-size:var(--fs-14)}
.status-line:empty{display:none}

/* request timeline (E-17) */
.timeline{list-style:none;margin:var(--s4) 0 0;padding:0 0 0 var(--s4);border-left:2px solid var(--line);display:grid;gap:var(--s3)}
.timeline li{margin:0;font-size:var(--fs-14)}
.tl-time{display:block;font-size:var(--fs-12)}

/* fields inside the signed-decision dialog (E-05, E-06) */
.decision-check{font-weight:500;margin:var(--s4) 0 0}
dialog.decision fieldset.choice{border:0;padding:0;margin:var(--s3) 0 0;display:grid;gap:6px}
dialog.decision fieldset.choice legend{font-weight:500;margin-bottom:var(--s1)}
dialog.decision fieldset.choice label{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:0}
dialog.decision .help{margin-top:4px}

/* a pass with a condition is its own state: half-filled dot (E-14) */
.state-cond::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}

/* hashes read in groups of 8 (E-09) */
.hash-groups{font-family:var(--font-mono);font-size:var(--fs-14);word-spacing:.4em;overflow-wrap:anywhere;margin:0}

/* how the question was read: each part is an editable chip (E-10) */
.read-as{font-size:var(--fs-14);margin:0 0 var(--s3)}
.interp{gap:var(--s2)}
.interp>div{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--radius);padding:2px 6px 2px 14px;background:var(--surface)}
.interp>div label{margin:0;font-size:var(--fs-12);white-space:nowrap}
.interp .input{border:0;background:transparent;min-height:40px;padding:4px 6px;width:auto}
.interp>div:last-of-type{border:0;background:none;padding:0}
.interp .status-line{width:100%}
@media (max-width:599px){.interp{display:grid;grid-template-columns:1fr}.interp>div{border-radius:var(--radius)}.interp .input{width:100%}}
.result-line{display:flex;flex-wrap:wrap;gap:4px var(--s4);align-items:baseline;margin:var(--s4) 0 var(--s2)}

/* commands with a copy button (E-36) */
.cmd{display:grid;gap:var(--s2);margin-top:var(--s2)}
.cmd .row{gap:var(--s2)}

/* verify: what is offline and what is online (E-19) */
.offline-label{font-size:var(--fs-16);margin:0 0 var(--s5);max-width:var(--measure)}

/* UI/UX audit 3, 18 Oct 2026: classes the o- and x- pages use that no stylesheet they load defined */
.mt-3{margin-top:var(--s3)}
.mt-5{margin-top:var(--s5)}
.h-flush{margin:0}
/* a sub-heading that is an h2 (no jump from h1) keeps the small size */
.app-main .h-sm{font-size:var(--fs-18)}
/* empty states use h2 after the page h1; they keep the size the h3 had */
.shell-o .state-empty h2,.shell-x .state-empty h2{font-size:var(--fs-18);margin-bottom:var(--s2)}

/* Invite requests (D127, 18 Oct 2026): a value set before launch (the same style as grp-A), the applicant's own words,
   and a link that opens once live */
.unset{border:1px dashed var(--line);border-radius:var(--radius);padding:0 var(--s1);font-weight:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.shell-o blockquote.quote{margin:var(--s1) 0 0;padding:var(--s2) var(--s4);border-left:3px solid var(--line);background:var(--surface);max-width:var(--measure)}
.shell-o blockquote.quote p{margin:0}
.link-soon{color:var(--link);text-decoration:underline dashed;text-underline-offset:2px}