/* ==========================================================================
   commerce-skin.css
   Makes the Intermind commerce/legal pages (served as-is from the app repo's
   `site/` folder, styled by /assets/site.css + /assets/room-launch.css) read
   as part of the 2026 heygodric.com redesign. Loads last, after both of
   those stylesheets, on every injected page.

   Rule: never touch site/ — this file only overrides the cascade from here.
   Two kinds of overrides below:
     1. design tokens (:root custom properties site.css/room-launch.css both
        already key their rules off — redeclaring these alone reskins most
        of the page for free)
     2. a short list of hardcoded (non-variable) declarations found in
        room-launch.css that bypass those tokens — border-radius on
        .btn/.plan/.notice/.form/.keybox, and the gold .btn.primary /
        .plan.featured / .founder / .notice.accent colors — which need
        explicit overrides or the "Room" gold skin still shows through.
   ========================================================================== */

/* -- 1. Type: same variable Geist used by the new site, own family names so
      it can never collide with room-launch.css's own "Geist" @font-face
      (static 400/500 weights) or the Google Fonts Geist the legal pages
      pull in over the network. -- */
@font-face {
  font-family: "HGSGeist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "HGSGeistMono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* -- 2. Palette: 2026 site tokens (src/styles/base.css) -- */
  --bg: #020306;
  --fg: #eef0f6;
  --card: rgba(255, 255, 255, 0.035);
  --card-2: rgba(255, 255, 255, 0.05);
  --line: rgba(238, 240, 246, 0.12);
  --line-strong: rgba(238, 240, 246, 0.26);
  --w90: rgba(238, 240, 246, 0.9);
  --w70: rgba(238, 240, 246, 0.68);
  --w62: rgba(238, 240, 246, 0.55);
  --w50: rgba(238, 240, 246, 0.42);
  /* Intermind's own product accent (intermind/index.html sets --accent:#3fc1ff
     inline) rather than the studio-wide amber, so these Intermind commerce
     pages read as part of that product, not the homepage. */
  --accent: #3fc1ff;
  --amber: #ffa040;
  --cyan: #3fc1ff;
  --warm: #fff1d6;
  --focus: #fff1d6;
  --radius: 16px;
  --pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sans: "HGSGeist", ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", sans-serif;
  --mono: "HGSGeistMono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

html { background: var(--bg); }
body { font-weight: 380; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html[lang|="zh"] body { font-weight: 400; letter-spacing: 0.01em; }
::selection { background: rgba(255, 241, 214, 0.9); color: #05060a; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 1.5px solid var(--warm); outline-offset: 3px; }

/* -- 3. Headings: the new site's "big + light + tight tracking" display
      type. CJK gets a lighter touch (less negative tracking, +weight) same
      as the new site does for its own .display class. -- */
h1, h2 { font-weight: 300; }
h1 { letter-spacing: -0.04em; }
h2 { letter-spacing: -0.03em; }
html[lang|="zh"] h1, html[lang|="zh"] h2 { font-weight: 340; letter-spacing: -0.01em; line-height: 1.14; }

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  color: var(--w50); font-size: 11.5px; letter-spacing: 0.22em;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.7; flex: none; }
html[lang|="zh"] .eyebrow { letter-spacing: 0.3em; }
.eyebrow.accent { color: var(--accent); }

/* -- 4. Header: hide the old three-part micro top bar (present only on
      terms/privacy/licenses, which don't load room-launch.css) so all six
      pages share one plain nav row, add the studio's ring mark before the
      wordmark, and give nav links the same animated underline. -- */
.topbar { display: none; }
.nav { border-bottom: 1px solid var(--line); }
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-weight: 480; letter-spacing: 0.01em; color: var(--w90);
}
.brand::before {
  content: ""; flex: none; display: inline-block; width: 16px; height: 16px;
  border-radius: 50%; border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from 90deg, var(--cyan), var(--warm), var(--amber), var(--warm), var(--cyan)) border-box;
  box-shadow: inset 0 0 0 4px var(--warm), 0 0 8px rgba(255, 241, 214, 0.7);
}
.nav-links a { position: relative; transition: color 0.3s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.lang { background: rgba(2, 3, 6, 0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* -- 5. Buttons: room-launch.css hardcodes 2px corners and a gold fill on
      .btn.primary, both bypassing the tokens above — override directly. -- */
.btn { border-radius: var(--pill); transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); }
.btn.primary { background: var(--fg); border-color: var(--fg); color: #05060a; }
.btn.primary:hover { background: #fff; color: #05060a; }
.btn:not(.primary):hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.32); }

/* -- 6. Cards / plans: same fix — room-launch.css sets a literal 3px radius
      and a gold gradient on the featured plan. -- */
.card, .plan { border-radius: var(--radius); }
.card:hover { background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)); }
.plan.featured {
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0));
}
.plan .price { font-weight: 300; letter-spacing: -0.03em; }
.plan .founder {
  background: rgba(63, 193, 255, 0.1);
  border-color: rgba(63, 193, 255, 0.4);
  color: var(--accent);
}
.room-note, .plan .note { color: var(--w50); }

/* -- 7. Notices: keep "Not on sale yet" and similar status banners visually
      loud — tinted background + warm bold lead-in — never just outlined. -- */
.notice { border-radius: 14px; }
.notice.accent {
  border: 1.5px solid var(--accent);
  background: linear-gradient(180deg, rgba(63, 193, 255, 0.1), rgba(63, 193, 255, 0.02));
  color: var(--fg);
}
.notice.accent strong { color: var(--warm); font-weight: 480; }

/* -- 8. FAQ accordion: subtle affordance for the open/hovered state, on top
      of the existing token-driven +/- markers and top borders. -- */
details { transition: background 0.3s var(--ease); }
details:hover, details[open] { background: rgba(255, 255, 255, 0.015); }
summary { transition: color 0.3s; }
details:hover summary { color: var(--fg); }

/* -- 9. Download table: readable rows, and filenames that actually look
      like links (site.css's `p a, li a` underline rule doesn't reach table
      cells). -- */
.table-scroll { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table-scroll .release-table { margin: 0; }
.release-table caption { padding: 16px 16px 10px; }
.release-table th, .release-table td { padding: 12px 16px; }
.release-table thead th { background: rgba(255, 255, 255, 0.02); }
.release-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.release-table td a {
  color: var(--fg); text-decoration: underline; text-decoration-color: var(--w50);
  text-underline-offset: 0.15em; transition: text-decoration-color 0.3s;
}
.release-table td a:hover { text-decoration-color: var(--accent); color: var(--accent); }
.release-table .sha { color: var(--w62); }

/* -- 10. Legal long-form (terms / privacy / licenses): a clear divider
       before each numbered section, comfortable list measure, and a
       multi-column layout once a list is long enough to need one (the
       licenses page's ~240-package list) — harmless on the short lists
       elsewhere since columns just collapse to one when content is short. -- */
.legal h2 { padding-top: 30px; border-top: 1px solid var(--line); }
.legal h2:first-of-type { border-top: 0; }
.legal p, .legal li { line-height: 1.7; }
.legal ul { line-height: 1.7; }
@media (min-width: 720px) {
  .legal ul:not(.chips) { column-width: 300px; column-gap: 40px; }
  .legal ul:not(.chips) li { break-inside: avoid; }
}

/* -- 11. Forms / keybox: same radius fix as buttons/cards above. -- */
.form, .keybox { border-radius: var(--radius); }
.form .radio-list label, .form input, .field input, .field select { border-radius: 12px; }
.radio-list label:has(input:checked) { border-color: var(--accent); }
.field input:focus-visible, .field select:focus-visible { outline-color: var(--warm); }

/* -- 12. Footer -- */
.footer { border-top: 1px solid var(--line); }
.footer a[data-support], .footer a { transition: color 0.3s; }

/* -- 13. Small screens: keep the ring mark legible next to the wordmark
       once the nav wraps. -- */
@media (max-width: 700px) {
  .brand { font-size: 13px; }
  .brand::before { width: 14px; height: 14px; }
}