/* SME web app theme (todo.md section 14 W-9, operator spec 2026-09-03):
   dark-chocolate-brown backgrounds, antique-gold borders and numbers.
   Mobile-Chrome-first; desktop simply gets a centered column.

   Chart color law (W-6 + same-day amendment): predicted max = light blue
   solid, predicted min = orange dashed, actual close = BLACK solid,
   50 DMA = pink, 200 DMA = yellow. The plot area sits on a cream card so
   the mandated BLACK actual line is physically readable (documented in
   webapp/README.md, "Colors"); every hex lives in the tokens below. */

:root {
  /* chocolate family */
  --bg:        #2a1a12;   /* page background — dark chocolate */
  --bg-deep:   #1f130d;   /* header / drawer */
  --bg-raised: #3a2418;   /* cards, rows */
  --bg-hover:  #462c1d;
  /* antique gold family */
  --gold:      #c9a227;   /* borders + numbers */
  --gold-hi:   #e3bc4b;   /* emphasis */
  --gold-dim:  #8f7a2e;   /* hairlines */
  --text:      #e8dcc0;   /* body text (parchment) */
  --muted:     #b9a88a;
  --err:       #ff7a6b;
  /* chart series (README color table mirrors these). Operator ratification
     2026-09-03: plot surface = white/off-white card, actual close = GREY
     solid ("keep grey closing on white instead of black"); every hex below
     is picked to read on WHITE while still scanning as its named color. */
  --c-actual:  #6b6b6b;   /* actual close — grey solid (ratified) */
  --c-max:     #2f9be0;   /* predicted max — light blue solid */
  --c-min:     #e0761a;   /* predicted min — orange dashed */
  --c-dma50:   #d8388a;   /* 50 DMA — pink */
  --c-dma200:  #c7ac00;   /* 200 DMA — yellow (dark enough for white) */
  --plot-bg:   #fbf7ee;   /* the white/off-white plot card */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The hidden attribute must ALWAYS win: author display rules (e.g.
   .modal{display:flex}) silently override the UA's [hidden]{display:none},
   which shipped the empty modal shell floating over the login page
   (operator-caught 2026-09-07 on the first live deploy). */
[hidden] { display: none !important; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

.num { color: var(--gold); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.err { color: var(--err); }

/* ---- top bar -------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--gold);
  padding: 0.55rem 0.8rem;
}
.brand { font-size: 1.05rem; margin: 0; flex: 1; color: var(--gold-hi); }
.icon-btn {
  background: none; border: 1px solid var(--gold-dim); border-radius: 6px;
  color: var(--gold); font-size: 1.2rem; padding: 0.15rem 0.55rem;
}
.market-select {
  background: var(--bg-raised); color: var(--gold);
  border: 1px solid var(--gold); border-radius: 6px; padding: 0.3rem 0.4rem;
}

/* ---- drawer --------------------------------------------------------- */
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: min(72vw, 280px);
  background: var(--bg-deep);
  border-right: 1px solid var(--gold);
  padding: 3.2rem 0 1rem;
  display: flex; flex-direction: column;
}
.drawer-link {
  color: var(--text); text-decoration: none;
  padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--gold-dim);
}
.drawer-link.active { color: var(--gold-hi); }
.drawer-foot { margin-top: auto; padding: 1rem 1.2rem; display: grid; gap: 0.5rem; }
.who { color: var(--muted); font-size: 0.8rem; word-break: break-all; }
.scrim { position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,0.55); }

/* ---- cards / view --------------------------------------------------- */
.view { padding: 0.9rem 0.8rem 4rem; max-width: 760px; margin: 0 auto; }
.card {
  background: var(--bg-raised);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 0.9rem;
}
.row-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.8rem; }
.row-bar select { flex: 1; }
select, input[type="text"], input[type="email"], input[type="password"] {
  background: var(--bg-deep); color: var(--text);
  border: 1px solid var(--gold-dim); border-radius: 6px;
  padding: 0.45rem 0.5rem; font-size: 1rem; width: 100%;
}
label { display: block; margin: 0.5rem 0; }
.gold-btn {
  background: var(--gold); color: #241610; font-weight: 600;
  border: none; border-radius: 6px; padding: 0.5rem 1rem; font-size: 1rem;
}
.ghost-btn {
  background: none; color: var(--gold);
  border: 1px solid var(--gold-dim); border-radius: 6px; padding: 0.45rem 0.9rem;
}

/* ---- stock tables ---------------------------------------------------- */
.stock-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.stock-table th, .stock-table td {
  border: 1px solid var(--gold-dim);
  padding: 0.45rem 0.35rem; text-align: right; white-space: nowrap;
}
.stock-table th { color: var(--muted); font-weight: 500; }
.stock-table td:first-child, .stock-table th:first-child { text-align: left; }
.stock-name { color: var(--gold-hi); text-decoration: underline dotted; cursor: pointer; }
.tap { cursor: pointer; }
.sent-select {
  background: var(--bg-deep); color: var(--gold);
  border: 1px solid var(--gold-dim); border-radius: 6px; padding: 0.2rem;
  font-size: 0.86rem; width: auto;
}
.agg { font-size: 0.72rem; color: var(--muted); display: block; }
.table-wrap { overflow-x: auto; }
.empty { text-align: center; padding: 1.6rem 0.4rem; }

/* ---- login ----------------------------------------------------------- */
.login { max-width: 420px; margin: 2.2rem auto; }

/* ---- modal ----------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-card { width: min(92vw, 420px); }
.modal-row { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.9rem; }

/* ---- chart page ------------------------------------------------------ */
.chartpage {
  position: fixed; inset: 0; z-index: 45;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: 0.6rem 0.8rem;
  overflow-y: auto;
}
.chart-head { display: flex; align-items: center; gap: 0.7rem; }
.chart-title { margin: 0; font-size: 1.05rem; }
.chart-holder {
  background: var(--plot-bg);
  border: 1px solid var(--gold);
  border-radius: 10px;
  margin: 0.7rem 0 0.5rem;
  height: min(58vh, 440px);
  touch-action: none;           /* the canvas owns pinch/drag gestures */
}
.chart-holder canvas { display: block; width: 100%; height: 100%; }
/* legend strip sits ON the white plot card (ratified 2026-09-03) so every
   line-colored control stays readable; control text + checkbox accent match
   the line hex exactly (README "Colors" carries the table). */
.chart-toggles {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  padding: 0.5rem 0.7rem;
  background: var(--plot-bg);
  border: 1px solid var(--gold);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}
.chart-toggles label, .legend-fixed {
  display: flex; align-items: center; gap: 0.35rem; margin: 0; font-weight: 600;
}
.chip { display: inline-block; width: 1.05rem; height: 0.28rem; border-radius: 2px; }
.chip-min  { background: var(--c-min); }
.chip-max  { background: var(--c-max); }
.chip-dma50  { background: var(--c-dma50); }
.chip-dma200 { background: var(--c-dma200); }
.chip-actual { background: var(--c-actual); }
.lbl-max    { color: var(--c-max); }
.lbl-min    { color: var(--c-min); }
.lbl-dma50  { color: var(--c-dma50); }
.lbl-dma200 { color: var(--c-dma200); }
.lbl-actual { color: var(--c-actual); }
.lbl-max input    { accent-color: var(--c-max); }
.lbl-min input    { accent-color: var(--c-min); }
.lbl-dma50 input  { accent-color: var(--c-dma50); }
.lbl-dma200 input { accent-color: var(--c-dma200); }

.foot { padding: 0.6rem 0.9rem 1.2rem; text-align: center; }

/* transient failure banner (finding 4b) */
.toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  background: var(--bg-deep); color: var(--err);
  border: 1px solid var(--gold); border-radius: 8px;
  padding: 0.55rem 0.9rem; z-index: 60; max-width: 92vw;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.toast.show { opacity: 1; }
@media (min-width: 700px) { .brand { font-size: 1.2rem; } }