/* aiusage.guide
   Hand-written, no framework. Three rules govern everything here:
   - the reading column is the design; everything else gets out of its way
   - both themes are defined on :root, so nothing is only defined inside a
     media query and inherits a host background by accident
   - nothing is rounded, nothing is filled by default. Whitespace separates;
     a 1px hairline appears only where a boundary is genuinely needed.
*/

/* ------------------------------------------------------------------ fonts */

/* Self-hosted. The privacy page states that no third-party resources are
   loaded — a Google Fonts <link> would make that untrue. Barlow is OFL-1.1;
   the licence sits next to the files in assets/fonts/OFL.txt. */

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-400italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-400italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/barlow-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */

/* Steel-blue technical wireframe. The ramps below are the design system's;
   the aliases under them are what the rest of this file uses, so retuning
   the system reaches every component. */

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;

  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-700: #416180;
  --color-accent-900: #1d2d3d;

  --bg: var(--color-bg);
  --surf: var(--color-surface);
  --ink: var(--color-text);
  --acc: var(--color-accent);
  /* Solid accent fills carry white text, so they step down to accent-700
     (6.5:1). The raw accent at 4.15:1 was the defect this pair replaces. */
  --acc-fill: var(--color-accent-700);
  --on-acc: #ffffff;
  /* Body-size accent text — never --acc itself, which fails AA on the ground. */
  --link: var(--color-accent-700);
  --div: rgba(29, 31, 32, 0.16);
  --muted: rgba(29, 31, 32, 0.7);
  --mark: rgba(29, 31, 32, 0.48);
  --code: var(--color-neutral-200);
  --plate: var(--color-neutral-100);
  --tint: rgba(89, 128, 166, 0.09);

  --measure: 42rem;
  --wrap: 77.5rem;
  --radius: 0;

  --font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --font-ui: var(--font);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Compatibility aliases. Nothing in the tree uses them any more except
     --font-ui, but they are not dead weight: .tool-picker arrived from
     another branch written entirely against these names, and resolved
     through them on merge instead of rendering unstyled. Branches are still
     in flight, so they stay until the vocabulary has settled. --warn-* point
     at the ink of the hatched hazard band, so a caution state inherited from
     elsewhere lands inside the one-accent palette rather than reintroducing
     amber. */
  --surface: transparent;
  --surface-2: var(--surf);
  --text: var(--ink);
  --text-dim: var(--muted);
  --rule: var(--div);
  --accent: var(--acc);
  --accent-soft: var(--tint);
  --warn-rule: var(--ink);
  --warn-bg: var(--surf);
}

/* The system ships light-only, so the dark ground is derived. Defined twice
   on purpose: the media query serves readers with JavaScript off, the
   attribute lets the appearance control override them. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111315;
    --surf: #1a1d1f;
    --ink: #eceded;
    --acc: var(--color-accent-400);
    --acc-fill: var(--color-accent-400);
    --on-acc: #111315;
    --link: var(--color-accent-300);
    --div: rgba(236, 237, 237, 0.16);
    --muted: rgba(236, 237, 237, 0.62);
    --mark: rgba(236, 237, 237, 0.42);
    --code: #1a1d1f;
    --plate: #1a1d1f;
    --tint: rgba(148, 188, 227, 0.12);
  }
}

:root[data-theme="dark"] {
  --bg: #111315;
  --surf: #1a1d1f;
  --ink: #eceded;
  --acc: var(--color-accent-400);
  --acc-fill: var(--color-accent-400);
  --on-acc: #111315;
  --link: var(--color-accent-300);
  --div: rgba(236, 237, 237, 0.16);
  --muted: rgba(236, 237, 237, 0.62);
  --mark: rgba(236, 237, 237, 0.42);
  --code: #1a1d1f;
  --plate: #1a1d1f;
  --tint: rgba(148, 188, 227, 0.12);
}

/* ------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

/* Tool selection, on the wireframe palette rather than the compatibility
   aliases it was written against. Square, hairline, transparent until
   chosen. */
.tool-picker { margin-block: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--div); background: var(--surf); font-family: var(--font-ui); }
.tool-picker__heading { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; }
.tool-picker__heading span, .tool-picker p { color: var(--muted); font-size: .875rem; }
.tool-picker p { margin: .75rem 0 0; max-width: 75ch; }
.tool-picker__options { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.tool-picker button { min-height: 44px; padding: .5rem .8rem; background: transparent; color: var(--ink); border: 1px solid var(--div); font: inherit; cursor: pointer; }
.tool-picker button:hover { background: var(--tint); border-color: var(--acc); }
/* --acc-fill / --on-acc, never the raw accent against the page ground: that
   pair measured 3.71:1 in light, under the 4.5 AA needs. It is the same
   defect the button tokens were introduced to retire, reached here by a
   component that predates them. */
.tool-picker button[aria-pressed="true"] { background: var(--acc-fill); color: var(--on-acc); border-color: var(--acc-fill); }
.tool-picker button[aria-pressed="true"]:hover { background: var(--link); border-color: var(--link); }
.tool-picker button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
/* Same family as .chip: a surface fill, no outline. */
.tool-badge { display: inline-block; font: .75rem var(--font-ui); color: var(--muted); background: var(--surf); border: 0; padding: .15rem .45rem; margin: .25rem .4rem; }
.tool-scope { font: .875rem/1.6 var(--font-ui); color: var(--muted); max-width: 75ch; }
/* A mismatch is a caution state, so it takes the hatched band the warning
   callout and the review banner use rather than a colour of its own. */
.tool-scope--mismatch { position: relative; background: var(--surf); padding: .75rem .75rem .75rem calc(.75rem + 5px); }
.tool-scope--mismatch::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: repeating-linear-gradient(45deg, var(--ink) 0 2px, transparent 2px 4px);
}
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--acc); text-decoration: underline; }

/* Dates and figures are body type with tabular numerals — monospace means
   code and nothing else. */
time, .num, .accessed { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--acc) 30%, transparent); }
::placeholder { color: var(--muted); opacity: 1; }

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

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem;
  z-index: 60;
  background: var(--plate);
  border: 1px solid var(--acc);
  padding: 0.5rem 0.75rem;
}

.wrap {
  width: min(100% - 3rem, var(--wrap));
  margin-inline: auto;
}

/* Registration marks — the one piece of the system's ornament kept. Four
   11x11 crosshairs sitting 6px outside the corners, drawn as eight 1px
   gradients on a single overlay so the element keeps both its pseudo-
   elements free. At most one or two objects per page carry them: opt in with
   .marks on a key plate — the prompt ladder, the widget block — never on a
   list card and never on the headline itself. */
.marks { position: relative; }
.marks::before {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  background:
    linear-gradient(var(--mark), var(--mark)) left 0 top 5px / 11px 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left 5px top 0 / 1px 11px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right 0 top 5px / 11px 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right 5px top 0 / 1px 11px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left 0 bottom 5px / 11px 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left 5px bottom 0 / 1px 11px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right 0 bottom 5px / 11px 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right 5px bottom 0 / 1px 11px no-repeat;
}

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--div);
  font-family: var(--font-ui);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  min-height: 4.125rem;
  padding-block: 0.5rem;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand__dot { color: var(--acc); }

/* Tap targets. WCAG 2.5.8 asks for 24x24 CSS px minimum, and the nav, the
   language switch and the audience toggle were all plain text with no
   padding — the language links worst of all, at two characters wide. Sizing
   them here rather than per-control so the header stays one decision. */
.site-nav {
  display: flex;
  gap: 0.25rem 1.25rem;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  font-weight: 500;
}
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--acc); }

.site-header__controls {
  margin-inline-start: auto;
  display: flex;
  gap: 0.875rem;
  align-items: center;
  font-size: 0.875rem;
}

/* ---------------------------------------------------------- header menu */

/* At wide widths the wrapper is not a box at all: `display: contents` lifts
   the nav and the controls back into the header's own flex row, so this
   costs nothing above the breakpoint. `order` then restores reading order,
   since the search box sits after the wrapper in the markup but belongs
   between the nav and the controls on screen. */
.site-menu { display: contents; }
.brand { order: 0; }
.site-nav { order: 1; }
.site-search { order: 2; }
.site-header__controls { order: 3; }
.nav-toggle { order: 4; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid var(--div);
  background: transparent;
  cursor: pointer;
}
.nav-toggle[hidden] { display: none; }
.nav-toggle:hover { background: var(--tint); border-color: var(--acc); }
/* Three bars from one element: the middle is the box, the outer two are its
   shadow. Turns into an X when the menu is open. */
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block;
  width: 1.0625rem;
  height: 2px;
  background: var(--ink);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* The collapse is driven by the attribute site.js writes, not by the media
   query alone. With scripts blocked the attribute never appears, the menu
   keeps `display: contents`, and the header wraps onto extra rows exactly as
   it did before — more rows, nothing unreachable. */
@media (max-width: 56rem) {
  .site-menu[data-collapsed] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    order: 10;
    flex: 1 1 100%;
    padding-block: 0.875rem 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--div);
  }
  .site-menu[data-collapsed="true"] { display: none; }
  /* Inside the panel the controls are a stacked group, not a right-aligned
     tail of the header row. */
  .site-menu[data-collapsed] .site-header__controls {
    margin-inline-start: 0;
    flex-wrap: wrap;
  }
  .site-menu[data-collapsed] .site-nav { gap: 0 1.25rem; }

  .site-header__inner { gap: 0.5rem 0.625rem; }
}

/* Square segmented control, accent fill on the pressed side. */
.audience-switch { display: inline-flex; border: 1px solid var(--div); }
.audience-switch button {
  font: inherit;
  font-size: 0.8125rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
}
.audience-switch button + button { border-inline-start: 1px solid var(--div); }
.audience-switch button:hover { background: var(--tint); }
/* The selected side is marked, not shouted. A solid accent fill here outweighs
   the brand and the active nav item, and "Personal" is the default state —
   the header should not look as though a filter is switched on. */
.audience-switch button[aria-pressed="true"] {
  background: var(--tint);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--acc);
}
.audience-switch button[aria-pressed="true"]:hover { background: var(--tint); }

/* Appearance control: Auto / Light / Dark, cycled by site.js. Hidden when
   scripts are off, since the media query already resolves the theme. */
.theme-toggle {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--div);
  color: var(--muted);
  min-height: 2.25rem;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); background: var(--tint); }
.theme-toggle[hidden] { display: none; }

/* -------------------------------------------------------------- site search */

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* min-width: 0 on the form and a zero flex-basis on the input are what let
   this shrink below the input's ~34ch default preferred size. Without them the
   header overflowed every page by 23px at 360px wide — the input's auto basis
   carried its default width through two levels of flex and off the screen. */
.site-search { position: relative; display: flex; flex: 1 1 12rem; max-width: 20rem; min-width: 0; }
.site-search input {
  font: inherit;
  font-size: 0.875rem;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  min-height: 2.375rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--div);
  border-inline-end: 0;
  background: transparent;
  color: var(--ink);
}
.site-search input:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.site-search input:focus-visible { border-color: var(--acc); outline-offset: 0; }
.site-search button {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 2.375rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--div);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.site-search button:hover { border-color: var(--acc); color: var(--ink); background: var(--tint); }

/* Brand, search and the menu button have to share one row, or collapsing the
   nav has bought nothing. This block has to sit after the base .site-search
   rule above, not up with the rest of the header: same specificity, so the
   later declaration is the one that wins. */
@media (max-width: 56rem) {
  .site-search { flex: 1 1 5rem; }
  .site-search input { padding-inline: 0.5rem; border-inline-end: 1px solid var(--div); }
  /* Enter submits the form and the on-screen keyboard offers a search key,
     so the separate submit is redundant at this width. */
  .site-search button[type="submit"] { display: none; }
  /* Once the field has shrunk it is narrower than the results panel's 16rem
     minimum, so anchoring the panel to the field's left edge ran it 11px past
     the right of a 390px viewport. Anchor it to the right edge instead and it
     opens inwards. */
  .site-search:not(.hero__search) .search-results { inset-inline: auto 0; }
}

.search-results {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 5px);
  min-width: 16rem;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  background: var(--plate);
  border: 1px solid var(--div);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
}
.search-results ul { list-style: none; margin: 0; padding: 0; }
.search-results li { padding: 0.6rem 0.875rem; border-bottom: 1px solid var(--div); }
.search-results li:hover { background: var(--tint); }
.search-results a { font-weight: 600; color: var(--ink); text-decoration: none; }
.search-results a:hover { text-decoration: underline; }
.search-results li p { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.8125rem; }
.search-results__none { margin: 0.6rem 0.875rem 0; font-weight: 600; }
.search-results__help { margin: 0.35rem 0.875rem; color: var(--muted); font-size: 0.8125rem; }
.search-results__all {
  margin: 0;
  padding: 0.55rem 0.875rem;
  border-top: 1px solid var(--div);
  font-size: 0.8125rem;
  color: var(--muted);
}

.guide-index__empty {
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px solid var(--div);
  max-width: var(--measure);
}
.guide-index__empty[hidden] { display: none; }
.guide-index__empty p { margin: 0 0 0.5rem; color: var(--muted); }
.guide-index__empty-title { font-weight: 600; color: var(--ink) !important; }

/* ------------------------------------------------------ language switch */

.lang-switch { position: relative; }

.lang-switch__current {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--div);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  /* The default triangle is the one piece of browser chrome that refuses to
     match anything, so it goes and a hairline chevron takes its place. */
  list-style: none;
}
.lang-switch__current::-webkit-details-marker { display: none; }
.lang-switch__current::after {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-inline-end: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.lang-switch__current:hover,
.lang-switch[open] .lang-switch__current { color: var(--ink); background: var(--tint); }
.lang-switch[open] .lang-switch__current::after { transform: translateY(1px) rotate(-135deg); }

.lang-switch__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  inset-inline-end: 0;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  background: var(--plate);
  border: 1px solid var(--div);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
}
.lang-switch__menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: none;
}
.lang-switch__menu a + a { border-top: 1px solid var(--div); }
.lang-switch__menu a:hover { background: var(--tint); color: var(--ink); text-decoration: none; }
/* The current language is marked by a rule down its edge, not by colour
   alone — the same reasoning as the hazard band. */
.lang-switch__menu a[aria-current="true"] {
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--acc);
}
.lang-switch__code { font-size: 0.78125rem; color: var(--muted); }

/* Inside the collapsed header panel the dropdown has room to sit inline
   rather than float over the content behind it. */
.site-menu[data-collapsed] .lang-switch__menu {
  position: static;
  box-shadow: none;
  margin-top: 0.375rem;
  min-width: 0;
}

/* --------------------------------------------------------------- page head */

/* Index and standing pages open with a bare h1 and a lead. The header is
   sticky, so the first section has to buy its own top margin. */
main > .wrap:first-child:not(.hero),
main > section:first-child:not(.hero) > .wrap:first-child { padding-top: 2.75rem; }

main > .wrap:not(.hero) > h1,
main > section:not(.hero) > .wrap > h1 {
  font-size: clamp(2.375rem, 5vw, 3.25rem);
  margin: 0 0 0.875rem;
  max-width: 22ch;
}
main h2 { font-size: 2.125rem; margin-block: 2.75rem 0.75rem; }
main h3 { font-size: 1.5rem; margin-block: 2rem 0.5rem; }

.lede, .hero__lede {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
  margin: 0;
}

.note { font-size: 0.875rem; color: var(--muted); }

/* -------------------------------------------------------------------- hero */

/* Two columns that reflow without a media query: the headline column wants
   520px, the plate 360px, and below ~940px the plate drops underneath. */
.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  align-items: flex-start;
  padding-block: 5.25rem 4.75rem;
}
.hero__main { flex: 1 1 32.5rem; min-width: 18.75rem; }
.hero h1 {
  font-size: clamp(3rem, 6.5vw, 4.375rem);
  margin: 0 0 1.125rem;
  max-width: 20ch;
}
.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-top: 1.625rem; }
/* Third action is a plain onward link, not a third button competing with the
   two that matter. */
.hero__actions .btn--text { border-color: transparent; color: var(--link); padding-inline: 0.25rem; }
.hero__actions .btn--text:hover { background: transparent; color: var(--acc); text-decoration: underline; }

/* The prompt ladder: the homepage's one plate that carries the marks. */
.hero__plate {
  flex: 1 1 22.5rem;
  min-width: 17.5rem;
  border: 1px solid var(--div);
  padding: 1.625rem 1.5rem 1.5rem;
  margin-top: 0.5rem;
}
.hero__plate h2 { font-size: 1.9375rem; max-width: 22ch; margin: 0 0 1.25rem; }

/* ----------------------------------------------------------------- buttons */

.btn {
  font-family: var(--font-ui);
  font-size: 0.96875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6875rem 1.25rem;
  border: 1px solid var(--div);
  text-decoration: none;
  color: var(--ink);
  background: transparent;
}
.btn:hover { background: var(--tint); color: var(--ink); text-decoration: none; }
.btn--primary {
  background: var(--acc-fill);
  border-color: var(--acc-fill);
  color: var(--on-acc);
}
.btn--primary:hover { background: var(--link); border-color: var(--link); color: var(--on-acc); }

/* ------------------------------------------------------------------ tracks */

/* "Work by area": transparent cards, hairline frame, accent on hover. Never
   filled, never rounded. */
.track-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}
.track-card {
  position: relative;
  border: 1px solid var(--div);
  padding: 1.625rem 1.5rem;
  background: transparent;
}
.track-card h3 { margin: 0 0 0.375rem; font-size: 1.5625rem; }
.track-card p { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.track-card__count {
  font-size: 0.8125rem;
  margin-top: 0.75rem !important;
  font-variant-numeric: tabular-nums;
}

/* One real link per card, carrying the track name as its text, stretched to
   cover the card. Keeps the tap target card-sized without turning the blurb
   and the count into link text a screen reader has to read out. */
.track-card h3 a { text-decoration: none; color: inherit; }
.track-card h3 a::after { content: ""; position: absolute; inset: 0; }
/* Hover is instant on purpose. Never transition a colour that comes from a
   theme-swapped custom property: Chromium keeps the old theme's resolved
   value after a light/dark flip and the element strands mid-swap. */
.track-card:hover { border-color: var(--acc); background: var(--tint); }
.track-card:has(a:hover) h3, .track-card:has(a:focus-visible) h3 { color: var(--ink); }
.track-card h3 a:focus-visible { outline: none; }
.track-card:has(a:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }

.latest__all { margin-top: 1.25rem; font-size: 0.875rem; }

/* ------------------------------------------------------------- guide lists */

/* Rows, not cells: title, section, date on one hairline-separated line. */
.guide-list { list-style: none; padding: 0; margin: 0; }
.guide-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--div);
}
.guide-list li:hover { background: var(--tint); }
.guide-list li[hidden] { display: none; }
.guide-list a { flex: 1 1 20rem; font-weight: 500; color: var(--ink); }
.guide-list a:hover { color: var(--acc); }
.guide-list time { font-size: 0.84375rem; color: var(--muted); }
.guide-list__summary { flex: 1 1 100%; margin: 0.15rem 0 0; color: var(--muted); font-size: 0.875rem; }
.guide-list__track {
  font-size: 0.78125rem;
  color: var(--muted);
  margin-inline-start: 0;
  min-width: 9.375rem;
}

.filters {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  font-size: 0.875rem;
  padding: 1rem 1.25rem;
  background: var(--surf);
  margin-block: 1.5rem;
}
.filters label { display: flex; flex-direction: column; gap: 0.35rem; }
.filters label > span:first-child { font-size: 0.78125rem; font-weight: 600; color: var(--muted); }
.filters select, .filters input {
  font: inherit;
  font-size: 0.875rem;
  min-height: 2.375rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--div);
  background: var(--bg);
  color: var(--ink);
}
.filters select:focus-visible, .filters input:focus-visible { border-color: var(--acc); outline-offset: 0; }
.track-section[hidden] { display: none; }
.track-section__blurb { color: var(--muted); max-width: var(--measure); }

/* --------------------------------------------------------------- sections */

/* Section rhythm: whitespace does the separating. A hairline opener appears
   only between the major bands of a landing page. */
.patterns-front, .tracks, .latest, .widget-teaser {
  padding-block: 0 5.5rem;
}
.patterns-front > h2, .tracks > h2, .latest > h2, .widget-teaser > h2 {
  font-size: clamp(2.125rem, 4vw, 2.4375rem);
  margin: 0 0 1.5rem;
}

/* ------------------------------------------------------------------- guide */

/* A guide is a reading column, so its wrap IS the measure — centred, rather
   than a 42rem column pinned to the left of a 1240px page. Everything inside
   then fills that column instead of carrying its own narrower max-width. */
.guide .wrap { width: min(100% - 3rem, var(--measure)); }
.guide .guide__body > *,
.guide .callout,
.guide .variant,
.guide .audience-note,
.guide .guide__summary,
.guide .guide__sources ol { max-width: 100%; }

.guide__head { padding-block: 2.5rem 1rem; }
.guide__track { font-size: 0.8125rem; color: var(--muted); margin: 0 0 0.625rem; }
.guide__head h1 {
  font-size: clamp(2.375rem, 5vw, 3.25rem);
  margin: 0 0 0.875rem;
  max-width: 22ch;
}
.guide__summary { font-size: 1.1875rem; line-height: 1.5; max-width: var(--measure); margin: 0; }

.guide__meta {
  font-size: 0.8125rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin-block: 1.75rem 0;
  padding-top: 1.125rem;
  border-top: 1px solid var(--div);
  color: var(--muted);
}
.guide__meta dt { font-weight: 600; }
.guide__meta dd { margin: 0; }
.guide__owner { color: var(--muted); font-size: 0.875rem; }

/* Tags: a surface fill and no border. The page's own tool is the exception —
   it gets the accent treatment, because applicability is a trust signal. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  border: 0;
  padding: 0.3125rem 0.6875rem;
  font-size: 0.8125rem;
  background: var(--surf);
  color: var(--muted);
}
.chip--all {
  background: var(--tint);
  color: var(--link);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--acc);
}

/* --------------------------------------------------------- guide feedback */

.guide__feedback {
  max-width: var(--measure);
  margin-block: 3rem;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--div);
}
.guide__feedback h2 { margin: 0 0 0.5rem; font-size: 1.375rem; }
.guide__feedback p { margin: 0 0 0.875rem; color: var(--muted); font-size: 0.875rem; }
.guide__feedback-reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.guide__feedback-reasons a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--div);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.guide__feedback-reasons a:hover { border-color: var(--acc); background: var(--tint); color: var(--ink); text-decoration: none; }

/* --------------------------------------------------------- guide contents */

.guide__toc {
  max-width: var(--measure);
  margin-block: 1.75rem;
  padding-inline-start: 0.875rem;
  border-inline-start: 2px solid var(--acc);
  font-size: 0.9375rem;
}
.guide__toc-title {
  margin: 0 0 0.5rem;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--muted);
}
.guide__toc ol { margin: 0; padding-inline-start: 1.2rem; }
.guide__toc li { margin-block: 0.2rem; }
.guide__toc a { color: var(--ink); }
.guide__toc a:hover { color: var(--acc); }

/* A heading landed on from the contents list or a /go/ deep link should not
   sit flush against the top of the viewport — the header is sticky now, so
   the offset has to clear it. */
.guide__body h2, .guide__body h3 { scroll-margin-top: 5.5rem; }

/* The design calls for 16px prose. Barlow's x-height is lower than the serif
   this replaces, so article text keeps a step up — 17px, between the design's
   16 and the 18 the readability pass settled on. Chrome and nav stay at 16. */
.guide__body { font-size: 1.0625rem; }
.guide__body > * { max-width: var(--measure); }
.guide__body h2 { font-size: 2.125rem; margin-block: 3.25rem 0.75rem; }
.guide__body h3 { font-size: 1.5rem; margin-block: 2rem 0.5rem; }
.guide__body p, .guide__body li { hyphens: auto; }

.guide__body pre, .table-scroll {
  max-width: 100%;
  overflow-x: auto;
}
/* Scrollable by keyboard as well as by pointer, so tabindex="0" on the
   wrapper is not decorative. The global :focus-visible rule supplies the
   ring. */
.table-scroll > table { margin: 0; }
.guide__body pre {
  background: var(--code);
  border: 1px solid var(--div);
  padding: 0.875rem;
  font-size: 0.84375rem;
  line-height: 1.5;
}
.guide__body code { font-family: var(--font-mono); font-size: 0.9em; }
.guide__body :not(pre) > code {
  background: var(--code);
  padding: 0.1em 0.35em;
}
.guide__body blockquote {
  border-inline-start: 2px solid var(--div);
  margin-inline: 0;
  padding-inline-start: 1rem;
  color: var(--muted);
}

/* Numbered steps: a 28px accent-outlined numeral per row, hairline-separated. */
.guide__body ol.steps { list-style: none; margin: 1.125rem 0 0; padding: 0; }
.guide__body ol.steps > li {
  display: flex;
  gap: 0.875rem;
  padding-block: 0.875rem;
  border-top: 1px solid var(--div);
  counter-increment: step;
}
.guide__body ol.steps > li:last-child { border-bottom: 1px solid var(--div); }
.guide__body ol.steps > li::before {
  content: counter(step);
  flex: 0 0 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--acc);
  color: var(--link);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 0.9375rem;
}
.guide__body ol.steps { counter-reset: step; }

/* ---------------------------------------------------------------- callouts */

.callout, .variant, .audience-note {
  max-width: var(--measure);
  border: 1px solid var(--div);
  border-inline-start-width: 4px;
  padding: 1rem 1.125rem;
  margin-block: 1.75rem;
  background: transparent;
  font-size: 0.96875rem;
}
.callout > :first-child, .variant > :first-child, .audience-note > :first-child { margin-top: 0; }
.callout > :last-child, .variant > :last-child, .audience-note > :last-child { margin-bottom: 0; }

.callout { border-color: var(--acc); background: var(--tint); }
.callout__title { font-weight: 600; font-size: 0.78125rem; color: var(--link); }

/* Note vs. warning used to be carried by hue alone — a blue rule against an
   amber one. That failed twice: it needed a second hue the palette does not
   have, and colour was the only channel saying "this one bites", which
   1.4.1 does not allow. The warning now gets a hatched band instead: the
   hazard marking of a technical drawing, legible in greyscale, and no new
   colour. The titles cannot do this job on their own — they read "No
   sandbox", "There is no documented undo", never "Warning". */
.callout--warn {
  position: relative;
  border-color: var(--div);
  border-inline-start-width: 1px;
  padding-inline-start: calc(1.125rem + 5px);
  background: var(--surf);
}
.callout--warn::before {
  content: "";
  position: absolute;
  inset-block: -1px;
  inset-inline-start: -1px;
  width: 5px;
  background: repeating-linear-gradient(
    45deg,
    var(--ink) 0 2px,
    transparent 2px 4px
  );
}
.callout--warn .callout__title { color: var(--ink); }

.variant { border-color: var(--div); border-inline-start-color: var(--acc); background: var(--surf); }
.variant__label {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

.audience-note { border-color: var(--div); border-inline-start-color: var(--acc); background: var(--surf); }
.audience-note::before {
  content: attr(data-audience);
  display: block;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

/* The audience toggle DIMS rather than hides: a sole trader should still see
   that a business note exists, and Ctrl-F must keep working. */
body[data-audience="private"] .audience-note[data-audience="business"],
body[data-audience="business"] .audience-note[data-audience="private"] {
  opacity: 0.42;
}

/* Same for the model filter on a guide. */
.variant.is-dimmed { opacity: 0.42; }

/* ---------------------------------------------------- sources and related */

.guide__sources, .guide__related { padding-block: 2.25rem; }
.guide__sources h2, .guide__related h2 { font-size: 1.5rem; }
.guide__sources ol { font-size: 0.875rem; color: var(--muted); max-width: var(--measure); }
.guide__sources li { margin-bottom: 0.4rem; }
.tier, .accessed { font-size: 0.75rem; color: var(--muted); }
.tier { border: 1px solid var(--div); padding: 0 0.35em; }
/* A source flagged for review: dashed rather than tinted, same reasoning as
   the warning callout. */
.tier--review {
  border-style: dashed;
  border-color: var(--ink);
  color: var(--ink);
  margin-inline-start: 0.4rem;
}

.verified-line { font-size: 0.8125rem; color: var(--muted); }

/* ------------------------------------------------------------------ tables */

.model-matrix { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.model-matrix th, .model-matrix td {
  text-align: start;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--div);
  white-space: nowrap;
  /* Context sizes and per-million prices are figures, and figures line up. */
  font-variant-numeric: tabular-nums;
}
.model-matrix thead th {
  background: var(--surf);
  font-family: var(--font-head);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.model-matrix tbody tr:hover { background: var(--tint); }
.model-matrix tr.is-default { background: var(--tint); }
.model-matrix code { font-family: var(--font-mono); font-size: 0.85em; }

.pick-when { max-width: var(--measure); }
.pick-when dt { font-family: var(--font-head); font-size: 1.25rem; margin-top: 1.25rem; }
.pick-when dd { margin-inline-start: 0; color: var(--muted); }
.pick-when .note { font-size: 0.875rem; }

/* -------------------------------------------------------------- glossary */

.glossary dt { font-family: var(--font-head); font-size: 1.375rem; margin-top: 1.5rem; }
.glossary dd { margin-inline-start: 0; color: var(--muted); }
.glossary__see {
  font-size: 0.8125rem;
  margin-inline-start: 0.4rem;
  white-space: nowrap;
}

/* ----------------------------------------------------------- review banner */

/* Same hazard band as the warning callout: this banner says the page is past
   its verification date, which is the same class of signal. */
.review-banner {
  position: relative;
  border: 1px solid var(--div);
  background: var(--surf);
  padding: 1rem 1.125rem 1rem calc(1.125rem + 5px);
  margin-block: 1.75rem;
  font-size: 0.9375rem;
}
.review-banner::before {
  content: "";
  position: absolute;
  inset-block: -1px;
  inset-inline-start: -1px;
  width: 5px;
  background: repeating-linear-gradient(
    45deg,
    var(--ink) 0 2px,
    transparent 2px 4px
  );
}
.review-banner__label {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.3rem;
}
.review-banner p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- costtable */

/* Workflow cost comparisons. Wider than the reading column on purpose: the
   tables are the argument on these pages, not an aside to it. */
.guide .costtable {
  max-width: none;
  width: min(100vw - 3rem, 52rem);
  margin-inline: calc((var(--measure) - min(100vw - 3rem, 52rem)) / 2);
  margin-block: 2rem;
}
@media (max-width: 56rem) {
  .guide .costtable { width: 100%; margin-inline: 0; }
}

.costtable__assumption {
  font-size: 0.875rem;
  color: var(--muted);
  background: var(--surf);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.25rem;
}
.costtable h3 {
  font-size: 1.25rem;
  color: var(--ink);
  letter-spacing: -0.022em;
  text-transform: none;
  margin: 1.75rem 0 0.5rem;
}
.costtable td.num, .costtable th.num { text-align: end; font-variant-numeric: tabular-nums; }
.costtable tfoot th, .costtable tfoot td {
  border-top: 1px solid var(--ink);
  border-bottom: 0;
  padding-top: 0.6rem;
}
.costtable tfoot th { text-align: end; font-weight: 600; }
.costtable__verdict {
  font-size: 0.9375rem;
  background: var(--tint);
  border: 1px solid var(--acc);
  border-inline-start-width: 4px;
  padding: 0.85rem 1rem;
  margin-top: 1.25rem;
}

/* ------------------------------------------------------------------ footer */

.site-footer {
  margin-top: 4rem;
  background: var(--surf);
  padding-block: 2.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.site-footer__disclaimer { max-width: 64ch; margin: 0 0 0.4rem; }
.site-footer__nav { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-block: 1.5rem 0.75rem; }
.site-footer__nav a { color: var(--ink); font-weight: 500; }
.site-footer__nav a:hover { color: var(--acc); }
.site-footer__meta { margin: 0; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------- go */

body.go { display: grid; place-items: center; min-height: 100dvh; }

/* --- Primer (client-side base-file composer) ------------------------- */
/* Only tokens defined on :root in both themes — an invented token with a
   light fallback is how the first version shipped white-on-white in dark
   mode. */
.primer__controls { margin: 1.5rem 0; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.primer__targets { border: 1px solid var(--div); padding: .875rem 1.125rem; }
.primer__targets label { display: block; margin: .25rem 0; }
.primer__baseline { max-width: 34rem; }
.primer__preset { font: inherit; font-weight: 600; padding: .55rem 1.1rem; cursor: pointer; background: transparent; color: var(--ink); border: 1px solid var(--div); }
.primer__preset:hover { background: var(--tint); border-color: var(--acc); }
.primer__rationale { font-size: .875rem; color: var(--muted); margin-top: .5rem; }
.primer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
@media (max-width: 900px) { .primer__grid { grid-template-columns: 1fr; } }
/* The category keys are lowercase slugs in the data; capitalising here keeps
   sentence case without duplicating the labels as display strings. */
.primer__cat { font-family: var(--font-head); font-size: 1.25rem; text-transform: capitalize; margin: 1.75rem 0 .5rem; color: var(--muted); }
.primer__block { border: 1px solid var(--div); padding: .875rem 1.125rem; margin-bottom: .75rem; }
.primer__block:hover { border-color: var(--acc); }
.primer__pick { display: flex; gap: .5rem; align-items: baseline; cursor: pointer; }
.primer__text { font-family: var(--font-mono); font-size: .8125rem; overflow-x: auto; background: var(--code); color: var(--ink); padding: .55rem .8rem; }
.primer__works .chip { margin-right: .35rem; }
.primer__works time { font-size: .8125rem; color: var(--muted); }
.primer__out { position: sticky; top: 5.5rem; align-self: start; }
.primer__out textarea { width: 100%; font-family: var(--font-mono); font-size: .8125rem; background: var(--code); color: var(--ink); border: 1px solid var(--div); padding: .6rem; }
.primer__actions { display: flex; gap: .75rem; margin: .75rem 0; }
.primer__actions button { font: inherit; font-weight: 600; padding: .55rem 1.25rem; cursor: pointer; background: transparent; color: var(--ink); border: 1px solid var(--div); }
.primer__actions button:hover { background: var(--tint); border-color: var(--acc); }
.primer__note { font-size: .875rem; color: var(--muted); }
.primer__tnotes { font-size: .875rem; border-top: 1px solid var(--div); padding-top: .75rem; }
.primer__filename { font-family: var(--font-mono); font-size: .875rem; }

/* --- Pattern pages: built for the reader who arrived mid-problem ------ */
/* The quick fix is the payload; everything else queues behind it. The fix
   box is one of the two places that use solid --ink instead of the accent —
   reserve that weight for it. */
.quick-fix-card {
  background: transparent;
  border: 1px solid var(--ink);
  padding: 0;
  margin: 1.5rem 0 2rem;
}
.quick-fix-card h2 {
  margin: 0;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-ui);
  font-size: 0.84375rem;
  font-weight: 600;
  letter-spacing: 0;
}
.quick-fix-card > *:not(h2) { margin-inline: 1rem; }
.quick-fix-card > *:nth-child(2) { margin-top: 1.25rem; }
.quick-fix-card > *:last-child { margin-bottom: 1.375rem; }

.pattern__id { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); }
.pattern__meta-foot { font-size: .8125rem; color: var(--muted); border-top: 1px solid var(--div); padding-top: .875rem; margin-top: 1.75rem; }
.pattern__next ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.pattern__next li { border: 1px solid var(--div); padding: .875rem 1rem; max-width: 22rem; }
.pattern__next li:hover { border-color: var(--acc); background: var(--tint); }
.pattern__next li a { font-family: var(--font-head); font-size: 1.0625rem; color: var(--ink); }
.pattern__next li p { margin: .25rem 0 0; font-size: .8125rem; color: var(--muted); }
.pattern-group { margin-top: 1.75rem; }
/* No text-transform here. These headings are already written out in each
   language — "Prüfen, bevor du dich verlässt" — and `capitalize` turned them
   into "Prüfen, Bevor Du Dich Verlässt", which is wrong in German and wrong
   in English. Sentence case is the rule; the strings already are. */
.pattern-group h2, .pattern-group h3 { color: var(--muted); font-size: 1.25rem; }
.pattern-list__symptom { margin: 0 0 .1rem; font-style: normal; color: var(--muted); font-size: .9em; }

/* "Only in English" — a tag of the same family as the applicability labels,
   because that is what it is: a statement about what this page applies to. */
.lang-tag {
  flex: 0 0 auto;
  align-self: center;
  padding: 0.15rem 0.5rem;
  background: var(--surf);
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}
.lang-note {
  max-width: 64ch;
  margin-block: 1.25rem;
  padding-inline-start: 0.875rem;
  border-inline-start: 2px solid var(--acc);
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --- Flow diagrams: steps as boxes, pure CSS, both themes ------------- */
.flow { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: stretch; margin: 1.5rem 0; }
.flow li { display: flex; align-items: center; gap: .5rem; }
.flow .flow__step { display: block; border: 1px solid var(--div); padding: .5rem .8rem; font-size: .875rem; }
.flow li:hover .flow__step { border-color: var(--acc); background: var(--tint); }
.flow .flow__note { display: block; font-size: .75rem; color: var(--muted); margin-top: .2rem; }
.flow li + li::before { content: "→"; color: var(--muted); margin-right: .5rem; }
@media (max-width: 640px) {
  .flow { flex-direction: column; align-items: flex-start; }
  .flow li { flex-direction: column; align-items: flex-start; }
  .flow li + li::before { content: "↓"; margin: 0 0 .25rem .8rem; }
}

/* --- UX v2/v3: symptom-led home, quick-mode pattern pages ------------- */

/* The hero search is the design's one ink-framed field: the input and the
   submit share a single 1px ink frame, with the button as the solid half.
   The label sits above it, so the form wraps rather than nests. */
.hero__search { display: flex; flex-wrap: wrap; max-width: 32.5rem; margin: 1.875rem 0 0; position: relative; }
.hero__search-label { flex: 1 0 100%; font-size: .78125rem; font-weight: 600; color: var(--muted); margin-bottom: .4375rem; }
.hero__search input {
  flex: 1 1 0; width: 0; min-width: 0;
  padding: .8125rem .875rem;
  font-size: 1rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-inline-end: 0;
}
.hero__search input:focus-visible { outline-offset: -2px; }
.hero__search button {
  padding: .8125rem 1.375rem;
  font-size: .96875rem;
  font-weight: 600;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  cursor: pointer;
}
.hero__search button:hover { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--on-acc); }
/* The hero search dropdown has to clear the label row, which the shared
   `top: 100%` would not. */
.hero__search .search-results { top: calc(100% + 5px); }

/* The homepage's hero search is the search; the header box duplicates it
   there and competes for the starting point. Guide pages keep it. */
body[data-route="home"] .site-search:not(.hero__search) { display: none; }

/* "What are you struggling with?" — the open list block. No cells, no boxes:
   each item is a 25px condensed title over a hairline. */
.symptom-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21.25rem, 1fr));
  gap: 0 3rem;
}
.symptom-cards a {
  display: block;
  padding: 1.1875rem 0;
  border-bottom: 1px solid var(--div);
  text-decoration: none;
  color: var(--ink);
}
.symptom-cards a:hover { background: var(--tint); text-decoration: none; color: var(--ink); }
.symptom-cards strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.5625rem;
  line-height: 1.18;
  letter-spacing: -0.022em;
}
.symptom-cards span { display: block; margin-top: .375rem; font-size: .875rem; color: var(--muted); }

.specify__step { margin: 0; }
.specify__step code {
  display: block;
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.4;
  background: var(--code);
  color: var(--ink);
  padding: .6875rem .8125rem;
  white-space: normal;
}
.specify__note { margin: 0; padding: .4375rem .125rem; font-size: .75rem; color: var(--muted); }
.hero__plate-more { margin: 1.125rem 0 0; font-size: .875rem; }

.widget-teaser__plate {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  border: 1px solid var(--div);
  padding: 1.75rem;
}
.widget-teaser__text { flex: 1 1 26.25rem; min-width: 17.5rem; }
.widget-teaser__text h2 { font-size: 2.25rem; margin: 0.5rem 0 0; }
.widget-teaser__text p:last-child { color: var(--muted); max-width: 56ch; margin: 0.625rem 0 0; }
.widget-teaser__actions { flex: 0 1 15rem; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }

/* Sentence-case semibold body type. No tracked uppercase anywhere on the
   site except the solid "Quick fix" bar. */
.kicker { font-size: 0.78125rem; font-weight: 600; color: var(--muted); margin: 0; }

/* Quick mode: arrived via #quick-fix (fragment only — nothing sent). The
   banner appears, the header shrinks out of the way, the card leads. */
.pattern__arrived p { background: var(--tint); border: 1px solid var(--acc); padding: .75rem 1rem; margin: 1rem 0 0; }
body.arrived-focused .guide__head { padding-top: .5rem; }
body.arrived-focused .guide__head .guide__summary { display: none; }

.pattern__copy {
  font: inherit;
  font-weight: 600;
  margin: .25rem 0 1rem;
  padding: .5rem 1.1rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--div);
  cursor: pointer;
}
.pattern__copy:hover { background: var(--tint); border-color: var(--acc); }

/* One example language for the whole pattern page — card and Example
   sections alike. The less-specific / more-specific pair gets labels
   instead of ❌/✅. */
.pattern .qf { background: var(--code); border: 1px solid var(--div); padding: .8125rem; }
.pattern .qf em { font-style: normal; }
.pattern .qf__label {
  display: block;
  font-size: .78125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-bottom: .25rem;
}
.pattern .qf--try { border-color: var(--acc); }
.pattern .qf--try .qf__label { color: var(--link); }
.quick-fix-card .qf__topic { font-size: .8em; font-weight: normal; color: var(--muted); }
/* The card's copy action is the point of the card — style it like one. */
.quick-fix-card .pattern__copy {
  background: var(--acc-fill);
  color: var(--on-acc);
  border-color: var(--acc-fill);
  padding: .625rem 1.25rem;
  font-size: .96875rem;
}
.quick-fix-card .pattern__copy:hover { background: var(--link); border-color: var(--link); }