/* ── twstock 個股新聞 · 分析頁版型（與 valuation/pe_band 同一家族）── */

#box_main {
  flex: 1;
  min-width: 0;
  min-height: 800px;
  padding-top: var(--space-16);
  padding-left: var(--space-16);
  max-width: 1340px;
}

/* ── Page head ── */
.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}
.titlewrap { display: flex; flex-direction: column; gap: var(--space-2); }
.titlewrap h1 { margin: 0; color: var(--ink); }
.titlewrap .meta { font-size: 12px; color: var(--color-greyMedium); }

.toolbar { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.ctrl {
  height: 32px; display: inline-flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-12);
  border: 1px solid var(--border-frame); background: transparent; color: var(--ink);
  border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background var(--motion-fast) ease;
}
.ctrl:hover { background: var(--surface-muted); }
.ctrl.stock { font-weight: 600; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrl .caret {
  width: 6px; height: 6px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-left: 2px;
}
/* Same ID-beats-class override as pe_band.css — keep the toolbar button a
   32px .ctrl instead of modal_stock.css's 44px + background-image arrow. */
#btn_stock_select.ctrl.stock {
  height: 32px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 13px;
  flex: none;
}

/* ── Layout grid ── */
.analysis { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-16); align-items: start; }
.analysis.solo { grid-template-columns: minmax(0, 1fr); }
.hydra { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-16); }
.hydra > .analysis { grid-column: 1 / -1; }
.col-main { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.col-side { display: flex; flex-direction: column; gap: var(--space-16); position: sticky; top: var(--space-16); }

/* ── Card ── */
.card { background: var(--surface-card); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-16); }
.card-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-12); }
.card-h h6 { margin: 0; color: var(--ink); }
.card-h .meta { font-size: 12px; color: var(--color-greyMedium); }

/* studio/base.css (shared with crypto) paints the skeleton with base tokens;
   re-declare it on the role var so it matches this page's card in both themes. */
.is-wait .skel { background: var(--surface-card); }

.mono { font-variant-numeric: tabular-nums; font-family: "Roboto Mono", monospace; }

/* ── News list ── */
/* The list is JS-built, so the wait state needs a reserved box — otherwise the
   card is 0px tall at first paint and jumps when the rows land. */
.is-wait .nwrap { min-height: 420px; }
.nlist { display: flex; flex-direction: column; }
.nday {
  /* The page itself is the scroll container and `nav.fixed-top` occupies the
     first 56px, so the day row parks under the nav rather than at viewport 0 —
     at 0 a 25px row lands entirely behind it. `--site-header-h` (landing/base.css,
     which this base loads) is that height. */
  position: sticky; top: var(--site-header-h); z-index: 2; background: var(--surface-card);
  display: flex; align-items: baseline; gap: var(--space-8);
  padding: var(--space-12) 0 var(--space-6);
  font-size: 12px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--border-hairline);
}
.nday:first-child { padding-top: 0; }
.nday .cnt { font-weight: 400; color: var(--color-greyMedium); }
.nrow {
  display: flex; align-items: baseline; gap: var(--space-12);
  padding: var(--space-8) var(--space-8) var(--space-8) 0;
  margin-left: calc(var(--space-8) * -1); padding-left: var(--space-8);
  border-bottom: 1px solid var(--border-hairline);
  transition: background var(--motion-fast) var(--ease-standard);
}
.nrow:hover { background: var(--surface-row-hover); }
.nrow .tm { flex: none; width: 44px; font-size: 12px; color: var(--color-greyMedium); }
/* Line length cap (canon › 文字行長上限): a headline running the full 1,180px
   main column is unreadable, and the row's hairline would drag a wide empty
   strip to the right of it. */
.nrow .ttl { font-size: 14px; line-height: 1.5; color: var(--ink); text-decoration: none; min-width: 0; max-width: 56em; }
.nrow:hover .ttl { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
/* Outlet names are third-party strings of unknown length — hold the column and
   cut instead of letting one long name push the row. */
.nrow .src { flex: none; max-width: 10em; font-size: 12px; color: var(--color-greyMedium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Side: source mix ── */
.srcdist { display: flex; flex-direction: column; gap: var(--space-8); }
.srcdist .r { display: flex; align-items: baseline; gap: var(--space-8); font-size: 12px; }
.srcdist .r .n { flex: none; width: 74px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srcdist .r .bar { flex: 1; height: 6px; background: var(--border-hairline); border-radius: var(--radius-pill); overflow: hidden; min-width: 0; }
/* One ink bar, not a trading colour: a count of articles is not an up or down. */
.srcdist .r .bar i { display: block; height: 100%; background: var(--ink-2); border-radius: var(--radius-pill); }
/* The tail row ("其他") has a count but no bar — it sums many outlets, so its
   track is blanked out too: an empty track reads as a measured zero, and this
   row is usually the largest number in the card. The span stays so the count
   column keeps its alignment. */
.srcdist .r .bar.nobar { background: transparent; }
/* min-width, not width: three mono digits are ~21.7px at 12px, and the tail row
   passes 100 easily in a busy week. */
.srcdist .r .v { flex: none; min-width: 22px; text-align: right; color: var(--color-greyMedium); }

/* ── Empty (canon › States: no illustration, no error colour, give an exit) ── */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-8); padding: var(--space-48) var(--space-24); text-align: center;
}
.empty p, .empty .hint { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-greyMedium); max-width: 40em; }
/* The two explanatory lines are one group; the way out is a second group —
   8 within, 8+16=24 between (canon › Perceptual #1, 1:3). */
.empty a { margin-top: var(--space-16); font-size: 13px; color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }
.empty a:hover { color: var(--link-quiet-hover); }

/* ── States ── */
.loader_wrap { display: flex; flex-direction: column; gap: var(--space-12); justify-content: center; align-items: center; padding: var(--space-48) 0; color: var(--color-greyMedium); font-size: 14px; }

#box_content { display: flex; flex-direction: column; gap: var(--space-16); }

/* ── RWD ── */
@media (max-width: 1300px) {
  .analysis, .hydra { grid-template-columns: 1fr; }
  .col-side { position: static; }
  #box_main { padding-left: 0; }
  /* The offcanvas nav button already names the section — keep only the meta
     line, which the button doesn't show (web/CLAUDE.md › Frontend UI). */
  .titlewrap h1 { display: none; }
}
@media (max-width: 768px) {
  .pagehead { flex-direction: column; align-items: stretch; }
  .toolbar { width: 100%; flex-direction: column; align-items: stretch; }
  .ctrl.stock { max-width: none; width: 100%; justify-content: space-between; }
  /* Time and outlet move above the headline so the headline gets the full row
     — a 390 column dressed as three columns leaves ~130px for the title. */
  .nrow { flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
  .nrow .tm { order: 1; width: auto; }
  .nrow .src { order: 2; max-width: 60%; }
  .nrow .ttl { order: 3; flex-basis: 100%; max-width: none; }
}