/*
 * easy-consent theme
 * "Permission slip, in triplicate". See docs/design-direction.md.
 *
 * Page-specific CSS should go in a later layer:  @layer page { ... }
 */

@layer reset, tokens, base, layout, components, utilities;

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

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/atkinson-hyperlegible-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ---------------------------------------------------------------- reset */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  body { min-height: 100vh; }
  img, picture, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  h1, h2, h3, h4 { text-wrap: balance; }
  p { text-wrap: pretty; }
  [hidden] { display: none !important; }
}

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

@layer tokens {
  :root {
    color-scheme: light;

    /* Core palette: the three copies of a carbon form, plus ink */
    --paper: #fbfcfe;
    --canary: #f6e58d;
    --rose: #f4c4cc;
    --carbon: #2633a6;
    --graphite: #1c2232;
    --rule: #cdd3e1;

    /* Supporting */
    --carbon-deep: #18216e;
    --carbon-wash: #e8ebfa;
    --graphite-soft: #4a5268;
    --paper-sunk: #f1f3f8;
    --granted: #1e6b47;
    --granted-wash: #def2e7;
    --denied: #a3261c;
    --denied-wash: #fbe4e1;

    /* Roles: components use these, never the raw palette */
    --surface: var(--paper);
    --surface-sunk: var(--paper-sunk);
    --text: var(--graphite);
    --text-soft: var(--graphite-soft);
    --accent: var(--carbon);
    --accent-strong: var(--carbon-deep);
    --accent-wash: var(--carbon-wash);
    --on-accent: #ffffff;
    --border: var(--rule);
    --border-strong: #7a839b;
    --sheet-2: var(--canary);
    --sheet-3: var(--rose);
    --focus: var(--carbon);

    /* Type */
    --font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
    --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

    /* 1.25 scale on a 16px (mobile) to 17px (desktop) base */
    --step--1: clamp(0.8rem, 0.78rem + 0.08vw, 0.85rem);
    --step-0: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
    --step-1: clamp(1.25rem, 1.2rem + 0.2vw, 1.33rem);
    --step-2: clamp(1.4rem, 1.31rem + 0.4vw, 1.66rem);
    --step-3: clamp(1.6rem, 1.43rem + 0.75vw, 2.08rem);
    --step-4: clamp(1.9rem, 1.6rem + 1.3vw, 2.6rem);
    --step-5: clamp(2.4rem, 1.7rem + 3vw, 4.2rem);

    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-body: 1.55;
    --measure: 68ch;

    /* Space: 4px base */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 7rem;

    /* Shape: controls are slightly soft, sheets are sharp, chips are round */
    --radius-control: 4px;
    --radius-sheet: 2px;
    --radius-round: 999px;
    --hairline: 1px solid var(--border);

    /* Depth */
    --stack-offset: 7px;
    --stack:
      var(--stack-offset) var(--stack-offset) 0 -1px var(--sheet-2),
      var(--stack-offset) var(--stack-offset) 0 0 var(--border),
      calc(var(--stack-offset) * 2) calc(var(--stack-offset) * 2) 0 -1px var(--sheet-3),
      calc(var(--stack-offset) * 2) calc(var(--stack-offset) * 2) 0 0 var(--border);
    --lift: 0 1px 0 var(--border), 0 10px 24px -12px rgb(28 34 50 / 0.35);

    /* Motion */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 120ms;
    --dur: 220ms;

    /* Layout */
    --container: 72rem;
    --rail: 15rem;
    --inspector: 22rem;
    --header-h: 3.75rem;
  }

  :root[data-theme="dark"] {
    --surface: #141a3f;
    --surface-sunk: #0f1433;
    --text: #e6e9f7;
    --text-soft: #aab1d0;
    --accent: #a9b4ff;
    --accent-strong: #c9d0ff;
    --accent-wash: #232b62;
    --on-accent: #10164a;
    --border: #333c74;
    --border-strong: #5a64a0;
    --sheet-2: #5c5426;
    --sheet-3: #5a3540;
    --focus: #c9d0ff;
    --granted: #7ed6a8;
    --granted-wash: #163a33;
    --denied: #ff9d92;
    --denied-wash: #44203a;
    --lift: 0 1px 0 var(--border), 0 12px 28px -12px rgb(0 0 0 / 0.6);
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}

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

@layer base {
  body {
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-weight: 780;
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
  }
  h1 { font-size: var(--step-4); letter-spacing: -0.025em; }
  h2 { font-size: var(--step-3); letter-spacing: -0.02em; }
  h3 { font-size: var(--step-2); line-height: var(--leading-snug); }
  h4 { font-size: var(--step-1); line-height: var(--leading-snug); font-weight: 700; letter-spacing: 0; }

  p, li, dd { max-width: var(--measure); }
  small { font-size: var(--step--1); }
  strong, b { font-weight: 700; }

  a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
  a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }

  code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }
  :not(pre) > code {
    padding: 0.1em 0.3em;
    background: var(--surface-sunk);
    border: var(--hairline);
    border-radius: var(--radius-control);
  }

  hr { border: 0; border-top: var(--hairline); }

  ::selection { background: var(--sheet-2); color: var(--graphite); }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* --------------------------------------------------------------- layout */

@layer layout {
  .container {
    width: min(100% - 2 * var(--space-5), var(--container));
    margin-inline: auto;
  }

  .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
  .stack--tight { --stack-gap: var(--space-2); }
  .stack--loose { --stack-gap: var(--space-6); }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-3));
  }
  .cluster--spread { justify-content: space-between; }

  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: var(--header-h);
    border-bottom: var(--hairline);
  }
  .site-header__brand {
    font-weight: 800;
    font-size: var(--step-1);
    letter-spacing: -0.02em;
    color: var(--text);
    text-decoration: none;
  }
  .site-header__nav { display: flex; gap: var(--space-5); }
  .site-header__nav a { color: var(--text); text-decoration: none; }
  .site-header__nav a:hover,
  .site-header__nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; }

  .section { padding-block: var(--space-8); }
  .section + .section { border-top: var(--hairline); }

  /* App: rail | canvas | inspector */
  .app-shell {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr) var(--inspector);
    grid-template-rows: var(--header-h) minmax(0, 1fr);
    grid-template-areas:
      "header header header"
      "rail canvas inspector";
    min-height: 100vh;
  }
  .app-shell__header { grid-area: header; padding-inline: var(--space-5); }
  .app-shell__rail {
    grid-area: rail;
    padding: var(--space-5) var(--space-4);
    border-right: var(--hairline);
    background: var(--surface-sunk);
  }
  .app-shell__canvas {
    grid-area: canvas;
    padding: var(--space-6);
    overflow: auto;
  }
  .app-shell__inspector {
    grid-area: inspector;
    display: flex;
    flex-direction: column;
    border-left: var(--hairline);
    overflow: auto;
  }
  .app-shell__inspector > .inspector-footer {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border-top: var(--hairline);
  }

  @media (max-width: 64rem) {
    .app-shell {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: var(--header-h) auto minmax(0, 1fr) auto;
      grid-template-areas: "header" "rail" "canvas" "inspector";
    }
    .app-shell__rail { border-right: 0; border-bottom: var(--hairline); }
    .app-shell__inspector { border-left: 0; border-top: var(--hairline); }
    .app-shell__canvas { padding: var(--space-4); }
  }

  .rail-nav { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
  .rail-nav a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    color: var(--text);
    text-decoration: none;
  }
  .rail-nav a:hover { background: var(--accent-wash); }
  .rail-nav a[aria-current="page"] {
    background: var(--accent-wash);
    color: var(--accent);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .inspector-group {
    padding: var(--space-5);
    border-bottom: var(--hairline);
  }
  .inspector-group > h2 {
    font-size: var(--step-0);
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: var(--space-3);
  }
}

/* ----------------------------------------------------------- components */

@layer components {

  /* Buttons */
  .button {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-border: var(--border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: 0 var(--space-5);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1.5px solid var(--btn-border);
    border-radius: var(--radius-control);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .button:hover { --btn-border: var(--text); color: var(--btn-fg); text-decoration: none; }
  .button:active { transform: translateY(1px); }
  .button:disabled, .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

  .button--primary {
    --btn-bg: var(--accent);
    --btn-fg: var(--on-accent);
    --btn-border: var(--accent);
  }
  .button--primary:hover { --btn-bg: var(--accent-strong); --btn-border: var(--accent-strong); }

  .button--quiet { --btn-border: transparent; --btn-fg: var(--accent); padding-inline: var(--space-3); }
  .button--quiet:hover { --btn-bg: var(--accent-wash); --btn-border: transparent; }

  .button--danger { --btn-fg: var(--denied); --btn-border: var(--denied); }
  .button--danger:hover { --btn-bg: var(--denied-wash); --btn-border: var(--denied); }

  .button--small { min-height: 2.25rem; padding-inline: var(--space-4); font-size: var(--step--1); }

  /* Accept / reject: identical weight, by rule. Put both buttons in here
     and don't add a variant to either. */
  .button-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .button-pair > .button { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-border: var(--accent); }
  .button-pair > .button:hover { --btn-bg: var(--accent-strong); --btn-border: var(--accent-strong); }

  /* Form fields */
  .field { display: grid; gap: var(--space-1); }
  .field__label { font-weight: 700; font-size: var(--step--1); }
  .field__hint { color: var(--text-soft); font-size: var(--step--1); }
  .field__error { color: var(--denied); font-size: var(--step--1); font-weight: 700; }

  .input, .select, .textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-control);
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .textarea { min-height: 6rem; resize: vertical; line-height: var(--leading-body); }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 0;
    border-color: var(--focus);
  }
  .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--denied); }

  .select {
    appearance: none;
    padding-right: var(--space-6);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 52%, calc(100% - 0.8rem) 52%;
    background-size: 0.3rem 0.3rem;
    background-repeat: no-repeat;
  }

  .checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
  }
  .checkbox input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15em;
    accent-color: var(--accent);
  }

  /* Switch: <label class="switch"><input type="checkbox" role="switch"> Analytics</label> */
  .switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
  }
  .switch input {
    appearance: none;
    flex: none;
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: var(--radius-round);
    background: var(--border-strong);
    cursor: pointer;
    transition: background var(--dur) var(--ease-out);
  }
  .switch input::before {
    content: "";
    position: absolute;
    inset: 3px auto 3px 3px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--surface);
    transition: translate var(--dur) var(--ease-out);
  }
  .switch input:checked { background: var(--accent); }
  .switch input:checked::before { translate: 1.25rem 0; }
  .switch input:disabled { opacity: 0.55; cursor: not-allowed; }

  /* Segmented control (Desktop | Mobile) */
  .segmented {
    display: inline-flex;
    padding: 3px;
    background: var(--surface-sunk);
    border: var(--hairline);
    border-radius: var(--radius-control);
  }
  .segmented button {
    padding: var(--space-1) var(--space-4);
    background: none;
    border: 0;
    border-radius: 2px;
    color: var(--text-soft);
    font-weight: 700;
    font-size: var(--step--1);
    cursor: pointer;
  }
  .segmented button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--border-strong);
  }

  /* Tabs */
  .tabs { display: flex; gap: var(--space-5); border-bottom: var(--hairline); }
  .tabs [role="tab"] {
    padding: var(--space-3) 0;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    color: var(--text-soft);
    font-weight: 700;
    cursor: pointer;
  }
  .tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

  /* Sheets: flat paper panels */
  .sheet {
    background: var(--surface);
    border: var(--hairline);
    border-radius: var(--radius-sheet);
    padding: var(--space-5);
  }

  /* The signature. Use only for banner previews and consent receipts. */
  .sheet--stacked {
    box-shadow: var(--stack);
    margin-right: calc(var(--stack-offset) * 2);
    margin-bottom: calc(var(--stack-offset) * 2);
  }

  /* Banner preview with perforated edge. Set data-position="bottom|center" */
  .banner-preview {
    position: relative;
    background: var(--surface);
    border-top: 2px dashed var(--border-strong);
    padding: var(--space-5);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4) var(--space-6);
  }
  .banner-preview::before,
  .banner-preview::after {
    /* punched holes at each end of the perforation */
    content: "";
    position: absolute;
    top: -0.55rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--banner-backdrop, var(--surface-sunk));
    border: 2px dashed var(--border-strong);
  }
  .banner-preview::before { left: -0.5rem; }
  .banner-preview::after { right: -0.5rem; }
  .banner-preview__title { font-size: var(--step-1); font-weight: 760; margin-bottom: var(--space-1); }
  .banner-preview__body { color: var(--text-soft); max-width: 60ch; }
  .banner-preview__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .banner-preview__actions .button-pair { min-width: 18rem; }

  .banner-preview[data-position="center"] {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    max-width: 32rem;
    border: 2px dashed var(--border-strong);
  }

  @media (max-width: 40rem) {
    .banner-preview { grid-template-columns: 1fr; }
    .banner-preview__actions, .banner-preview__actions .button-pair { width: 100%; min-width: 0; }
  }

  /* A mock customer site the preview sits on */
  .preview-stage {
    --banner-backdrop: var(--surface-sunk);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    width: 100%;
    max-width: 52rem;
    background:
      linear-gradient(var(--border), var(--border)) 8% 9% / 34% 1.4rem no-repeat,
      repeating-linear-gradient(var(--border) 0 0.6rem, transparent 0.6rem 1.4rem) 8% 22% / 52% 4.8rem no-repeat,
      linear-gradient(var(--border), var(--border)) 8% 50% / 26% 22% no-repeat,
      linear-gradient(var(--border), var(--border)) 38% 50% / 26% 22% no-repeat,
      var(--surface-sunk);
    border: var(--hairline);
    border-radius: var(--radius-sheet);
  }
  .preview-stage[data-device="mobile"] { aspect-ratio: 9 / 17; max-width: 22rem; margin-inline: auto; }
  .preview-stage > .banner-preview { margin-top: auto; }

  /* Status chips: a consent choice per category */
  .chip {
    --chip-fg: var(--text-soft);
    --chip-bg: var(--surface-sunk);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.15em 0.65em;
    border-radius: var(--radius-round);
    background: var(--chip-bg);
    color: var(--chip-fg);
    font-size: var(--step--1);
    font-weight: 700;
    white-space: nowrap;
  }
  .chip::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
  }
  .chip--granted { --chip-fg: var(--granted); --chip-bg: var(--granted-wash); }
  .chip--denied { --chip-fg: var(--denied); --chip-bg: var(--denied-wash); }
  .chip--pending { --chip-fg: var(--text); --chip-bg: var(--sheet-2); }
  .chip--denied::before { border-radius: 1px; height: 0.18em; width: 0.6em; }

  /* Notices: inline compliance messages */
  .notice {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--notice-edge, var(--accent));
    background: var(--notice-bg, var(--accent-wash));
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
  }
  .notice--warning { --notice-edge: #b8930b; --notice-bg: color-mix(in srgb, var(--sheet-2) 45%, var(--surface)); }
  .notice--error { --notice-edge: var(--denied); --notice-bg: var(--denied-wash); }
  .notice--ok { --notice-edge: var(--granted); --notice-bg: var(--granted-wash); }
  .notice__title { font-weight: 700; }

  /* Compliance checklist under the preview */
  .checklist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  .checklist li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); }
  .checklist li::before {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--granted);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm3.5 4.8L7 9.3 4.7 7 3.6 8.1 7 11.5l5.6-5.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .checklist li[data-state="fail"]::before {
    background: var(--denied);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm2.7 4.2L8 6.9 5.3 4.2 4.2 5.3 6.9 8l-2.7 2.7 1.1 1.1L8 9.1l2.7 2.7 1.1-1.1L9.1 8l2.7-2.7z'/%3E%3C/svg%3E");
  }

  /* Data table (consent log) */
  .table-wrap { overflow-x: auto; border: var(--hairline); border-radius: var(--radius-sheet); }
  .table { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
  .table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: var(--hairline); }
  .table th { font-weight: 700; color: var(--text-soft); background: var(--surface-sunk); white-space: nowrap; }
  .table tbody tr:last-child td { border-bottom: 0; }
  .table tbody tr:hover { background: var(--accent-wash); }
  .table tbody tr[aria-selected="true"] { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }

  /* Consent receipt: a stacked sheet with key/value rows */
  .receipt { display: grid; gap: var(--space-4); max-width: 26rem; }
  .receipt__head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
  .receipt__id { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-soft); }
  .receipt dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); }
  .receipt dt { color: var(--text-soft); }
  .receipt dd { justify-self: end; }
  .receipt > .button { justify-self: start; }

  /* Code block (the embed snippet) */
  .code-block {
    position: relative;
    padding: var(--space-4) var(--space-5);
    padding-right: 7rem;
    background: var(--surface-sunk);
    border: var(--hairline);
    border-radius: var(--radius-sheet);
    font-size: var(--step--1);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .code-block > .button { position: absolute; top: var(--space-2); right: var(--space-2); }

  /* Toast */
  .toast {
    position: fixed;
    bottom: var(--space-5);
    left: 50%;
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--text);
    color: var(--surface);
    border-radius: var(--radius-control);
    box-shadow: var(--lift);
    font-weight: 700;
    animation: toast-in var(--dur) var(--ease-out);
  }
  .toast a { color: inherit; }
  @keyframes toast-in { from { translate: -50% 1rem; opacity: 0; } }

  /* Dialog */
  .dialog {
    width: min(100% - 2rem, 32rem);
    padding: var(--space-6);
    background: var(--surface);
    color: var(--text);
    border: var(--hairline);
    border-radius: var(--radius-sheet);
    box-shadow: var(--lift);
  }
  .dialog::backdrop { background: rgb(20 26 63 / 0.45); }
}

/* ------------------------------------------------------------ utilities */

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .text-soft { color: var(--text-soft); }
  .lead { font-size: var(--step-1); line-height: var(--leading-snug); max-width: 42ch; }
  .display {
    font-size: var(--step-5);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    max-width: 16ch;
  }
  .mono { font-family: var(--font-mono); }
}