/* Component-local green-tint tokens (not in the palette.css contract list):
   light values kept pixel-identical to the reference; dark values give the
   same green-tint intent against the dark ground instead of vanishing. */
body[data-theme=gemini] {
  --tile-selected-bg: #f7fbf5; --row-hover-bg: #f0f3ed; --score-border: #b8cdb9;
}
@media (prefers-color-scheme: dark) {
  html:not([data-scheme="light"]) body[data-theme=gemini] {
    --tile-selected-bg: #1c2a1f; --row-hover-bg: #1a251c; --score-border: #3a5240;
  }
}
html[data-scheme="dark"] body[data-theme=gemini] {
  --tile-selected-bg: #1c2a1f; --row-hover-bg: #1a251c; --score-border: #3a5240;
}

/* ============================================================
   Production stylesheet — centre-pane Board content, ported from
   dashboard/psx-board-preview.html (the reference UI).

   Scope discipline: this sheet owns ONLY what lives inside #view
   on /board. Pane placement, track widths, topbar/statusbar
   geometry and the .shell grid stay with shell.css; the
   tab strip / quick-open menu stay with topbar.css.

   The reference's own `.center-content { min-width:680px;
   padding:18px 18px 24px }` is already carried by
   shell.css's `.main-col > main` rule (#view IS that
   <main>), so it is deliberately NOT repeated here.

   Token translation — the reference sheet reads var(--ink) and
   var(--muted), neither of which exists in this desk. Left as-is
   they would trigger IACVT and silently kill the whole shorthand
   (`border:1px solid var(--undefined)` computes to border-width:0).
   So: reference --ink -> --rink, reference --muted -> --rmuted.
   --hair/--line/--paper/--paper-2/--positive/--negative/--focus/
   --shadow all exist verbatim in palette.css.

   Linked from dashboard/index.html after shell.css, and after
   themes.css overall, so it wins over themes.css's
   body[data-theme=gemini] rules on source order alone — both
   sides are the same specificity (0,2,1), no !important needed.
   ============================================================ */

/* ---- board header ---- */
body[data-theme=gemini] .board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--rline);
}
body[data-theme=gemini] .eyebrow {
  color: var(--rmuted);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body[data-theme=gemini] .board-title {
  color: var(--rink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}
body[data-theme=gemini] .board-actions { display: flex; gap: 6px; flex: none; }

/* the ONE `.quiet-btn` definition. rail.css used to carry a full second
   copy at the identical (0,2,1) specificity; this sheet loads after it, so the
   duplicate silently lost its box and won half its hover — a state neither sheet
   actually drew. The rail now contributes only the `flex:none` it genuinely needs
   (rail.css:299). The press state matches themes.css:1710's idiom so the
   chip feels like every other button on the desk; motion.css's control
   list does not name .quiet-btn, so the timing has to live here. */
body[data-theme=gemini] .quiet-btn {
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--rhair);
  background: var(--paper-2);
  color: var(--rink);
  cursor: pointer;
  font: 400 10px "JetBrains Mono", monospace;
  transition: background var(--mo-hover) var(--mo-ease),
              border-color var(--mo-hover) var(--mo-ease),
              color var(--mo-hover) var(--mo-ease),
              transform var(--mo-press) var(--mo-ease),
              opacity var(--mo-press) var(--mo-ease);
}
body[data-theme=gemini] .quiet-btn:hover { background: var(--rpanel); }
body[data-theme=gemini] .quiet-btn:active { transform: scale(.97); opacity: .9; }

/* ---- market strip ---- */
body[data-theme=gemini] .market-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 13px 0 15px;
  border-bottom: 1px solid var(--rhair);
}
body[data-theme=gemini] .market-stat {
  min-width: 0;
  padding: 0 12px 12px;
  border-right: 1px solid var(--rhair);
}
body[data-theme=gemini] .market-stat:first-child { padding-inline-start: 0; }
body[data-theme=gemini] .market-stat:last-child { border-right: 0; }
body[data-theme=gemini] .market-label { color: var(--rmuted); font-size: 10px; }
body[data-theme=gemini] .market-value { margin-top: 5px; font-size: 13px; font-weight: 700; }
body[data-theme=gemini] .market-change { margin-top: 3px; font-size: 10px; }

body[data-theme=gemini] .board-view .up { color: var(--positive); }
body[data-theme=gemini] .board-view .down { color: var(--negative); }

/* ---- tile grid ---- */
/* two independent flex columns, not CSS Grid named areas: a fixed grid-area
   can't let a tile below a collapsed tile move up to fill the gap. A flex
   column's siblings reflow naturally when one of them shrinks. */
body[data-theme=gemini] .board-grid {
  display: flex;
  gap: 10px;
}
body[data-theme=gemini] .board-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
body[data-theme=gemini] .tile {
  min-width: 0;
  border: 1px solid var(--rhair);
  background: var(--paper-2);
  /* timing lives on the token ladder, not a stray .16s: motion.css's
     `#view .tile` rule (1,2,1) beats this (0,2,1) for every tile that lives
     inside #view, so a raw literal here only ever drifts from it */
  transition: border-color var(--mo-hover) var(--mo-ease),
              background var(--mo-hover) var(--mo-ease),
              box-shadow var(--mo-hover) var(--mo-ease);
}
body[data-theme=gemini] .tile:hover,
body[data-theme=gemini] .tile.is-selected {
  border-color: var(--focus);
  box-shadow: var(--shadow);
}
body[data-theme=gemini] .tile.is-selected { background: var(--tile-selected-bg); }

body[data-theme=gemini] .tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 41px;
  padding: 0 12px;
  border-bottom: 1px solid var(--rhair);
}
body[data-theme=gemini] .tile-title {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body[data-theme=gemini] .tile-meta { color: var(--rmuted); font-size: 10px; }
body[data-theme=gemini] .tile-body { padding: 11px 12px 12px; }
body[data-theme=gemini] .tile-tools { display: flex; align-items: center; gap: 5px; }
body[data-theme=gemini] .mini-select {
  height: 25px;
  padding: 0 20px 0 6px;
  border: 1px solid var(--rhair);
  border-radius: 0;
  background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0L4 5L8 0Z' fill='%236f726b'/%3E%3C/svg%3E") no-repeat right 6px center/8px 5px;
  color: var(--rink);
  font: 400 10px "JetBrains Mono", monospace;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
body[data-theme=gemini] .mini-select:hover { border-color: var(--rline); }
body[data-theme=gemini] .mini-select:focus { outline: none; border-color: var(--focus); }

/* ---- in-tile tabs ---- */
body[data-theme=gemini] .research-tabs {
  display: flex;
  gap: 17px;
  border-bottom: 1px solid var(--rhair);
}
body[data-theme=gemini] .research-tab {
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--rmuted);
  cursor: pointer;
  font: 400 10px "JetBrains Mono", monospace;
  white-space: nowrap;
}
body[data-theme=gemini] .research-tab[aria-selected="true"] {
  border-bottom-color: var(--rink);
  color: var(--rink);
  font-weight: 700;
}

/* ---- tables ---- */
body[data-theme=gemini] .research-table,
body[data-theme=gemini] .data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
body[data-theme=gemini] .research-table th,
body[data-theme=gemini] .research-table td,
body[data-theme=gemini] .data-table th,
body[data-theme=gemini] .data-table td {
  padding: 8px 3px;
  /* --rhair, not the reference's #e2e2da: the tile shell around this table is
     already 1px var(--rhair), and two hairline tones inside one tile is exactly
     the mismatch the outline rule exists to kill */
  border-bottom: 1px solid var(--rhair);
  text-align: start;
  vertical-align: top;
}
body[data-theme=gemini] .research-table th,
body[data-theme=gemini] .data-table th {
  color: var(--rmuted);
  font-size: 9px;
  font-weight: 500;
}
body[data-theme=gemini] .research-table td,
body[data-theme=gemini] .data-table td { font-size: 10px; }
body[data-theme=gemini] .research-table tbody tr:last-child td,
body[data-theme=gemini] .data-table tbody tr:last-child td { border-bottom: 0; }

body[data-theme=gemini] .research-table th:nth-child(1) { width: 12%; }
body[data-theme=gemini] .research-table th:nth-child(2) { width: 41%; }
body[data-theme=gemini] .research-table th:nth-child(3) { width: 19%; }
body[data-theme=gemini] .research-table th:nth-child(4) { width: 10%; }
body[data-theme=gemini] .research-table th:nth-child(5) { width: 18%; }

body[data-theme=gemini] .data-table th:nth-child(1) { width: 23%; }
body[data-theme=gemini] .data-table th:nth-child(2) { width: 19%; }
body[data-theme=gemini] .data-table th:nth-child(3) { width: 19%; }
body[data-theme=gemini] .data-table th:nth-child(4) { width: 20%; }
body[data-theme=gemini] .data-table th:nth-child(5) { width: 19%; }
/* a Board row is a navigation surface (board.js routes on a row click),
   so it fades in like every other hover on the desk instead of snapping —
   motion.css's transition list covers cards and tiles, not table rows */
body[data-theme=gemini] .data-table tbody tr {
  transition: background var(--mo-hover) var(--mo-ease);
}
body[data-theme=gemini] .data-table tbody tr:hover { background: var(--row-hover-bg); }
body[data-theme=gemini] .board-view tbody tr.clickable { cursor: pointer; }
/* row-level fill so the row reads green/red at a glance, not just the %chip */
body[data-theme=gemini] .data-table tbody tr.pos { background: var(--positive-soft); }
body[data-theme=gemini] .data-table tbody tr.neg { background: var(--negative-soft); }
body[data-theme=gemini] .data-table tbody tr.pos:hover,
body[data-theme=gemini] .data-table tbody tr.neg:hover { filter: brightness(0.97); }

body[data-theme=gemini] .score {
  display: inline-flex;
  min-width: 28px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--score-border);
  background: var(--positive-soft);
  color: var(--positive);
  font-weight: 700;
}

body[data-theme=gemini] .tile-link {
  display: inline-flex;
  margin-top: 10px;
  color: var(--rmuted);
  font-size: 10px;
  text-decoration: none;
  /* muted -> ink on hover, eased for the same reason the rows are */
  transition: color var(--mo-hover) var(--mo-ease);
}
body[data-theme=gemini] .tile-link:hover { color: var(--rink); }

/* wraps the Market Data / Indices / Universe tile bodies now that "View full ->" links
   are gone — the complete list lives in place, scrolled instead of linked out */
body[data-theme=gemini] .tile-scroll {
  max-height: 320px;
  overflow-y: auto;
}

/* the ticker cell in every board table (board.js symCell()). A symbol is
   the one column that navigates, so it has to LOOK navigable without turning the
   table into a wall of blue: it inherits the row's ink and only earns an
   underline on hover, the same restraint .tile-link uses. */
body[data-theme=gemini] .sym-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--mo-hover) var(--mo-ease);
}
body[data-theme=gemini] .sym-link:hover { color: var(--focus); text-decoration: underline; }
body[data-theme=gemini] .sym-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---- news wire ---- */
body[data-theme=gemini] .news-list { display: grid; }
body[data-theme=gemini] .news-row {
  display: grid;
  grid-template-columns: 40px 46px minmax(0, 1fr) 14px;
  gap: 6px;
  align-items: baseline;
  padding: 8px 0;
  /* same single-hairline rule as the tables above */
  border-bottom: 1px solid var(--rhair);
}
body[data-theme=gemini] .news-row:last-of-type { border-bottom: 0; }
body[data-theme=gemini] .news-time,
body[data-theme=gemini] .news-source { color: var(--rmuted); font-size: 9px; }
body[data-theme=gemini] .news-source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-theme=gemini] .news-text { min-width: 0; font-size: 10px; line-height: 1.35; }
body[data-theme=gemini] .news-open {
  color: var(--rmuted);
  text-align: end;
  text-decoration: none;
  transition: color var(--mo-hover) var(--mo-ease);
}
body[data-theme=gemini] .news-open:hover { color: var(--rink); }

/* the desk's own note when a source has nothing this cycle — the reference has
   no empty state because its numbers are mock; ours are real and can be empty */
body[data-theme=gemini] .tile-empty {
  padding: 14px 0 4px;
  color: var(--rmuted);
  font-size: 10px;
}

/* ---- breakpoints, ported verbatim ---- */
@media (max-width: 1100px) {
  body[data-theme=gemini] .market-strip {
    grid-template-columns: repeat(5, minmax(98px, 1fr));
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  body[data-theme=gemini] .board-head { gap: 12px; }
  body[data-theme=gemini] .market-strip {
    grid-template-columns: repeat(5, minmax(112px, 1fr));
    overflow-x: auto;
    margin-inline-end: -12px;
    padding-inline-end: 12px;
  }
  body[data-theme=gemini] .market-stat { padding-inline: 10px; }
  /* the two .board-col flex children stack instead of sitting side by side */
  body[data-theme=gemini] .board-grid { flex-direction: column; }
  /* only min-height belongs here. the phone insets moved to pages.css:
     that sheet's `#view .tile-head` / `#view .tile-body` rules are (1,2,1) and
     unconditioned, so any padding written at (0,2,1) here is dead on arrival */
  body[data-theme=gemini] .tile-head { min-height: 38px; }
  body[data-theme=gemini] .news-row { grid-template-columns: 35px 39px minmax(0, 1fr) 12px; }
}