/* DSE dashboard.
   Palette and radius follow the house rules: white carries the body, aubergine
   is ink and structure, crimson is the only interactive colour, gold is an
   accent in small doses. ONE radius everywhere - 14px - and no pill shapes.
   Light only, deliberately: a dark-mode phone still shows the white design. */
:root {
  --radius: 14px;

  --white: #FFFFFF;
  --ground: #F3F1F6;          /* aubergine-tinted near-white, so white cards lift */
  --ink: #25182E;             /* aubergine */
  --ink-70: rgba(37, 24, 46, .70);
  --ink-45: rgba(37, 24, 46, .45);
  --ink-12: rgba(37, 24, 46, .12);
  --ink-06: rgba(37, 24, 46, .06);
  --crimson: #CA1F3D;
  --gold: #FFBE00;

  --up: #0F7A4D;              /* semantic, kept clear of brand crimson */
  --down: #B3261E;
  --warn: #9A6B00;            /* darker than accent gold so the two never merge */

  --shadow: 0 1px 2px rgba(37,24,46,.05), 0 8px 24px rgba(37,24,46,.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- header */
header {
  /* Red per Tanim's reference swatch, 23 Sep (replaces the darker #4A0404
     "blood red" from earlier the same day). Still breaks the standing
     prototype rule that crimson is interactive-only, not a background
     colour — flagged, not silently overridden. */
  background: #BA3342;
  color: var(--white);
  padding: 22px 0 26px;
}
.head-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.brand { font-size: 21px; font-weight: 650; letter-spacing: -.01em; }
.sub { color: rgba(255,255,255,.62); font-size: 13px; margin-top: 3px; }
.asof { font-size: 13px; color: rgba(255,255,255,.62); text-align: right; }
.asof b { color: var(--white); font-weight: 600; display: block; font-size: 30px; }
.asof #signin-link { display: inline-block; margin-top: 8px; color: var(--white); font-weight: 650;
                      text-decoration: none; border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius);
                      padding: 5px 14px; }
.asof #signin-link:hover { background: rgba(255,255,255,.12); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ----------------------------------------------------------------- cards */
/* A more specific display rule elsewhere (e.g. .asof #signin-link) otherwise
   beats the browser's own [hidden]{display:none} - bit admin.html once
   already, guarding it here for every element on the public site too. */
[hidden] { display: none !important; }

main { padding: 26px 0 70px; }
section { margin-bottom: 26px; }

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.card + .card { margin-top: 16px; }

h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-45); margin: 0 0 14px; font-weight: 650;
}
h3 { font-size: 16px; margin: 0 0 2px; font-weight: 640; letter-spacing: -.01em; }

.formula {
  font-size: 12px; color: var(--ink-45); margin-top: 6px;
}

.rule-h { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.rule-p { font-size: 13.5px; color: var(--ink-70); line-height: 1.65; margin-top: 6px; }
ul.rule-p { margin: 6px 0 0; padding-left: 20px; }
ul.rule-p li { margin-bottom: 4px; }
ul.rule-p li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- metrics */
.metrics { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.metric { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.metric .label { font-size: 12px; color: var(--ink-45); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.metric .value { font-size: 27px; font-weight: 660; letter-spacing: -.02em; margin-top: 7px; }
.metric .foot { font-size: 12.5px; color: var(--ink-70); margin-top: 5px; }
.up { color: var(--up); } .down { color: var(--down); }

/* ---------------------------------------------------------------- ranges */
.ranges { display: flex; flex-wrap: wrap; gap: 6px; }
.ranges button {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius);
  border: 1px solid var(--ink-12); background: var(--white); color: var(--ink-70);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.ranges button:hover { border-color: var(--ink-45); color: var(--ink); }
.ranges button[aria-pressed="true"] { background: var(--crimson); border-color: var(--crimson); color: var(--white); }

.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }

.chart { width: 100%; height: 380px; }
.chart.short { height: 220px; }

/* ---------------------------------------------------------------- tables */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-45); font-weight: 650; padding: 0 12px 9px; white-space: nowrap;
  border-bottom: 1px solid var(--ink-12);
}
td { padding: 10px 12px; border-bottom: 1px solid var(--ink-06); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--ground); }
td.r, th.r { text-align: right; }
.code { font-weight: 640; }
.name { color: var(--ink-70); font-size: 12.5px; }

/* "why it ranks there" - wrapped to 2-3 lines instead of one long unbroken
   line, so the column stays narrow instead of forcing horizontal scroll. */
td.why {
  white-space: normal; max-width: 220px; color: var(--ink-70); font-size: 12.5px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Per-share holding-period list, best net return first. One line per period,
   red when that period loses money after the toll. */
td.holdings { white-space: normal; min-width: 150px; }
.hp { font-size: 12px; line-height: 1.5; color: var(--ink-70); }
.hp b { color: var(--ink); font-weight: 640; }
.hp.up b { color: var(--up); } .hp.down b { color: var(--down); }
.hp-flag {
  font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--down); margin-left: 4px;
}
.hp-conf {
  font-size: 11px; color: var(--ink-70); font-weight: 600; margin-left: 5px;
}

.chip {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius);
  font-size: 11.5px; font-weight: 640; background: var(--ink-06); color: var(--ink-70);
}
.chip.gold { background: var(--gold); color: var(--ink); }
.chip.warn { background: #FFF3D6; color: var(--warn); }
.chip.top { background: #E8F4EE; color: var(--up); }
.chip.bottom { background: #FBE9E8; color: var(--down); }

button.sig-detail {
  font: inherit; font-size: 12px; font-weight: 640;
  padding: 5px 11px; border-radius: var(--radius);
  border: 1px solid var(--ink-12); background: var(--white); color: var(--crimson);
  cursor: pointer; white-space: nowrap;
}
button.sig-detail:hover { border-color: var(--crimson); background: #FBE9E8; }
tr.sig-detail-row td { background: var(--ground); white-space: normal; }
tr.sig-detail-row:hover td { background: var(--ground); }

/* ----------------------------------------------------------------- notes */
.note {
  background: var(--ground); border-radius: var(--radius); padding: 14px 16px;
  font-size: 13px; color: var(--ink-70); line-height: 1.6;
}
.note strong { color: var(--ink); }
.note.flag { background: #FFF3D6; color: var(--warn); }
.note.flag strong { color: var(--warn); }

details > summary {
  cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-45); font-weight: 650; list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "  ▸"; }
details[open] > summary::after { content: "  ▾"; }
details > summary:hover { color: var(--crimson); }

footer { padding: 26px 0 40px; font-size: 12.5px; color: var(--ink-45); }

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .metric .value { font-size: 23px; }
  .chart { height: 300px; }
}

/* A sub-block keeps the turnover chart inside the same card as the index,
   sharing one time control, without the two reading as one chart. */
.sub-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ink-12); }
.sub-title { font-size: 15px; font-weight: 640; letter-spacing: -.01em; margin-bottom: 2px; }

/* ------------------------------------------------------------ stock picker */
.picker { position: relative; margin-bottom: 16px; }
.picker input {
  font: inherit; width: 100%; max-width: 460px;
  padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid var(--ink-12); background: var(--white); color: var(--ink);
}
.picker input:focus { outline: none; border-color: var(--crimson); }
.results {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  width: 100%; max-width: 460px; max-height: 320px; overflow-y: auto;
  background: var(--white); border: 1px solid var(--ink-12);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px;
}
.results button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 13.5px;
  padding: 8px 10px; border: 0; background: none; color: var(--ink);
  border-radius: var(--radius); cursor: pointer;
}
.results button:hover, .results button:focus { background: var(--ground); outline: none; }
.results .r-code { font-weight: 640; }
.results .r-meta { color: var(--ink-45); font-size: 12px; }
.metrics.tight { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.metrics.tight .metric { box-shadow: none; background: var(--ground); padding: 14px 16px; }
.metrics.tight .value { font-size: 21px; }

/* ------------------------------------------------------------------- tabs */
.tabs-outer { background: #BA3342; position: sticky; top: 0; z-index: 30; }
.tabs { display: flex; gap: 4px; }
.tabs button {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 12px 18px; border: 0; background: none;
  color: rgba(255,255,255,.55);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 2px solid transparent;
}
.tabs button:hover { color: var(--white); }
.tabs button[aria-selected="true"] {
  color: var(--white); background: var(--ground);
  border-bottom-color: var(--crimson);
}
.tabs button[aria-selected="true"] { color: var(--ink); }

/* -------------------------------------------------------- traffic lights */
.lights { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.light-card {
  flex: 1 1 150px; border-radius: var(--radius); padding: 14px 16px;
  background: var(--ground);
}
.light-card .n { font-size: 27px; font-weight: 660; letter-spacing: -.02em; }
.light-card .l { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 640; }
.light-card.green { background: #E8F4EE; } .light-card.green .l, .light-card.green .n { color: var(--up); }
.light-card.red { background: #FBE9E8; } .light-card.red .l, .light-card.red .n { color: var(--down); }
.light-card.grey .l, .light-card.grey .n { color: var(--ink-45); }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.dot.green { background: var(--up); } .dot.red { background: var(--down); }
.dot.grey { background: var(--ink-45); }

.tests-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
              gap: 12px; margin-top: 6px; }
.test-card { background: var(--ground); border-radius: var(--radius); padding: 13px 15px; }
.test-card-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.test-card-head strong { font-size: 13.5px; letter-spacing: -.005em; }
.test-id { color: var(--ink-45); font-size: 10.5px; font-weight: 600; }
.pdots { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.pdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; cursor: default; }
.pdot.green { background: var(--up); } .pdot.red { background: var(--down); }
.pdot.grey { background: var(--ink-12); }

.legend { margin-top: 14px; font-size: 12.5px; color: var(--ink-70); }
.legend div { margin-top: 5px; }
.pass { color: var(--up); font-weight: 650; }
.fail { color: var(--down); font-weight: 650; }

/* ------------------------------------------- every period's return at once */
.perf-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 1px; background: var(--ink-12);
  border: 1px solid var(--ink-12); border-radius: var(--radius);
  overflow: hidden; margin: 4px 0 18px;
}
.perf-cell { background: var(--white); padding: 10px 6px; text-align: center; }
.perf-l { font-size: 10.5px; letter-spacing: .08em; color: var(--ink-45); font-weight: 650; }
.perf-v { font-size: 15px; font-weight: 650; margin-top: 3px; }
@media (max-width: 760px) {
  .perf-strip { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------- my portfolio */
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ground); border-radius: var(--radius);
  padding: 6px 10px; font-size: 13px; font-weight: 600;
}
.pf-chip button {
  border: 0; background: none; cursor: pointer; color: var(--ink-45);
  font: inherit; font-size: 15px; line-height: 1; padding: 0;
}
.pf-chip button:hover { color: var(--crimson); }
.bar { height: 6px; border-radius: var(--radius); background: var(--ink-06); overflow: hidden; min-width: 70px; }
.bar > i { display: block; height: 100%; background: var(--crimson); }
.bar.good > i { background: var(--up); }
input[type="checkbox"] { accent-color: var(--crimson); width: 15px; height: 15px; }