/* ============================================================
   Cranix — retro engineered identity
   Loaded after each page's inline <style>, so it re-skins the
   whole site by remapping the shared design tokens and overriding
   the few hard-coded dark values. One file controls the brand.
   ============================================================ */

:root {
  /* brand tokens */
  --paper: #ECE3CE;
  --paper-2: #E4D9BF;
  --ink: #242019;
  --line: #C8BC9E;
  --teal: #1C8A86;
  --gold: #E0A526;
  --red: #C4392C;
  --orange: #DF741C;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* remap the legacy dark tokens onto the cream palette */
  --bg-color: #ECE3CE;
  --nav-bg: rgba(236, 227, 206, 0.82);
  --surface: #ECE3CE;
  --surface-strong: #E4D9BF;
  --surface-soft: rgba(36, 32, 25, 0.045);
  --primary: #242019;
  --primary-glow: rgba(36, 32, 25, 0.06);
  --text-main: #242019;
  --text-muted: #5b5344;
  --text-soft: #7a7263;
  --border: #C8BC9E;
  --border-strong: #b7a882;
  --shadow: 0 20px 44px -28px rgba(36, 32, 25, 0.45);
}

/* ---- grounds ---- */
html { background: var(--paper) !important; }
body {
  background:
    radial-gradient(120% 70% at 50% -10%, #F2EAD6 0%, var(--paper) 55%) !important;
  background-attachment: fixed !important;
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif !important;
}
/* faint paper grain instead of the white grid */
body::before {
  background-image: radial-gradient(rgba(36, 32, 25, 0.05) 1px, transparent 1px) !important;
  background-size: 5px 5px !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 1 !important;
}
/* the sunset stripe — signature device, frames every page */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--orange), var(--gold), var(--red), var(--teal));
  z-index: 3000;
  pointer-events: none;
}

/* ---- nav (floating pill) ---- */
nav {
  background: var(--nav-bg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 12px 30px -18px rgba(36, 32, 25, 0.35) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}
/* swap the raster logo for the bare C-ring mark, drawn from CSS */
.brand img { display: none !important; }
.brand::before {
  content: "";
  width: 28px; height: 28px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M79.1 25.6 A38 38 0 1 0 79.1 74.4' stroke='%23242019' stroke-width='11'/></svg>") center / contain no-repeat;
}
.nav-links a:hover, .nav-links a.active {
  background: color-mix(in srgb, var(--ink) 8%, transparent) !important;
  border-color: var(--line) !important;
}

/* ---- hero / containers ---- */
.hero, .container, .legal, .content, .sidebar {
  background: rgba(255, 255, 255, 0.30) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.hero::before, .container::before, .content::before { display: none !important; }

/* ---- type ---- */
h1, h2, h3, .card h3 { color: var(--ink) !important; }
h1 { letter-spacing: -0.04em !important; }
h2 { border-bottom: 1px solid var(--line) !important; }
.powered, .date { color: var(--text-soft) !important; font-family: var(--mono); }
a { color: var(--ink); }

/* ---- buttons: solid ink, mono label ---- */
.btn, .beta-btn, .waitlist-btn, .btn-dl, .status-badge,
button:not(.auth-logout):not(.nav-links button) {
  border-radius: 9px !important;
  border: 1px solid var(--ink) !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  box-shadow: none !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
}
.btn:hover, .beta-btn:hover, .btn-dl:hover {
  background: #3a3327 !important;
  border-color: #3a3327 !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}
.btn-disabled, .waitlist-btn { opacity: 0.6; }

/* ---- tags become spec stamps ---- */
.tag, .risk-tag, .recipe-cost {
  border-radius: 4px !important;
  background: transparent !important;
  border: 1px solid var(--product, var(--ink)) !important;
  color: var(--product, var(--ink)) !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.14em !important;
  padding: 4px 9px !important;
}

/* ---- cards: spec sheet ---- */
.card, .section, .construction-card, .info-box, .recipe-card {
  background-color: rgba(255, 255, 255, 0.32) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-top: 3px solid var(--product, var(--ink)) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.card::after, .section::after, .construction-card::after { display: none !important; }
.card:hover {
  transform: translateY(-3px);
  border-color: var(--line) !important;
  border-top-color: var(--product, var(--ink)) !important;
}
.card .arrow, .arrow { color: var(--product, var(--ink)) !important; opacity: 1; }

/* product accents remapped to the Cranix palette */
.card.one    { --product: var(--teal); }
.card.cloud  { --product: var(--orange); }  /* Cranix Player */
.card.notes  { --product: var(--gold); }
.card.nexus  { --product: var(--red); }      /* Cranix Scout */
.card.bot    { --product: var(--ink); }
.card.host   { --product: var(--text-soft); }
.card.minecraft { --product: var(--text-soft); }

/* per-app C-ring marks, drawn from the actual package glyphs */
.card.one, .card.cloud, .card.notes, .card.nexus, .card.host {
  background-repeat: no-repeat !important;
  background-position: right 18px top 20px !important;
  background-size: 30px 30px !important;
}
.card.one {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M79.1 25.6 A38 38 0 1 0 79.1 74.4' stroke='%231C8A86' stroke-width='11'/><circle cx='35' cy='50' r='5.4' fill='%231C8A86'/><circle cx='50' cy='50' r='5.4' fill='%231C8A86'/><circle cx='65' cy='50' r='5.4' fill='%231C8A86'/></svg>") !important;
}
.card.cloud {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M79.1 25.6 A38 38 0 1 0 79.1 74.4' stroke='%23DF741C' stroke-width='11'/><path d='M32 50 C36 39 40 39 44 50 C48 61 52 61 56 50 C60 41 64 41 68 50' stroke='%23DF741C' stroke-width='4.8' stroke-linecap='round'/></svg>") !important;
}
.card.notes {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M79.1 25.6 A38 38 0 1 0 79.1 74.4' stroke='%23E0A526' stroke-width='11'/><rect x='35' y='38.5' width='30' height='4.6' rx='2.3' fill='%23E0A526'/><rect x='35' y='47.7' width='30' height='4.6' rx='2.3' fill='%23E0A526'/><rect x='35' y='56.9' width='22' height='4.6' rx='2.3' fill='%23E0A526'/></svg>") !important;
}
.card.nexus {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M79.1 25.6 A38 38 0 1 0 79.1 74.4' stroke='%23C4392C' stroke-width='11'/><path d='M33 60 L44 49 L52 55 L68 36' stroke='%23C4392C' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/><path d='M61 36 L68 36 L68 43' stroke='%23C4392C' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
.card.host {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M79.1 25.6 A38 38 0 1 0 79.1 74.4' stroke='%237a7263' stroke-width='11'/><rect x='35' y='39' width='30' height='6' rx='3' fill='%237a7263'/><rect x='35' y='48.5' width='30' height='6' rx='3' fill='%237a7263'/><rect x='35' y='58' width='30' height='6' rx='3' fill='%237a7263'/><circle cx='40' cy='42' r='2' fill='%23F2ECDD'/><circle cx='40' cy='51.5' r='2' fill='%23F2ECDD'/><circle cx='40' cy='61' r='2' fill='%23F2ECDD'/></svg>") !important;
}
/* keep card copy clear of the mark */
.card.one h3, .card.cloud h3, .card.notes h3, .card.nexus h3, .card.host h3 { padding-right: 40px; }

/* ---- forms (auth / account) ---- */
input, textarea, select {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
input::placeholder, textarea::placeholder { color: #9a917c !important; }
label { color: var(--text-soft) !important; }
.status-message, [data-auth-status] { color: var(--text-soft); }

/* ---- misc surfaces ---- */
code {
  color: var(--red) !important;
  background: rgba(36, 32, 25, 0.06) !important;
  border: 1px solid var(--line) !important;
}
table { background: rgba(255, 255, 255, 0.28) !important; border: 1px solid var(--line) !important; }
th { background: var(--paper-2) !important; color: var(--ink) !important; }
th, td { border-bottom: 1px solid var(--line) !important; color: var(--text-muted) !important; }
.steps { background: rgba(36, 32, 25, 0.05) !important; border: 1px solid var(--line) !important; }
.sidebar a:hover, .sidebar a.active {
  background: color-mix(in srgb, var(--ink) 8%, transparent) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

/* ---- footer ---- */
footer {
  background: rgba(255, 255, 255, 0.30) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-soft) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
footer a { color: var(--text-soft) !important; }
footer a:hover { color: var(--ink) !important; }

/* ---- auth nav chip ---- */
.auth-user-chip { background: rgba(255, 255, 255, 0.5) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.auth-dot { background: var(--teal) !important; box-shadow: none !important; }

/* ============================================================
   Per-app landing pages — accent theming + unified sections
   Set via a body class (app-one / app-player / app-notes /
   app-scout / app-bot).
   ============================================================ */
body.app-one    { --app: var(--teal); }
body.app-player { --app: var(--orange); }
body.app-notes  { --app: var(--gold); }
body.app-scout  { --app: var(--red); }
body.app-host   { --app: var(--text-soft); }
body.app-bot    { --app: var(--ink); }

/* eyebrow + accented headline */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--app, var(--text-soft)) !important;
  margin-bottom: 14px;
}
body[class*="app-"] .container h1 span { color: var(--app, var(--ink)) !important; }

/* status pill as an accent spec stamp */
.status-badge {
  display: inline-block;
  font-family: var(--mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--app, var(--ink)) !important;
  background: transparent !important;
  border: 1px solid var(--app, var(--ink)) !important;
  border-radius: 4px !important;
  padding: 5px 10px !important;
  box-shadow: none !important;
}
.waitlist-btn, .btn-disabled {
  border-color: var(--app, var(--ink)) !important;
  color: var(--app, var(--ink)) !important;
  background: transparent !important;
}

/* faint per-app C-ring watermark behind the hero */
body[class*="app-"] .container:first-of-type { position: relative; overflow: hidden; }
body.app-one .container:first-of-type::after,
body.app-player .container:first-of-type::after,
body.app-notes .container:first-of-type::after,
body.app-scout .container:first-of-type::after,
body.app-host .container:first-of-type::after {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  right: -80px; top: -90px;
  opacity: 0.10;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
body.app-one .container:first-of-type::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M79.1 25.6 A38 38 0 1 0 79.1 74.4' stroke='%231C8A86' stroke-width='11'/><circle cx='35' cy='50' r='5.4' fill='%231C8A86'/><circle cx='50' cy='50' r='5.4' fill='%231C8A86'/><circle cx='65' cy='50' r='5.4' fill='%231C8A86'/></svg>");
}
body.app-player .container:first-of-type::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M79.1 25.6 A38 38 0 1 0 79.1 74.4' stroke='%23DF741C' stroke-width='11'/><path d='M32 50 C36 39 40 39 44 50 C48 61 52 61 56 50 C60 41 64 41 68 50' stroke='%23DF741C' stroke-width='4.8' stroke-linecap='round'/></svg>");
}
body.app-notes .container:first-of-type::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M79.1 25.6 A38 38 0 1 0 79.1 74.4' stroke='%23E0A526' stroke-width='11'/><rect x='35' y='38.5' width='30' height='4.6' rx='2.3' fill='%23E0A526'/><rect x='35' y='47.7' width='30' height='4.6' rx='2.3' fill='%23E0A526'/><rect x='35' y='56.9' width='22' height='4.6' rx='2.3' fill='%23E0A526'/></svg>");
}
body.app-scout .container:first-of-type::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M79.1 25.6 A38 38 0 1 0 79.1 74.4' stroke='%23C4392C' stroke-width='11'/><path d='M33 60 L44 49 L52 55 L68 36' stroke='%23C4392C' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/><path d='M61 36 L68 36 L68 43' stroke='%23C4392C' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
body.app-host .container:first-of-type::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'><path d='M79.1 25.6 A38 38 0 1 0 79.1 74.4' stroke='%237a7263' stroke-width='11'/><rect x='35' y='39' width='30' height='6' rx='3' fill='%237a7263'/><rect x='35' y='48.5' width='30' height='6' rx='3' fill='%237a7263'/><rect x='35' y='58' width='30' height='6' rx='3' fill='%237a7263'/><circle cx='40' cy='42' r='2' fill='%23F2ECDD'/><circle cx='40' cy='51.5' r='2' fill='%23F2ECDD'/><circle cx='40' cy='61' r='2' fill='%23F2ECDD'/></svg>");
}
body[class*="app-"] .container h1, body[class*="app-"] .container p, body[class*="app-"] .container .eyebrow,
body[class*="app-"] .container .status-badge, body[class*="app-"] .container .hero-actions,
body[class*="app-"] .container button, body[class*="app-"] .container .btn { position: relative; z-index: 1; }

/* unified feature section (shared across all app pages) */
.product-layout { width: min(1120px, calc(100% - 32px)); margin: 0 auto 44px; position: relative; z-index: 1; }
.section-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.feature-card {
  background: rgba(255, 255, 255, 0.32) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--app, var(--ink)) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}
.feature-card h3 { margin: 0 !important; font-size: 0.95rem !important; color: var(--ink) !important; }
.feature-card p { display: none !important; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.btn-secondary { background: transparent !important; color: var(--ink) !important; }

/* checkbox rows (account settings) — keep the box inline with its label */
input[type="checkbox"], input[type="radio"] { width: auto !important; margin: 0 8px 0 0 !important; vertical-align: middle; accent-color: var(--teal); }
.form-row label > input[type="checkbox"] { flex: 0 0 auto; }
.form-row > label:has(> input[type="checkbox"]) {
  display: flex !important;
  align-items: center;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* ---- accessibility ---- */

/* Visible keyboard focus. Uses the ink so it reads on the cream ground; links
   and controls get a clear ring instead of the browser default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* Skip-to-content link (injected by cranix-auth.js). Off-screen until focused. */
.cranix-skip-link {
  position: absolute !important;
  left: 12px;
  top: -60px;
  z-index: 4000;
  padding: 10px 16px;
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: top .16s ease;
}
.cranix-skip-link:focus { top: 12px; }

/* Respect reduced-motion: kill the page-in animation, view transitions and the
   hover/scroll transitions for anyone who asks the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}