/* claudecore.css — Claudecore, Lucian Labs look E
   A vending machine humming in a dark arcade. Extracted from the ll-shop
   widget (the machine, the orb, the genie) and elijahlucian.ca's widget
   system (the radio's black sketch, the badge, the juice motion sheet).

   Tokens first, then components. Every colour below the token block is a
   var(). Read claudecore.md for the rules the CSS cannot carry. */

/* ── Fonts ──────────────────────────────────────────────────────────────────
   Two faces, three roles:
     Finlandica   display AND body — bold uppercase tracked for chrome,
                  light for prose. One family doing two jobs is the tell.
     Space Mono   mono — readouts, counters, the [3/12] bracket. Inherited
                  from elijahlucian.ca; the look's one exception to the
                  house Inconsolata rule, same standing as Field Notes' Fira Code.
   ────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Finlandica:wght@300;400;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* surfaces — near-black glass, a colder black for chrome, true black for the sketch */
  --bg: #060a10;
  --bg-deep: #000000;
  --panel: #0a0a0a;
  --panel-2: #111111;

  /* ink — cool white, never pure except --bright */
  --ink: #dfe8f2;
  --bright: #ffffff;
  --muted: #9fb2c8;
  --faint: #7d8fa5;
  /* labels are blue-steel, not grey — the signature of this look's chrome */
  --label: #5d8fc9;

  /* boundaries — the navy hairline is 1.5px, a half-step between Console and Punch Clock */
  --line: #2a4a70;
  --line-2: #1a2c44;
  --line-soft: #1a1a1a;
  /* the sketch's frame is the one grey edge — it frames content, not chrome */
  --line-sketch: #303030;
  --border: 1.5px;

  /* accents — sky blue speaks, gold sells, the orb is a deeper blue sphere */
  --accent: #4fc3f7;
  --accent-hi: #9fc4ea;
  --accent-2: #ffa40a;
  --accent-2-hi: #ffc45c;
  --gold-a: #d4a843;
  --gold-b: #e8842a;
  --orb: #397fd9;
  --orb-hi: #6db3f2;
  --orb-lo: #1e5aa8;
  --good: #1bbb41;
  --bad: #ff6b6b;

  /* form */
  --radius: 8px;
  --radius-sm: 4px;
  --gap: 0.5rem;

  /* depth — three layers: drop for weight, blue glow, inset line for the lit top edge */
  --shadow:
    0 4px 20px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(57, 127, 217, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-bloom:
    0 8px 26px rgba(0, 0, 0, 0.65),
    0 0 24px rgba(79, 195, 247, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --shadow-thin:
    0 0 8px rgba(79, 195, 247, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* the badge's hard 1px offset shadow — pixel, not soft */
  --shadow-hard: 1px 1px 0 0 rgba(0, 0, 0, 0.5);
  /* the dot texture that sits over every widget body at half opacity */
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");

  /* type */
  --font-display: 'Finlandica', system-ui, sans-serif;
  --font-body: 'Finlandica', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'Inconsolata', monospace;
  --tracking: 0.14em;

  /* motion — juice: fast-out long-settle spring, front-loaded retreat */
  --spring: cubic-bezier(0.32, 0.9, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 0.6, 1);
  --out: 420ms;
  --in: 250ms;
  --micro: 180ms;

  color-scheme: dark;
}

/* ── base ────────────────────────────────────────────────────────────────── */

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at 12% -10%, rgba(57, 127, 217, 0.18), transparent 44%),
    radial-gradient(circle at 88% 110%, rgba(212, 168, 67, 0.08), transparent 40%),
    linear-gradient(170deg, #0a0a0e, var(--bg) 60%, #050507);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.5;
}

/* ── layout ──────────────────────────────────────────────────────────────── */

.page {
  width: min(1100px, calc(100% - 2.4rem));
  margin: 0 auto;
  padding: 1.2rem 0 4rem;
}

.section { margin-top: 2.5rem; }
.section:first-of-type { margin-top: 2rem; }

.section-copy {
  color: var(--muted);
  margin: 0.4rem 0 1.25rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}

/* ── type ────────────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  line-height: 1.1;
  color: var(--bright);
}
h1 { font-size: 2.4rem; letter-spacing: 0.1em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.05rem; }

/* the wordmark: bold sky blue, a lighter word after it, both tiny and tracked */
.wordmark {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--label);
}
.wordmark b { font-weight: 700; color: var(--accent); }

.overline,
.label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--label);
}

/* a rule that trails off — the family separator */
.section-rule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(79, 195, 247, 0.35), transparent);
}

.tagline { margin: 0.4rem 0 0; color: var(--muted); }
.small { font-size: 0.85rem; color: var(--muted); }
.faint { color: var(--faint); }

code,
kbd,
.mono,
pre {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* Numbers and brackets: Space Mono, tabular. [3/12] · 03:41 · $4.99 */
.readout {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ── links ───────────────────────────────────────────────────────────────── */

a { color: var(--accent); }

.text-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--micro) ease;
}
.text-link:hover { color: var(--accent-hi); }
.text-link--muted { color: var(--label); }
.text-link--muted:hover { color: var(--accent); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.nav a {
  color: var(--label);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--micro) ease;
}
.nav a:hover { color: var(--accent); }

/* ── the machine ─────────────────────────────────────────────────────────────
   The panel. Near-black glass in a navy hairline, floating on its own glow.
   A header strip on the colder black, sections inside. */

.machine {
  position: relative;
  background: var(--panel);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow var(--out) var(--spring), transform var(--out) var(--spring);
}
.machine:hover { box-shadow: var(--shadow-bloom); }

.machine .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.7rem 0.35rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
}

.machine .body { padding: 0.5rem 0.65rem 0.65rem; }

/* ── the widget body — elijahlucian.ca's dock panel ─────────────────────────
   Rounder, darker, textured: trans-black over the page with the dot grid at
   half opacity. Where the machine is a device, the widget is a window. */

.widget {
  position: relative;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid var(--line-sketch);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.widget::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tex);
  opacity: 0.5;
  pointer-events: none;
}
.widget > * { position: relative; z-index: 1; }

/* the sketch: a black canvas in a grey frame. the content picks its hue. */
.sketch {
  display: block;
  width: 100%;
  height: 124px;
  border: 2px solid var(--line-sketch);
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  overflow: hidden;
}
.sketch canvas { display: block; width: 100%; height: 100%; }

/* ── tabs ─────────────────────────────────────────────────────────────────── */

.tabs {
  display: flex;
  gap: 1px;
  background: var(--line-2);
}
.tab {
  flex: 1;
  padding: 0.4rem 0 0.35rem;
  background: var(--bg);
  border: 0;
  color: var(--label);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--micro), background var(--micro);
}
.tab:hover { color: var(--accent-hi); }
.tab[aria-selected='true'] {
  color: var(--accent);
  background: var(--panel);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Selection travels: the 2px sky bar glides to the chosen tab on the spring. */
.tabs:has(> .tabs-ind) { position: relative; }
.tabs:has(> .tabs-ind) .tab[aria-selected='true'] { box-shadow: none; }
.tabs-ind {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  height: 2px;
  width: calc((100% - (var(--count, 3) - 1) * 1px) / var(--count, 3));
  transform: translateX(calc(var(--active, 0) * (100% + 1px)));
  background: var(--accent);
  transition: transform var(--out) var(--spring);
  pointer-events: none;
}

/* ── the orb — one sphere, the whole product minimized ──────────────────────
   The only circle. Radial highlight top-left, deeper blue at the rim, glow. */

.orb {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--orb-hi), var(--orb) 50%, var(--orb-lo) 100%);
  box-shadow: 0 2px 12px rgba(57, 127, 217, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform var(--out) var(--spring), box-shadow var(--micro);
}
.orb:hover {
  transform: scale(1.12);
  box-shadow: 0 3px 18px rgba(57, 127, 217, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}
.orb:active { transform: scale(0.95); transition-duration: var(--micro); }

/* the badge: a flat coloured disc with one hard pixel shadow and a letter.
   elijahlucian.ca's widget toggle. Colour is the widget's, not the look's. */
.badge {
  --badge: var(--orb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--badge);
  color: var(--bright);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-shadow: 1px 1px 0 #000;
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  user-select: none;
  transition: background var(--micro), color var(--micro), transform var(--out) var(--spring);
}
.badge:hover { background: var(--bright); color: var(--badge); text-shadow: none; transform: translateY(-2px); }
.badge:active { transform: scale(0.96); }

/* ── slots and buttons ──────────────────────────────────────────────────────
   The goods wear a two-stop 135° gradient. Nothing else in the look does. */

.slot {
  display: block;
  padding: 0.55rem 0.5rem;
  text-align: center;
  text-decoration: none;
  color: var(--bright);
  background: linear-gradient(135deg, var(--gold-a), var(--gold-b));
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(212, 168, 67, 0.25);
  transition: transform var(--out) var(--spring), box-shadow var(--micro);
  cursor: pointer;
}
.slot:hover { transform: translateY(-1px); box-shadow: 0 3px 14px rgba(212, 168, 67, 0.45); }
.slot:active { transform: scale(0.96); transition-duration: var(--micro); }
.slot .name { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.slot .desc { font-size: 0.68rem; color: rgba(255, 255, 255, 0.85); margin-top: 0.15rem; letter-spacing: 0.03em; }
.slot .price { font-family: var(--font-mono); font-size: 0.68rem; color: rgba(255, 255, 255, 0.72); margin-top: 0.2rem; }

.button {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border: var(--border) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--label);
  text-decoration: none;
  position: relative;
  transition:
    transform var(--out) var(--spring),
    box-shadow var(--micro),
    color var(--micro),
    border-color var(--micro),
    background var(--micro),
    opacity var(--micro);
}
.button:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-thin); }
.button:active { transform: scale(0.96); transition-duration: var(--micro); }
.button:focus-visible,
.tab:focus-visible,
.orb:focus-visible,
.badge:focus-visible,
.slot:focus-visible,
.pip:focus-visible,
.input-field:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.button:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }

/* the one CTA per view: gold, dark ink, a lighter gold on hover */
.button.primary {
  background: linear-gradient(135deg, var(--accent-2-hi), var(--accent-2));
  border-color: transparent;
  color: var(--bg);
}
.button.primary:hover { box-shadow: 0 3px 12px rgba(255, 164, 10, 0.4); color: var(--bg); }

/* the hire strip: gold outline on a gold wash — an offer, not an action */
.button.strip {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: rgba(255, 164, 10, 0.08);
  border-color: rgba(255, 164, 10, 0.45);
  color: var(--accent-2);
}
.button.strip:hover { background: rgba(255, 164, 10, 0.18); box-shadow: 0 0 10px rgba(255, 164, 10, 0.25); transform: none; }

.button.ghost { background: transparent; border-color: transparent; }
.button.ghost:hover { transform: none; box-shadow: none; }

/* ── states in motion — UX.md §2a ────────────────────────────────────────── */

/* The label retreats on ease-in and arrives on the spring, with the state. */
.button .label { display: inline-block; transition: opacity var(--micro), transform var(--out) var(--spring); }
.button .label[data-morph='out'] { opacity: 0; transform: translateY(-3px); transition: opacity 150ms var(--ease-in), transform 150ms var(--ease-in); }
.button .label[data-morph='in'] { opacity: 0; transform: translateY(4px); transition: none; }

/* Busy: a ring blooms on the spring and turns over the dimmed label. */
.button::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 1.5px solid var(--accent);
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0;
  scale: 0.5;
  transition: opacity var(--micro), scale var(--out) var(--spring);
  pointer-events: none;
}
.button.primary::after { border-color: currentColor; border-right-color: transparent; }
.button[aria-busy='true'] { cursor: progress; }
.button[aria-busy='true'] .label { opacity: 0.35; }
.button[aria-busy='true']::after { opacity: 1; scale: 1; animation: cc-turn 800ms linear infinite; }
@keyframes cc-turn { to { rotate: 360deg; } }

/* Done warms the glow to good; error turns it bad. */
.button[data-state='done'] { color: var(--good); border-color: var(--good); box-shadow: 0 0 14px rgba(27, 187, 65, 0.35); }
.button.primary[data-state='done'] { color: var(--bg); box-shadow: 0 0 0 1px var(--good), 0 0 14px rgba(27, 187, 65, 0.35); }
.button[data-state='error'] { color: var(--bad); border-color: var(--bad); box-shadow: 0 0 14px rgba(255, 107, 107, 0.3); }

.button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ── forms ───────────────────────────────────────────────────────────────── */

.input-field,
input[type='text'],
input[type='number'],
input[type='email'],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: var(--bg-deep);
  border: var(--border) solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--micro), box-shadow var(--micro);
}
.input-field:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-thin);
}
::placeholder { color: var(--faint); }

.field-label {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
}
.checkbox input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; }

/* ── status ──────────────────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label);
}
.tag.good { color: var(--good); border-color: rgba(27, 187, 65, 0.45); }
.tag.bad { color: var(--bad); border-color: rgba(255, 107, 107, 0.45); }

/* a quoted entry: hairline spine in blue, label above, body below */
.entry {
  padding-left: 0.5rem;
  margin-bottom: 0.6rem;
  border-left: 1px solid rgba(79, 195, 247, 0.35);
}
.entry .when {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
}
.entry .text { font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.entry .text .t { color: var(--accent); }

/* the nudge: two lines of sky blue, centered, the second dimmer */
.nudge { text-align: center; padding: 0.4rem 0.6rem 0.5rem; border-top: 1px solid var(--line-soft); }
.nudge div { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--accent); line-height: 1.5; }
.nudge div + div { opacity: 0.7; }

/* the look pips: a swatch book, one dot per skin */
.pips { display: flex; justify-content: center; gap: 8px; padding: 6px 10px 7px; border-top: 1px solid var(--line-soft); background: var(--bg); }
.pip {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(223, 232, 242, 0.35);
  border-radius: 50%;
  background: radial-gradient(circle, var(--pip, var(--accent)) 0 42%, var(--pip-bg, var(--panel)) 46%);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--micro), transform var(--out) var(--spring), box-shadow var(--micro);
}
.pip:hover { opacity: 1; transform: scale(1.2); }
.pip[aria-checked='true'] { opacity: 1; border-color: var(--ink); box-shadow: 0 0 0 1px var(--panel), 0 0 0 2px var(--ink); }

/* ── tables ──────────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line-2);
  text-align: left;
  font-size: 0.85rem;
}
th {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--label);
}
td { font-variant-numeric: tabular-nums; color: var(--muted); }
td.mono { color: var(--ink); }

/* ── footer ──────────────────────────────────────────────────────────────── */

.site-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-2);
  color: var(--faint);
  font-size: 0.82rem;
}

/* ── reduced motion: every spring becomes a 150ms opacity fade ───────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: opacity 150ms ease !important; transform: none !important; animation: none !important; }
  /* the selection still lands on the chosen tab, it just stops gliding */
  .tabs-ind { transform: translateX(calc(var(--active, 0) * (100% + 1px))) !important; transition: none !important; }
}