/* TripAgenda — the board agenda (IA §4b, BRAND_v1 §3/§6).
   Docs: IA_v1.md, BRAND_v1.md
   One markup, two boards via --board-* tokens (tokens.css). The Plan pane's
   row list (.day-agenda-rows) becomes the board: TIME · ITINERARY, two columns,
   no status column (status lives in the expanded detail, BRAND_v1 §3). Light board
   = printed timetable (dark ink on card); dark board = amber on a square panel,
   inset 12px on the light theme, edge-to-edge on dark theme. The axis is decided
   entirely by the tokens — this markup never branches on it. */

/* The board surface: the Plan pane's row list. Square (no radius, BRAND_v1 §7);
   inset margin + drop shadow only materialise on the dark board via tokens. */
.board{
  list-style:none;
  margin:0 var(--board-inset-margin) 4px;
  padding:2px 0 8px;
  background:var(--board-bg);
  border-radius:var(--r-board);
}
:root[data-board="dark"] .board{ box-shadow:0 3px 12px rgba(0,0,0,.22); }

/* Column header — mono, uppercase, quiet. TIME · ITINERARY only. */
.board .colhead{
  display:grid; grid-template-columns:50px 1fr; gap:10px;
  padding:8px 16px 5px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:10px; letter-spacing:1.3px; text-transform:uppercase;
  color:var(--board-colhead);
}

/* A board row. Each agenda item is a <details> whose <summary> is the row and
   whose body is the (card-grounded) expanded detail. The summary carries .brow. */
.board .brow{
  display:grid; grid-template-columns:50px 1fr; gap:10px; align-items:baseline;
  padding:11px 16px; position:relative; cursor:pointer;
  list-style:none; -webkit-tap-highlight-color:transparent;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.board .brow::-webkit-details-marker{ display:none; }
.board .brow::marker{ content:""; }
/* hairline rule between rows (token-coloured; faint amber on the dark board).
   Rows are <li.agenda-row> wrappers, so the rule hangs off the second-and-later li. */
.board .agenda-row + .agenda-row .brow::before{
  content:""; position:absolute; top:0; left:16px; right:16px;
  height:.5px; background:var(--board-rule);
}
.board .brow .tm{
  font-size:16px; font-weight:700; color:var(--board-time);
  letter-spacing:-.3px; font-variant-numeric:tabular-nums;
  text-shadow:var(--glow-time);
}
.board .brow .nm{
  font-size:16px; font-weight:var(--board-name-weight); color:var(--board-name);
  letter-spacing:.2px; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:var(--glow-name);
}
.board .brow .nm .sub{
  display:block; font-size:11px; font-weight:400; letter-spacing:.3px;
  color:var(--board-sub); margin-top:3px; text-shadow:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* tap affordance: a quiet chevron at the row's right edge, in the name column. */
.board .brow .nm-chev{
  position:absolute; right:16px; top:11px;
  color:var(--board-sub); font-size:12px; text-shadow:none;
  transition:transform .18s ease;
}
.board .agenda-event[open] .brow .nm-chev{ transform:rotate(180deg); }

/* The live "now" row — only when the trip is live (set by the renderer). */
.board .brow.now{ background:var(--board-now-wash); }
.board .brow.now::after{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 2px 2px 0; background:var(--board-now-tick);
}

/* Expanded detail opens BELOW the row, full-width, on card ground (var(--card)/
   var(--ink)) so it's readable on BOTH boards — the panel is only the rows' world.
   The detail keeps the app's normal card styling (.agenda-body et al, defined in
   index.html); here we only re-ground it inside the board context. */
.board .agenda-row:has(.agenda-event[open]){
  background:var(--card);
  position:relative; z-index:1;
}
/* On the dark board, an opened row's summary returns to card ground so the
   detail and its header read as one card sitting in front of the panel. */
:root[data-board="dark"] .board .agenda-event[open] .brow .tm,
:root[data-board="dark"] .board .agenda-event[open] .brow .nm{
  color:var(--ink); text-shadow:none;
}
:root[data-board="dark"] .board .agenda-event[open] .brow .nm .sub,
:root[data-board="dark"] .board .agenda-event[open] .brow .nm-chev{
  color:var(--ink2);
}