/* === MOD.OS design system · materials.css ==========================
   The material + component recipes from system.mods.group (MOD.OS v3),
   packaged for the Dove app. Drop-in with tokens.css loaded first.
   These are the LANGUAGE (surfaces, glass, type roles, status, controls),
   not the marketing sections. Adapt component structure to app UI;
   keep the material values exact so Dove reads as one family.
   Accent discipline: --seal is the SINGLE accent. Never decorative.
   =================================================================== */

/* --- the field: near-black, the whole system sits on this ---------- */
:root { color-scheme: dark; }
.field, body.mods {
  background: #0a0a0a;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- type roles ---------------------------------------------------
   Display = Outfit 800 (titles). Body = Lora serif (prose). Mono =
   JetBrains Mono (chrome, labels, kickers, values, meta). This split
   IS the voice: never set prose in mono or labels in serif. */
.t-display { font-family: var(--font-mark); font-weight: 800; letter-spacing: -0.01em; line-height: 0.98; color: var(--text); }
.t-body    { font-family: var(--font-body); line-height: 1.6; color: rgba(245,245,245,0.72); }
.t-mono    { font-family: var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; }
.t-kicker  { font-family: var(--font-mono); font-size: var(--fs-mono-xs); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); }
.t-eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,236,232,0.6); }
/* red trailing dot on a display title: <h2>Title<span class="dot">.</span></h2> */
.dot { color: var(--seal); }

/* --- frosted glass pane: the signature featured surface ------------
   The heavy blur + faint fill + soft red glow. Use for the one hero
   block per view (in Dove: the active note / editor pane). */
.glass {
  border: 1px solid rgba(255, 222, 216, 0.07);
  border-radius: 8px;
  background: rgba(20, 20, 20, 0.15);
  backdrop-filter: blur(60px) saturate(1.15);
  -webkit-backdrop-filter: blur(60px) saturate(1.15);
  box-shadow: 0 0 140px rgba(220, 38, 38, 0.06);
}

/* --- frosted card: the workhorse surface (list rows, tiles, cards) - */
.card-frost {
  min-width: 0;
  border: 1px solid rgba(255, 222, 216, 0.07);
  border-radius: 8px;
  background: rgba(20, 20, 20, 0.22);
}

/* --- inputs: mono, inset, red focus (the stage-0 editor recipe) ----
   For Dove's note fields / search / editor. */
.mods-input, textarea.mods, input.mods {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  background: rgba(8, 5, 5, 0.15);
  border: 1px solid rgba(255, 218, 210, 0.05);
  border-radius: 5px;
  padding: 16px;
  color: rgba(248, 244, 243, 0.9);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
}
.mods-input::placeholder { color: rgba(255, 234, 230, 0.25); }
.mods-input:focus {
  outline: none;
  border-color: rgba(220, 38, 38, 0.5);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.45), 0 0 0 3px rgba(220, 38, 38, 0.08);
}

/* --- buttons ------------------------------------------------------- */
.btn {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  letter-spacing: 0.14em;
  border-radius: 5px;
  padding: 14px 16px;
  background: rgba(8, 5, 5, 0.65);
  border: 1px solid rgba(255, 218, 210, 0.25);
  color: rgba(248, 244, 243, 0.8);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.btn.primary {
  background: rgba(220, 38, 38, 0.25);
  border: 1px solid rgba(255, 96, 84, 0.15);
  color: #ffdad6;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.05), inset 0 0 7px rgba(220, 38, 38, 0.1);
}
.btn.primary:hover { background: rgba(220, 38, 38, 0.4); color: #fff; }
/* text CTA, rim red */
.cta {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.14em;
  text-decoration: none; color: rgba(255, 96, 84, 0.92);
  transition: color 0.25s ease;
}
.cta:hover { color: #ffdad6; }

/* --- status dots + values: the "loyal to live" vocabulary ----------
   green=live, amber/brass=ready, red=fault. A gated/unknown value reads
   "access gated", never a fake number. Dove: sync state, save state. */
.dot-mark { width: 7px; height: 7px; border-radius: 50%; background: rgba(176,136,66,0.7); display: inline-block; }
.dot-mark.online { background: var(--online); box-shadow: 0 0 7px rgba(53,208,127,0.5); animation: online-pulse 2.4s ease-in-out infinite; }
.dot-mark.alert  { background: var(--seal);  box-shadow: 0 0 8px rgba(224,32,38,0.7); animation: sys-pulse 1.8s ease-in-out infinite; }

@keyframes sys-pulse    { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes online-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 6px rgba(53,208,127,0.42); } 50% { opacity: 0.5; box-shadow: 0 0 12px rgba(53,208,127,0.75); } }
@media (prefers-reduced-motion: reduce) { .dot-mark.online, .dot-mark.alert { animation: none; } }

/* --- chrome / header: fixed, mono, wordmark left --------------------
   MOD<span class="mark-dot">.</span>OS  ← red dot in the wordmark */
.mods-chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px clamp(20px, 4vw, 48px);
  font-family: var(--font-mono);
  pointer-events: none;
}
.mods-chrome > * { pointer-events: auto; }
.mark-dot { color: var(--seal); }

/* --- full-page menu: black overlay, index + label, current marker ---
   Toggle a body class (.nav-open). The active item = red index + white
   label + a pulsing dot. Use for Dove's nav / notebook switcher. */
.menu-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(4px, 1vh, 14px);
  padding: clamp(84px, 15vh, 140px) clamp(28px, 8vw, 96px);
  background: #08080a;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
body.nav-open .menu-overlay { opacity: 1; pointer-events: auto; }
.menu-overlay a { display: flex; align-items: baseline; gap: clamp(16px,5vw,30px); text-decoration: none; }
.menu-overlay .m-idx   { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; color: var(--brass); min-width: 2.6em; }
.menu-overlay .m-label { font-family: var(--font-mark); font-weight: 800; font-size: clamp(30px,8.5vw,56px); line-height: 1; color: rgba(245,245,245,0.42); }
.menu-overlay a.is-current .m-idx { color: var(--seal); }
.menu-overlay a.is-current .m-label { color: #fff; }

/* --- ambient red light (OPTIONAL, signature flourish) --------------
   The marketing site runs a cursor-following red "mass" behind the
   hero. For an app, prefer this STATIC restrained wash on the primary
   surface (calmer, no rAF cost). Full roaming halo runtime available
   on request (backlight.js), but not recommended for a dense notes UI. */
.ambient-glow { position: relative; overflow: hidden; }
.ambient-glow::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 50% at 50% 30%, rgba(150,30,26,0.18), transparent 74%);
}
.ambient-glow > * { position: relative; z-index: 1; }

/* --- responsive spine ---------------------------------------------
   The site collapses multi-column at 1100 and single-column at ~720.
   Nav becomes the full-page overlay below 1100. Mirror these two
   breakpoints in Dove so the family feels consistent. */