/* ---------------------------------------------------------------------------
   Today - the landing page.

   Rules this file enforces by shape rather than by discipline:
   - Every row is ONE line. If a row needs two, the summary is doing too much
     and the detail belongs on its own tab.
   - No link is repeated. One "open" per venture, never three per strand.
   - Nothing parked gets its own row; it is counted on its parent's line.
   Borders use a neutral rgba rather than a theme token so this file cannot
   break if the palette is renamed.
--------------------------------------------------------------------------- */

.today-line {
  margin: 2px 0 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}

#panel-today .card { margin-bottom: 14px; }

.trow, .vrow, .arow {
  border-top: 1px solid rgba(128, 128, 128, .18);
  align-items: center;
  display: grid;
  gap: 12px;
}
.trow:first-child, .vrow:first-child, .arow:first-child { border-top: 0; }

/* --- needs you ----------------------------------------------------------- */
.trow {
  grid-template-columns: 20px minmax(130px, 210px) 1fr auto;
  padding: 10px 0;
}
.tnum  { font-size: 12px; opacity: .45; font-variant-numeric: tabular-nums; }
.tname { font-weight: 600; }
.ttext { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- ventures ------------------------------------------------------------ */
/* Every column is sized and the grid hugs the left, so the bar cannot stretch
   across the screen and push the facts that matter into the far corner. A
   progress bar is a glance, not the subject of the row. */
.vrow {
  grid-template-columns: 8px minmax(150px, 240px) minmax(70px, 170px) 42px 88px 118px auto;
  justify-content: start;
  padding: 9px 0;
}
.vdot  { width: 8px; height: 8px; border-radius: 50%; }
.vname { font-weight: 600; }
.vbar  { height: 4px; border-radius: 3px; background: rgba(128, 128, 128, .22); overflow: hidden; }
.vbar i { display: block; height: 100%; border-radius: 3px; }
.vpct  { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.vnote, .vsub { font-size: 12px; color: var(--text-muted); }
.vnote.hot { color: var(--critical); }
.vlink { font-size: 12px; text-align: right; white-space: nowrap; }
.vlink .share.sm { margin-left: 8px; }

/* --- your AIs ------------------------------------------------------------ */
.arow {
  grid-template-columns: minmax(90px, 150px) 1fr auto;
  padding: 9px 0;
}
.aname { font-weight: 600; }
.awork, .aseen { font-size: 12px; color: var(--text-muted); }
.arow.idle .aname { font-weight: 500; opacity: .6; }
.arow.idle .awork { color: var(--warning); }

/* --- narrow screens ------------------------------------------------------
   Flex, not grid, below 760px. A fixed grid track cannot cope with a phone:
   the first attempt here squeezed "6 strands, 5 parked" into a 42px column one
   word per line and dropped every status pill onto its own row, clipped. Flex
   wrap lets each row break where it actually runs out of width, and `order`
   pins the pill and the percentage to the title line where they are read.
   Checked at 390px against real rows before shipping. */
@media (max-width: 760px) {
  .trow, .vrow, .arow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
  }

  .trow .tnum  { flex: 0 0 14px; }
  .trow .tname { flex: 1 1 auto; min-width: 0; }
  .trow .pill  { order: 1; flex: 0 0 auto; white-space: nowrap; }
  .trow .ttext { order: 2; flex: 1 1 100%; white-space: normal; padding-left: 24px; }

  .vrow        { align-items: center; }
  .vrow .vdot  { flex: 0 0 8px; }
  .vrow .vname { flex: 1 1 auto; min-width: 0; }
  .vrow .vpct  { order: 1; flex: 0 0 auto; }
  .vrow .vbar  { order: 2; flex: 1 1 100%; margin-left: 18px; }
  .vrow .vnote { order: 3; margin-left: 18px; }
  .vrow .vsub  { order: 4; }
  .vrow .vlink { order: 5; margin-left: auto; text-align: right; }

  .arow .aname { flex: 1 1 auto; min-width: 0; }
  .arow .aseen { order: 1; flex: 0 0 auto; }
  .arow .awork { order: 2; flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   The preview station on the Projects tab.

   Reading order top to bottom: how big, the thing itself, which version, then
   the list. The three version buttons exist here ONCE and control the screen
   directly above them, instead of being reprinted on every card and strand.
--------------------------------------------------------------------------- */
/* The header (69px) and the tab row (53px) are both sticky, so scrolling the
   station to top:0 hid its title and the Desktop/Phone toggle behind them. */
.station {
  margin-bottom: 16px;
  scroll-margin-top: 116px;
}

.station-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
/* A project name is a name, not a section label. The board styles card <h2>
   as small uppercase, which turned "Dimau Group" into "DIMAU GROUP". */
.station-who h2 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--text-primary);
}
.station-who .hint { margin: 0; }

.station-versions { max-width: 620px; margin: 16px auto 0; }
.station-versions .vbtn[aria-pressed="true"] {
  border-color: var(--series-1);
  box-shadow: inset 0 0 0 2px var(--series-1);
}
.station-versions .vbtn[disabled] { opacity: .45; cursor: not-allowed; }

/* A project card is the button that loads the screen, so it has to look
   pressable and answer a keyboard, not just a mouse. The left border keeps its
   status colour - only the other three edges light up. */
.pcard[data-station-project] { cursor: pointer; }
.pcard[data-station-project]:hover {
  border-top-color: var(--series-1);
  border-right-color: var(--series-1);
  border-bottom-color: var(--series-1);
}
.pcard[data-station-project]:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
.pcard.is-showing { box-shadow: inset 0 0 0 2px var(--series-1), var(--shadow); }

.tap-hint { float: right; font-size: 11px; color: var(--text-muted); }
.pcard.is-showing .tap-hint { color: var(--series-1); }
.pcard.is-showing .tap-hint::after { content: ' \00b7 showing'; }

/* Parked and finished strands: one counted line, not a card each. */
.kid.parked-line { font-size: 12px; color: var(--text-muted); }