@import "tailwindcss";

/* ==========================================================================
   100x Design System v2.0 · "Instrument" (Clay palette, 10.10.2026)
   Oat neutrals + one lime action color + five service-coded tiles.
   Mirrors src/lib/palette.ts (tests/palette.test.ts keeps them in sync).
   ========================================================================== */

:root {
  --paper: #fefdfb;
  --aluminum: #f4f3f0; /* "oat" */
  --white: #ffffff;
  --steel: #d1cdc7; /* "line" */
  --graphite: #55534e;
  --ink: #1b1a18;

  /* action: lime. Text on it is always light-mode ink. */
  --signal: #e2fa1c;
  --signal-hover: #c4dc00;
  --on-signal: #1b1a18;
  --on-signal-hover: #1b1a18;
  --link: #0667d9;
  --line-strong: #7b7974;
  --focus: #0667d9;

  /* service tiles: same in both modes; text on a tile = its -ink partner */
  --ube: #a78bff;          --ube-ink: #160546;
  --tangerine: #ff9f66;    --tangerine-ink: #3a1000;
  --blueberry: #6fb8ff;    --blueberry-ink: #001433;
  --matcha: #4fe08a;       --matcha-ink: #032a14;
  --dragonfruit: #ff7acb;  --dragonfruit-ink: #46022f;

  /* color: functional */
  --success: #1f8a4c;
  --warning: #b7791f;
  --danger: #c62828;
  --info: #2f5bd3;
  --success-text: #176b3b;
  --warning-text: #8a5a12;
  --danger-text: #b71c1c;
  --info-text: #2b52c0;

  /* shape */
  --chamfer: 8px;
  --radius-cell: 6px; /* bento cards only; controls 2px; everything else 0 */
  --bento-gap: clamp(8px, 1vw, 16px);
  --hit-min: 44px;
  --header-h: 64px;

  /* motion (§14.1) */
  --motion-instant: 100ms;
  --motion-quick: 200ms;
  --motion-base: 320ms;
  --motion-slow: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-mechanical: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.3, 1.4, 0.5, 1);

  /* layout (§7.2) */
  --margin: 16px;
  --gutter: 16px;
  --cols: 4;
  --max: 2400px; /* v2.1: no 1440 cap; wide screens use the width */

  color-scheme: light;
}

@media (min-width: 640px) {
  :root { --margin: 32px; --gutter: 24px; --cols: 8; }
}
@media (min-width: 1024px) {
  :root { --margin: 48px; --gutter: 24px; --cols: 12; }
}
@media (min-width: 1440px) {
  :root { --margin: 64px; --gutter: 32px; }
}
@media (min-width: 1920px) {
  :root { --margin: clamp(64px, 4vw, 128px); }
}

[data-theme="dark"] {
  --paper: #1b1a18;
  --aluminum: #232220;
  --white: #2a2926;
  --steel: #3a3835;
  --graphite: #a8a49c;
  --ink: #fefdfb;
  --link: #429dff;
  --line-strong: #6e6c68;
  --focus: #429dff;
  --success-text: #3fbf78;
  --warning-text: #e0a93b;
  --danger-text: #ff6b6b;
  --info-text: #7c9cff;
  color-scheme: dark;
}

/* Signal surfaces: content and focus stay dark in both themes */
.signal-surface {
  --focus: var(--on-signal);
  background: var(--signal);
  color: var(--on-signal);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0ms;
    --motion-quick: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}

/* ---------- Tailwind theme bridge ---------- */
@theme inline {
  --color-paper: var(--paper);
  --color-aluminum: var(--aluminum);
  --color-white: var(--white);
  --color-steel: var(--steel);
  --color-graphite: var(--graphite);
  --color-ink: var(--ink);
  --color-signal: var(--signal);
  --color-signal-hover: var(--signal-hover);
  --color-link: var(--link);
  --color-ube: var(--ube); --color-ube-ink: var(--ube-ink);
  --color-tangerine: var(--tangerine); --color-tangerine-ink: var(--tangerine-ink);
  --color-blueberry: var(--blueberry); --color-blueberry-ink: var(--blueberry-ink);
  --color-matcha: var(--matcha); --color-matcha-ink: var(--matcha-ink);
  --color-dragonfruit: var(--dragonfruit); --color-dragonfruit-ink: var(--dragonfruit-ink);
  --color-on-signal: var(--on-signal);
  --color-on-signal-hover: var(--on-signal-hover);
  --color-line-strong: var(--line-strong);
  --color-focus: var(--focus);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-danger: var(--danger);
  --color-success-text: var(--success-text);
  --color-warning-text: var(--warning-text);
  --color-danger-text: var(--danger-text);
  --color-info-text: var(--info-text);

  --font-display: var(--font-inter-tight), "Neue Haas Unica", system-ui, sans-serif;
  --font-mono: var(--font-jetbrains), "Berkeley Mono", ui-monospace, monospace;
  --font-segment: var(--font-departure), "Departure Mono", ui-monospace, monospace;

  /* type scale (§6.2): use as text-mega, text-display … */
  --text-mega: 160px;
  --text-mega--line-height: 144px;
  --text-mega--letter-spacing: -0.04em;
  --text-display: 96px;
  --text-display--line-height: 88px;
  --text-display--letter-spacing: -0.03em;
  --text-h1: 64px;
  --text-h1--line-height: 64px;
  --text-h1--letter-spacing: -0.025em;
  --text-h2: 40px;
  --text-h2--line-height: 44px;
  --text-h2--letter-spacing: -0.02em;
  --text-h3: 24px;
  --text-h3--line-height: 32px;
  --text-h3--letter-spacing: -0.01em;
  --text-body-l: 20px;
  --text-body-l--line-height: 32px;
  --text-body-l--letter-spacing: -0.005em;
  --text-body: 16px;
  --text-body--line-height: 24px;
  --text-caption: 13px;
  --text-caption--line-height: 16px;
  --text-label: 12px;
  --text-label--line-height: 16px;
  --text-label--letter-spacing: 0.06em;
  --text-data: 14px;
  --text-data--line-height: 20px;
  --text-readout: 48px;
  --text-readout--line-height: 48px;
  --text-readout--letter-spacing: -0.02em;
  --text-micro: 11px;
  --text-micro--line-height: 16px;
  --text-micro--letter-spacing: 0.04em;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-mechanical: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.3, 1.4, 0.5, 1);

  --radius-control: 2px;
  --radius-cell: 6px;
  --radius-device: 32px;
}

/* ---------- Base ---------- */
@layer base {
  html {
    background: var(--paper);
    color: var(--ink);
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "cv11";
  }
  ::selection {
    background: var(--signal);
    color: var(--on-signal);
  }
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  a { color: inherit; text-decoration: none; }
  img, svg, video { display: block; }
}

/* ---------- Primitives shared by every agent ---------- */
@layer components {
  /* Page container on the 12-col grid (§7.2) */
  .container-lab {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--margin);
  }
  .grid-lab {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  /* UPPERCASE mono label (§6.3) */
  .label {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .micro {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .tabular { font-variant-numeric: tabular-nums; }

  /* Lowercase display headings (§6.3): content is authored lowercase */
  .display {
    font-family: var(--font-display);
    font-weight: 500;
    text-wrap: balance;
  }
  .segment { font-family: var(--font-segment); font-weight: 400; }

  /* Exposed-grid hairlines (§7.3) */
  .hairline { border-color: var(--steel); }

  /* Background dot grid: texture only (§7.3) */
  .dot-grid {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--steel) 70%, transparent) 1px, transparent 1.2px);
    background-size: 16px 16px;
  }
  .line-grid {
    background-image:
      linear-gradient(to right, color-mix(in srgb, var(--steel) 45%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in srgb, var(--steel) 45%, transparent) 1px, transparent 1px);
    background-size: 16px 16px;
  }

  .sr-only-focusable:not(:focus) {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ==========================================================================
   Lead · UI kit primitives (buttons, type ramp, cells, status, forms)
   ========================================================================== */

@media (max-width: 639px) {
  :root { --header-h: 56px; }
}

html { scroll-padding-top: calc(var(--header-h) + 16px); }
body { overflow-x: clip; }

@layer components {
  /* ---- Responsive type ramp (§6.2; mobile = 0.6×, display ≥ 32px) ---- */
  .type-mega {
    font-family: var(--font-display); font-weight: 500;
    font-size: 96px; line-height: 88px; letter-spacing: -0.04em;
  }
  .type-display {
    font-family: var(--font-display); font-weight: 500; text-wrap: balance;
    font-size: 56px; line-height: 56px; letter-spacing: -0.03em;
  }
  .type-h1 {
    font-family: var(--font-display); font-weight: 500; text-wrap: balance;
    font-size: 40px; line-height: 44px; letter-spacing: -0.025em;
  }
  .type-h2 {
    font-family: var(--font-display); font-weight: 500; text-wrap: balance;
    font-size: 32px; line-height: 36px; letter-spacing: -0.02em;
  }
  .type-h3 {
    font-family: var(--font-display); font-weight: 500;
    font-size: 24px; line-height: 32px; letter-spacing: -0.01em;
  }
  .type-lead {
    font-family: var(--font-display);
    font-size: 18px; line-height: 28px; letter-spacing: -0.005em;
  }
  .type-readout {
    font-family: var(--font-segment); font-variant-numeric: tabular-nums;
    font-size: 40px; line-height: 40px; letter-spacing: -0.02em;
  }
  .type-data {
    font-family: var(--font-mono); font-size: 14px; line-height: 20px;
    font-variant-numeric: tabular-nums;
  }
  .type-caption { font-size: 13px; line-height: 16px; }
  @media (min-width: 640px) {
    .type-mega { font-size: 128px; line-height: 116px; }
    .type-display { font-size: 72px; line-height: 68px; }
    .type-h1 { font-size: 52px; line-height: 54px; }
    .type-h2 { font-size: 36px; line-height: 40px; }
    .type-lead { font-size: 20px; line-height: 32px; }
    .type-readout { font-size: 48px; line-height: 48px; }
  }
  @media (min-width: 1024px) {
    .type-mega { font-size: 160px; line-height: 144px; }
    .type-display { font-size: 96px; line-height: 88px; }
    .type-h1 { font-size: 64px; line-height: 64px; }
    .type-h2 { font-size: 40px; line-height: 44px; }
  }

  /* ---- Buttons (§12.2, §15.2) ---- */
  .btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    font: 500 12px/1 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: var(--radius-control, 2px);
    cursor: pointer;
    user-select: none;
    transition:
      color var(--motion-quick) var(--ease-standard),
      background-color var(--motion-quick) var(--ease-standard),
      border-color var(--motion-quick) var(--ease-standard),
      transform var(--motion-instant) var(--ease-standard);
  }
  .btn::after {
    /* ≥ 44px hit area without changing layout */
    content: "";
    position: absolute;
    inset: min(0px, calc((100% - var(--hit-min)) / 2)) 0;
  }
  .btn:active { transform: translateY(1px); }
  .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .btn[aria-disabled="true"], .btn:disabled { cursor: not-allowed; }
  .btn-sm { height: 32px; padding: 0 16px; }
  .btn-lg { height: 48px; padding: 0 32px; }

  .btn-primary {
    color: var(--on-signal);
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--signal);
    clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
    transition: background-color var(--motion-quick) var(--ease-standard);
  }
  .btn-primary:hover { color: var(--on-signal-hover); }
  .btn-primary:hover::before { background: var(--signal-hover); }
  .btn-primary:disabled, .btn-primary[aria-disabled="true"] { color: var(--graphite); }
  .btn-primary:disabled::before, .btn-primary[aria-disabled="true"]::before { background: var(--steel); }

  .btn-secondary {
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
  }
  .btn-secondary:hover { background: var(--ink); color: var(--paper); }

  /* inside signal surfaces the secondary button uses on-signal (§12.10) */
  .signal-surface .btn-secondary { color: var(--on-signal); border-color: var(--on-signal); }
  .signal-surface .btn-secondary:hover { background: var(--on-signal); color: var(--signal); }
  /* in the band the primary inverts to an ink plate so it never vanishes into the field */
  .signal-surface .btn-primary { color: #fefdfb; }
  .signal-surface .btn-primary::before { background: var(--on-signal); }
  .signal-surface .btn-primary:hover { color: var(--on-signal); }
  .signal-surface .btn-primary:hover::before { background: #fefdfb; }

  .btn-link {
    height: auto;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--ink);
    gap: 6px;
  }
  .btn-link .btn-link__text {
    background-image: linear-gradient(var(--signal-hover), var(--signal-hover));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
    transition: background-size var(--motion-quick) var(--ease-standard);
  }
  .btn-link:hover .btn-link__text, .btn-link:focus-visible .btn-link__text { background-size: 100% 1px; }
  .btn-link .btn-link__arrow { transition: transform var(--motion-quick) var(--ease-standard); }
  .btn-link:hover .btn-link__arrow { transform: translateX(3px); }
  .btn-link:hover .btn-link__arrow--ne { transform: translate(2px, -2px); }

  .btn-icon {
    width: 40px;
    padding: 0;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    background: transparent;
  }
  .btn-icon::after { inset: -2px; }
  .btn-icon:hover { border-color: var(--ink); background: var(--aluminum); }

  /* ---- Tags / chips (§12.3) ---- */
  .tag {
    display: inline-flex; align-items: center; gap: 6px;
    height: 24px; padding: 0 8px;
    font: 400 11px/16px var(--font-mono);
    letter-spacing: 0.04em; text-transform: uppercase;
    border: 1px solid var(--steel);
    color: var(--ink);
    white-space: nowrap;
  }
  .tag-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .tag-signal { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
  .chip {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    font: 400 11px/16px var(--font-mono);
    letter-spacing: 0.04em; text-transform: uppercase;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--motion-instant) var(--ease-standard), color var(--motion-instant) var(--ease-standard);
  }
  .chip::after { content: ""; position: absolute; inset: -6px 0; }
  .chip:hover { background: var(--aluminum); }
  .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* ---- Cell grid: shared hairlines, no doubles (§7.3) ---- */
  .cellgrid {
    display: grid;
    border-top: 1px solid var(--steel);
    border-left: 1px solid var(--steel);
  }
  .cellgrid > * {
    border-right: 1px solid var(--steel);
    border-bottom: 1px solid var(--steel);
    min-width: 0;
  }

  /* ---- Status light (§9) · the only looping animation ---- */
  .status-light {
    position: relative;
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 999px;
    flex: none;
    background: var(--steel);
  }
  .status-light[data-state="live"] { background: var(--signal); }
  .status-light[data-state="on"] { background: var(--ink); }
  .status-light[data-state="live"]::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: var(--signal);
    animation: status-pulse 1.6s var(--ease-standard) infinite;
  }
  @keyframes status-pulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.6); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .status-light[data-state="live"]::after { animation: none; display: none; }
  }

  /* ---- Registration corners ---- */
  .reg { position: absolute; z-index: 2; pointer-events: none; color: var(--ink); line-height: 0; }
  .reg-tl { top: 0; left: 0; transform: translate(-50%, -50%); }
  .reg-tr { top: 0; right: 0; transform: translate(50%, -50%); }
  .reg-bl { bottom: 0; left: 0; transform: translate(-50%, 50%); }
  .reg-br { bottom: 0; right: 0; transform: translate(50%, 50%); }

  /* ---- Accordion (details) ---- */
  .acc summary { list-style: none; cursor: pointer; }
  .acc summary::-webkit-details-marker { display: none; }
  .acc .acc__sign { transition: transform var(--motion-quick) var(--ease-mechanical); }
  .acc[open] .acc__sign { transform: rotate(45deg); }
  .acc summary:hover .acc__q { color: var(--graphite); }
  .acc summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

  /* ---- Inputs (§12.9) ---- */
  .input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font: 400 16px/24px var(--font-display);
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control, 2px);
    transition: border-color var(--motion-instant) var(--ease-standard);
    appearance: none;
  }
  textarea.input { height: auto; min-height: 128px; padding: 12px 16px; resize: vertical; }
  select.input {
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
  }
  .input::placeholder { font-family: var(--font-mono); font-size: 14px; color: var(--graphite); opacity: 1; }
  .input:hover { border-color: var(--ink); }
  .input:focus-visible { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 2px; }
  .input[aria-invalid="true"] { border-color: var(--danger); }
  .input:disabled { background: var(--aluminum); border-color: var(--steel); color: var(--graphite); }

  .check {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    cursor: pointer;
    font: 400 11px/16px var(--font-mono);
    letter-spacing: 0.04em; text-transform: uppercase;
    transition: background-color var(--motion-instant) var(--ease-standard);
  }
  .check:hover { background: var(--aluminum); }
  .check input {
    appearance: none;
    width: 16px; height: 16px; flex: none;
    border: 1px solid var(--line-strong);
    background: var(--white);
    display: grid; place-content: center;
    margin: 0;
  }
  .check input[type="radio"] { border-radius: 999px; }
  .check input::before {
    content: ""; width: 8px; height: 8px;
    background: var(--ink);
    transform: scale(0);
    transition: transform var(--motion-instant) var(--ease-snap);
  }
  .check input[type="radio"]::before { border-radius: 999px; }
  .check input:checked::before { transform: scale(1); }
  .check:has(input:checked) { border-color: var(--ink); }
  .check:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* ---- Skip link ---- */
  .skip-link {
    position: fixed; left: 16px; top: 8px; z-index: 100;
    transform: translateY(-200%);
    background: var(--ink); color: var(--paper);
    padding: 12px 16px;
  }
  .skip-link:focus-visible { transform: none; outline-color: var(--signal); }

  /* ---- Stretched link (card = one tab stop, nested secondary links allowed) ---- */
  .stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .stretched:focus-visible { outline: none; }
  .stretched:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
  .above-stretch { position: relative; z-index: 2; }

  /* ---- Prose (legal) ---- */
  .prose-lab p { margin-top: 16px; max-width: 68ch; }
  .prose-lab p:first-child { margin-top: 0; }
}

/* Inverted surface for contrast rhythm (ink section). Mirrors the theme
   token blocks above: light page → ink section, dark page → paper section. */
.surface-invert {
  --paper: #1b1a18; --aluminum: #232220; --white: #2a2926; --steel: #3a3835;
  --graphite: #a8a49c; --ink: #fefdfb; --line-strong: #6e6c68; --focus: #429dff; --link: #429dff;
  background: var(--paper);
  color: var(--ink);
}
.surface-invert .reg { color: var(--ink); }

/* ---- Bento flow (v2.3 §7.6): rows of cards with their own splits, so edges never line up
   across rows. Desktop: each card's share of its row is --grow; hovering or focusing a card
   widens it and its row-mates give way. Tablet: rows wrap two-up; mobile: one column. ---- */
@layer components {
  .bento-flow { display: flex; flex-direction: column; gap: var(--bento-gap); }
  .bento-row { display: flex; flex-direction: column; gap: var(--bento-gap); }
  .bento-row > * {
    position: relative;
    min-width: 0;
    border: 1px solid var(--cell-line, var(--steel));
    border-radius: var(--radius-cell);
  }
  @media (min-width: 640px) {
    .bento-row { flex-direction: row; flex-wrap: wrap; }
    .bento-row > * { flex: 1 1 calc(50% - var(--bento-gap)); }
  }
  @media (min-width: 1024px) {
    .bento-row { flex-wrap: nowrap; }
    .bento-row > * {
      flex: var(--grow, 1) 1 0%;
      transition: flex-grow 650ms var(--ease-standard);
    }
  }
  @media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
    .bento-row > :is(:hover, :focus-within) { flex-grow: calc(var(--grow, 1) * 1.6); }
  }
}

/* ---- Bento (v2.1 §7.6): gapped cards. Each cell has its own 1px line and 6px radius.
   1 col → 2 cols (640) → 12 cols (1024); dense flow back-fills holes left by wide cells. ---- */
@layer components {
  .bento {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: var(--bento-gap);
  }
  @media (min-width: 640px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
  .bento > * {
    position: relative;
    min-width: 0;
    border: 1px solid var(--cell-line, var(--steel));
    border-radius: var(--radius-cell);
  }
}

/* Tones re-point ink, graphite, focus and link so nested utilities follow the tile.
   The ink tone also re-points steel (its card line is its own #3a3835). Oat and white cards
   keep the page line; lime and service tiles get a line tinted from their own ink. */
.tone-oat { background: var(--aluminum); }
.tone-white { background: var(--white); }
.tone-ink {
  --paper: #1b1a18; --aluminum: #232220; --white: #2a2926;
  --steel: #3a3835; --line-strong: #6e6c68;
  --ink: #fefdfb; --graphite: #a8a49c; --focus: #429dff; --link: #429dff;
  background: #1b1a18; color: var(--ink);
}
/* Dark mode: #1b1a18 equals the page, so the ink cell lifts one step (graphite 5.9:1, ink 14.3:1). */
[data-theme="dark"] .tone-ink { --paper: #2a2926; background: #2a2926; }
.tone-signal {
  --ink: #1b1a18; --graphite: #3d3c37; --focus: #1b1a18; --link: #1b1a18;
  background: var(--signal); color: var(--ink);
}
.tone-branding, .tone-launch, .tone-seo-geo, .tone-automation, .tone-video { color: var(--ink); }
.tone-branding   { --ink: var(--ube-ink);         background: var(--ube); }
.tone-launch     { --ink: var(--tangerine-ink);   background: var(--tangerine); }
.tone-seo-geo    { --ink: var(--blueberry-ink);   background: var(--blueberry); }
.tone-automation { --ink: var(--matcha-ink);      background: var(--matcha); }
.tone-video      { --ink: var(--dragonfruit-ink); background: var(--dragonfruit); }
:is(.tone-signal, .tone-branding, .tone-launch, .tone-seo-geo, .tone-automation, .tone-video) {
  --cell-line: color-mix(in srgb, var(--ink) 14%, transparent);
}
:is(.tone-branding, .tone-launch, .tone-seo-geo, .tone-automation, .tone-video) {
  --graphite: color-mix(in srgb, var(--ink) 78%, transparent);
  --focus: var(--ink);
  --link: var(--ink);
}

/* === resources === */
/* Agent Skills shared visuals (SkillArt, SkillCard, StarBadge, shared/*). Prefix .skill-.
   Design tokens only; every hover/focus effect is also under :has(:focus-visible); motion is
   gated by hover capability and prefers-reduced-motion. Owned by the visual lane. */

/* ---- Skill icons (flat two-tone geometry): see docs/agent-skills-visual-spec.md ----
   Fixed light "print" tile in both themes. Each icon is drawn on 240x180 in two brand tones: a deep tone and a
   light tone (the category's accent), plus tile-coloured cutouts. Classes: .ic-d deep fill · .ic-l light fill ·
   .ic-p cutout (tile colour) · .ic-ds / .ic-ls deep / light stroke (fill none, give stroke-width). */
.ic {
  display: block;
  background: #f1ede4;
  --ic-bg: #f1ede4;
  --ic-tone: #a78bff;
  --ic-deep: #5b3fd0;
  --ic-d: var(--ic-deep);
  --ic-l: var(--ic-tone);
}
.ic--swap { --ic-d: var(--ic-tone); --ic-l: var(--ic-deep); }
.ic-d  { fill: var(--ic-d); }
.ic-l  { fill: var(--ic-l); }
.ic-p  { fill: var(--ic-bg); }
.ic-ds { fill: none; stroke: var(--ic-d); }
.ic-ls { fill: none; stroke: var(--ic-l); }
.ic--seo, .ic--analytics { --ic-tone: #6fb8ff; --ic-deep: #1f6fd6; }
.ic--cro, .ic--gtm       { --ic-tone: #ff9f66; --ic-deep: #e4570f; }
.ic--paid-ads            { --ic-tone: #ff9a52; --ic-deep: #c4400a; }
.ic--content, .ic--social { --ic-tone: #ff7acb; --ic-deep: #c92e8f; }
.ic--email, .ic--growth  { --ic-tone: #4fe08a; --ic-deep: #12874a; }
.ic--brand, .ic--general { --ic-tone: #a78bff; --ic-deep: #5b3fd0; }
.ic > g { transition: transform var(--motion-base) var(--ease-mechanical); transform-box: fill-box; transform-origin: center; }
@media (hover: hover) {
  :is(.skill-card, .skill-art-host):hover .ic > g { transform: scale(1.04); }
}
:is(.skill-card, .skill-art-host):has(:focus-visible) .ic > g { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .ic > g { transition: none; transform: none !important; }
}

/* ---- SkillCard ---- */
.skill-card { isolation: isolate; }
.skill-card__name { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--motion-quick) var(--ease-standard); }

/* ink tick: draws along the art plate's seam (grid: bottom edge; row: right edge) */
.skill-card__art::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-base) var(--ease-mechanical);
  left: 0; right: 0; bottom: -1px; height: 2px;
}
.skill-card[data-variant="row"] .skill-card__art::after {
  left: auto; top: 0; bottom: 0; right: -1px; width: 2px; height: auto;
  transform: scaleY(0);
  transform-origin: top;
}

.skill-card__arrow {
  color: var(--ink);
  transition: background-color var(--motion-instant) var(--ease-standard), color var(--motion-instant) var(--ease-standard);
}
.skill-card__arrow > span { transition: transform var(--motion-quick) var(--ease-standard); }

@media (hover: hover) {
  .skill-card:hover .skill-card__name { text-decoration-color: var(--ink); }
  .skill-card:hover .skill-card__art::after { transform: none; }
  .skill-card:hover .skill-card__arrow { background: var(--ink); color: var(--paper); }
  .skill-card:hover .skill-card__arrow > span { transform: translateX(2px); }
}
.skill-card:has(:focus-visible) .skill-card__name { text-decoration-color: var(--ink); }
.skill-card:has(:focus-visible) .skill-card__art::after { transform: none; }
.skill-card:has(:focus-visible) .skill-card__arrow { background: var(--ink); color: var(--paper); }
.skill-card:has(:focus-visible) .skill-card__arrow > span { transform: translateX(2px); }

/* ---- StarBadge ---- */
.skill-star {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 12px/16px var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.skill-star svg { flex: none; }
.skill-star--chip { height: 24px; padding: 0 8px; border: 1px solid var(--steel); }
.skill-star--empty { color: var(--graphite); }

/* ---- License tag ---- */
.skill-license--none { border-style: dashed; color: var(--graphite); }

/* ---- Publisher avatar (initials on a tone chip; tone classes come from the tile system) ---- */
.skill-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  font: 600 9px/1 var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid var(--cell-line, var(--steel));
}
.skill-avatar--md { width: 32px; height: 32px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .skill-card__name,
  .skill-card__art::after,
  .skill-card__arrow,
  .skill-card__arrow > span { transition: none !important; animation: none !important; }
  .skill-card:hover .skill-card__arrow > span,
  .skill-card:has(:focus-visible) .skill-card__arrow > span { transform: none; }
}
/* === /resources === */

/* ---- /deb magazine voice: editorial serif (loaded on that page only) and drop cap ---- */
.ed-serif { font-family: var(--font-ed-serif), Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -0.01em; }
.ed-dropcap::first-letter {
  font-family: var(--font-ed-serif), Georgia, serif;
  float: left;
  font-size: 4.6em;
  line-height: 0.8;
  padding: 0.06em 0.1em 0 0;
  color: var(--ink);
}