/* RavenEye cstore mockups — shared theme (Palette P v3).
   Source of truth for color tokens, nav chrome, and the alert grammar.
   Spec: ../design_handoff_palette/PALETTE.md
   Pages link this file; the folder must travel together (zip it to share —
   a page sent alone loses its styling).
   Page-specific layout stays in each page's own <style>. */

:root {
  /* brand six */
  --re-navy: #0d1b2a;
  --re-gold: #c49a3a;
  --re-ivory: #f3e9dc;   /* accent only: wordmark, type on navy */
  --re-teal: #3e7c7c;
  --re-slate: #5e6b76;
  --re-brick: #8b2635;   /* data marks, history */
  /* alarm variant — brick is too dignified for live exceptions */
  --re-brick-hot: #a62b3c;
  /* text-safe deep variants (small text on light surfaces) */
  --re-teal-deep: #2f6363;
  --re-gold-deep: #7a5c17;
  /* good/healthy data states are viridian — teal alone reads "present",
     not "healthy". Teal stays the chrome/active color. */
  --re-green: #3e7d5a;
  --re-green-deep: #2f5f44;
  /* heat ramp, sequential low->high */
  --re-heat-0: #ede1d0;
  --re-heat-1: #ddbe7e;
  --re-heat-2: #c49a3a;
  --re-heat-3: #a8602f;
  --re-heat-4: #8b2635;

  /* v3 neutrals: the prod v3 dashboard field + white cards for full lift;
     the warm tint lives in the subnav/inset/border ramp, not the field */
  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #f1ede5;
  --surface-3: #ede8dd;
  --surface-4: #e4ded0;
  --border: #e2dcd0;
  --border-strong: #ccc4b4;
  --text: var(--re-navy);
  --text-2: var(--re-slate);
  --text-3: #8b9199;
  --text-4: #b0aba0;
  --accent: var(--re-navy);
  --accent-2: var(--re-gold-deep);
  --good: var(--re-green-deep);
  --warn: var(--re-gold-deep);
  --bad:  var(--re-brick-hot);
  --good-bg: rgba(62,125,90,0.10);
  --warn-bg: rgba(196,154,58,0.16);
  --bad-bg:  rgba(166,43,60,0.10);
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* ── base ── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── nav: navy anchor band ── */
.nav {
  background: var(--accent);
  border-bottom: 1px solid var(--accent);
  position: sticky; top: 0; z-index: 20;
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 1.5rem;
  height: 52px; display: flex; align-items: center; gap: 1.5rem;
}
.brand {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--re-ivory); text-decoration: none;
}
.brand-dot { color: var(--re-gold); }
.nav-links { display: flex; gap: 0.2rem; flex: 1; }
.nav-link {
  padding: 0.4rem 0.7rem; border-radius: 6px; font-size: 0.84rem;
  color: rgba(243,233,220,0.65); text-decoration: none;
}
.nav-link.active { color: #fff; background: rgba(243,233,220,0.14); font-weight: 500; }
.nav-link.hint { color: rgba(243,233,220,0.35); cursor: default; }
.nav-right {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(243,233,220,0.5);
}

.subnav {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 52px; z-index: 19;
}
.subnav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 1.5rem;
  height: 40px; display: flex; align-items: center; gap: 0.2rem;
}
.subnav-link {
  padding: 0.3rem 0.65rem; border-radius: 6px; font-size: 0.8rem;
  color: var(--text-2); text-decoration: none;
}
.subnav-link.active { color: var(--text); background: var(--surface-4); font-weight: 500; }

.page { max-width: 1180px; margin: 0 auto; padding: 1.35rem 1.5rem 3rem; }

/* ── live stamp ── */
.stamp {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--text-3); display: inline-flex; align-items: center; gap: 0.45rem;
}
.stamp .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 0 0 rgba(62,125,90,0.45);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(62,125,90,0.45); }
  70% { box-shadow: 0 0 0 7px rgba(62,125,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(62,125,90,0); }
}
@media (prefers-reduced-motion: reduce) {
  .stamp .dot { animation: none; }
}

/* ── headline ── */
.headline {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.05; font-size: 2.45rem; color: var(--text); margin: 0;
}
.headline b { color: var(--bad); font-weight: 700; }
.headsub { color: var(--text-3); font-size: 0.88rem; margin-top: 0.4rem; }

.illust {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
  border: 1px solid var(--border); padding: 0.08rem 0.38rem; border-radius: 3px;
}

/* ── tooltip ── */
.tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--border-strong);
  color: var(--text-3); font-family: var(--serif); font-style: italic; font-size: 9px;
  cursor: help; margin-left: 0.3rem; letter-spacing: 0; text-transform: none;
}
.tip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: -6px;
  width: 250px; background: var(--accent); color: #fff; font-family: var(--sans);
  font-size: 0.72rem; font-weight: 400; line-height: 1.45; letter-spacing: 0;
  text-transform: none; padding: 0.5rem 0.65rem; border-radius: 6px;
  opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 30; text-align: left;
}
.tip:hover::after, .tip:focus::after { opacity: 1; }

/* ── legend ── */
.legend {
  display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; margin-top: 0.65rem;
  font-family: var(--mono); font-size: 0.62rem; color: var(--text-3);
}
.legend i {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 0.3rem; vertical-align: middle;
}

/* ── demo-notes fold ── */
.demo-notes { margin: 0 0 1rem; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface); max-width: 80ch; }
.demo-notes summary { cursor: pointer; padding: 0.5rem 0.9rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); list-style: none; user-select: none; }
.demo-notes summary::before { content: "▸ "; color: var(--accent-2); }
.demo-notes[open] summary::before { content: "▾ "; }
.demo-notes summary::-webkit-details-marker { display: none; }
.demo-notes .dn-body { padding: 0 0.9rem 0.85rem; }
.demo-notes .dn-why, .demo-notes .why { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--text-2); }
.demo-notes .claims { margin-top: 0.9rem; padding-top: 0; border-top: 0; font-size: 0.75rem; color: var(--text-3); }

/* ── alert grammar: red is a block, never tinted text ── */
/* Filled kind chip on exception cards (OUT OF STOCK, WAITING, ...). */
.ex-kind {
  display: inline-block; font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.07em; font-weight: 700; color: #fff;
  background: var(--bad); padding: 0.16rem 0.45rem; border-radius: 3px;
  margin-top: 0.32rem;
}
.ex.warn .ex-kind { background: var(--warn); }
.ex.calm .ex-kind { background: var(--good); }
/* Hot stat rows: wash band + edge tick, same grammar as the cards. */
.stat-n.hot { color: var(--bad); font-weight: 600; }
.stat-n.hot b { color: var(--bad); }
.stat-row:has(.stat-n.hot) {
  background: var(--bad-bg);
  margin: 0 -0.6rem; padding: 0.45rem 0.6rem;
  border-radius: 5px; border-bottom-color: transparent;
  box-shadow: inset 3px 0 0 var(--bad);
}