/* ═════════════════════════════════════════════════════════════════════
   GDP — staff runner: the screens that have no Claude Design export yet.

   This is the inline <style> block that used to live in
   src/views/staff-app.js, moved out unchanged in substance and scoped
   under `.runner` so it cannot collide with the delivered design system.

   IT IS A HOLDING FILE. Every rule here is retired the moment the export
   for the screen it dresses arrives — home, consent, the question runner,
   the done screens. Do not extend it. Anything new belongs in the
   delivered css/staff.css, or in staff-deltas.css if the export genuinely
   does not cover it.

   ── How the scoping works ────────────────────────────────────────────
   The shell carries `.runner` only while a pre-export screen is showing;
   the auth screens (S1, exported) drop it. So `.runner .field` and the
   delivered `.field` never apply to the same element, and load order
   settles the ties that specificity leaves level — this file is linked
   last for exactly that reason.

   The custom properties stay at :root because they are their own
   namespace (--paper, --ink, --green …) and cannot collide with the
   token system's --brand-* / --ui-*. --paper is the one exception and is
   deliberately re-pointed; see the note on it.
   ═════════════════════════════════════════════════════════════════════ */

:root {
  /* --paper was #F6F7F4. It is now the token background instead, so the
     runner column, its sticky header and the fade behind .nav all sit on
     the same white as the page around them. Two near-whites one or two
     units apart read as a seam at the edge of the 480px column on a wide
     viewport; one white does not. Nothing else about the runner moves. */
  --paper: var(--ui-bg);
  --card: #FFFFFF; --ink: #1A2420; --ink-2: #5B6663;
  --line: #E3E7E2; --green: #0F6E56; --green-soft: #E2F2EC; --green-line: #BFE3D6;
  --red: #C4543B; --r: 14px;
}

/* The shell itself, while a runner screen is showing. The layout half of
   the old `.app` rule is already in the delivered `.staff-shell`; what is
   left is the body type and colour the old `body` rule carried, set here
   so it inherits down into the runner and nowhere else. Background is
   deliberately not set — the page carries it. */
.runner {
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}
.runner .display { font-family: "Archivo", sans-serif; }

.runner header { position: sticky; top: 0; z-index: 5; background: var(--paper); padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.runner .brand { display: flex; justify-content: space-between; align-items: baseline; }
.runner .brand h1 { font-family: "Archivo"; font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.runner .brand .sess { font-size: 12px; color: var(--ink-2); font-family: "Archivo"; }
.runner .meta { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.runner .bar { height: 6px; background: var(--line); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.runner .bar i { display: block; height: 100%; width: 0; background: var(--green); border-radius: 3px; transition: width .35s ease; }

.runner main { flex: 1; padding: 20px; display: flex; flex-direction: column; }
.runner .screen { display: none; animation: in .3s ease; }
.runner .screen.on { display: flex; flex-direction: column; flex: 1; }
@keyframes in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .runner .screen { animation: none } .runner .bar i { transition: none } }

.runner .qtype { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin: 0 0 6px; }
.runner .qtype-ar { direction: rtl; text-align: right; font-size: 12px; font-weight: 600; color: var(--green); margin: -4px 0 8px; }
.runner .q { font-family: "Archivo"; font-size: 19px; font-weight: 600; line-height: 1.35; margin: 0 0 16px; letter-spacing: -.01em; }
.runner .q-ar { direction: rtl; text-align: right; font-size: 16px; color: var(--ink-2); margin: -8px 0 16px; line-height: 1.6; }
.runner .hint { font-size: 13px; color: var(--ink-2); margin: -10px 0 16px; }

/* The open-response instruction block (content batch 4). Rendered above the
   prompt of EVERY open-response item, in both languages. It is a fairness
   control, not decoration — it is how a subject knows that grammar is not
   assessed and that Arabic and English are assessed identically — so it is
   styled to be read rather than skipped past, and it is never collapsed,
   deferred to a tooltip, or shown once per session. */
.runner .orp-note { background: var(--green-soft); border-radius: var(--r); padding: 12px 14px; margin: 0 0 14px; }
.runner .orp-note p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.runner .orp-note .ar { direction: rtl; text-align: right; margin-top: 8px; color: var(--ink-2); }
.runner .orp-meta { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); margin: 0 0 8px; }
.runner .orp-title-ar { direction: rtl; text-align: right; font-size: 16px; color: var(--ink-2); margin: -10px 0 14px; line-height: 1.6; }
.runner .err { color: var(--red); font-size: 13.5px; margin: 0 0 12px; min-height: 0; }

/* Bilingual option label: English line, Arabic line beneath it in RTL —
   the same treatment .q-ar gives the prompt. */
.runner .lbl { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.runner .lbl-ar { direction: rtl; text-align: right; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

.runner .opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; font-size: 15px; line-height: 1.4; color: var(--ink); cursor: pointer; min-height: 52px; transition: border-color .15s, background .15s; font-family: inherit; }
.runner .opt .dot { flex: 0 0 20px; height: 20px; border: 2px solid #C6CEC9; border-radius: 50%; position: relative; transition: border-color .15s; }
.runner .opt.sel { border-color: var(--green); background: var(--green-soft); }
.runner .opt.sel .dot { border-color: var(--green); }
.runner .opt.sel .dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--green); }
.runner .opt:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.runner .fc-head { display: grid; grid-template-columns: 1fr 56px 56px; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); padding: 0 4px 8px; text-align: center; }
.runner .fc-head span:first-child { text-align: left; }
.runner .fc-row { display: grid; grid-template-columns: 1fr 56px 56px; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 12px 12px 16px; margin-bottom: 8px; font-size: 14.5px; line-height: 1.35; }
.runner .fc-btn { height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--paper); font-family: "Archivo"; font-weight: 700; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.runner .fc-btn.most.on { background: var(--green); border-color: var(--green); color: #fff; }
.runner .fc-btn.least.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.runner .scene { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--r); padding: 14px 16px; font-size: 14.5px; line-height: 1.55; margin-bottom: 16px; color: var(--ink); }

.runner textarea { width: 100%; min-height: 170px; border: 1.5px solid var(--line); border-radius: var(--r); padding: 14px 16px; font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--card); resize: vertical; }
.runner textarea:focus { outline: none; border-color: var(--green); }
.runner .wc { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.runner .wc .ok { color: var(--green); font-weight: 600; }

.runner input[type=text], .runner input[type=email], .runner input[type=password] { width: 100%; height: 50px; border: 1.5px solid var(--line); border-radius: var(--r); padding: 0 16px; font-size: 15px; color: var(--ink); background: var(--card); }
.runner input:focus { outline: none; border-color: var(--green); }
.runner label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 6px; }
/* display:block, not just the margin: the delivered .field is a flex column
   with its own gap, and inheriting that here would re-space every
   structured_form field on a screen this pass is not restyling. */
.runner .field { display: block; margin-bottom: 14px; }

.runner .nav { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--paper) 30%); padding: 18px 0 22px; margin-top: auto; }
.runner .next { width: 100%; height: 54px; border: none; border-radius: var(--r); background: var(--green); color: #fff; font-family: "Archivo"; font-size: 16px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
.runner .next:disabled { opacity: .35; cursor: default; }
.runner .autosave { text-align: center; font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.runner .ghost { width: 100%; height: 50px; margin-top: 14px; border-radius: var(--r); border: 1.5px dashed #B9C3BD; background: transparent; color: var(--ink-2); font-family: "Archivo"; font-size: 14px; font-weight: 600; cursor: pointer; }

.runner .done { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 10px 6px; }
.runner .check { width: 64px; height: 64px; border-radius: 50%; background: var(--green-soft); border: 2px solid var(--green-line); margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; }
.runner .check svg { stroke: var(--green); }
.runner .done h2 { font-family: "Archivo"; font-size: 23px; margin: 0 0 10px; letter-spacing: -.01em; }
.runner .done p { color: var(--ink-2); font-size: 14.5px; margin: 0 0 8px; }
.runner .nextcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; text-align: left; font-size: 14px; margin: 18px 0 0; }
.runner .nextcard b { font-family: "Archivo"; font-size: 13px; display: block; margin-bottom: 4px; }

.runner .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 12px; }
.runner .card h3 { font-family: "Archivo"; font-size: 15px; margin: 0 0 4px; }
.runner .card .sub { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; }
.runner .card .cta { display: inline-block; font-family: "Archivo"; font-weight: 700; font-size: 14px; color: var(--green); background: none; border: none; padding: 0; cursor: pointer; }
/* The tokens give every button a 44px minimum tap target. That is right for
   a button and wrong for this one, which is a text link wearing a <button>
   for keyboard reasons; 44px here would push every home card taller on a
   screen this pass is not restyling. */
.runner .card .cta { min-height: 0; }
.runner .minibar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 8px 0 10px; }
.runner .minibar i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.runner .pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; background: var(--green-soft); color: var(--green); }
.runner .pill.wait { background: var(--line); color: var(--ink-2); }
.runner .sectionlbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 18px 0 8px; }
.runner .consentbody { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; margin-bottom: 8px; }
.runner .consentmeta { font-size: 12.5px; color: var(--ink-2); margin: 6px 0 0; }

/* ── The Not-observed option (owner ruling 2026-08-19) ──────────────────
   It is a THIRD STATE, not a sixth scale point, and the ruling requires it
   to be "explicit and separate from unanswered". Rendered with the same
   .opt affordances so it behaves identically to press and to select, then
   set apart: pushed below the scale by a rule and a gap, and given a
   quieter, non-committal surface so it never reads as the top or bottom
   end of the range it sits under.

   Deliberately NOT green when selected. Green is this instrument's "you
   chose a rating" colour, and an unobserved item is the absence of a
   rating — colouring it the same way would make "I could not judge this"
   look like a judgement. */
.runner .opt-notobs { margin-top: 18px; border-style: dashed; border-color: #C6CEC9;
  background: transparent; color: var(--muted, #5a635e); font-size: 14px; }
.runner .opt-notobs::before { content: ""; position: absolute; }
.runner .opt-notobs .dot { border-style: dashed; }
.runner .opt-notobs.sel { border-style: solid; border-color: var(--ink);
  background: var(--card); color: var(--ink); }
.runner .opt-notobs.sel .dot { border-color: var(--ink); }
.runner .opt-notobs.sel .dot::after { background: var(--ink); }

/* The separator that makes "separate" visible rather than implied. */
.runner .opt-notobs { position: relative; }
.runner .opt-notobs::after { content: ""; position: absolute; left: 0; right: 0;
  top: -10px; border-top: 1px solid var(--line); }