/* Unified system UI. Mobile-first; verified against small screens as a build
   item, not assumed. Brand tokens are isolated in :root so client brand assets
   can be dropped in later without touching structure. */

:root {
  /* Brand tokens — placeholder values, replaced when brand assets are supplied. */
  --brand: #1f5f8b;
  --brand-ink: #ffffff;
  --brand-tint: #e8f0f6;
  --brand-deep: #163f5c;

  --bg: #f5f7f9;
  --surface: #ffffff;
  --ink: #1b2430;
  --ink-soft: #55606e;
  --ink-faint: #8b95a3;
  --line: #e0e4e9;
  --line-strong: #cbd2da;
  --pos: #1f8b57;
  --neg: #9b3d3d;
  --warn-bg: #fff6e6;
  --warn-line: #e6c675;

  --radius: 10px;
  --maxw: 46rem;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c; --surface: #1b212a; --ink: #eef1f5; --ink-soft: #b3bcc8;
    --ink-faint: #8894a2; --line: #2b333f; --line-strong: #3a4552;
    --brand: #57a0cc; --brand-ink: #0b1016; --brand-tint: #1d2a35; --brand-deep: #9cc6e2;
    --warn-bg: #33290f; --warn-line: #7a6425;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: .5rem; top: .5rem; background: var(--brand); color: var(--brand-ink); padding: .5rem .75rem; z-index: 5; }

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; justify-content: space-between; padding: .75rem 1rem; }
.brand { font-weight: 700; }
.env { color: var(--ink-faint); font-size: .8rem; }
.site-footer { color: var(--ink-faint); font-size: .8rem; margin: 2rem auto; }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; margin: 1rem 0;
}
.panel--muted { border-style: dashed; }
h1 { font-size: 1.4rem; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.muted { color: var(--ink-soft); }
.small { font-size: .85rem; }
.mono { font-family: var(--mono); }
.err { color: var(--neg); min-height: 1.2em; font-size: .9rem; }

label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
input[type=text], select {
  width: 100%; min-height: 44px; padding: .5rem .75rem; font: inherit;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.grid2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 30rem) { .grid2 { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5rem 1.1rem; font: inherit; font-weight: 600;
  border: 1px solid var(--brand); border-radius: var(--radius);
  background: var(--brand); color: var(--brand-ink); cursor: pointer;
}
.btn--ghost { background: transparent; color: var(--brand); }
.btn--small { min-height: 44px; padding: .3rem .9rem; }   /* still a real touch target */
.btn:disabled { opacity: .5; cursor: not-allowed; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.note { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius); padding: .75rem 1rem; margin: 1rem 0; }

/* Invitation list — cards, not a table. On a phone a table forces the Open
   button off-screen behind a sideways scroll; a flex card keeps the action
   visible at every width and never scrolls the page horizontally. */
.invites { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.invite {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .75rem;
}
.invite--empty { display: block; }
.invite__meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }   /* min-width:0 lets children wrap/ellipsis instead of pushing wide */
.invite__title { font-weight: 600; }
.invite__status { font-size: .8rem; color: var(--ink-faint); }
.invite .btn { flex: none; align-self: start; }   /* the Open button never shrinks or wraps away */

/* Token disclosure — expands DOWNWARDS to reveal the full token, wrapped, so it
   is never behind a sideways scroll. Native <details>: tap/keyboard accessible. */
.tok { font-size: .8rem; }
.tok > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  color: var(--ink-faint); min-height: 32px;
}
.tok > summary::-webkit-details-marker { display: none; }
/* Label swaps on toggle; the HTML text is overridden by these so it reads
   "show token" when collapsed and "hide" when expanded. */
.tok__hint { color: var(--brand); font-size: .75rem; font-size: 0; }
.tok__hint::after { content: 'show token'; font-size: .75rem; }
.tok[open] .tok__hint::after { content: 'hide'; }
/* Hidden until expanded. Explicit display:none because setting display on a
   <details> child otherwise overrides the browser's own collapse and leaks the
   token while closed. */
.tok__full { display: none; }
.tok[open] .tok__full {
  display: block; margin-top: .25rem; padding: .4rem .5rem;
  background: var(--brand-tint); border-radius: 8px;
  word-break: break-all; color: var(--ink); line-height: 1.4;
}

/* which assessment this question belongs to — shown on every item */
.item-assessment {
  margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--brand);
}

/* completion */
.done-badge {
  display: inline-block; font-weight: 700; font-size: .8rem;
  padding: .2rem .6rem; border-radius: 999px; margin-bottom: .5rem;
  background: var(--brand-tint); color: var(--brand-deep);
}

/* progress */
.progress { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.bar { flex: 1; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar__fill { height: 100%; background: var(--brand); transition: width .2s; }

/* scenario + options */
.scenario { font-size: 1.05rem; font-weight: 600; }
.opts { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.opt {
  border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem;
  display: grid; grid-template-columns: auto 1fr; gap: .35rem .6rem; align-items: start;
}
.opt--pos { border-color: var(--pos); }
.opt--neg { border-color: var(--neg); }
.opt__chip { font-family: var(--mono); font-weight: 700; color: var(--ink-faint); }
.opt__text { }
.opt__picks { grid-column: 1 / -1; display: flex; gap: .5rem; }
.pick {
  flex: 1; min-height: 44px; border-radius: var(--radius); font: inherit; font-weight: 600;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer;
}
.pick--pos[aria-pressed=true] { background: var(--pos); color: #fff; border-color: var(--pos); }
.pick--neg[aria-pressed=true] { background: var(--neg); color: #fff; border-color: var(--neg); }

/* realism */
.realism { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--line-strong); }
.realism__q { font-size: .9rem; color: var(--ink-soft); margin-bottom: .6rem; }
.scale { display: flex; gap: .4rem; flex-wrap: wrap; }
.sbtn {
  flex: 1; min-width: 64px; min-height: 44px; text-align: center; line-height: 1.2;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft); font: inherit; cursor: pointer;
}
.sbtn b { display: block; font-family: var(--mono); color: var(--ink); }
.sbtn small { font-size: .65rem; color: var(--ink-faint); }
.sbtn.on { background: var(--brand-tint); border-color: var(--brand); }
.sbtn.on b, .sbtn.on small { color: var(--brand-deep); }

/* report */
.rhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rindex { font-weight: 700; font-size: 1.6rem; color: var(--brand); }
.rindex small { color: var(--ink-faint); font-weight: 400; font-size: .9rem; }
.rsec { border-top: 1px solid var(--line); padding: 1rem 0; }
.rsec__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rsec__head h3 { margin: 0; font-size: 1.02rem; }
.band { font-size: .8rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--line-strong); white-space: nowrap; }
.rsec__score { color: var(--ink-soft); font-size: .9rem; margin: .35rem 0; }
.rsec__n { margin: .35rem 0; }
.rsec__k { font-weight: 700; color: var(--ink-soft); }
.verstamp { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); word-break: break-all; }