/* API Library UI stylesheet — rebuilt on the otv-product-design token system.
   The semantic vocabulary (surfaces, borders, text, status families, focus, overlay,
   radii, shadows, motion, the header gradient) is adopted verbatim from
   otv-product-design/preview/styles.css; the six identity roles are pal-0001 (OTV Blue)
   exactly as otv-product-design/palettes/palettes.css generates them, so a future palette
   swap overrides the six --brand-* roles (a [data-palette] selector outranks this :root)
   and every derived colour follows. Brand law 1 holds: raw colour values appear ONLY in
   the :root token definitions below — every component rule references a token variable.
   The login gate keeps demo-match's structure/behaviour (.overlay/.modal/.field/.btn/.err)
   with OTV treatments. LIGHT THEME ONLY: the OTV and demo-match systems are light-only, and
   the old auto-dark variant is what rendered light text on white fields, so both
   prefers-color-scheme dark blocks are gone and the pages pin color-scheme:light (meta plus
   the :root rule below). No webfont @import: the pages ship CSP style-src 'self', so Inter
   resolves from the system when installed. */

:root{
  color-scheme:light;

  /* --- Typography (system stack, Inter-first fallback) --- */
  --font-primary:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --text-h1:24px; --text-h1-line-height:32px; --text-h1-letter-spacing:-0.005em;
  --text-h2:20px; --text-h2-line-height:28px;
  --text-h3:16px; --text-h3-line-height:24px;
  --text-body:14px; --text-body-line-height:20px;
  --text-small:13px; --text-small-line-height:18px;
  --text-label:12px; --text-label-line-height:16px;
  --text-caption:11px; --text-caption-line-height:14px;

  /* --- Brand identity: pal-0001 (OTV Blue), the protected default --- */
  --brand-primary:#1A6AFF;
  --brand-primary-hover:#1558D6;
  --brand-primary-active:#0F45AD;
  --brand-deep:#00008B;
  --brand-deeper:#0B1437;
  --brand-accent:#E1BC36;

  /* --- OTV semantic brand aliases --- */
  --color-brand-primary:var(--brand-primary);
  --color-brand-primary-hover:var(--brand-primary-hover);
  --color-brand-primary-active:var(--brand-primary-active);
  --color-brand-deep:var(--brand-deep);
  --color-brand-deeper:var(--brand-deeper);
  --color-brand-accent:var(--brand-accent);
  --color-brand-primary-subtle:color-mix(in srgb, var(--color-brand-primary) 8%, transparent);
  --color-brand-primary-soft:color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
  --color-brand-primary-medium:color-mix(in srgb, var(--color-brand-primary) 30%, transparent);

  /* --- OT status family --- */
  --color-status-success:#2f9e44;
  --color-status-warning:#e1a400;
  --color-status-danger:#d93025;
  --color-status-info:#1a6aff;
  --color-status-info-soft:rgba(26,106,255,.12);
  --color-status-success-soft:rgba(47,158,68,.12);
  --color-status-warning-soft:rgba(225,164,0,.12);
  --color-status-danger-soft:rgba(217,48,37,.12);
  --color-status-info-strong-bg:#dbeafe;
  --color-status-info-strong-text:#1e3a8a;
  --color-status-success-strong-bg:#dcfce7;
  --color-status-success-strong-text:#065f46;
  --color-status-warning-strong-bg:#fef3c7;
  --color-status-warning-strong-text:#92400e;
  --color-status-danger-strong-bg:#fee2e2;
  --color-status-danger-strong-text:#991b1b;
  --color-status-pending-strong-bg:#e0e7ff;
  --color-status-pending-strong-text:#3730a3;
  --color-role-purple-soft:#f3e8ff;
  --color-role-purple-text:#7c3aed;

  /* --- OT surfaces, borders, text --- */
  --color-surface-canvas:#f3f5f7;
  --color-surface-card:#ffffff;
  --color-surface-sunken:#e9ebef;
  --color-border-default:#e1e4e8;
  --color-border-strong:#c7cbd1;
  --color-text-primary:#1f2937;
  --color-text-secondary:#4b5563;
  --color-text-muted:#6b7280;
  --color-text-disabled:#9ca3af;
  --color-text-inverse:#ffffff;

  /* --- OT misc --- */
  --color-focus-ring:var(--color-brand-primary);
  --color-overlay:rgba(15,23,42,.48);

  /* --- On-gradient chrome: translucent-white roles for the text, borders and chips that sit
         on the header's --gradient-header band (the OTV landing pattern). Declared as tokens
         so component rules carry no raw colour values (brand law 1). --- */
  --color-on-gradient-text:rgba(255,255,255,.78);      /* tagline, ~72-78% white */
  --color-on-gradient-text-strong:rgba(255,255,255,.92);
  --color-on-gradient-text-soft:rgba(255,255,255,.65); /* placeholder */
  --color-on-gradient-border:rgba(255,255,255,.28);
  --color-on-gradient-chip:rgba(255,255,255,.12);
  --color-on-gradient-chip-hover:rgba(255,255,255,.20);

  /* --- Radii, shadows, motion, gradients, geometry --- */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-pill:9999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 2px 8px rgba(15,23,42,.08);
  --shadow-lg:0 12px 32px rgba(15,23,42,.18);
  --shadow-focus:0 0 0 3px color-mix(in srgb, var(--color-brand-primary) 32%, transparent);
  --ease-ot-ease:cubic-bezier(.2,0,0,1);
  --duration-fast:120ms;
  --duration-base:200ms;
  --gradient-header:linear-gradient(90deg, var(--color-brand-deeper) 0%, var(--color-brand-deep) 100%);
  --touch-target-min:44px;
  --gutter:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-primary);background:var(--color-surface-canvas);color:var(--color-text-primary);font-size:var(--text-body);line-height:var(--text-body-line-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--color-brand-primary)}
a:hover{color:var(--color-brand-primary-active)}
/* Links that sit directly on the canvas take the hover shade of the ramp:
   --color-brand-primary is an on-card role (4.6:1 on white) and dips below 4.5:1
   on the canvas tint; --color-brand-primary-hover clears it on both surfaces. */
.crumbs a,.foot a,.meta a,.hit .hmeta a{color:var(--color-brand-primary-hover)}
.crumbs a:hover,.foot a:hover,.meta a:hover,.hit .hmeta a:hover{color:var(--color-brand-primary-active)}
:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}

/* --- gate (demo-match structure, OTV tokens): overlay, modal, fields, buttons, error --- */
.overlay{position:fixed;inset:0;background:var(--color-overlay);display:flex;align-items:center;justify-content:center;padding:20px;z-index:40}
.modal{position:relative;background:var(--color-surface-card);border-radius:var(--radius-lg);padding:24px 22px 22px;width:100%;max-width:420px;box-shadow:var(--shadow-lg);overflow:hidden}
.modal::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--color-brand-primary)}
.modal h1{margin:6px 0 6px;font-size:var(--text-h1);line-height:var(--text-h1-line-height);font-weight:600;color:var(--color-text-primary)}
.modal p{margin:0 0 14px;color:var(--color-text-secondary);font-size:var(--text-body)}
.field{width:100%;min-height:var(--touch-target-min);padding:12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);font-size:16px;font-family:inherit;background:var(--color-surface-card);color:var(--color-text-primary)}
.field::placeholder{color:var(--color-text-muted)}
.field:focus{outline:2px solid var(--color-focus-ring);outline-offset:2px;border-color:var(--color-focus-ring)}
.field:disabled{background:var(--color-surface-sunken);border-color:var(--color-border-default);color:var(--color-text-disabled);cursor:not-allowed}
.field.code{text-align:center;letter-spacing:10px;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--touch-target-min);padding:11px 18px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:var(--color-surface-card);font-size:15px;font-weight:600;font-family:inherit;color:var(--color-text-primary);cursor:pointer;transition:all var(--duration-fast) var(--ease-ot-ease);text-decoration:none}
.btn:hover{border-color:var(--color-brand-primary);color:var(--color-brand-primary-hover)}
.btn.primary{background:var(--color-brand-primary);color:var(--color-text-inverse);border-color:var(--color-brand-primary);width:100%;margin-top:12px}
.btn.primary:hover{background:var(--color-brand-primary-hover);border-color:var(--color-brand-primary-hover);color:var(--color-text-inverse)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--color-text-primary)}
.btn.ghost:hover{border-color:var(--color-border-strong);color:var(--color-text-primary)}
.err{color:var(--color-status-danger-strong-text);background:var(--color-status-danger-strong-bg);font-size:var(--text-small);line-height:var(--text-small-line-height);margin-top:8px;min-height:16px;padding:6px 10px;border-radius:var(--radius-sm)}
.err:empty{padding:0;background:none}

/* the /login page renders the gate inside the layout: the same modal card, in flow */
#gate.gate-inline{display:flex;align-items:flex-start;justify-content:center;padding:32px 0}
#gate.gate-inline .modal{box-shadow:var(--shadow-md)}

/* --- header: the OTV landing pattern, a brand deep→deeper gradient band with inverse text --- */
.top{background:var(--gradient-header);color:var(--color-text-inverse);min-height:56px;display:flex;align-items:center;gap:12px;padding:10px var(--gutter);position:sticky;top:0;z-index:20}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--color-text-inverse);text-decoration:none;font-weight:600;font-size:var(--text-body);letter-spacing:-.005em;white-space:nowrap}
.brand .dot{width:22px;height:22px;border-radius:6px;background:var(--color-on-gradient-chip);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-on-gradient-border)}
.brand .dot b{width:9px;height:9px;border-radius:50%;background:var(--color-brand-accent);display:block}
.bdiv{width:1px;height:20px;background:var(--color-on-gradient-border);flex:0 0 auto}
.btag{font-size:var(--text-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--color-on-gradient-text);white-space:nowrap}
.spacer{flex:1 1 auto}
.hsearch{display:flex;flex:1 1 240px;max-width:480px}
.hsearch input{width:100%;min-height:36px;padding:6px 14px;border-radius:var(--radius-pill);border:1px solid var(--color-on-gradient-border);background:var(--color-on-gradient-chip);color:var(--color-text-inverse);font-size:var(--text-small);font-family:inherit}
.hsearch input::placeholder{color:var(--color-on-gradient-text-soft)}
.hsearch input:focus{outline:2px solid var(--color-text-inverse);outline-offset:2px;border-color:var(--color-text-inverse)}
.htools{display:flex;align-items:center;gap:8px}
.hbtn{display:inline-flex;align-items:center;gap:6px;min-height:var(--touch-target-min);padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--color-on-gradient-border);background:var(--color-on-gradient-chip);color:var(--color-text-inverse);font-size:var(--text-small);font-weight:600;font-family:inherit;cursor:pointer;text-decoration:none}
.hbtn:hover{background:var(--color-on-gradient-chip-hover)}
.account{font-size:var(--text-label);color:var(--color-on-gradient-text-strong);max-width:48vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signoutbtn{display:inline-flex;align-items:center;min-height:var(--touch-target-min);padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--color-on-gradient-border);background:var(--color-on-gradient-chip);color:var(--color-text-inverse);font-size:var(--text-small);font-weight:600;font-family:inherit;cursor:pointer}
.signoutbtn:hover{background:var(--color-on-gradient-chip-hover)}
@media(max-width:860px){.btag,.bdiv{display:none}.hsearch{display:none}}

/* --- layout: skip link, content column, footer --- */
.skip{position:absolute;left:-9999px;top:0;background:var(--color-surface-card);color:var(--color-text-primary);padding:10px 16px;border-radius:var(--radius-md);border:1px solid var(--color-border-default);box-shadow:var(--shadow-md);z-index:50}
.skip:focus{left:12px;top:12px}
main{min-width:0}
.wrap{max-width:1200px;margin:0 auto;padding:22px var(--gutter) 64px}
.foot{border-top:1px solid var(--color-border-default);color:var(--color-text-secondary);font-size:var(--text-small)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding-top:20px;padding-bottom:28px}
main h1{font-size:var(--text-h1);line-height:var(--text-h1-line-height);letter-spacing:var(--text-h1-letter-spacing);font-weight:600;margin:0 0 12px}
main h2{font-size:var(--text-h2);line-height:var(--text-h2-line-height);font-weight:600;margin:22px 0 8px}
main h3{font-size:var(--text-h3);line-height:var(--text-h3-line-height);font-weight:600;margin:16px 0 6px}
.card>h2{margin:0 0 10px}
.muted{color:var(--color-text-muted)}
.lede{color:var(--color-text-secondary);margin:0 0 16px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* --- card, segmented control, badges --- */
.card{background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-md)}
.seg{display:inline-flex;background:var(--color-surface-sunken);border:1px solid var(--color-border-default);border-radius:var(--radius-pill);padding:3px;gap:2px}
.seg button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;border:none;background:transparent;color:var(--color-text-secondary);font-family:inherit;font-size:var(--text-small);font-weight:600;border-radius:var(--radius-pill);cursor:pointer;transition:all var(--duration-fast) var(--ease-ot-ease)}
.seg button.on{background:var(--color-surface-card);color:var(--color-brand-primary);box-shadow:var(--shadow-sm)}
.badge{display:inline-flex;align-items:center;font-size:var(--text-caption);font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-sm);background:var(--color-status-info-strong-bg);color:var(--color-status-info-strong-text);white-space:nowrap}
.badge.ok{background:var(--color-status-success-strong-bg);color:var(--color-status-success-strong-text)}
.badge.warn{background:var(--color-status-warning-strong-bg);color:var(--color-status-warning-strong-text)}
.badge.bad{background:var(--color-status-danger-strong-bg);color:var(--color-status-danger-strong-text)}
.badge.none{background:var(--color-surface-sunken);color:var(--color-text-secondary)}

/* --- method badges: OTV strong pills (colour plus the method text — colour is never the
       only signal) --- */
.m-get,.m-post,.m-put,.m-patch,.m-delete,.m-soap{display:inline-flex;align-items:center;font-size:var(--text-caption);font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:var(--radius-sm);white-space:nowrap}
.m-get{background:var(--color-status-success-strong-bg);color:var(--color-status-success-strong-text)}
.m-post{background:var(--color-status-info-strong-bg);color:var(--color-status-info-strong-text)}
.m-put,.m-patch{background:var(--color-status-warning-strong-bg);color:var(--color-status-warning-strong-text)}
.m-delete{background:var(--color-status-danger-strong-bg);color:var(--color-status-danger-strong-text)}
.m-soap{background:var(--color-role-purple-soft);color:var(--color-role-purple-text)}

/* --- version pills --- */
.vpill{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--radius-pill);border:1px solid var(--color-border-default);background:var(--color-surface-card);color:var(--color-text-secondary);font-size:var(--text-label);font-weight:600;text-decoration:none}
.vpill:hover{border-color:var(--color-border-strong);color:var(--color-brand-primary-hover)}
.vpill.on{background:var(--color-brand-primary);border-color:var(--color-brand-primary);color:var(--color-text-inverse)}
.muted-pill{color:var(--color-text-muted)}

/* --- tables: card surface, sunken header row, hairline borders --- */
.table-wrap{overflow-x:auto;border:1px solid var(--color-border-default);border-radius:var(--radius-lg);background:var(--color-surface-card);box-shadow:var(--shadow-sm)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:var(--text-small)}
.table-wrap th,.table-wrap td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--color-border-default);vertical-align:top}
.table-wrap th{font-size:var(--text-label);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-secondary);white-space:nowrap;background:var(--color-surface-sunken)}
.table-wrap tr:last-child td{border-bottom:0}

/* --- code blocks: sunken surface, primary text --- */
pre.code{background:var(--color-surface-sunken);border:1px solid var(--color-border-default);border-radius:var(--radius-md);padding:12px 14px;overflow-x:auto;font-size:var(--text-small);line-height:1.55;margin:0 0 12px}
pre.code code,code{font-family:var(--font-mono)}
code{background:var(--color-surface-sunken);border:1px solid var(--color-border-default);border-radius:var(--radius-sm);padding:1px 5px;font-size:var(--text-label)}
pre.code code{background:none;border:0;padding:0;font-size:inherit}
.copybtn{display:inline-flex;align-items:center;min-height:36px;margin:0 0 8px;padding:6px 12px;border-radius:var(--radius-pill);border:1px solid var(--color-border-default);background:var(--color-surface-card);color:var(--color-text-secondary);font-size:var(--text-label);font-weight:600;font-family:inherit;cursor:pointer}
.copybtn:hover{border-color:var(--color-border-strong);color:var(--color-brand-primary-hover)}

/* --- operation lines, pagination --- */
.opline{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-bottom:1px solid var(--color-border-default)}
.opline:last-child{border-bottom:0}
.opline .opname{font-weight:600;text-decoration:none;color:var(--color-text-primary)}
.opline .opname:hover{color:var(--color-brand-primary-hover)}
.opline .opsum{color:var(--color-text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}

/* --- flash (one-request cookie message): info-strong --- */
.flash{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--color-status-info-strong-bg);color:var(--color-status-info-strong-text);padding:11px 16px;border-radius:var(--radius-md);font-size:var(--text-body);z-index:60;opacity:0;transition:all var(--duration-base) var(--ease-ot-ease);box-shadow:var(--shadow-lg);display:inline-flex;align-items:center;gap:8px}
.flash.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* --- account page: the one-time key reveal (soft warning wash) and the mint form --- */
.keyreveal{padding:12px 14px;border:1px solid var(--color-status-warning);background:var(--color-status-warning-soft);color:var(--color-status-warning-strong-text);border-radius:var(--radius-md);margin-bottom:14px}
.keyform{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.keyform .field{flex:1;min-width:220px}

/* --- consent screen extras (shared with the OAuth consent page, same visual system) --- */
.modal h2{margin:0 0 6px;font-size:var(--text-h2);line-height:var(--text-h2-line-height);font-weight:600}
.sub{margin:0 0 12px}
.scopes{margin:10px 0 14px;padding:0;list-style:none}
.scopes li{position:relative;padding:8px 10px 8px 30px;color:var(--color-text-secondary);background:var(--color-surface-sunken);border:1px solid var(--color-border-default);border-radius:var(--radius-md);font-size:var(--text-body)}
.scopes li+li{margin-top:6px}
.scopes li::before{content:"\2713";position:absolute;left:10px;color:var(--color-status-info-strong-text);font-weight:700}
.who{color:var(--color-text-secondary);margin-bottom:4px}
.signout{margin:0 0 4px}
.linklike{background:none;border:none;padding:0;color:var(--color-brand-primary);font:inherit;font-size:var(--text-small);text-decoration:underline;cursor:pointer}
.linklike:hover{color:var(--color-brand-primary-hover)}
.warn{margin-top:14px;padding:10px 12px;background:var(--color-status-warning-strong-bg);border:1px solid var(--color-status-warning);color:var(--color-status-warning-strong-text);border-radius:var(--radius-md);font-size:var(--text-small);line-height:var(--text-small-line-height)}
.actions{display:flex;gap:10px;margin-top:14px}
.actions .btn.primary{width:auto;flex:1;margin-top:0}

/* --- search page: filter form, result rows, chips, notices --- */
.searchform{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
.searchform .field{flex:1 1 170px;width:auto;min-height:var(--touch-target-min);padding:10px 12px}
.searchform .field.q{flex:3 1 260px}
.searchform .btn.primary{flex:0 0 auto;width:auto;margin-top:0}
.interp{margin:0 0 10px;color:var(--color-text-secondary)}
.notice{margin:0 0 12px;padding:8px 12px;border-radius:var(--radius-md);background:var(--color-status-warning-soft);border:1px solid var(--color-status-warning);color:var(--color-status-warning-strong-text);font-size:var(--text-small);line-height:var(--text-small-line-height)}
.keyreveal .notice{margin:0 0 8px;padding:0;background:none;border:0;color:inherit}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.chips .lbl{font-size:var(--text-label);color:var(--color-text-secondary)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 12px;border-radius:var(--radius-pill);border:1px solid var(--color-border-default);background:var(--color-surface-sunken);color:var(--color-text-secondary);font-size:var(--text-label);font-weight:600;text-decoration:none}
.chip:hover{border-color:var(--color-border-strong)}
.chip.on{background:var(--color-brand-primary-subtle);border-color:var(--color-border-strong);color:var(--color-status-info-strong-text)}
.hits{list-style:none;margin:0;padding:0}
.hit{padding:12px 0;border-bottom:1px solid var(--color-border-default)}
.hit:last-child{border-bottom:0}
.hit .hmain{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hit .hpath{font-family:var(--font-mono);font-size:var(--text-small);font-weight:600;color:var(--color-text-primary);text-decoration:none}
.hit .hpath:hover{color:var(--color-brand-primary-hover)}
.hit .hsum{color:var(--color-text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hit .hmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:var(--text-label);color:var(--color-text-secondary)}
.hit .hmeta a{font-size:var(--text-label)}
.tag{display:inline-flex;padding:2px 8px;border-radius:var(--radius-sm);background:var(--color-surface-sunken);color:var(--color-text-secondary);font-size:var(--text-caption)}
.examples{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.vendorlist{list-style:none;margin:0;padding:0}
.vendorlist li{padding:10px 0;border-bottom:1px solid var(--color-border-default)}
.vendorlist li:last-child{border-bottom:0}

/* --- browse pages: crumbs, page heads, filters, schema trees, diff lists --- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px;font-size:var(--text-small);color:var(--color-text-secondary)}
.crumbs a{font-size:var(--text-small)}
.pagehead{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pagehead code{font-size:var(--text-h3)}
.meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 12px;color:var(--color-text-secondary);font-size:var(--text-small)}
.vpills{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.filters .field{width:auto;min-height:var(--touch-target-min);padding:10px 12px}
.filters .btn.primary{width:auto;margin-top:0}
.opgroup h3{margin:18px 0 4px}
.resp{margin:0 0 10px}
.resp h3{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin:12px 0 6px}
.notes>:first-child{margin-top:0}
.schemanode{border:1px solid var(--color-border-default);border-radius:var(--radius-md);padding:8px 10px;margin:6px 0;background:var(--color-surface-card)}
.schemanode>summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.schemanode .ptype{color:var(--color-text-muted);font-size:var(--text-label)}
.schemanode .pdesc{color:var(--color-text-secondary);font-size:var(--text-small);min-width:12em;flex:1 1 12em}
.difflist{list-style:none;margin:0;padding:0}
.difflist li{padding:8px 0;border-bottom:1px solid var(--color-border-default)}
.difflist li:last-child{border-bottom:0}

/* --- WCAG AA scope notes: --color-text-muted is an on-card role (4.8:1 on white) that
       drops below 4.5:1 on the canvas tint and the sunken surface. The classes above that
       live on those surfaces (crumbs, footer, lede, meta, chips label, hit meta, tags,
       table headers, segmented-control segments) therefore use --color-text-secondary
       (6.4:1 on sunken, 6.9:1 on canvas). The rules below keep nested .muted spans on the
       right side of that line instead of inheriting the on-card grey. --- */
.meta .muted,.chip .muted{color:inherit}
.opgroup .muted,.pager .muted{color:var(--color-text-secondary)}