/* design.css — the Adventrous design system, as the extension consumes it.
   Tokens are the same set the web viewer vendors (web/ui/src/design/tokens.css),
   both ported from the design project (claude.ai/design project c25db7b6,
   _ds/adventrous-design-system). The extension is the third consumer, not a
   second system: when a token moves, it moves in all three.

   Two deliberate differences from the viewer's copy:

   - the font is SELF-HOSTED (fonts/*.woff2) rather than pulled from Google
     Fonts. A popup renders in ~100ms and is dismissed in seconds, so a
     network round-trip for the typeface would flash on every single open —
     and the manifest's host permissions are deliberately narrow
     (bigbrain.cool only) precisely so store review stays boring.
   - TWO palettes ship, not the viewer's nine. Bare :root is Light,
     the extension popup's own look and what the static site (site/, which
     copies this file wholesale) wears; [data-theme="web"] below is OG Web
     Blue, kept for any page that sets the attribute. The other built-ins live in the viewer.

   Layout below is the mockup's "Browser extension.dc.html", value for value.
   The one rule worth stating out loud, because it is the whole feel of the
   thing: TEXT LINES UP ON ONE AXIS. Card padding is 22px and the note well's
   own padding is 13px, so note text starts at x=35. The footer row is inset
   4px and the chip's own padding is 9px — 4+9 = 13 again, so chip text also
   starts at x=35. The right edge matches the same way (footer inset 13px =
   the well's 13px). Change any one of those four numbers and the column
   breaks. */

/* ── font ─────────────────────────────────────────────────────────────── */
/* One variable file per subset covers 400–600; Google serves the same woff2
   for every weight in that range, which is how you can tell it is variable. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/hanken-grotesk-vietnamese.woff2") format("woff2");
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/hanken-grotesk-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ── tokens ───────────────────────────────────────────────────────────── */
:root {
  --bg: #FFFFFF;
  --fg: #211A18;
  --activity: #CC4A3E;
  /* typography — one knob: --font-app */
  --font-app: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, Menlo, "SF Mono", monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fs-hero: 56px;
  --fs-title: 34px;
  --fs-heading: 24px;
  --fs-prose: 20px;
  --fs-lead: 18px;
  --fs-chip: 16px;
  --fs-body: 15px;
  --fs-meta: 12px;
  --fs-eyebrow: 11px;
  --ls-hero: -0.035em;
  --ls-title: -0.03em;
  --ls-heading: -0.022em;
  --ls-eyebrow: 0.24em;
  --type-hero: var(--fw-medium) var(--fs-hero) / 1 var(--font-app);
  --type-title: var(--fw-medium) var(--fs-title) / 1 var(--font-app);
  --type-heading: var(--fw-medium) var(--fs-heading) / 1 var(--font-app);
  --type-prose: var(--fw-regular) var(--fs-prose) / 1.5 var(--font-app);
  --type-lead: var(--fw-medium) var(--fs-lead) / 1 var(--font-app);
  --type-chip: var(--fw-medium) var(--fs-chip) / 1 var(--font-app);
  --type-body: var(--fw-regular) var(--fs-body) / 1.5 var(--font-app);
  --type-meta: var(--fw-regular) var(--fs-meta) / 1.5 var(--font-app);
  --type-eyebrow: var(--fw-semibold) var(--fs-eyebrow) / 1 var(--font-app);
  --type-mono: var(--fw-semibold) 10.5px / 1 var(--font-mono);

  /* space/size/radius/shadow/motion — off-grid rhythm, don't snap */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 13px;
  --sp-5: 16px;
  --sp-6: 22px;
  --sp-7: 24px;
  --sp-8: 26px;
  --sp-9: 34px;
  --sp-10: 44px;
  --size-icon-btn: 40px;
  --r-sm: 5px;
  --r-chip: 11px;
  --r-card: 20px;
  --r-full: 999px;
  --shadow-knob: 0 1px 6px color-mix(in srgb, var(--fg) 30%, transparent);
  --shadow-card: 0 12px 34px -16px color-mix(in srgb, var(--fg) 30%, transparent);
  --shadow-device: 0 22px 60px -18px color-mix(in srgb, var(--fg) 40%, transparent);
  --dur-fast: 0.22s;
  --dur-slow: 0.25s;
  --ease: ease;
}

:root { color-scheme: light; }

[data-theme="web"] { --bg: #1e2bd6; --fg: #ffffff; --activity: #ffd23f; color-scheme: dark; }
/* Re-declare aliases on theme boundaries, so nested swatches resolve against
   their own base colors rather than inheriting the parent's resolved ink. */
:root, [data-theme] {
  color: var(--fg);
  --text: var(--fg);
  --text-strong: var(--fg);
  --text-note: color-mix(in srgb, var(--fg) 88%, var(--bg));
  --text-muted: color-mix(in srgb, var(--fg) 65%, var(--bg));
  --text-faint: color-mix(in srgb, var(--fg) 50%, var(--bg));
  --paper-desk: color-mix(in srgb, var(--fg) 8%, var(--bg));
  --surface: color-mix(in srgb, var(--fg) 4%, var(--bg));
  --well: var(--surface);
  --rule: color-mix(in srgb, var(--fg) 18%, var(--bg));
  --dash: color-mix(in srgb, var(--fg) 28%, var(--bg));
  --mark: var(--fg);
  --icon: var(--text-muted);
  --on-accent: var(--bg);
  --pilot: var(--activity);
  --ok: var(--fg);
  --session-going: var(--activity);
  --session-waiting: var(--fg);
  /* Compatibility for components that once chose from five accent hues. */
  --accent-1: var(--fg);
  --accent-2: var(--fg);
  --accent-3: var(--fg);
  --accent-4: var(--fg);
  --accent-5: var(--fg);
  --paper: var(--bg);
  --paper-sunk: var(--well);
  --paper-raised: var(--surface);
  --ink-900: var(--fg);
  --ink-800: var(--fg);
  --ink-600: var(--text-note);
  --ink-300: var(--text-muted);
  --ink-200: var(--text-faint);
  --ink-100: var(--rule);
  --ink-050: var(--rule);
  --line: var(--rule);
}

/* ── shared chrome ────────────────────────────────────────────────────── */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-app);
  -webkit-font-smoothing: antialiased;
}

/* The card. In the mockup this floats on a desk with a shadow; in a real
   popup the browser draws the frame, so the card IS the window. */
.view {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px 18px;
}

body.popup {
  width: 372px;
}

/* header: the mark, then the three-line identity of what is being filed.
   The mark is ON the text axis, not floating beside it — its slot is inset
   the same 13px that the note well's padding uses, so the left edge of the
   logo, of the note text and of the chip text are one line. The slot is the
   width of the mark itself (a 44px slot would centre it off the axis), and
   the 18px gap is then what holds the text column at x=80.
       22 (card) + 13 = 35 mark ─ 27 wide ─ 18 gap → 80 text */
.head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-left: 13px;
}

.cube-slot {
  width: 27px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  perspective: 200px;
}

.head-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-faint);
  transition: color var(--dur-slow) var(--ease);
}
/* landed — the line the whole popup exists to show */
.eyebrow.is-done {
  color: var(--text-note);
}
/* the one failure colour. There is no --danger in this system; accent-5 is
   the palette's own attention hue and is defined in every theme. */
.eyebrow.is-failed {
  color: var(--accent-5);
}

.title {
  font: var(--type-chip);
  letter-spacing: -0.012em;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta {
  font: var(--type-meta);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the note well — 13px of padding is what puts note text on the x=35 axis */
textarea.note {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  border: none;
  background: var(--well);
  border-radius: var(--r-block);
  padding: 12px 13px;
  font: var(--type-body);
  font-family: var(--font-app);
  color: var(--text-strong);
  min-height: 84px;
}
textarea.note:focus {
  outline: none;
}
::placeholder {
  color: var(--text-muted);
}

/* footer — inset 4px on the left so the chip's own 9px lands text at x=35,
   and 13px on the right to match the well's right-hand padding */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
  padding: 0 13px 0 4px;
}

/* The chip is revealed as the mark comes to rest, so it fades up rather than
   appearing — the two land as one gesture instead of one popping in over the
   other. `both` holds the from-state, so there is no flash before the frame. */
@keyframes chip-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.chip {
  animation: chip-in var(--dur-slow) var(--ease) both;
  flex: none;
  appearance: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: var(--type-eyebrow);
  font-family: var(--font-app);
  letter-spacing: 0.12em;
  color: var(--text-note);
  background: rgba(26, 26, 26, 0.06);
  padding: 6px 9px;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.chip:hover {
  background: rgba(26, 26, 26, 0.13);
  color: var(--text-strong);
}
.chip:active {
  background: rgba(26, 26, 26, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .chip {
    animation: none;
  }
}

.chip-keys {
  font: var(--type-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.hints {
  margin-left: auto;
  display: flex;
  gap: var(--sp-7);
  font: var(--type-mono);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  transition: color var(--dur-slow) var(--ease);
}
.hints span {
  white-space: nowrap;
}
.hints.is-done {
  color: var(--text-note);
}
.hints.is-failed {
  color: var(--accent-5);
}

/* the one primary action, in the well's slot so it keeps the card's width */
.cta {
  appearance: none;
  border: none;
  width: 100%;
  box-sizing: border-box;
  padding: 13px;
  border-radius: var(--r-block);
  background: var(--text-strong);
  color: var(--bg);
  font: var(--type-eyebrow);
  font-family: var(--font-app);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.cta:hover {
  opacity: 0.86;
}
.cta:disabled {
  opacity: 0.4;
  cursor: default;
}

/* a quieter second action, for the options page's disconnect */
.cta.is-quiet {
  background: var(--well);
  color: var(--text-note);
}

/* ── the pairing form (options page, #486) ───────────────────────────── */
/* Two fields in the note well's clothes — same 13px inset, same radius — so
   typed text sits on the x=35 axis like everything else on the card. */
.pair {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.pair[hidden] {
  display: none;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 13px;
  border-radius: var(--r-block);
  background: var(--well);
}
.field:focus-within {
  box-shadow: inset 0 0 0 1px var(--dash, var(--text-muted));
}
.field .label {
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-muted);
}
.field input {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-strong);
  outline: none;
}
.field input::placeholder {
  color: var(--text-muted);
}
#code {
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── the logo mark ────────────────────────────────────────────────────── */
/* A cube split into a slab and a block. cube.js sizes and colours every face;
   these rules only establish the 3D context and the mark's rest angle. */
.cube-stage {
  /* the rest angle — what the mark looks like when nothing is happening.
     --nudge is written by cube.js to seat the drawn shape in its slot; it
     never changes the angle. */
  --rest: rotateX(-30deg) rotateY(-45deg);
  --nudge: translate(0px, 0px);
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: var(--nudge) var(--rest);
}
.cube-stage [data-box] {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.cube-stage [data-face] {
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
}

/* ── options page ─────────────────────────────────────────────────────── */
/* The mockup's own framing: the card sits on the desk rather than filling a
   tab, so the two surfaces read as one product. */
body.options {
  background: var(--paper-desk);
  min-height: 100vh;
  padding: 56px 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

body.options .view {
  width: 372px;
  background: var(--bg);
  border-radius: 14px;
  box-shadow: var(--shadow-device);
}

/* prose on the options page, which has room to say more than a popup. The
   13px inset is the note well's, so this text sits on the same axis as the
   mark above it rather than on the card's padding edge. */
.copy {
  font: var(--type-body);
  color: var(--text-note);
  margin: 0;
  padding: 0 13px;
}

.copy a {
  color: var(--accent-1);
  text-decoration: none;
}
.copy a:hover {
  color: var(--text-strong);
}

/* the status line, in the footer slot so it keeps the x=35 axis */
.line {
  font: var(--type-meta);
  color: var(--text-muted);
  margin: 0;
  padding: 0 13px;
  overflow-wrap: anywhere;
}
.line.is-done {
  color: var(--text-note);
}
.line.is-failed {
  color: var(--accent-5);
}