/* ============================================================================
   ProveWise — Apple skin
   ============================================================================
   Loaded AFTER app.css. Deliberately a separate file and a separate layer.

   app.css is 178 KB across ~3,000 lines and its own header states the rule the
   whole system rests on: "Components MUST read CSS custom properties — never
   hard-code colour — so a single attribute swap repaints the whole app." That
   discipline is what makes this possible: re-declaring the token layer here
   repaints all 61 rendered pages without editing a single component rule.

   So this file does two things, in this order:
     1. redefines the design tokens in Apple's palette, type and shape;
     2. restyles only the components whose FORM (not colour) differs — pill
        buttons, hairline chrome, larger radii, quieter shadows.

   Reverting is deleting one <link>. Nothing in app.css was cut about, which
   matters in a regulated product where the CSS is not the thing under test but
   a broken layout still ships to an inspector.

   Reference: Apple's own marketing and legal surfaces (apple.com), reviewed via
   Mobbin for the nav, hero, pricing-card and footer patterns.
   ------------------------------------------------------------------------ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */

:root,
:root[data-theme="light"] {
  /* Apple's canvas is white with a grey band, not a blue-tinted wash. */
  --bg-0: #FFFFFF;
  --bg-1: #F5F5F7;
  --surface:   #FFFFFF;
  --surface-2: #F5F5F7;

  /* The nav is translucent over whatever scrolls beneath it. */
  --glass:     rgba(255, 255, 255, 0.72);
  --glass-brd: rgba(0, 0, 0, 0.08);

  /* Hairlines are genuinely hair-thin — Apple separates with 1px of #D2D2D7,
     never with a shadow. */
  --hair:   #D2D2D7;
  --hair-2: #C6C6C8;

  /* Three greys, and they do all the work: near-black, mid, light. */
  --t1: #1D1D1F;
  --t2: #6E6E73;
  --t3: #86868B;

  --primary:       #0071E3;
  --primary-hover: #0077ED;
  --primary-soft:  #D8E9FB;
  --primary-tint:  rgba(0, 113, 227, 0.08);
  --navy:          #1D1D1F;

  /* Status colours pulled toward Apple's system palette. Semantics unchanged —
     the workflow depends on these being distinguishable, not on their hue. */
  --st-draft:     #86868B;
  --st-pending:   #B25000;
  --st-review:    #0071E3;
  --st-approved:  #0040DD;
  --st-effective: #087A3F;
  --st-archived:  #6E6E73;
  --st-rejected:  #D70015;
  --st-hold:      #7D3AC1;

  --success: #087A3F;
  --warning: #B25000;
  --danger:  #D70015;
  --info:    #0071E3;

  --hero-0:     #F5F5F7;
  --hero-1:     #FFFFFF;
  --hero-ink:   #1D1D1F;
  --hero-ink-2: #6E6E73;
  --hero-wash:  rgba(0, 113, 227, 0.06);
  --dot:        rgba(0, 0, 0, 0.04);

  /* Apple barely uses shadow. Elevation comes from spacing and hairlines. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.10);
  --shadow-glow: 0 0 0 4px rgba(0, 113, 227, 0.28);

  --glass-blur: saturate(180%) blur(20px);
}

:root[data-theme="dark"] {
  --bg-0: #000000;
  --bg-1: #161617;
  --surface:   #1D1D1F;
  --surface-2: #161617;

  --glass:     rgba(29, 29, 31, 0.72);
  --glass-brd: rgba(255, 255, 255, 0.12);

  --hair:   rgba(255, 255, 255, 0.12);
  --hair-2: rgba(255, 255, 255, 0.20);

  --t1: #F5F5F7;
  --t2: #A1A1A6;
  --t3: #86868B;

  /* Apple lifts the blue in dark mode; #0071E3 does not carry on black. */
  --primary:       #2997FF;
  --primary-hover: #47A5FF;
  --primary-soft:  rgba(41, 151, 255, 0.24);
  --primary-tint:  rgba(41, 151, 255, 0.14);
  --navy:          #000000;

  --st-draft:     #98989D;
  --st-pending:   #FF9F0A;
  --st-review:    #2997FF;
  --st-approved:  #5E9CFF;
  --st-effective: #30D158;
  --st-archived:  #98989D;
  --st-rejected:  #FF453A;
  --st-hold:      #BF5AF2;

  --success: #30D158;
  --warning: #FF9F0A;
  --danger:  #FF453A;
  --info:    #2997FF;

  --hero-0:     #000000;
  --hero-1:     #161617;
  --hero-ink:   #F5F5F7;
  --hero-ink-2: #A1A1A6;
  --hero-wash:  rgba(41, 151, 255, 0.10);
  --dot:        rgba(255, 255, 255, 0.05);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 4px rgba(41, 151, 255, 0.36);
}

:root {
  /* Apple's radii are larger and softer, and its buttons are true pills. */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 980px;

  --ease-out: cubic-bezier(0.28, 0, 0.16, 1);   /* Apple's standard curve */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Compatibility aliases: app.css maps older names onto the canonical tokens.
   Re-point the ones that carry raw colour so no component keeps a blue from
   the previous system. */
:root,
:root[data-theme="light"] {
  --blue-500: #0071E3;
  --blue-600: #0077ED;
  --blue-700: #0062BE;
  --blue-300: #7FB6F0;
  --border: #D2D2D7;
  --primary-softer: rgba(0, 113, 227, 0.06);
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.03);
}
:root[data-theme="dark"] {
  --blue-500: #2997FF;
  --blue-600: #47A5FF;
  --blue-700: #1A7FE0;
  --blue-300: #5E9CFF;
  --border: rgba(255, 255, 255, 0.12);
  --primary-softer: rgba(41, 151, 255, 0.10);
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* ── 2. TYPE ───────────────────────────────────────────────────────────── */
/* On Apple hardware `-apple-system` IS SF Pro, so the real typeface renders
   with no download. Inter is the cross-platform stand-in — same skeleton,
   same optical size — and IBM Plex is retired from the UI. */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
}

body,
button,
input,
select,
textarea,
.button {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;   /* SF is set slightly tight at text sizes */
}

code, kbd, pre, samp, .mono, .hash-chip, .sidebar-doc-num {
  font-family: var(--font-mono);
  letter-spacing: 0;
}

/* Apple's display sizes are large, heavy and tightly tracked; body copy is
   the opposite — normal weight, roomy line height. */
h1 { letter-spacing: -0.015em; font-weight: 600; line-height: 1.08; }
h2 { letter-spacing: -0.014em; font-weight: 600; line-height: 1.12; }
h3, h4 { letter-spacing: -0.012em; font-weight: 600; }

/* ── 3. CHROME ─────────────────────────────────────────────────────────── */

.topbar {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--hair);
  box-shadow: none;
}

.topbar nav a {
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--t1);
  opacity: 0.86;
  border-radius: var(--radius-full);
  transition: opacity 0.2s var(--ease-out);
}
.topbar nav a:hover { opacity: 1; color: var(--t1); }

/* ── 4. CONTROLS ───────────────────────────────────────────────────────── */
/* The single most recognisable Apple component: a true pill, filled #0071E3,
   no gradient, no border, no lift on hover — only a shade change. */

button,
.button,
input[type="submit"] {
  border-radius: var(--radius-full);
  border: 1px solid var(--hair);
  background: var(--surface);
  color: var(--t1);
  box-shadow: none;
  padding: 9px 18px;
  font-weight: 400;
  transition: background-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out);
}

button:hover,
.button:hover {
  background: var(--surface-2);
  border-color: var(--hair-2);
  color: var(--t1);
  box-shadow: none;
}

button.primary,
.button.primary,
input[type="submit"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
  box-shadow: none;
}

button.primary:hover,
.button.primary:hover,
input[type="submit"]:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #FFFFFF;
  box-shadow: none;
  transform: none;   /* Apple's buttons do not rise */
}

button.danger,
.button.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #FFFFFF;
}

/* Apple's tertiary action is a blue text link with a chevron, not a button. */
button.link,
.button.link {
  color: var(--primary);
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
}
button.link:hover,
.button.link:hover { text-decoration: underline; background: none; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* A visible, keyboard-only focus ring in Apple's blue. */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
  border-radius: var(--radius-sm);
}

input, select, textarea {
  border-radius: var(--radius-sm);
  border: 1px solid var(--hair);
  background: var(--surface);
  color: var(--t1);
  padding: 10px 12px;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
  outline: none;
}

/* ── 5. SURFACES ───────────────────────────────────────────────────────── */

.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--hair);
  background: var(--surface);
  box-shadow: none;
}
.card:hover { box-shadow: none; border-color: var(--hair); transform: none; }
.card.elevated { box-shadow: var(--shadow-md); }

/* Apple's tables are hairline-ruled and airy: no zebra, no heavy header. */
table.data th,
table.data td,
.audit-table th,
.audit-table td,
.dcr-table th,
.dcr-table td {
  border-color: var(--hair);
}
table.data th,
.audit-table th,
.dcr-table th {
  background: transparent;
  color: var(--t2);
  font-weight: 500;
  letter-spacing: -0.008em;
  text-transform: none;   /* Apple does not shout in small caps */
}

/* Status chips: quiet tinted pills rather than saturated badges. */
.status,
.hash-chip {
  border-radius: var(--radius-full);
  font-weight: 500;
  letter-spacing: -0.006em;
}

/* ── 6. LEGAL AND LONG-FORM ────────────────────────────────────────────── */
/* Apple's legal pages are a narrow measure of small grey type on white, with
   generous leading and almost no ornament. They are meant to be read, and
   read at length. */

.legal-doc,
.legal-body,
.doc-longform {
  max-width: 42rem;
  margin-inline: auto;
  color: var(--t2);
  font-size: 15px;
  line-height: 1.7;
}
.legal-doc h1,
.legal-body h1 {
  color: var(--t1);
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 0.6em;
}
.legal-doc h2,
.legal-body h2 {
  color: var(--t1);
  font-size: 21px;
  margin-top: 2.2em;
  margin-bottom: 0.5em;
}
.legal-doc h3,
.legal-body h3 { color: var(--t1); font-size: 17px; margin-top: 1.8em; }
.legal-doc p, .legal-body p { margin: 0 0 1.15em; }
.legal-doc li, .legal-body li { margin-bottom: 0.5em; }
.legal-doc a, .legal-body a { color: var(--primary); }

/* ── 7. THE PART 11 FOOTER ─────────────────────────────────────────────── */
/* Apple's fine print: 12px, grey, hairline above, quiet. It carries a
   regulatory citation, so it must remain legible — but it is not a banner. */

.part11-footer {
  border-top: 1px solid var(--hair);
  background: var(--bg-1);
  color: var(--t3);
  font-size: 12px;
  letter-spacing: -0.004em;
}
.part11-footer .p11-badge {
  background: transparent;
  color: var(--t2);
  border: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.part11-footer a.p11-badge:hover { color: var(--primary); text-decoration: underline; }

/* ── 8. MOTION ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── 9. THE CANVAS ─────────────────────────────────────────────────────── */
/* app.css paints an "inspection-grade ambient background" on <body>: two
   radial washes in --primary-tint / --primary-soft plus a vertical gradient.
   It is well-built and entirely un-Apple — apple.com is flat white, or flat
   #F5F5F7, and lets whitespace do the work. Removing the wash is what makes
   the rest of this skin read as Apple rather than as a blue product wearing
   Apple's buttons. */

body {
  background-image: none;
  background-color: var(--bg-0);
}

/* Tints get quieter with the wash gone — a saturated fill that looked right
   against a blue canvas shouts against white. */
:root,
:root[data-theme="light"] {
  --primary-soft: rgba(0, 113, 227, 0.10);
  --primary-tint: rgba(0, 113, 227, 0.06);
  --blue-100: rgba(0, 113, 227, 0.10);
  --blue-200: rgba(0, 113, 227, 0.14);
}
:root[data-theme="dark"] {
  --primary-soft: rgba(41, 151, 255, 0.18);
  --primary-tint: rgba(41, 151, 255, 0.10);
  --blue-100: rgba(41, 151, 255, 0.18);
  --blue-200: rgba(41, 151, 255, 0.24);
}

/* Rails and insets are Apple's grey, not a blue tint. */
.sidebar, .rail, .docs-sidebar-left, .docs-sidebar-right,
.nav-menu, .cmdk-item {
  background-color: transparent;
}

/* ── 10. RESTRAINT ─────────────────────────────────────────────────────── */
/* With the tokens correct, the remaining difference from Apple is not colour
   but QUANTITY of colour. The rails render dozens of tinted chips — document
   numbers, recents, folder pills — and every one was blue. Apple's lists are
   neutral: near-black text, grey metadata, and blue reserved for things you
   can click. Colour there is a signal, not a texture.
   Semantic status colours are untouched; they carry workflow meaning. */

.sidebar-doc-num,
.doc-num,
.uw-hash,
.hash-chip {
  background: transparent;
  color: var(--t2);
  border: 0;
  padding-inline: 0;
  font-weight: 400;
}

/* Folder and filter pills: neutral fill, dark text — Apple's segmented look. */
.folder-pill,
.chip,
.tag,
.facet-pill {
  background: var(--surface-2);
  color: var(--t1);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
}
.folder-pill:hover,
.chip:hover,
.facet-pill:hover { background: var(--bg-1); border-color: var(--hair); }

/* Selected rail row: a light grey fill, not a blue one. */
.sidebar li.active,
.sidebar a.active,
.nav-menu .active,
li[aria-current="page"],
a[aria-current="page"] {
  background: var(--surface-2);
  color: var(--t1);
  border-radius: var(--radius-sm);
}

/* Status pills keep their meaning but lose the heavy fill: Apple states
   status with a coloured dot and plain text. */
.status {
  background: var(--surface-2);
  color: var(--t1);
  border: 1px solid var(--hair);
  font-weight: 400;
}

/* Row actions read as links, not as a stack of buttons. */
td .button,
td button,
.actions .button {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
  padding: 4px 8px;
}
td .button:hover,
td button:hover,
.actions .button:hover {
  background: var(--surface-2);
  border-color: transparent;
  text-decoration: none;
}

/* Micro-labels: Apple sets these sentence-case and grey, never shouted. */
.micro-label,
.feat-label,
.kpi-label,
.posture-label + .posture-hint {
  text-transform: none;
  letter-spacing: -0.006em;
  color: var(--t2);
}

/* ── 11. SEMANTIC TINTS ────────────────────────────────────────────────── */
/* Several templates painted their own status states — success greens, warning
   ambers, error reds — as literal hex and rgba inside inline <style> blocks.
   Those literals were a different palette from Apple's (#16a34a / #d97706 /
   #dc2626 rather than #087A3F / #B25000 / #D70015), and being literals they
   also did not follow the theme: a fixed rgba tint tuned for a light card is
   wrong on a black one.
   These tokens give those blocks something to reference, so a status pill on
   /status, /contact and /verify tracks both the palette and the theme. */

:root,
:root[data-theme="light"] {
  --success-tint: rgba(8, 122, 63, 0.10);
  --success-line: rgba(8, 122, 63, 0.28);
  --warning-tint: rgba(178, 80, 0, 0.10);
  --warning-line: rgba(178, 80, 0, 0.28);
  --danger-tint:  rgba(215, 0, 21, 0.10);
  --danger-line:  rgba(215, 0, 21, 0.28);
}

:root[data-theme="dark"] {
  --success-tint: rgba(48, 209, 88, 0.16);
  --success-line: rgba(48, 209, 88, 0.36);
  --warning-tint: rgba(255, 159, 10, 0.16);
  --warning-line: rgba(255, 159, 10, 0.36);
  --danger-tint:  rgba(255, 69, 58, 0.16);
  --danger-line:  rgba(255, 69, 58, 0.36);
}

/* ── 12. THE LAST LITERALS IN app.css ──────────────────────────────────── */
/* A palette sweep of the rendered pages found four components still painted
   in literal hex inside app.css itself — the only ones the token layer could
   not reach, because they never referenced a token to begin with. Three are
   Tailwind-family colours (emerald, rose, indigo) that predate the token
   system; the fourth reuses the approved status colour for a legend swatch.
   Overridden here rather than edited in app.css, so this skin stays a single
   removable layer. */

.kpi-trend.up   { color: var(--success); background: var(--success-tint); }
.kpi-trend.down { color: var(--danger);  background: var(--danger-tint); }
.lifecycle-legend .swatch.approved { background: var(--st-approved); }

/* ── 13. DE-BOX THE DOCUMENT PAGES ─────────────────────────────────────── */
/*
   The palette was Apple; the information architecture was not. A document
   detail page was a vertical stack of TWELVE bordered cards — versions,
   status, retention, linked change requests, last opened, move, preview,
   workflow, archive, upload, signatures, changes, viewers, audit — each one
   boxed. Apple almost never boxes like that. It separates with whitespace and
   the occasional hairline, and spends a card only where the content is
   genuinely one unit.

   That single habit was most of the remaining gap: the page read as a dense
   enterprise application wearing Apple's colours rather than as an Apple page.

   The rule applied here: FORMS AND CONTROLS sit on the page ground, separated
   by space and a rule. RECORDS — the version list, the signature manifest, the
   revision history, the audit and viewer tables — keep a surface, because
   those are the things a reader treats as a single object and an inspector
   asks to see whole.

   Scoped to .docs-main so the rest of the application is untouched; this is
   the page people live in, and the pattern can be extended deliberately rather
   than by accident.
*/

.docs-main > section.card,
.docs-main > section.card.narrow {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 44px;
}

/* A hairline above the heading does the separating a border used to do,
   without enclosing anything. */
.docs-main > section.card + section.card {
  border-top: 1px solid var(--hair);
  padding-top: 40px;
}

.docs-main > section.card > h2 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--t1);
  margin: 0 0 18px;
}

/* Records keep their surface — a reader treats each of these as one object. */
.docs-main > section.card:has(> table),
.docs-main > section.card:has(.version-list),
.docs-main > section.card[aria-labelledby="esig-heading"] {
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
}

/* …and when a section carries its own surface, the separator would double up. */
.docs-main > section.card:has(> table) + section.card,
.docs-main > section.card:has(.version-list) + section.card,
.docs-main > section.card[aria-labelledby="esig-heading"] + section.card {
  border-top: 0;
  padding-top: 0;
}

/* Tables inside a record surface should not draw a second box around
   themselves. */
.docs-main > section.card table { background: none; }

/* The tinted info strips were more saturated than Apple's. A light ground and
   a hairline carry the same meaning without shouting. */
.docs-main .banner-info,
.docs-main .note-info {
  background: var(--surface-2);
  border: 1px solid var(--hair);
  color: var(--t2);
}

/* Apple's smallest UI text is 12px; several labels here sat at 11. */
.docs-main .small,
.docs-main .muted.small { font-size: 12px; }

/* Only the title should wrap. Everything else in a records table is a short
   atomic value — a document number, a date, a type — and breaking one across
   lines ("2026-07-" / "13") makes it harder to read, not narrower. The title
   column absorbs the slack; the wrapper already scrolls if it truly cannot
   fit. */
.docs-main table.data td,
.docs-main table.data th { white-space: nowrap; }
.docs-main table.data td:nth-child(2),
.docs-main table.data th:nth-child(2) { white-space: normal; min-width: 22ch; }

/* ── 14. The way in, beside the way to buy ──────────────────────────────────
   Every public page now carries the pilot CTA and a sign-in link together.
   Before this, the logged-out topbar held only a language picker and a theme
   toggle: /security, /status, /legal, /contact, /validation-pack and /verify
   offered no route to /login at all, so a returning customer who landed on one
   had to know the URL. */

.topbar-signin {
  font-size: 14px;
  font-weight: 500;
  color: var(--t2);
  text-decoration: none;
  padding: 7px 4px;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.topbar-signin:hover { color: var(--t1); text-decoration: none; }
.topbar-signin:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

/* The pilot CTA is the one filled control in a logged-out topbar. */
.topbar-cta {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--primary);
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.topbar-cta:hover { background: var(--primary-deep, #0077ED); color: #fff; text-decoration: none; }
.topbar-cta:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* "Already have an account? Sign in" under the signup form. */
.auth-crosslink {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  text-align: center;
}
.auth-crosslink a { font-weight: 600; }

/* ── The logged-out topbar is NOT a drawer ─────────────────────────────────
   app.css turns #primary-nav into a collapsed drawer at ≤900px, opened by
   .nav-toggle — a button base.html renders only for signed-in users. Applied
   to a logged-out page that leaves an invisible nav with no way to open it.
   `.topbar-public` keeps the slim inline row the base.html comment always
   described, and outranks the drawer rules on specificity. */
@media (max-width: 900px) {
  header.topbar.topbar-public > nav#primary-nav {
    flex-basis: auto;
    order: 0;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-height: none;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  /* Drawer sizing rules also target these; keep them inline-sized. */
  header.topbar.topbar-public > nav#primary-nav > a {
    width: auto;
    padding: 7px 12px;
    font-size: 14px;
  }
  header.topbar.topbar-public .lang-picker { width: auto; }
  header.topbar.topbar-public .lang-picker select { width: auto; max-width: 8.5rem; }
}

/* At 375px the brand, both links, the picker and the toggle cannot share one
   row. Let the row wrap rather than letting the CTA shrink into an ellipsis. */
@media (max-width: 520px) {
  header.topbar.topbar-public { flex-wrap: wrap; row-gap: 10px; padding: 12px 16px; }
  header.topbar.topbar-public > nav#primary-nav { flex-basis: 100%; justify-content: flex-start; }
  .topbar-signin { padding-left: 0; }
}