/* Operator — shared site CSS for the 4 product pages (/, /demos/, /handles/, /how/).
   Only rules that are identical across all four pages live here. Each page keeps its
   page-specific rules in its own inline <style>, which is linked AFTER this file so
   inline rules win the cascade. Nav markup is injected by /nav.js. */

:root {
  /* Operator design system — Signal (accent) = --entry (green); Flag (attention) = --signal (amber) */
  --paper: #FAF9F6; --paper-2: #F0EDE6; --paper-3: #F4F1EA;
  --rule: rgba(0,0,0,0.10); --rule-soft: rgba(0,0,0,0.055);
  --ink: #1A1A18; --ink-2: #666260; --ink-faint: #888580;
  --entry: #3D8C6F; --entry-deep: #2F6F57; --entry-soft: #D4EDE3; --entry-lite: #5CB88A;
  --signal: #C8944A; --signal-soft: #F2E4CB;
  --gold: #C8944A;
  --maxw: 1180px; --rail: 72px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.4;
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
a { color: inherit; text-decoration: none; }

/* ============ LEFT RAIL NAV (markup injected by /nav.js) ============ */
.rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail); z-index: 100;
  background: var(--ink); color: var(--paper-2);
  display: flex; flex-direction: column; padding: 16px 0; overflow: hidden;
  transition: width .28s cubic-bezier(.2,.7,.2,1); border-right: 1px solid #15170f;
}
.rail:hover, .rail:focus-within { width: 252px; box-shadow: 16px 0 50px -22px rgba(0,0,0,.6); }
.rail-brand { display: flex; align-items: center; gap: 18px; padding: 6px 24px 20px; white-space: nowrap; }
.rail-mark { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; position: relative; background: var(--paper); color: var(--ink); font-family: "Schibsted Grotesk", serif; font-weight: 600; font-size: 20px; letter-spacing: -1px; }
.rail-mark::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(32,35,30,0.3); }
.rail-brand-text { font-family: "Schibsted Grotesk", serif; font-size: 22px; font-weight: 600; letter-spacing: -.3px; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.rail-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 12px 24px; }
.rail-item { display: flex; align-items: center; gap: 18px; height: 50px; padding: 0 24px; white-space: nowrap; color: rgba(241,239,230,0.66); transition: color .15s, background .15s; position: relative; }
.rail-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
.rail-item.active { color: #fff; }
.rail-item.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; background: var(--entry-lite); }
.rail-icon { width: 24px; height: 24px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rail-label { font-size: 14.5px; opacity: 0; transform: translateX(-6px); transition: opacity .22s, transform .22s; }
.rail:hover .rail-label, .rail:focus-within .rail-label { opacity: 1; transform: none; }
.rail :focus-visible { outline: 2px solid var(--entry-lite); outline-offset: -2px; }
.rail-foot { margin-top: auto; padding: 16px 0 4px; }
.rail-by { font-family: "Spline Sans Mono", monospace; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); white-space: normal; line-height: 1.6; padding: 0 24px; }

/* ============ BUTTONS ============ */
.btn {
  font-family: "Spline Sans Mono", monospace; font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  padding: 14px 26px; border: 1.5px solid var(--entry); background: var(--entry); color: var(--paper);
  cursor: pointer; border-radius: 100px; transition: transform .2s ease, filter .2s ease, background .2s, border-color .2s, color .2s; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(0); }
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--rule); filter: none; }
.btn.ghost:hover { background: transparent; color: var(--entry); border-color: var(--entry); }

/* ============ FOOTER (shared bits — the `footer` padding differs per page, stays inline) ============ */
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-note { font-size: 12.5px; color: var(--ink-faint); font-style: italic; }
.foot-meta { font-family: "Spline Sans Mono", monospace; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Rail collapses to a top bar on small screens. The matching
   `body { padding-left: 0; padding-top: 58px; }` stays inline per page —
   it must come after each page's base body rule to win the cascade. */
@media (max-width: 768px) {
  .rail { width: 100%; height: 58px; bottom: auto; flex-direction: row; align-items: center; padding: 0 18px; gap: 8px; }
  .rail:hover, .rail:focus-within { width: 100%; box-shadow: none; }
  .rail-brand { padding: 0; margin-right: auto; }
  .rail-nav { flex-direction: row; margin-top: 0; gap: 4px; }
  .rail-sep, .rail-by, .rail-item .rail-label { display: none; }
  .rail-item { height: 42px; width: 42px; justify-content: center; padding: 0; }
  .rail-item.active::before { display: none; }
  .rail-item.active { background: rgba(255,255,255,0.08); }
  .rail-foot { display: none; }
}