:root {
  /* Stonk Bot's accent, light / dark (UI.md's accent table, from its own kit). The theme follows the
     OS through lib/ui's tokens; the app's own names below just point at them. */
  --ui-accent: #1f7a3d;
  --ui-dark-accent: #4fc97a;
  --bg: var(--ui-bg);
  --card-bg: var(--ui-surface);
  --border: var(--ui-border);
  --text: var(--ui-text);
  --muted: var(--ui-dim);
  --green: var(--ui-ok);   /* gain */
  --red: var(--ui-bad);    /* loss */
  --accent: var(--ui-accent);
  --amber: var(--ui-warn);
  --brand: var(--ui-accent);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
}

.topbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* .ui-brand (the banner, 56px) and .ui-visually-hidden (the h1) come from lib/ui. */

/* Its own full-width row (not squeezed between brand/refresh) so that when
   it wraps on a narrow window, every stat stays left-aligned and in one
   visual block instead of an overflow item centering alone mid-page. */
.topbar-stats {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 8px;
}
.topbar-stats .stat { display: flex; flex-direction: column; gap: 2px; }
.topbar-stats .stat-label { color: var(--muted); font-size: 11px; }
.topbar-stats .stat-value { font-size: 18px; font-weight: 600; white-space: nowrap; }

.topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.market-status { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.status-dot.open { background: var(--green); animation: status-pulse 2s infinite; }
.status-dot.pre, .status-dot.post { background: var(--amber); }
@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 50%, transparent); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.muted { color: var(--muted); font-size: 13px; }

#refresh-btn { flex-shrink: 0; }   /* .ui-btn.is-primary: the app's accent */

/* Flex, not grid: each .col packs its own cards tightly by their actual
   height. A grid with explicit row tracks sizes each row to its tallest
   item across every column, which stretches the shorter column's row and
   leaves dead space before the next card can start -- flex columns are
   independent, so Headlines sits right under Sector Rotation regardless of
   how tall My Movers/Watchlist are next to it. */
main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 360px;
  min-width: 360px;
}

/* My Movers/Watchlist carry more columns (financial tables, 7-9 cols) than
   the right column's (Sector Rotation, Earnings, Headlines) -- give it a
   bigger share of the freed-up border space instead of splitting 50/50. */
.col-movers {
  flex: 1.35 1 460px;
  min-width: 460px;
}

.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  overflow-x: auto;
}

.card h2 { margin: 0 0 8px; font-size: 15px; padding-right: 28px; }

.expand-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 5px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.expand-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Expanded pane: hide the other three, let the target fill the whole main
   area. display:contents on .col "unwraps" it so hiding/showing cards
   doesn't leave an empty flex box behind. */
main.has-expanded .col { display: contents; }
main.has-expanded .card { display: none; }
main.has-expanded .card.expanded {
  display: block;
  width: 100%;
  flex: 1 1 100%;
}

.card.expanded h2 { font-size: 22px; }
.card.expanded .summary { font-size: 16px; }
.card.expanded table { font-size: 16px; }
.card.expanded th, .card.expanded td { padding: 10px 14px; }
.card.expanded #list-headlines li { font-size: 16px; padding: 12px 0; }
.card.expanded .headline-meta { font-size: 13px; }
.card.expanded .ask-btn { font-size: 13px; padding: 3px 10px; }

.summary { color: var(--muted); font-size: 13px; margin: 0 0 12px; min-height: 18px; }

.hint { font-size: 12px; margin: 0 0 6px; }

table { width: 100%; border-collapse: collapse; font-size: 11px; }

th, td {
  text-align: right;
  padding: 4px 5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.name-col { text-align: left; }
.mark-col { width: 20px; text-align: center; padding-left: 2px; padding-right: 2px; }

.totals-row td { font-weight: 600; border-top: 1px solid var(--border); border-bottom: none; }

th { color: var(--muted); font-weight: 500; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sortable .sort-arrow { display: inline-block; width: 0.8em; opacity: 0.55; }
th.sortable.sort-active { color: var(--text); }
th.sortable.sort-active .sort-arrow { opacity: 1; }

.pos { color: var(--green); }
.neg { color: var(--red); }
.vol-light { color: var(--muted); }
.vol-heavy { color: var(--amber); font-weight: 600; }

.vol-tod {
  font-size: 0.78em;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  white-space: nowrap;
}

/* Carried forward from the last regular session rather than freshly computed
   -- see fmtIntradayVolBadge in app.js. Dashed/faded so it doesn't read as live. */
.vol-tod-stale {
  opacity: 0.55;
  border-style: dashed;
}

.mark-checkbox { cursor: pointer; accent-color: var(--green); }

tr.marked {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--green);
}
tr.marked td { border-bottom-color: color-mix(in srgb, var(--green) 25%, transparent); }

.symbol-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.symbol-link:hover { color: var(--accent); text-decoration: underline; }
.symbol-link.muted { color: var(--muted); }
.symbol-link.muted:hover { color: var(--accent); }

tr.ticker-detail-row td {
  white-space: normal;
  text-align: left;
  background: color-mix(in srgb, var(--text) 3%, transparent);
  cursor: default;
}

.ticker-detail { padding: 12px 4px; font-size: 13px; }
.ticker-detail.loading, .ticker-detail.error { color: var(--muted); padding: 16px 4px; }
.ticker-detail.error { color: var(--red); }

.ticker-detail-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}
.ticker-detail-header a { color: var(--accent); text-decoration: none; font-size: 12px; }
.ticker-detail-header a:hover { text-decoration: underline; }

.sparkline { width: 100%; height: 60px; color: var(--muted); }
.sparkline.pos { color: var(--green); }
.sparkline.neg { color: var(--red); }
.sparkline-range { display: flex; justify-content: space-between; font-size: 11px; margin-top: 2px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px 16px;
  margin: 12px 0;
}
.stat-cell { display: flex; flex-direction: column; gap: 2px; }
.stat-cell-label { color: var(--muted); font-size: 11px; }
.stat-cell-value { font-size: 13px; font-weight: 500; }

.ticker-detail-headlines { margin-top: 8px; }
.ticker-detail-holdings { margin-top: 16px; }
.ticker-detail-holdings table { margin-top: 6px; font-size: 12px; }
.ticker-detail-holdings th, .ticker-detail-holdings td { padding: 4px 8px; }
.ticker-headlines { list-style: none; margin: 6px 0 0; padding: 0; }
.ticker-headlines li { padding: 4px 0; font-size: 12px; }
.ticker-headlines a { color: var(--text); text-decoration: none; }
.ticker-headlines a:hover { text-decoration: underline; }
.ticker-headlines .headline-meta { color: var(--muted); margin-left: 6px; }

#list-headlines { list-style: none; margin: 0; padding: 0; }

#list-headlines li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
#list-headlines li:last-child { border-bottom: none; }

#list-headlines a { color: var(--text); text-decoration: none; }
#list-headlines a:hover { text-decoration: underline; }

#list-headlines .headline-meta { color: var(--muted); font-size: 12px; margin-left: 6px; }

.ask-btn {
  display: inline-block;
  margin-left: 8px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  cursor: pointer;
}
.ask-btn:hover { border-color: var(--accent); color: var(--accent); }

.timing-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.timing-badge.timing-am { background: var(--ui-raised); color: var(--text); border: 1px solid var(--border); }
.timing-badge.timing-pm { background: var(--ui-warn-soft); color: var(--amber); }

/* ---- page nav (Dashboard / Journal) ---- */
.page-nav { display: flex; gap: 4px; margin-left: 14px; }
.page-nav a { color: var(--muted); text-decoration: none; font-size: 13px; padding: 4px 10px; border-radius: 6px; }
.page-nav a:hover { color: var(--text); }
.page-nav a.active { color: var(--text); background: var(--card-bg); border: 1px solid var(--border); }
.btn-link { color: var(--text); text-decoration: none; font-size: 13px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 6px; }
.btn-link:hover { border-color: var(--brand); color: var(--brand); }

/* ---- trade journal ---- */
main.journal { display: flex; flex-direction: column; gap: 14px; padding: 14px 24px 40px; }
.j-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.j-controls select, .j-controls input, .j-notes input, .j-notes select, .j-notes textarea {
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px;
}
.j-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.chip.on { border-color: var(--brand); color: var(--brand); }
.j-scroll { overflow-x: auto; }
#e-table { font-size: 12px; }
#e-table tbody tr { cursor: pointer; }
#e-table tbody tr:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
#e-table .unit { color: var(--muted); font-size: 10px; }
#p-table { font-size: 13px; max-width: 860px; }
#p-table td, #p-table th { padding: 6px 8px; }
.bar-col { width: 32%; }
.bar { display: inline-block; height: 10px; border-radius: 2px; vertical-align: middle; min-width: 2px; }
.bar-pos { background: var(--green); }
.bar-neg { background: var(--red); }
.side { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); }
.side-buy { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.side-sell { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }

.j-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); overflow-y: auto;
  background: var(--card-bg); border-left: 1px solid var(--border); padding: 18px 18px 40px; z-index: 20;
  box-shadow: var(--ui-shadow);
}
.j-drawer[hidden] { display: none; }
.j-drawer h2 { margin: 0 0 4px; font-size: 17px; padding-right: 30px; }
.j-drawer h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 18px 0 6px; }
.j-drawer dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 0; font-size: 13px; }
.j-drawer dt { color: var(--muted); }
.j-drawer dd { margin: 0; text-align: right; }
.j-drawer table { font-size: 12px; }
.j-notes { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.j-notes label { display: flex; flex-direction: column; gap: 4px; }
.j-notes .wide { grid-column: 1 / -1; }
.j-notes button { background: var(--accent); color: var(--ui-accent-text); border: none; border-radius: 6px; padding: 7px 14px; cursor: pointer; justify-self: start; }

@media (max-width: 700px) {
  main.journal { padding: 12px 16px 32px; }
  .page-nav { margin-left: 4px; }
}