/* Shared styles for altoquant.com subpages (use cases, terms, privacy).
   Same tokens as the landing page; prose-friendly layout. */
:root {
  --bg-base: #000000; --glass-border: #333333; --row-border: #1C1C1C;
  --text-1: #FFFFFF; --text-2: #A3A3A3; --text-3: #666666;
  --live: #55FF55; --ok: #44DD44; --failed: #FF5555; --working: #5599FF;
  --needs: #FFFF55; --cyan: #55FFFF;
  --prose: #D9D9D9;          /* reading text — stronger than UI metadata grays */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
body.light {
  --bg-base: #FFFFFF; --glass-border: #CCCCCC; --row-border: #E6E6E6;
  --text-1: #000000; --text-2: #555555; --text-3: #999999;
  --live: #0FA32A; --ok: #2DA44E; --failed: #D1242F; --working: #0969DA;
  --needs: #9A6700; --cyan: #14808C;
  --prose: #2E2E2E;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-y: scroll; } /* scrollbar always reserved — no shift between pages */
body { background: var(--bg-base); color: var(--text-1); font: 13px/1.5 var(--mono); -webkit-font-smoothing: antialiased; }
::selection { background: var(--text-1); color: var(--bg-base); }
a { color: inherit; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 22px 40px; }

.top { display: flex; align-items: center; gap: 10px; padding: 12px 0; flex-wrap: wrap; }
.top > a { display: inline-flex; align-items: center; min-height: 44px; }
.brandmark { height: 22px; display: block; }
body.light .brandmark { filter: invert(1); }
.top .gap { flex: 1; }
.bract { color: var(--text-2); font-weight: 600; text-decoration: none; font-size: 11px; letter-spacing: .05em; cursor: pointer; background: none; border: none; font-family: var(--mono); padding: 16px 8px; margin: -16px -8px; min-height: 44px; }
.bract:hover { color: var(--text-1); }

h1 { font: 700 22px/1.3 var(--mono); margin: 48px 0 6px; letter-spacing: .01em; }
.lede { color: var(--prose); font: 14px/1.6 var(--ui); max-width: 600px; }
h2 { font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-1); margin: 34px 0 10px; }
p, li { font: 13.5px/1.7 var(--ui); color: var(--prose); }
p + p { margin-top: 10px; }
ul { padding-left: 18px; margin: 8px 0; }
li { margin: 4px 0; }
strong { color: var(--text-1); font-weight: 600; }
code { color: var(--cyan); font-family: var(--mono); font-size: 12px; }
.dim { color: var(--text-3); }
.updated { margin-top: 36px; color: var(--text-2); font-size: 11px; font-family: var(--mono); }

/* terminal snippet panel (use-case pages) */
.panel { position: relative; border: 1px solid var(--glass-border); margin: 26px 0; }
.phead {
  position: absolute; top: -8px; left: 12px; padding: 0 7px; background: var(--bg-base);
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}
.term { padding: 20px 16px 16px; font: 12.5px/1.6 var(--mono); overflow-x: auto; white-space: pre; color: var(--text-1); }
.t-dim { color: var(--text-3); } .t-green { color: var(--live); } .t-cyan { color: var(--cyan); }
.t-yellow { color: var(--needs); } .t-blue { color: var(--working); }
.tcur { display: inline-block; width: 7px; height: 13px; background: var(--live); vertical-align: -2px; }
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* mechanics chips (bracket text, not pills) */
.mechs { margin: 18px 0 0; color: var(--prose); font-size: 11px; font-weight: 700; letter-spacing: .04em; font-family: var(--mono); }
.mechs span { margin-right: 12px; white-space: nowrap; }

/* use-case index rows */
.ucrow { display: block; text-decoration: none; padding: 10px 0; border-bottom: none; }
.ucrow .t { font: 600 13px var(--mono); color: var(--text-1); }
.ucrow .t .arrow { color: var(--text-2); font-weight: 400; }
.ucrow:hover .t .arrow { color: var(--text-1); }
.ucrow .d { margin-top: 2px; font: 12.5px/1.55 var(--ui); color: var(--prose); max-width: 620px; }

.cta { margin-top: 36px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 18px;
  border: 1px solid var(--glass-border); color: var(--text-1); font: 12px var(--mono);
  letter-spacing: .04em; text-decoration: none; cursor: pointer; background: transparent;
}
.btn:hover { border-color: var(--text-3); }
.btn.primary { background: var(--live); border-color: var(--live); color: #03200A; font-weight: 700; }
body.light .btn.primary { color: #FFFFFF; }

footer { margin-top: 64px; padding: 8px 0 0; border-top: 1px solid var(--row-border); display: flex; gap: 0 18px; align-items: center; flex-wrap: wrap; color: var(--text-2); font-size: 11px; font-weight: 600; }
footer a { color: var(--text-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin: 0 -8px; }
footer a:hover { color: var(--text-1); text-decoration: underline; }
footer .gap { flex: 1; }

/* the no-tracking notice (shown once, dismissible) */
.gdpr {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 16px calc(4px + env(safe-area-inset-bottom));
  background: var(--bg-base); border-top: 1px solid var(--glass-border);
  font-size: 11px; font-weight: 600; color: var(--text-2);
}
.gdpr a, .gdpr button.bract { color: var(--text-2); padding: 14px 10px; margin: 0; display: inline-flex; align-items: center; }
.gdpr a:hover, .gdpr button.bract:hover { color: var(--text-1); }
.gdpr .gap { flex: 1; }
.gdpr[hidden] { display: none !important; }

/* industry deep-dives: flow diagram (made visual, in-idiom) */
.flow { display: flex; align-items: stretch; margin: 26px 0; flex-wrap: wrap; row-gap: 10px; }
.fbox {
  border: 1px solid var(--glass-border); padding: 10px 14px; min-width: 150px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.fbox .ft { font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-1); }
.fbox .fs { font: 400 11.5px/1.45 var(--ui); color: var(--prose); }
.farrow { display: flex; align-items: center; padding: 0 9px; color: var(--text-2); font-weight: 700; font-family: var(--mono); }

/* deep-dive job table (the jobs that emerge) */
.jobs { border: 1px solid var(--glass-border); margin: 26px 0; position: relative; padding: 16px 14px 8px; }
.jobs .phead { background: var(--bg-base); }
.jrow { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; }
.jrow .jn { width: 200px; flex-shrink: 0; font: 600 12px var(--mono); color: var(--text-1); }
.jrow .js { width: 110px; flex-shrink: 0; font: 600 10.5px var(--mono); color: var(--text-2); }
.jrow .jd { font: 12.5px/1.55 var(--ui); color: var(--prose); }
@media (max-width: 700px) { .jrow { flex-wrap: wrap; } .jrow .jd { width: 100%; } }

/* mobile: terminals wrap instead of scrolling sideways; comfortable buttons */
@media (max-width: 700px) {
  .term { white-space: pre-wrap; word-break: break-word; font-size: 11px; }
  .btn { height: 44px; }
  .flow { flex-direction: column; }
  .farrow { align-self: center; transform: rotate(90deg); padding: 6px 0; }
}

/* illustrated industry cards (index pages) */
.indgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; margin-top: 22px; }
@media (max-width: 700px) { .indgrid { grid-template-columns: 1fr; } }
.indcard { position: relative; border: 1px solid var(--glass-border); padding: 22px 14px 14px; text-decoration: none; display: block; min-width: 0; }
.indcard .phead { background: var(--bg-base); }
.indcard:hover { border-color: var(--text-3); }
.indart { font: 11px/1.55 var(--mono); white-space: pre; color: var(--text-2); margin-bottom: 10px; overflow: hidden; }
.indcard .ilead { font: 12.5px/1.55 var(--ui); color: var(--prose); display: block; }
.indcard .ilead b { color: var(--text-1); font-weight: 700; }
.indcard .iarw { position: absolute; top: -8px; right: 12px; padding: 0 7px; background: var(--bg-base); color: var(--text-2); font: 600 10px var(--mono); }
.indcard:hover .iarw { color: var(--text-1); }
.t-red { color: var(--failed); }

/* fun: hover = inverse video — terminal selection. Pointer devices only. */
@media (hover: hover) {
  .indcard:hover { background: var(--text-1); border-color: var(--text-1); }
  .indcard:hover .phead, .indcard:hover .iarw { background: var(--text-1); }
  .indcard:hover, .indcard:hover * { color: var(--bg-base) !important; }
  .ucrow { padding: 10px 8px; margin: 0 -8px; }
  .ucrow:hover { background: var(--text-1); }
  .ucrow:hover, .ucrow:hover * { color: var(--bg-base) !important; }
  .btn:hover { background: var(--text-1); border-color: var(--text-1); color: var(--bg-base); }
  .btn.primary:hover { background: var(--live); border-color: var(--live); color: #03200A; }
  body.light .btn.primary:hover { color: #FFFFFF; }
}

.road { position: relative; border: 1px solid var(--glass-border); margin-top: 26px; padding: 18px 14px 12px; }
.road .phead { background: var(--bg-base); }

/* contact rows */
.crow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.crow .clabel { width: 70px; flex-shrink: 0; font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.crow a { color: var(--text-1); font: 600 12.5px var(--mono); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.crow a:hover { color: var(--live); }
.crow .cmid { color: var(--text-2); }
.crow .cdim { color: var(--text-2); font: 11.5px var(--ui); }
@media (max-width: 480px) { .crow .cdim { width: 100%; margin-top: -10px; padding-left: 82px; } }

/* storyboard boxes (reveal via visibility = zero layout shift) */
.sbox { position: relative; border: 1px solid var(--glass-border); padding: 22px 14px 14px; }
.sbox .phead { background: var(--bg-base); }
.sbox p { font: 13px/1.65 var(--ui); color: var(--prose); margin: 0; }
.sbox .cardart { font: 11px var(--mono); color: var(--text-2); margin-bottom: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sarrow { text-align: center; color: var(--text-2); font: 700 12px var(--mono); padding: 7px 0; }
.veil { visibility: hidden; }
.chart { display: block; white-space: pre; overflow-x: auto; }
@media (max-width: 480px) { .chart { font-size: 8.5px; line-height: 1.5; } }