/* =====================================================================
   UPI Test Lab — design system.

   One file, one system. Built mobile-first at 375px and widened.

   THE RULE THIS SYSTEM IS BUILT AROUND: show the action, explain on
   demand. Explanation lives in <details>, not in paragraphs above the
   control. The only prose that renders unconditionally is a warning
   about real money or the wrong recipient.

   No inline style attributes anywhere — the content security policy is
   nonce-based and a nonce cannot authorise one. Every spacing decision
   is a class.
   ===================================================================== */

:root {
  /* Brand */
  --yellow:        #FFC928;
  --yellow-press:  #F0B800;
  --yellow-wash:   #FFF9E8;
  --yellow-edge:   #F3DFA0;

  /* Ink */
  --ink:           #16181D;   /* headings */
  --body:          #3C424E;   /* body text */
  --muted:         #6B7280;   /* secondary */
  --faint:         #9CA3AF;   /* tertiary, metadata */

  /* Ground */
  --page:          #FBFBFA;
  --surface:       #FFFFFF;
  --sunken:        #F5F6F7;
  --line:          #EAECEF;
  --line-strong:   #DDE0E4;

  /* Status — restrained. Never a full-colour card. */
  --ok:            #10724E;
  --ok-wash:       #ECF7F2;
  --warn:          #8A5200;
  --warn-wash:     #FEF6EA;
  --danger:        #A32017;
  --danger-wash:   #FDF0EE;
  --info:          #1E4E8C;
  --info-wash:     #EFF4FB;

  /* Geometry — an 8px scale, 12/16px radii */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 10px; --r: 12px; --r-lg: 16px;

  --shadow-sheet: 0 1px 2px rgba(22,24,29,.04), 0 12px 32px rgba(22,24,29,.10);
  --shadow-pop:   0 8px 24px rgba(22,24,29,.12);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --nav-h: 60px;
  --rail-w: 232px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { color: var(--ink); margin: 0; line-height: 1.3; letter-spacing: -.018em; font-weight: 600; }
h1 { font-size: 21px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p  { margin: 0; }
a  { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }

/* ---------------------------------------------------------------------
   SHELL — a bottom tab bar on a phone, a left rail from 960px.
   The primary nav has four destinations and never scrolls sideways.
   --------------------------------------------------------------------- */
.shell { min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(251,251,250,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__in {
  display: flex; align-items: center; gap: var(--s3);
  height: 60px; padding: 0 var(--s4);
  max-width: 1180px; margin: 0 auto;
}
/* The logo is a link home, so it gets a real tap target: a 44px box
   with the 26px tile centred inside it. */
.mark {
  width: 44px; height: 44px; margin-left: -9px; flex: none;
  display: grid; place-items: center;
  color: var(--ink); text-decoration: none;
}
.mark::before {
  content: "U";
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--yellow);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13.5px; letter-spacing: -.02em;
}
.mark:hover { text-decoration: none; }
.wordmark { font-weight: 650; font-size: 15px; color: var(--ink); letter-spacing: -.02em; }
.topbar__spacer { flex: 1; }

.page {
  max-width: 820px; margin: 0 auto;
  padding: var(--s4) var(--s4) calc(var(--nav-h) + var(--s7));
}
@media (min-width: 720px) {
  .page { padding-left: var(--s5); padding-right: var(--s5); }
}

/* Mobile tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: var(--nav-h); padding: var(--s2) 2px;
  color: var(--muted); font-size: 10.5px; font-weight: 550; letter-spacing: .005em;
  text-decoration: none;
}
.tab:hover { text-decoration: none; color: var(--body); }
.tab svg { width: 21px; height: 21px; display: block; }
.tab[aria-current="page"] { color: var(--ink); font-weight: 650; }
.tab[aria-current="page"] svg { color: var(--yellow-press); }

@media (min-width: 960px) {
  .tabbar { display: none; }
  .shell { display: grid; grid-template-columns: var(--rail-w) 1fr; }
  .topbar { grid-column: 1 / -1; }
  .rail {
    border-right: 1px solid var(--line);
    padding: var(--s4) var(--s3);
    position: sticky; top: 60px; align-self: start;
    height: calc(100vh - 60px); overflow-y: auto;
  }
  /* With the rail taking its own column, the content column is
     measured from the rail's edge rather than the window's. */
  .page { padding-bottom: var(--s7); margin: 0; padding-left: var(--s6); padding-right: var(--s6); }
}
.rail { display: none; }
@media (min-width: 960px) { .rail { display: block; } }

.rail__group { margin-bottom: var(--s5); }
.rail__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); padding: 0 var(--s3) var(--s2);
}
.rail a {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3); border-radius: var(--r-sm);
  color: var(--body); font-size: 14px; font-weight: 500; text-decoration: none;
}
.rail a:hover { background: var(--sunken); text-decoration: none; color: var(--ink); }
.rail a[aria-current="page"] { background: var(--yellow-wash); color: var(--ink); font-weight: 600; }
.rail a svg { width: 18px; height: 18px; flex: none; color: var(--faint); }
.rail a[aria-current="page"] svg { color: var(--yellow-press); }

/* ---------------------------------------------------------------------
   SURFACES — one level of card. Nested cards are banned; a group inside
   a surface is a divided list, not another box.
   --------------------------------------------------------------------- */
.surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: var(--s3);
}
.surface--flat { border-radius: var(--r-lg); box-shadow: none; }
.surface__pad { padding: var(--s4); }
.surface__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s3);
}
.surface__head h1, .surface__head h2 { flex: 1; min-width: 0; }

.sectiontitle {
  display: flex; align-items: baseline; gap: var(--s2);
  margin: var(--s5) 0 var(--s2); padding: 0 2px;
}
.sectiontitle h2 { flex: 1; }
.sectiontitle:first-child { margin-top: 0; }

/* Divided list inside a surface */
.list { display: flex; flex-direction: column; }
.list > * { border-top: 1px solid var(--line); }
.list > *:first-child { border-top: 0; }

.row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); min-height: 56px;
  color: inherit; text-decoration: none; background: none; border: 0;
  width: 100%; text-align: left; font: inherit;
}
a.row:hover, button.row:hover { background: var(--sunken); text-decoration: none; }
.row__body { flex: 1; min-width: 0; }
.row__title { color: var(--ink); font-weight: 550; font-size: 14.5px; }
.row__sub { color: var(--muted); font-size: 13px; margin-top: 1px; }
.row__end { flex: none; display: flex; align-items: center; gap: var(--s2); color: var(--faint); }
.row--stack { align-items: flex-start; }
.chev { width: 16px; height: 16px; color: var(--faint); flex: none; }

/* ---------------------------------------------------------------------
   APP TILES
   --------------------------------------------------------------------- */
.tile { width: 36px; height: 36px; border-radius: 10px; flex: none; display: block; }
.tile--lg { width: 44px; height: 44px; border-radius: 12px; }

/* ---------------------------------------------------------------------
   TYPE HELPERS
   --------------------------------------------------------------------- */
.t-sm    { font-size: 13px; }
.t-xs    { font-size: 12px; }
.t-muted { color: var(--muted); }
.t-faint { color: var(--faint); }
.t-ink   { color: var(--ink); }
.t-strong{ font-weight: 600; color: var(--ink); }
.mono    { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
.truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break   { word-break: break-all; overflow-wrap: anywhere; }
.nowrap  { white-space: nowrap; }
.center  { text-align: center; }
.stack-1 > * + * { margin-top: var(--s1); }
.stack-2 > * + * { margin-top: var(--s2); }
.stack-3 > * + * { margin-top: var(--s3); }
.stack-4 > * + * { margin-top: var(--s4); }

/* ---------------------------------------------------------------------
   TEST ID — the permanent identifier. Always visible, always the same
   shape, so "PH-004 worked" is a sentence anyone can say.
   --------------------------------------------------------------------- */
.tid {
  display: inline-block; font-family: var(--mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink); background: var(--sunken);
  border: 1px solid var(--line-strong);
  padding: 2px 6px; border-radius: 6px; white-space: nowrap;
}
.tid--lg { font-size: 13px; padding: 4px 9px; border-radius: 8px; }

/* ---------------------------------------------------------------------
   STATUS — small, quiet, never a coloured card.
   --------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .005em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--sunken); color: var(--muted); white-space: nowrap;
}
.pill--ok     { background: var(--ok-wash);     color: var(--ok); }
.pill--warn   { background: var(--warn-wash);   color: var(--warn); }
.pill--danger { background: var(--danger-wash); color: var(--danger); }
.pill--info   { background: var(--info-wash);   color: var(--info); }
.pill--brand  { background: var(--yellow-wash); color: #7A5B00; }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--line-strong); }
.dot--ok { background: #19A06B; }
.dot--warn { background: #E39A1C; }
.dot--danger { background: #D2443A; }
.dot--muted { background: var(--line-strong); }

.count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   BUTTONS — 44px minimum touch target everywhere.
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4);
  border-radius: var(--r); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  font: 600 14.5px/1 var(--sans); cursor: pointer; text-decoration: none;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--test svg { width: 18px; height: 18px; }
.btn:hover { background: var(--sunken); text-decoration: none; color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.btn--primary {
  background: var(--yellow); border-color: var(--yellow); color: var(--ink);
  font-weight: 650;
}
.btn--primary:hover { background: var(--yellow-press); border-color: var(--yellow-press); }

.btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark:hover { background: #2A2E37; border-color: #2A2E37; color: #fff; }

.btn--ghost { background: transparent; border-color: transparent; color: var(--body); }
.btn--ghost:hover { background: var(--sunken); }

.btn--quiet { border-color: var(--line); color: var(--body); font-weight: 550; }
.btn--danger { color: var(--danger); border-color: var(--line-strong); }
.btn--danger:hover { background: var(--danger-wash); }

.btn--sm { min-height: 44px; padding: 0 var(--s3); font-size: 13.5px; border-radius: var(--r-sm); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.btns--grow > .btn { flex: 1; }

/* The primary test action, pinned on a phone. */
.actionbar {
  position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--page) 60%, rgba(251,251,250,0));
  padding: var(--s4) 0 var(--s3);
  margin-top: var(--s4);
  z-index: 20;
}
@media (min-width: 960px) {
  .actionbar { position: static; background: none; padding: 0; }
}

/* ---------------------------------------------------------------------
   SEGMENTED CONTROL — mode switch and primary filters.
   --------------------------------------------------------------------- */
.seg {
  display: inline-flex; background: var(--sunken);
  border-radius: var(--r-sm); padding: 3px; gap: 2px;
}
/* 44px minimum, including in the top bar. A segmented control is often
   drawn at 32–36px; the brief asks for 44 and a mode switch pressed with
   a thumb is exactly the case the rule is for. */
.seg a, .seg button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: 600 13px/1 var(--sans); color: var(--muted);
  padding: 0 var(--s3); border-radius: 9px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; white-space: nowrap;
}
.seg a:hover, .seg button:hover { color: var(--ink); text-decoration: none; }
.seg [aria-current="true"], .seg [aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(22,24,29,.07);
}
.seg--full { display: flex; width: 100%; }
.seg--full a, .seg--full button { flex: 1; justify-content: center; }

/* ---------------------------------------------------------------------
   FORMS
   --------------------------------------------------------------------- */
.field { margin-bottom: var(--s4); }
.field:last-child { margin-bottom: 0; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--body); margin-bottom: 6px; }
.help { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

input[type=text], input[type=password], input[type=search], input[type=number], textarea, select {
  width: 100%; min-height: 44px; padding: 11px var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font: 400 16px/1.4 var(--sans);   /* 16px: smaller zooms iOS Safari */
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22,24,29,.07);
}
textarea { min-height: 108px; resize: vertical; font-family: var(--mono); font-size: 13px; }
select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7280' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.field--bad input, .field--bad textarea { border-color: var(--danger); }
.err { color: var(--danger); font-size: 12.5px; font-weight: 550; margin-top: 5px; }

.check { display: flex; align-items: flex-start; gap: var(--s3); padding: 10px 0; }
.check input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--yellow-press); }
.check label { margin: 0; font-weight: 500; color: var(--ink); font-size: 14.5px; }
.check .help { margin-top: 2px; }

.searchwrap { position: relative; }
.searchwrap svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--faint); pointer-events: none;
}
.searchwrap input { padding-left: 38px; }

/* ---------------------------------------------------------------------
   NOTICE — reserved for real consequences. One per screen, ideally.
   --------------------------------------------------------------------- */
.notice {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); border-radius: var(--r);
  font-size: 13.5px; line-height: 1.5;
  background: var(--sunken); color: var(--body);
  margin-bottom: var(--s3);
}
.notice strong { color: var(--ink); font-weight: 600; }
.notice--warn   { background: var(--warn-wash);   color: #6E4100; }
.notice--danger { background: var(--danger-wash); color: #86190F; }
.notice--ok     { background: var(--ok-wash);     color: #0B5C3F; }
.notice--info   { background: var(--info-wash);   color: #193F70; }
.notice svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.notice__body { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------------
   DISCLOSURE — where every technical explanation now lives.
   --------------------------------------------------------------------- */
details.disc { border-top: 1px solid var(--line); }
details.disc:first-child { border-top: 0; }
details.disc > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); min-height: 48px;
  font-size: 14px; font-weight: 550; color: var(--ink);
}
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px; flex: none;
  border-right: 1.8px solid var(--faint); border-bottom: 1.8px solid var(--faint);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
details.disc[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
details.disc > summary:hover { background: var(--sunken); }
.disc__body { padding: 0 var(--s4) var(--s4); }
.disc__body > * + * { margin-top: var(--s3); }

/* Inline, text-weight disclosure for one short explanation. */
details.inline > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--info);
}
details.inline > summary::-webkit-details-marker { display: none; }
details.inline > summary::after { content: "›"; transform: rotate(90deg); font-size: 14px; line-height: 1; }
details.inline[open] > summary::after { transform: rotate(-90deg); }
details.inline .inline__body { margin-top: var(--s2); font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ---------------------------------------------------------------------
   DATA
   --------------------------------------------------------------------- */
.kv { display: grid; grid-template-columns: minmax(84px, max-content) 1fr; gap: 7px var(--s4); font-size: 14px; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

.code {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  background: var(--sunken); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s3); overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}
.code--dark { background: #17191E; color: #E6E8EC; border-color: #17191E; }

.copywrap { position: relative; }
.copywrap .btn { position: absolute; top: 7px; right: 7px; }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 10px var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

.matrix td:first-child, .matrix th:first-child {
  position: sticky; left: 0; background: var(--surface); z-index: 1;
}
.matrix th:first-child { z-index: 2; }
.cell { display: block; text-align: center; font-size: 12px; font-weight: 600; padding: 3px 6px; border-radius: 6px; }
.cell--working { background: var(--ok-wash); color: var(--ok); }
.cell--partial { background: var(--yellow-wash); color: #7A5B00; }
.cell--failed { background: var(--danger-wash); color: var(--danger); }
.cell--inconclusive { background: var(--sunken); color: var(--muted); }

/* ---------------------------------------------------------------------
   LAYOUT HELPERS
   --------------------------------------------------------------------- */
.cols { display: grid; gap: var(--s3); }
@media (min-width: 720px) { .cols--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .cols--3 { grid-template-columns: repeat(3, 1fr); } }

.statline { display: flex; gap: var(--s5); flex-wrap: wrap; }
.stat__n { font-size: 22px; font-weight: 650; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__l { font-size: 12px; color: var(--muted); margin-top: 1px; }

.empty { padding: var(--s7) var(--s4); text-align: center; color: var(--muted); }
.empty h2 { margin-bottom: var(--s2); }
.empty p { font-size: 14px; margin-bottom: var(--s4); }

.divider { height: 1px; background: var(--line); margin: var(--s4) 0; }

.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 var(--s4); min-height: 44px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 13px; font-weight: 550; color: var(--body); text-decoration: none; cursor: pointer;
}
.chip:hover { background: var(--sunken); text-decoration: none; color: var(--ink); }
.chip[aria-current="true"], .chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

.qrplate {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s3); display: inline-block; line-height: 0;
}
.qrplate svg { display: block; width: 216px; height: 216px; }

[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media print {
  .topbar, .tabbar, .rail, .actionbar, .no-print { display: none !important; }
  body { background: #fff; }
  .surface { border-color: #ddd; break-inside: avoid; }
  .page { padding: 0; max-width: none; }
}

.workspace-key { font-size: 15px; letter-spacing: .08em; margin: var(--s2) 0; }

/* Filter bar — the four that matter, then a disclosure for the rest. */
.filterbar { margin-bottom: var(--s4); }
details.advfilters > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 13px; font-weight: 600; color: var(--body);
  padding: var(--s2) 0; min-height: 44px;
}
details.advfilters > summary::-webkit-details-marker { display: none; }
details.advfilters > summary svg { width: 16px; height: 16px; color: var(--faint); }
details.advfilters > summary:hover { color: var(--ink); }
details.advfilters[open] > summary { margin-bottom: var(--s2); }

/* Back link above a detail screen. */
.backlink { margin-bottom: var(--s3); }
.backlink a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; font-weight: 550; color: var(--muted);
  min-height: 44px; margin-left: -4px; padding-right: var(--s2);
}
.backlink a:hover { color: var(--ink); text-decoration: none; }
.backlink svg { width: 16px; height: 16px; }

/* A method row: the ID and the name on one line, status beneath. */
.method__top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.method__top .row__title { font-size: 14.5px; }
.row--stack .row__sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.method__head { display: flex; align-items: center; gap: var(--s2); }
.btn--test { min-height: 52px; font-size: 16px; box-shadow: 0 2px 10px rgba(243,184,0,.3); }
.bullets { margin: var(--s2) 0 0; padding-left: 18px; }
.bullets li { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 5px; }
.bullets li::marker { color: var(--line-strong); }
.kv dd .truncate, .kv dd .mono { display: block; }

.profile__actions { display: flex; gap: var(--s2); align-items: center; }
.profile__actions form { margin: 0; }

.paramfield { padding-bottom: var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s3); }
.paramfield:last-of-type { border-bottom: 0; margin-bottom: 0; }
.paramfield .check { padding-top: 0; }
.check__body { flex: 1; min-width: 0; }
.customparam { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.inline-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; white-space: nowrap; }
.inline-check input { width: 20px; height: 20px; accent-color: var(--yellow-press); }
.verifyrow { margin: 0; }

/* Decoder */
.rowicon { width: 20px; height: 20px; color: var(--muted); flex: none; }
.row[aria-current="true"] { background: var(--yellow-wash); }
.row[aria-current="true"] .rowicon { color: var(--yellow-press); }
.camera { width: 100%; max-width: 420px; border-radius: var(--r); background: #000; display: block; }
.filefield { padding: 10px 12px; font-size: 14px; }
.decoder__actions { margin-top: var(--s3); }
.privacy { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--s3); }
.inlineicon { width: 15px; height: 15px; color: var(--ok); flex: none; }

.regmethod { padding-bottom: var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s3); }
.regmethod:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
details.disc > summary .count { margin-left: auto; margin-right: var(--s3); }

/* Utilities used by markup lab.js builds at runtime. They live here,
   not inline, because the content security policy is nonce-based and a
   nonce cannot authorise a style attribute. */
.m-0   { margin: 0; }
.mt-8  { margin-top: var(--s2); }
.row--md { padding: var(--s3) 0; }
.row--md:not(:last-child) { border-bottom: 1px solid var(--line); }

.kv--tight { gap: 4px var(--s3); font-size: 13px; margin: var(--s2) 0; }
.kv--tight dt { font-size: 12px; }
.mb-10 { margin-bottom: var(--s3); }

/* The decoder's save actions sit directly under the decoded details so
   they are the first thing a thumb reaches on a phone. */
.saveform { margin: var(--s3) 0; }
.saveform .btn + .btn { margin-top: var(--s2); }

.variantform { margin: 0; }
.variantform .row { padding-left: 0; padding-right: 0; }

/* Parameter groups inside the Optional parameters disclosure. Headings
   rather than nested disclosures: two levels of click to reach a field
   is one level too many. */
.paramgroup { margin-top: var(--s4); }
.paramgroup:first-of-type { margin-top: var(--s2); }
.paramgroup__head {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin-bottom: var(--s2);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--line);
}
details.disc > summary .count { margin-left: auto; margin-right: var(--s3); }