/* ─── base.css ────────────────────────────────────────────────────────────────
   v2 foundation: design tokens, fonts, reset, and the site chrome shared by
   every v2 page (header, footer, console frame, mascot). Load before site.css.

   Pruned from the Claude Design export's moltsets-base.css down to the rules
   the v2 pages actually use. The legacy /moltsets-base.css still serves the
   pages that haven't moved to v2 yet - don't edit that one for v2 work.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand:          rgb(244,128,93);
  --brand-stroke:   rgb(249,115,22);
  --brand-tint:     rgb(245,141,109);
  --brand-dim:      rgb(220,115,84);
  --brand-bg:       rgb(57,41,29);
  --brand-line:     rgba(244,128,93,.35);   /* dashed section/list rules */
  --brand-line-strong: rgba(244,128,93,.55);
  /* Ink - dark text on the solid orange band and featured cards */
  --ink:            rgb(22,10,6);
  --ink-body:       rgba(22,10,6,.82);
  --ink-muted:      rgba(22,10,6,.72);   /* lowest strength that passes 4.5:1 on the brand orange for small text */
  --ink-line:       rgba(22,10,6,.35);
  /* Surfaces */
  --bg-base:        rgb(10,11,14);
  --bg-elevated:    rgb(30,30,30);
  --bg-terminal:    rgba(244,128,93,0.10);
  /* Foreground */
  --fg-primary:     rgb(241,245,249);
  --fg-secondary:   rgb(203,213,225);
  --fg-muted:       rgb(148,163,184);
  --fg-subdued:     rgb(153,161,175);
  /* Semantic */
  --success:        rgb(52,211,153);
  --hint:           rgb(253,224,71);
  --danger:         rgb(248,113,113);
  /* Dividers */
  --divider-dim:    rgba(206,206,206,0.25);
  /* Typography */
  --font-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  /* Layout */
  --wrap:           1280px;
}

/* ── SF Mono ───────────────────────────────────────────────────────────────── */
@font-face { font-family:'SF Mono'; font-weight:300; src:url('/fonts/SF-Mono-Light.woff2') format('woff2'), url('/fonts/SF-Mono-Light.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'SF Mono'; font-weight:400; src:url('/fonts/SF-Mono-Regular.woff2') format('woff2'), url('/fonts/SF-Mono-Regular.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'SF Mono'; font-weight:500; src:url('/fonts/SF-Mono-Medium.woff2') format('woff2'), url('/fonts/SF-Mono-Medium.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'SF Mono'; font-weight:600; src:url('/fonts/SF-Mono-Semibold.woff2') format('woff2'), url('/fonts/SF-Mono-Semibold.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'SF Mono'; font-weight:700; src:url('/fonts/SF-Mono-Bold.woff2') format('woff2'), url('/fonts/SF-Mono-Bold.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'SF Mono'; font-weight:800; src:url('/fonts/SF-Mono-Heavy.woff2') format('woff2'), url('/fonts/SF-Mono-Heavy.otf') format('opentype'); font-display:swap; }

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}
body { display: flex; flex-direction: column; min-height: 100vh; }
.page-bg {
  background-image: url('/assets/bg-texture-dark.png');
  //background-size: cover;
  //background-position: center;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--fg-secondary); }
em { font-style: normal; }

/* Visually hidden but still read by screen readers and crawlers */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── Buttons (small - header) ──────────────────────────────────────────────── */
.btn-text {
  background: transparent; border: none; cursor: pointer;
  font: 400 12px/1 var(--font-mono); color: var(--fg-primary);
  padding: 5px clamp(4px, 1vw, 14px); display: inline-flex; align-items: center; gap: 6px;
  transition: color 60ms steps(1); white-space: nowrap; text-decoration: none;
}
.btn-text:hover,
.btn-text.accent { color: var(--brand); }
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: var(--bg-base);
  border: none; cursor: pointer; text-decoration: none;
  font: 400 12px/1 var(--font-mono); padding: 5px 14px;
  transition: background 60ms steps(1); white-space: nowrap;
}
.btn-primary:hover  { background: var(--brand-tint); color: var(--bg-base); }
.btn-primary:active { background: var(--brand-dim); }

/* Masked icon that takes the text colour. Pick the glyph with a modifier. */
.btn-icon {
  display: block; flex-shrink: 0; width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
}
.btn-icon--chevron { --icon: url('/assets/icons/chevron-right.svg'); }

/* ── Header ────────────────────────────────────────────────────────────────── */
.mh {
  height: 48px; flex-shrink: 0;
  background: var(--bg-elevated);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 32px; position: relative;
}
.mh-logo   { display: flex; align-items: center; justify-self: start; }
.logo-type { font: 700 18px/1 var(--font-mono); color: var(--brand); display: flex; align-items: center; }
.logo-mark { display: flex; align-items: center; margin-left: 3px; }
.mh-nav    { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 32px); }
.mh-right  { display: flex; gap: 12px; align-items: center; justify-self: end; }

/* Resources dropdown - opens on hover (CSS) or click (.open, site.js) */
.mh-sub { position: relative; display: inline-flex; align-items: center; }
.mh-sub-caret {
  display: block; width: 16px; height: 16px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url('/assets/icons/chevron-down.svg') center/contain no-repeat;
  mask: url('/assets/icons/chevron-down.svg') center/contain no-repeat;
  transition: transform 60ms steps(1);
}
.mh-sub.open > .mh-sub-trigger,
.mh-sub:hover > .mh-sub-trigger { color: var(--brand); }
.mh-sub.open .mh-sub-caret,
.mh-sub:hover .mh-sub-caret { transform: rotate(180deg); }
.mh-sub-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 180px; padding: 6px 0; z-index: 250;
  background: var(--bg-elevated); border: 1px solid var(--brand);
  display: none; flex-direction: column;
}
.mh-sub.open > .mh-sub-panel,
.mh-sub:hover > .mh-sub-panel { display: flex; }
.mh-sub-panel a {
  font: 400 12px/1 var(--font-mono); color: var(--fg-primary);
  padding: 8px 16px; white-space: nowrap;
  transition: color 60ms steps(1), background 60ms steps(1);
}
.mh-sub-panel a:hover { color: var(--brand); background: rgba(244,128,93,0.08); }

/* Burger + mobile panel. Links reveal with a CSS stagger, no JS text animation. */
.mh-burger {
  display: none; background: none; border: none; cursor: pointer;
  padding: 6px; gap: 4px; flex-direction: column; justify-content: center;
}
.mh-burger span {
  display: block; width: 18px; height: 2px; background: var(--fg-primary);
  transform-origin: center; transition: transform 130ms steps(3), opacity 70ms steps(1);
}
.mh-burger:hover span { background: var(--brand); }
.mh-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mh-burger.open span:nth-child(2) { opacity: 0; }
.mh-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mh-mpanel { display: none; }
.mh-mlogin { display: none; }   /* mobile-menu "log in": phones only (below), beside the button otherwise */

@media (max-width:1040px) {
  .mh { display: flex; justify-content: space-between; }
  .mh-nav { display: none; }
  .mh-burger { display: flex; order: 3; }
  .mh-right > .btn-primary { display: none; order: 1; }
  .mh-mpanel { display: flex; flex-direction: column; background: var(--bg-elevated); }
  .mh-mpanel-nav { display: flex; flex-direction: column; overflow: hidden; }
  .mh-mlink {
    display: flex; align-items: center; gap: 10px; width: 100%;
    max-height: 0; opacity: 0; overflow: hidden; padding: 0 24px;
    color: var(--fg-primary); font: 400 16px/1 var(--font-mono);
    transition: max-height 0ms, padding 0ms, opacity 0ms;
  }
  .mh-mpanel.open .mh-mlink { max-height: 60px; opacity: 1; padding: 14px 24px; }
  .mh-mpanel.open .mh-mlink:nth-child(2)  { transition-delay: 60ms; }
  .mh-mpanel.open .mh-mlink:nth-child(3)  { transition-delay: 120ms; }
  .mh-mpanel.open .mh-mlink:nth-child(4)  { transition-delay: 180ms; }
  .mh-mpanel.open .mh-mlink:nth-child(5)  { transition-delay: 240ms; }
  .mh-mpanel.open .mh-mlink:nth-child(6)  { transition-delay: 300ms; }
  .mh-mpanel.open .mh-mlink:nth-child(7)  { transition-delay: 360ms; }
  .mh-mpanel.open .mh-mlink:nth-child(8)  { transition-delay: 420ms; }
  .mh-mpanel.open .mh-mlink:nth-child(n+9) { transition-delay: 480ms; }
  .mh-mlink:hover,
  .mh-mlink[aria-current="page"] { color: var(--brand); }
  .mh-msection { cursor: default; }
  .mh-mcaret {
    display: block; width: 14px; height: 14px; flex-shrink: 0; background: currentColor;
    -webkit-mask: url('/assets/icons/chevron-down.svg') center/contain no-repeat;
    mask: url('/assets/icons/chevron-down.svg') center/contain no-repeat;
  }
  .mh-msub { color: var(--fg-secondary); }
  .mh-mpanel.open .mh-msub { padding-left: 44px; }
  .mh-mpanel-cta { margin: 14px 24px 18px; justify-content: center; }
}
@media (min-width:601px) and (max-width:1040px) {
  .mh-right > .btn-primary { display: inline-flex; }
  .mh-mpanel-cta { display: none; }
  .mh-mlogin { display: none; }   /* log in sits beside the button at this width */
}
@media (max-width:600px) {
  .mh { padding: 0 16px; }
  .mh-mpanel.open .mh-mlink { padding-left: 16px; padding-right: 16px; }
  .mh-mpanel.open .mh-msub { padding-left: 36px; }
  .mh-mpanel-cta { margin: 8px 16px 12px; }
  .mh-right > .mh-login { display: none; }   /* the button moves into the menu here, so log in does too */
  .mh-mlogin { display: flex; }
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.mf {
  background: var(--bg-elevated);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 32px 12px; margin-top: auto;
  border-top: 1px dashed var(--brand-bg);
  font-size: 12px; color: var(--fg-secondary);
}
.mf a { color: var(--fg-secondary); }
.mf a:hover { color: var(--brand); }
@media (max-width:600px) {
  .mf { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
}

/* ── Console frame (.app-box) ──────────────────────────────────────────────── */
.app-box {
  position: relative; display: flex; flex-direction: column;
  max-width: 100%; margin: 0 auto;
  border: 1px dashed var(--brand); background: var(--bg-base);
}
/* Corner marks - also used on cards */
.cm { position: absolute; width: 8px; height: 8px; border: 2px solid var(--brand); pointer-events: none; }
.cm.tl { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.cm.tr { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; }
.cm.bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; }
.cm.br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

.ab-top {
  height: 28px; flex-shrink: 0; padding: 0 16px;
  border-bottom: 1px solid var(--brand);
  display: flex; align-items: center; gap: 16px;
}
.ab-title {
  flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--fg-subdued); font: 400 14px/1 var(--font-mono);
}
.traffic { display: flex; gap: 6px; flex-shrink: 0; }
.dot {
  display: block; width: 12px; height: 12px; border-radius: 9999px;
  -webkit-mask: url('/assets/icons/circle-filled.svg') center/contain no-repeat;
  mask: url('/assets/icons/circle-filled.svg') center/contain no-repeat;
}
.dot.r { background: var(--danger); }
.dot.y { background: var(--hint); }
.dot.g { background: var(--success); }

/* ── Mascot (image-only animation, played by site.js) ──────────────────────── */
.mascot-stage { position: relative; width: 137px; height: 175px; flex-shrink: 0; }
.mascot-stage img { width: 137px; height: 175px; image-rendering: pixelated; display: block; }
.mascot-stage .mf-frame { position: absolute; inset: 0; opacity: 0; }
.mascot-stage .mf-frame.active { opacity: 1; }

/* ── Cookie banner (subtle, bottom-left) ─────────────────────────────────── */
.cookie-banner {
  position: fixed; left: 16px; bottom: 16px; z-index: 200;
  max-width: 320px;
  background: var(--bg-elevated);
  border: 1px solid var(--divider-dim);
  padding: 13px 15px;
  font: 400 11.5px/1.55 var(--font-mono);
  color: var(--fg-muted);
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 400ms ease, transform 400ms ease;
  pointer-events: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}
.cookie-banner.show { opacity: 1; transform: none; pointer-events: auto; }
.cookie-banner a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner a:hover { color: var(--brand-tint); }
.cookie-actions { display: flex; justify-content: flex-end; }
.cookie-ok {
  background: var(--brand); color: var(--bg-base); border: none; cursor: pointer;
  font: 400 11.5px/1 var(--font-mono); padding: 8px 18px; min-height: 28px;   /* at least 24px tall: easy to tap */
  transition: background 60ms steps(1);
}
.cookie-ok:hover { background: var(--brand-tint); }
@media (max-width: 600px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}