/* Silecat public site — shared tokens and components.
   Ink (#141413) is reserved for the footer band and small chips only;
   section backgrounds stay in the ivory/parchment family. */
:root{
  --ivory:#F0EEE6; --ivory-2:#E9E5D9; --parchment:#F5E9D0; --card:#FAF9F5;
  --ink:#141413; --ink-2:#1F1E1D; --ink-3:#262523;
  --text:#191919; --muted:#6B675B;
  --clay:#CC785C; --clay-bright:#D97757; --clay-deep:#A85B3F;
  --up:#4E7D5B; --down:#A9503E;
  --line:rgba(20,20,19,.14); --line-soft:rgba(20,20,19,.08);
  --d-text:#F0EEE6; --d-muted:#A6A195; --d-line:rgba(240,238,230,.14); --d-line-soft:rgba(240,238,230,.08);
  --shadow-card:0 1px 2px rgba(20,20,19,.05),0 10px 30px rgba(20,20,19,.07),0 2px 10px rgba(204,120,92,.06);
  --fs-hero:clamp(2.9rem,1.9rem + 3.6vw,5rem);
  --fs-h2:clamp(2rem,1.55rem + 1.6vw,3.1rem);
  --fs-stat:clamp(2.1rem,1.7rem + 1.5vw,3.4rem);
  --site-x:clamp(1.25rem,0.5rem + 3.4vw,4.5rem);
}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:1.0313rem;line-height:1.7;-webkit-font-smoothing:antialiased}
.font-display{font-family:Fraunces,Georgia,serif;letter-spacing:-0.03em}
.font-mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
::selection{background:rgba(204,120,92,.45)}
.wrap{max-width:80rem;margin-inline:auto;padding-inline:var(--site-x)}
a,button,summary{outline:none}
:is(a,button,summary,input):focus-visible{box-shadow:0 0 0 2px var(--ivory),0 0 0 4px var(--clay);border-radius:6px}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9375rem;border-radius:999px;padding:.72rem 1.5rem;line-height:1;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn-clay{background:var(--clay);color:#FFF8F2}
.btn-clay:hover{background:var(--clay-deep);transform:translateY(-1px)}
.btn-ink{background:var(--ink);color:var(--d-text)}
.btn-ink:hover{background:var(--ink-3);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--muted);transform:translateY(-1px)}
.btn-sm{padding:.5rem 1.05rem;font-size:.82rem}

/* header */
.site-head{background:rgba(240,238,230,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.site-nav a{color:var(--muted);transition:color .15s ease}
.site-nav a:hover{color:var(--text)}
.site-nav a.active{color:var(--text);font-weight:600;position:relative}
.site-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-1.35rem;height:2px;background:var(--clay)}

/* gauges */
.gauge{height:8px;border-radius:99px;background:rgba(20,20,19,.1);position:relative;overflow:hidden}
.gauge>i{position:absolute;top:0;height:100%;border-radius:99px}
.gauge .mid{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:rgba(20,20,19,.3)}

/* cards */
.panel-light{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-card)}
.card-oat{background:var(--ivory-2);border-radius:14px}
.hairline-row{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding:.6rem 0;font-size:.8125rem}

/* tables */
.sig-table td,.sig-table th{padding:.7rem .75rem;border-bottom:1px solid var(--line-soft);text-align:left;font-size:.875rem;vertical-align:middle}
.sig-table th{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.sig-table tbody tr:hover{background:var(--card)}
.score-chip{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.8125rem;padding:.14rem .55rem;border-radius:6px;background:var(--ink);color:var(--ivory)}
.dir-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:99px;margin-right:.4rem;vertical-align:1px}
.tab-btn{padding:.55rem 1.1rem;border-radius:999px;font-size:.875rem;font-weight:600;color:var(--muted);cursor:pointer}
.tab-btn.active{background:var(--ink);color:var(--ivory)}
.tab-btn:not(.active):hover{color:var(--text)}
.cat-chip{font-family:"IBM Plex Mono",monospace;font-size:.72rem;padding:.14rem .55rem;border-radius:6px;background:var(--ivory-2)}

/* deep-dive request buttons */
.req-btn{border:1px solid var(--clay);color:var(--clay-deep);border-radius:999px;padding:.45rem 1rem;font-size:.8rem;font-weight:600;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.req-btn:hover{background:rgba(204,120,92,.1);transform:translateY(-1px)}
.req-btn[data-state="requested"],.req-btn:disabled{border-color:var(--line);color:var(--muted);background:transparent;cursor:default;transform:none}
.req-note{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--muted)}

/* event analysis disclosure */
.event-expand{margin-top:1rem;border-top:1px solid var(--line);padding-top:.85rem}
.event-expand summary{display:flex;align-items:center;gap:.7rem;cursor:pointer;list-style:none;font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--clay-deep)}
.event-expand summary::-webkit-details-marker{display:none}
.event-expand summary::after{content:"+";margin-left:auto;color:var(--muted);font-size:1rem;line-height:1;transition:transform .18s ease}
.event-expand[open] summary::after{transform:rotate(45deg)}
.event-expand-body{display:grid;gap:1rem;margin-top:1rem;color:var(--muted)}
.event-expand h4{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.event-expand p,.event-expand li{font-size:.86rem;line-height:1.65}
.event-expand ul{display:grid;gap:.3rem;padding-left:1.1rem;list-style:disc}
.impact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.impact-cell{border:1px solid var(--line-soft);border-radius:8px;padding:.75rem;background:rgba(250,249,245,.55)}
.timeline-list{display:grid;gap:.75rem}
.timeline-date{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--clay-deep)}
.timeline-entry{border-left:2px solid var(--line);padding-left:.7rem;margin-left:.2rem}
.source-list{display:grid;gap:.55rem}
.source-list a,.timeline-entry a{color:var(--clay-deep)}
@media (max-width:760px){.impact-grid{grid-template-columns:1fr}}

/* faq */
details.faq{border-top:1px solid var(--line)}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{display:flex;align-items:baseline;gap:1.25rem;padding:1.35rem .25rem;cursor:pointer;list-style:none;font-weight:600;font-size:1.0625rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq .faq-n{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--clay);min-width:1.6rem}
details.faq summary .faq-x{margin-left:auto;color:var(--muted);transition:transform .25s ease}
details.faq[open] summary .faq-x{transform:rotate(45deg)}
details.faq .faq-body{padding:0 .25rem 1.4rem 2.85rem;color:var(--muted);max-width:52rem}

/* grain for parchment */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.skel{color:transparent!important;background:var(--line-soft);border-radius:6px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}

/* footer — the ONLY ink background on the page */
.site-foot{background:var(--ink)}
.site-foot a:hover{text-decoration:underline}

/* toast */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,140%);background:var(--ink);color:var(--d-text);border-radius:10px;padding:.75rem 1.25rem;font-size:.875rem;box-shadow:0 14px 40px rgba(0,0,0,.35);z-index:90;transition:transform .35s cubic-bezier(.34,1.3,.64,1);max-width:min(92vw,30rem)}
.toast.show{transform:translate(-50%,0)}

/* auth modal */
#auth-overlay{position:fixed;inset:0;z-index:95;background:rgba(20,20,19,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:1.25rem}
#auth-overlay.show{display:flex}
.auth-card{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-card);padding:1.75rem;width:100%;max-width:21rem}
.auth-input{background:var(--ivory);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:.55rem .85rem;font-size:.9rem}

/* bookmark stars */
.bm-btn{border:1px solid var(--line);border-radius:999px;width:1.8rem;height:1.8rem;line-height:1;color:var(--muted);cursor:pointer;font-size:.95rem;flex:none;background:transparent;transition:transform .15s ease}
.bm-btn:hover{color:var(--clay-deep);border-color:var(--clay);transform:scale(1.08)}
.bm-btn.on{color:var(--clay-bright);border-color:var(--clay)}

/* ---------- live dive progress card ---------- */
#dive-progress{position:fixed;right:1.25rem;bottom:1.25rem;z-index:95;width:min(21rem,calc(100vw - 2.5rem));
  background:var(--card);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow-card);padding:1rem 1.1rem}
#dive-progress .dp-head{display:flex;align-items:flex-start;gap:.6rem}
#dive-progress .dp-title{font-weight:600;font-size:.85rem;flex:1;line-height:1.35}
#dive-progress .dp-close{color:var(--muted);font-size:1.05rem;line-height:1;padding:.1rem .35rem;border-radius:6px}
#dive-progress .dp-close:hover{color:var(--text)}
#dive-progress .dp-bar{height:6px;border-radius:99px;background:var(--ivory-2);overflow:hidden;margin-top:.65rem;position:relative}
#dive-progress .dp-bar i{position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--clay),var(--clay-deep))}
#dive-progress .dp-bar.run i{animation:dp-slide 1.6s cubic-bezier(.45,.05,.55,.95) infinite}
#dive-progress .dp-bar.done i{left:0;width:100%;background:var(--up);animation:none}
#dive-progress .dp-bar.fail i{left:0;width:100%;background:var(--down);animation:none}
@keyframes dp-slide{0%{left:-40%}100%{left:100%}}
#dive-progress .dp-msg{font-size:.78rem;color:var(--muted);margin-top:.55rem;line-height:1.5}
#dive-progress .dp-extra{font-family:"IBM Plex Mono",monospace;font-size:.66rem;color:var(--muted);margin-top:.3rem}
@media (prefers-reduced-motion:reduce){#dive-progress .dp-bar.run i{animation:none;width:100%;opacity:.45}}

/* ======================= DARK MODE ======================= */
:root[data-theme="dark"]{
  --ivory:#171512; --ivory-2:#242019; --parchment:#201C15; --card:#1E1B17;
  --text:#EDEAE1; --muted:#A6A195;
  --line:rgba(240,238,230,.18); --line-soft:rgba(240,238,230,.09);
  --up:#7FB08C; --down:#D08A78;
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35),0 2px 10px rgba(204,120,92,.05);
}
:root[data-theme="dark"] .site-head{background:rgba(23,21,18,.92)}
:root[data-theme="dark"] .grain::after{opacity:.18;mix-blend-mode:screen}
/* components that pair ink backgrounds with ivory text need fixed light text
   in dark mode (the --ivory variable flips dark) */
:root[data-theme="dark"] .score-chip,
:root[data-theme="dark"] .tab-btn.active,
:root[data-theme="dark"] .btn-ink{background:#2E2B25;color:#F0EEE6}
:root[data-theme="dark"] .btn-ink:hover{background:#3A362E}
:root[data-theme="dark"] .fchip.on,
:root[data-theme="dark"] .pager button.cur,
:root[data-theme="dark"] .rangebtn.on,
:root[data-theme="dark"] .horizon-tab.active{background:#2E2B25!important;color:#F0EEE6!important;border-color:#2E2B25!important}
:root[data-theme="dark"] :is(a,button,summary,input):focus-visible{box-shadow:0 0 0 2px #171512,0 0 0 4px var(--clay)}
:root[data-theme="dark"] .gauge,:root[data-theme="dark"] .mini-meter{background:rgba(240,238,230,.12)}
:root[data-theme="dark"] .gauge .mid{background:rgba(240,238,230,.35)}
:root[data-theme="dark"] .toast{background:#2E2B25}
:root[data-theme="dark"] #auth-overlay{background:rgba(0,0,0,.6)}

@media (prefers-reduced-motion:reduce){
  *,::before,::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
}