:root {
  --bg: #faf9f5; --card: #ffffff; --ink: #2a2622; --muted: #7a736b;
  --line: #e8e4dc; --clay: #c96442; --green: #2f7d4f; --red: #b3452f;
  --amber: #b7791f;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
header { max-width: 960px; margin: 0 auto; padding: 28px 20px 8px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 600;
     font-size: 1.7em; margin: 0; color: var(--clay); }
.sub { color: var(--muted); margin: 6px 0 0; font-size: 0.95em; }

nav#tabs { max-width: 960px; margin: 16px auto 0; padding: 0 20px;
           display: flex; gap: 6px; flex-wrap: wrap; }
nav#tabs button {
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  padding: 8px 16px; border-radius: 8px 8px 0 0; cursor: pointer; font-size: 0.92em;
}
nav#tabs button.active { color: var(--clay); border-bottom-color: var(--card);
  font-weight: 600; }

main { max-width: 960px; margin: 0 auto; padding: 0 20px 40px; }
.tab { display: none; }
.tab.active { display: block; }
.loading { color: var(--muted); padding: 40px 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px; margin: 14px 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
        padding: 14px 16px; }
.card .k { color: var(--muted); font-size: 0.8em; text-transform: uppercase;
           letter-spacing: 0.04em; }
.card .v { font-size: 1.5em; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.card .v.sm { font-size: 1.05em; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px;
         font-size: 0.82em; font-weight: 600; }
.badge.up { background: #e7f2ec; color: var(--green); }
.badge.down { background: #f7e9e5; color: var(--red); }
.badge.flat { background: #f0ede7; color: var(--muted); }
.badge.high { background: #e7f2ec; color: var(--green); }
.badge.low { background: #f5efe2; color: var(--amber); }

table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.9em; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
         font-variant-numeric: tabular-nums; }
th { color: var(--muted); font-weight: 600; font-size: 0.82em; text-transform: uppercase; }
td.pos { color: var(--green); } td.neg { color: var(--red); }

h2 { font-family: Georgia, serif; font-weight: 600; font-size: 1.2em; margin: 18px 0 4px; }
.note { color: var(--muted); font-size: 0.85em; margin: 6px 0; }
.disclaim { background: #fbf6ee; border: 1px solid #efe4cf; border-radius: 8px;
            padding: 10px 14px; color: #7a6a4a; font-size: 0.85em; margin: 14px 0; }
footer { max-width: 960px; margin: 0 auto; padding: 20px; border-top: 1px solid var(--line);
         color: var(--muted); font-size: 0.82em; }
.err { color: var(--red); }
.hrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth { font-size: 0.88em; }
.auth a, .auth button { color: var(--clay); text-decoration: none; border: 1px solid var(--line);
  background: var(--card); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 0.95em; }
.auth .who { color: var(--muted); margin-right: 8px; }
/* header right side: delay chip · How it works · auth — the sub-line, the
   full-width delay bar and the tab strip were all removed 2026-07-21 (owner call) */
.hright { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hlink { border: 1px solid var(--line); background: var(--card); color: var(--clay);
  padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 0.85em; }
.hlink:hover { background: #fbf9f5; }
nav#tabs[hidden] { display: none; }
.delaybar, .rtbar { display: inline-block; border-radius: 999px;
  padding: 2px 10px; font-size: 0.8em; cursor: help; white-space: nowrap; }
.delaybar { background: #fbf4e9; border: 1px solid #efd9b0; color: #8a6d2f; }
.rtbar { background: #eef4ee; border: 1px solid #cfe0cf; color: var(--green); }
.visionbtn { background: var(--clay); color: #fff; border: none; border-radius: 8px;
  padding: 10px 16px; font-size: 0.92em; cursor: pointer; margin: 6px 0; }
.visionbtn:hover { opacity: 0.9; }
.legend { background: #fbf9f5; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; font-size: 0.82em; color: var(--muted); margin: 6px 0 4px; line-height: 1.75; }
.legend b { color: var(--ink); }
.lg { display: inline-block; padding: 0 3px; font-weight: 600; }
.lg.zone { color: var(--clay); }
.lg.tp { color: var(--green); }
.lg.sl { color: var(--red); }
.lg.mag { color: var(--amber); }

/* chart row (owner call 2026-07-21): the main chart opens on 50 bars, so the four
   AI timeframe charts now sit ALONGSIDE it in a 2x2 panel taking ~40% of the row.
   Click any one to open it full-screen. Collapsing the panel gives the chart the
   full width back; under 900px the panel drops below the chart. */
/* the reader-facing timeframe panel was REMOVED 2026-07-21 (owner call): the main
   chart is the whole row. The AI still reads all four timeframes, and its images
   remain in the audit dropdown as the record of what it was sent. */
.chartrow { display: block; }
.shots { background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; }
.shots summary { cursor: pointer; font-size: 0.78em; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em; }
/* one column, tight: three higher-timeframe charts stacked with no captions
   (each image carries its own title) so the stack matches the chart's height. */
.shotlist { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 4px; margin-top: 6px; }
@media (max-width: 900px) {
  .chartrow { display: block; }
  .shots { max-height: none; margin-top: 10px; }
  .shotlist { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.shot { margin: 0; }
.shot img { width: 100%; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; cursor: zoom-in; display: block; }
.shot figcaption { margin-top: 3px; }

/* full-screen viewer for a chart image (click a shot, click anywhere to close) */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(30,26,22,0.82);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 88vh; background: #fff;
  border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
.lightbox .lbcap { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
  color: #f3efe8; font-size: 0.85em; padding: 0 20px; }
.clockrow { display: flex; gap: 4px; margin: -4px 0 6px; font-variant-numeric: tabular-nums; }

/* one compact status strip: symbol · bar clock + lag · zone-set age (detail in tooltips) */
.statusrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.statusrow h2 { margin: 0; }
.statusrow .chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 2px 10px; font-size: 0.8em; color: var(--muted); cursor: help;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.statusrow .chip:empty { display: none; }

/* live OHLC readout pinned inside the chart (follows the crosshair) */
.chart-legend { position: absolute; top: 8px; left: 10px; z-index: 5;
  pointer-events: none; font-size: 0.78em; color: var(--muted);
  background: rgba(255,255,255,0.78); backdrop-filter: blur(3px);
  border: 1px solid rgba(232,228,220,0.85); border-radius: 6px; padding: 3px 8px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  max-width: calc(100% - 90px); overflow: hidden; text-overflow: ellipsis; }
.chart-legend b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.chart-legend .up { color: var(--green); }
.chart-legend .down { color: var(--red); }

/* honest feed-status dot: green = real-time, amber = delayed tier, grey = idle */
.chart-legend .dot { display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.live { background: #2f9e63; animation: dotpulse 2s infinite; }
.dot.delayed { background: var(--amber); }
.dot.stale { background: #9aa0a6; }
@keyframes dotpulse {
  0% { box-shadow: 0 0 0 0 rgba(47,158,99,0.45); }
  70% { box-shadow: 0 0 0 6px rgba(47,158,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,158,99,0); } }

/* glass on-chart controls (Hyperprop-style): drawing rail left, settings right */
.cbtn { display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,0.8);
  backdrop-filter: blur(3px); color: var(--muted); padding: 0;
  transition: transform 0.08s ease, background 0.12s ease, color 0.12s ease; }
.cbtn:hover { color: var(--ink); background: #fff; }
.cbtn:active { transform: scale(0.93); }
.cbtn.on { color: var(--clay); border-color: var(--clay);
  background: rgba(201,100,66,0.10); }
.chart-tools { position: absolute; left: 8px; top: 46px; z-index: 6;
  display: flex; flex-direction: column; gap: 4px; }
.chart-ctl { position: absolute; right: 78px; top: 8px; z-index: 6; }
.chart-pop { position: absolute; right: 0; top: 30px; z-index: 30; width: 190px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; box-shadow: 0 8px 22px rgba(0,0,0,0.10); font-size: 0.82em; }
.chart-pop label { display: flex; align-items: center; gap: 7px;
  padding: 3px 0; color: var(--ink); cursor: pointer; }
.draw-overlay { position: absolute; inset: 0; z-index: 4;
  pointer-events: none; cursor: crosshair; }

/* dark terminal theme (chart-only) — overlays restyle with the canvas */
.chart-dark { background: #101418; border-color: #262d35 !important; }
.chart-dark .chart-legend { background: rgba(16,20,24,0.75);
  border-color: rgba(255,255,255,0.10); color: #9aa4ae; }
.chart-dark .chart-legend b { color: #e6e9ec; }
.chart-dark .chart-legend .up { color: #22ab94; }
.chart-dark .chart-legend .down { color: #f7525f; }
.chart-dark .cbtn { background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12); color: #9aa4ae; }
.chart-dark .cbtn:hover { background: rgba(255,255,255,0.12); color: #e6e9ec; }
.chart-dark .cbtn.on { color: #e8905f; border-color: #e8905f;
  background: rgba(232,144,95,0.12); }
.chart-dark .chart-pop { background: #161b21; border-color: rgba(255,255,255,0.12);
  color: #c2c9d2; box-shadow: 0 8px 22px rgba(0,0,0,0.45); }
.chart-dark .chart-pop label { color: #c2c9d2; }

/* concise bullet lists inside the two verdict cards */
.cbul { margin: 6px 0 0; padding-left: 1.05em; font-size: 0.88em; color: #4a443d; }
.cbul li { margin: 3px 0; }

/* scannable chart legend: swatch · term · one-line meaning */
.legend2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 4px 22px; background: #fbf9f5; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin: 8px 0; font-size: 0.86em; }
.lgrow { display: grid; grid-template-columns: 22px 110px 1fr; gap: 8px; align-items: center; }
.lgrow b { color: var(--ink); }
.lgrow span:last-child { color: var(--muted); }
.sw2 { display: inline-block; width: 18px; height: 12px; border-radius: 3px; }
.swzone { background: rgba(201,100,66,0.35); border: 1px solid rgba(201,100,66,0.6); }
.swgap { background: #fff; border: 1px solid var(--line); }
.swgrey { background: linear-gradient(#fff 42%, #777 42%, #777 58%, #fff 58%); }
.swblue { background: linear-gradient(#fff 42%, #3a6ea5 42%, #3a6ea5 58%, #fff 58%); }
.swgreen { background: linear-gradient(#fff 42%, var(--green) 42%, var(--green) 58%, #fff 58%); }
.swred { background: linear-gradient(#fff 42%, var(--red) 42%, var(--red) 58%, #fff 58%); }
.swamber { background: linear-gradient(#fff 42%, var(--amber) 42%, var(--amber) 58%, #fff 58%); }
.swnone { background: repeating-linear-gradient(45deg, #eee 0 3px, #fff 3px 6px); border: 1px solid var(--line); }
.swdot { background: radial-gradient(circle at 50% 50%, rgba(255,82,82,0.75) 0 3px, transparent 3px); }
.analysis { background: #fbf9f5; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; margin: 10px 0; }
/* a bar whose analysis failed is SHOWN as failed — never replaced by a stand-in */
.analysis.failed { background: #fdf5f2; border-color: #eccfc4; }
.analysis.failed .ahead { color: var(--red); }
.analysis .ahead { font-size: 1.02em; margin-bottom: 6px; }
.analysis .abody p { margin: 6px 0; }
.analysis .adecision { background: #fff; border-left: 3px solid var(--clay);
  padding: 8px 12px; border-radius: 6px; margin: 8px 0; }
.analysis .akp { margin: 6px 0 0; padding-left: 1.2em; }
.analysis .akp li { margin: 3px 0; }
.akp { margin: 6px 0 0; padding-left: 1.2em; }
.akp li { margin: 3px 0; }

/* past-history mini-section inside a card: coloured W/L (or ✓/✗) pills, newest first */
.mini { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.mini .mk { color: var(--muted); font-size: 0.74em; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 5px; }
.hist { display: flex; flex-wrap: wrap; gap: 3px; }
.hp { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px;
  font-size: 0.72em; font-weight: 700; cursor: help; }
.hp.w { background: #e7f2ec; color: var(--green); }
.hp.l { background: #f7e9e5; color: var(--red); }
.hp.o { background: #f0ede7; color: var(--muted); }
.hsum { margin-top: 6px; font-size: 0.82em; color: var(--muted); }
.hsum .pos { color: var(--green); } .hsum .neg { color: var(--red); }

/* the AI writes in logical points now — bold marks the important/actionable bit */
.apts { margin: 6px 0; padding-left: 1.15em; font-size: 0.94em; color: #4a443d; }
.apts li { margin: 4px 0; }
.apts strong { color: var(--ink); }

/* ---- stepwise AI pipeline audit trail ---- */
.pstep { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin: 10px 0; }
.pstep .ph { margin-bottom: 4px; }
.pstep .pwhat { margin: 4px 0 8px; color: #4a443d; font-size: 0.92em;
  border-left: 3px solid var(--clay); padding-left: 10px; background: #fbf9f5;
  border-radius: 0 6px 6px 0; padding-top: 6px; padding-bottom: 6px; }
.pstep .tfimg { max-width: 100%; border: 1px solid var(--line); border-radius: 8px;
  margin: 6px 0; background: #fff; }
.pstep .qa { margin: 7px 0; }
.pstep .qa .q { font-weight: 600; font-size: 0.9em; }
.pstep .qa .a { font-size: 0.92em; color: #4a443d; margin-top: 1px; padding-left: 10px;
  border-left: 2px solid var(--line); }
.pstep details.pmt { margin-top: 8px; }
.pstep details.pmt summary { cursor: pointer; }

/* ---- marketing "How it works" tab ---- */
.mkt { max-width: 860px; }
.mkt-hero { padding: 18px 0 6px; }
.mkt-kick { display: inline-block; color: var(--clay); font-size: 0.78em; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; }
.mkt-h1 { font-family: Georgia, serif; font-weight: 600; font-size: 1.7em; line-height: 1.25;
  margin: 8px 0 10px; color: var(--ink); }
.mkt-lead { font-size: 1.06em; color: #4a443d; margin: 0 0 6px; max-width: 62ch; }
.mkt-diagram { padding: 18px 16px 14px; margin: 18px 0; }
.mkt-svg { width: 100%; height: auto; display: block; }
.mkt-svg .svl { font: 12px -apple-system, "Segoe UI", sans-serif; fill: var(--muted); }
.mkt-svg .svl.green { fill: var(--green); font-weight: 600; }
.mkt-svg .svl.red { fill: var(--red); font-weight: 600; }
.mkt-svg .svl.amber { fill: var(--amber); }
.mkt-caption { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 6px 18px; margin-top: 12px; font-size: 0.86em; color: var(--muted); }
.mkt-caption b { color: var(--ink); }
.mkt-caption .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  vertical-align: -1px; margin-right: 5px; }
.sw.zone { background: rgba(201,100,66,0.5); } .sw.gap { background: #efece5; border: 1px solid var(--line); }
.sw.tp { background: var(--green); border-radius: 999px; } .sw.sl { background: var(--red); border-radius: 999px; }
.mkt-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin: 18px 0; }
.mkt-step { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.mkt-step .n { display: inline-flex; align-items: center; justify-content: center; width: 26px;
  height: 26px; border-radius: 999px; background: var(--clay); color: #fff; font-weight: 700;
  font-size: 0.9em; }
.mkt-step h3 { font-family: Georgia, serif; font-size: 1.05em; margin: 10px 0 4px; }
.mkt-step p { margin: 0; color: #4a443d; font-size: 0.92em; }
.mkt-sub { font-family: Georgia, serif; font-size: 1.25em; margin: 26px 0 6px; }
.mkt-concepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.mkt-concept { background: #fbf9f5; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.mkt-concept h4 { margin: 0 0 5px; font-size: 1em; }
.mkt-concept p { margin: 0; color: #4a443d; font-size: 0.9em; }
.mkt-conf { margin: 18px 0; }
.mkt-conf h3 { font-family: Georgia, serif; font-size: 1.15em; margin: 0 0 6px; }
.mkt-conf p { margin: 0; color: #4a443d; }
/* our own walkthrough cards (replaced the borrowed slide gallery 2026-07-21) */
.mkt-deep { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px; margin: 10px 0 4px; }
.mkt-deepcard { padding: 16px 18px; }
.mkt-deepcard h4 { margin: 0 0 8px; font-family: Georgia, serif; font-size: 1.05em; }
.mkt-deepcard p { margin: 8px 0 0; color: #4a443d; font-size: 0.92em; }
.mkt-deepcard .mkt-svg { background: #fbf9f5; border: 1px solid var(--line);
  border-radius: 8px; padding: 6px; }

.mkt-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; margin: 10px 0 4px; }
.mkt-gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10;
  border: 1px solid var(--line); border-radius: 10px; cursor: zoom-in; background: #fff;
  transition: transform 0.12s ease, box-shadow 0.12s ease; }
.mkt-gallery img:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); }
.mkt-lightbox { position: fixed; inset: 0; background: rgba(20,16,12,0.82); display: none;
  align-items: center; justify-content: center; z-index: 50; padding: 24px; cursor: zoom-out; }
.mkt-lightbox.on { display: flex; }
.mkt-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }

/* ---- chaos zone stats + best-settings tables ---- */
table.ztab { width: 100%; border-collapse: collapse; font-size: 0.86em; margin: 4px 0; }
table.ztab th, table.ztab td { text-align: center; padding: 4px 8px; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; }
table.ztab th { color: var(--muted); font-weight: 600; font-size: 0.9em; text-transform: none; letter-spacing: 0; }
table.ztab td:first-child, table.ztab th:first-child { text-align: left; }
table.ztab tr.tot td { font-weight: 700; border-top: 2px solid var(--line); }
table.ztab tr.muted td { color: var(--muted); opacity: 0.72; }
table.ztab tr.best td { background: #eef5ef; font-weight: 600; }
table.ztab tr.best td:first-child::after { content: " ★"; color: var(--green); }