/* ============================================================================
   PANOPTICON — Dashboard page rules (consumes colors_and_type.css + kit.css)
   The d3 colour scales read --fg, --fg-3 and --brand at runtime, so swapping
   the design-system files re-themes the marks as well as the chrome.
   ========================================================================== */

.dash { display: flex; flex-direction: column; flex: 1; }

.pn-bar__readout { white-space: nowrap; }

/* ---- stamps row ---- */
.dash-stamps { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 0;
  border-bottom: 1px solid var(--rule); align-items: center; }
.dash-stamps__status { margin-left: auto; color: var(--fg-3); }
.dash-stamps__status.is-error { color: var(--brand); }
#live-dot { background: var(--fg-3); transition: background var(--dur-2) var(--ease); }
#live-dot.is-busy { background: var(--accent); }

.dash-section { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.dash-section .pn-label, .dash-col .pn-label { color: var(--fg-3); margin: 0 0 14px; }

/* ---- day calendar: month blocks, seven weekday columns, DD over QT ---- */
.dash-cal { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-start; }
.cal-month { flex: 0 0 auto; width: min(100%, 260px);
  transition: opacity var(--dur-3) var(--ease); }
.dash-section .cal-month__label { color: var(--fg); margin: 0 0 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 2px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cal-wd { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
  text-align: center; padding-bottom: 2px; }
.dash-cal .day { display: flex; flex-direction: column; align-items: center; padding: 3px 0 2px;
  border: 1px solid transparent; cursor: pointer; line-height: 1.15;
  transition: color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease),
    border-color var(--dur-1) var(--ease); }
.dash-cal .day b { font-size: 13px; font-weight: 700; }
.dash-cal .day i { font-style: normal; font-size: 10px; }
.dash-cal .day:hover { border-color: var(--fg-3); }
.dash-cal .day.is-selected { border-color: var(--brand); }
.dash-cal .day.is-partial i { font-style: italic; }
/* Revealed one block at a time by renderStrip. The fade is --dur-3, the same
   260ms as MONTH_MS, so a month finishes arriving exactly as the next starts
   and the cascade reads as one movement. visibility keeps an unrevealed month
   unclickable and flips at once in both directions: only opacity animates. */
.dash-cal .cal-month.is-hidden { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cal-month { transition: none; }
}

/* ---- the selected day, replayed ---- */
.dash-now { background: var(--brand); color: var(--bg); padding: 28px 30px 26px;
  margin: 0 -30px; position: relative; }
.dash-now h1 { font-family: var(--font-display); font-weight: 700; margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 48px); letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--bg); opacity: .55; cursor: pointer;
  transition: opacity var(--dur-2) var(--ease); }
.dash-now h1.is-done { opacity: 1; cursor: default; }
.dash-now h2 { font-family: var(--font-mono); font-weight: 400; margin: 14px 0 0;
  font-size: 15px; letter-spacing: .02em; line-height: 1.5; color: var(--bg); }
.dash-now h2 span { opacity: .7; }
.dash-timeline svg { display: block; width: 100%; height: auto; overflow: visible; }
.dash-timeline .tick-mark { fill: var(--bg); transition: opacity var(--dur-2) var(--ease); }
.dash-timeline .hit { fill: transparent; cursor: crosshair; }
.dash-timeline.is-highlighting .tick-mark { opacity: .22; }
.dash-timeline.is-highlighting .tick-mark.is-match { opacity: 1; }

/* The hours, placed by percentage so they line up with the marks above them.
   The two midnights sit on the ends, so they are pulled inside rather than
   centred on the edge they label. */
.dash-hours { position: relative; height: 12px; margin-top: 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  font-variant-numeric: tabular-nums; color: var(--bg); opacity: .7; }
.dash-hours span { position: absolute; top: 0; transform: translateX(-50%); }
.dash-hours span:first-child { transform: none; }
.dash-hours span:last-child { transform: translateX(-100%); }

.dash-tooltip { position: absolute; z-index: 5; pointer-events: none;
  background: var(--bg); color: var(--fg); border: 1px solid var(--fg);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; padding: 6px 9px;
  max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-tooltip b { color: var(--brand); font-weight: 700; }

/* ---- topics / users / rundown ---- */
.dash-tally { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 32px;
  padding: 22px 0 40px; }
.dash-col { min-width: 0; }
.dash-list { font-family: var(--font-mono); font-size: 13px; line-height: 1.75;
  font-variant-numeric: tabular-nums; }
.dash-list .row { cursor: pointer; overflow-wrap: anywhere;
  transition: color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
/* The selection marker, U+25CF written as an escape so the glyph does not
   depend on how a host serves this file. Its space is reserved on every row, so
   selecting one shifts nothing — only the dot's opacity changes. Selection is
   the dot alone and the underline stays the hover affordance: the two used to
   be the same underline, which is why a row deselected under the cursor still
   looked selected. */
.dash-list .row::before { content: "\25CF"; color: var(--brand); font-size: .75em;
  margin-right: 7px; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.dash-list .row.is-active::before { opacity: 1; }
.dash-list .row:hover { text-decoration: underline; text-underline-offset: 3px; }
.dash-list.is-dimming .row:not(.is-related) { opacity: .3; }

.dash-rundown { font-family: var(--font-mono); font-size: 13px; }
.dash-rundown strong { display: block; font-family: var(--font-display); font-size: 17px;
  font-weight: 600; letter-spacing: -.01em; margin-bottom: 2px; overflow-wrap: anywhere; }
.dash-rundown small { display: block; color: var(--fg-2); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.dash-rundown .rd-row { display: grid; grid-template-columns: 1fr 72px 30px; gap: 10px;
  align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); }
.dash-rundown .rd-name { overflow-wrap: anywhere; }
.dash-rundown .rd-track { height: 10px; background: var(--bg-sunken); border: 1px solid var(--rule); }
.dash-rundown .rd-fill { display: block; height: 100%; background: var(--brand); }
.dash-rundown .rd-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.dash-hint { color: var(--fg-3); margin: 0; }

/* ---- replies of the day ---- */
.dash-replies { padding: 22px 0 40px; border-top: 1px solid var(--rule); }
.dash-replies-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  flex-wrap: wrap; margin-bottom: 14px; }
.dash-replies-head .pn-label { margin: 0; color: var(--fg-3); }
.dash-replies-filter { background: none; border: none; cursor: pointer; color: var(--fg); padding: 0; }
.dash-replies-filter b { color: var(--brand); }
.dash-replies-filter:hover { text-decoration: underline; text-underline-offset: 3px; }
.dash-replies-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px;
  align-items: start; }
.reply .pn-tile__top { gap: 12px; }
.reply .pn-tile__label { color: var(--fg); text-decoration: none; min-width: 0; }
.reply .pn-tile__label:hover { text-decoration: underline; text-underline-offset: 3px; }
.reply .pn-tile__corner { text-decoration: none; }
.reply .pn-tile__corner:hover { color: var(--fg); }
.reply__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--fg-3);
  padding: 0 12px 8px; font-variant-numeric: tabular-nums; }
.reply__user { color: var(--brand); font-weight: 700; }
.reply__score { color: var(--fg-2); }
.reply__body { padding: 0 12px 12px; font-family: var(--font-display); font-size: 14px; line-height: 1.5;
  color: var(--fg-2); max-height: 420px; overflow: auto; overflow-wrap: anywhere; }
.reply__body > :first-child { margin-top: 0; }
.reply__body > :last-child { margin-bottom: 0; }
.reply__body p:empty { display: none; }
.reply__body img { display: block; max-width: 100%; height: auto; margin: 6px 0; }
.reply__body a { color: var(--brand); text-decoration: none; }
.reply__body a:hover { text-decoration: underline; text-underline-offset: 3px; }
.reply__body strong, .reply__body b { color: var(--fg); }
.reply__body blockquote { margin: 6px 0; padding-left: 10px; border-left: 2px solid var(--rule); }
.reply__body pre, .reply__body code { font-family: var(--font-mono); font-size: 12px; }
.reply__body .reply-embed { display: inline-block; margin: 4px 0; padding: 4px 8px;
  border: 1px solid var(--rule); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-2); }
.reply__body .reply-embed:hover { border-color: var(--brand); text-decoration: none; }
.reply__body .reply-video { position: relative; display: block; max-width: 480px; margin: 6px 0;
  aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--rule); background: var(--bg-sunken); }
.reply__body .reply-video img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
.reply__body .reply-video::after { content: '▶'; position: absolute; left: 8px; bottom: 8px; padding: 3px 8px;
  background: var(--bg); color: var(--fg); font-family: var(--font-mono); font-size: 11px; }
.reply__body .reply-video:hover { border-color: var(--brand); }
.reply__body .reply-video:hover::after { color: var(--brand); }
.reply__foot { border-top: 1px solid var(--rule); padding: 4px 12px; }
.reply__notes-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 4px 0;
  cursor: pointer; color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; transition: color var(--dur-1) var(--ease); }
.reply__notes-btn:hover:not(:disabled) { color: var(--fg); }
.reply__notes-btn:disabled { cursor: default; opacity: .6; }
.reply.is-open .reply__notes-btn { color: var(--fg); border-bottom-color: var(--accent); }
.reply__notes { list-style: none; margin: 0; padding: 4px 12px 10px; border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--fg-2); }
.reply__notes li { padding: 6px 0; border-top: 1px solid var(--rule); overflow-wrap: anywhere; }
.reply__notes li:first-child { border-top: none; }
.reply__notes b { color: var(--brand); }
.reply__notes a { color: var(--brand); }

.dash-footmark { vertical-align: middle; margin-right: 10px; color: var(--brand); }
.pn-footer a { color: var(--brand); text-decoration: none; }
.pn-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 768px) {
  .pn-bar { flex-wrap: wrap; gap: 10px 20px; padding: 12px 18px; }
  .pn-bar__readout { margin-left: 0; white-space: normal; }
  /* Three nav items no longer fit beside the wordmark at phone width. */
  .pn-bar__left { flex-wrap: wrap; row-gap: 8px; }
  .pn-bar__nav { margin-left: 0; gap: 18px; }
  .pn-wrap { padding: 0 18px; }
  .dash-now { margin: 0 -18px; padding: 22px 18px 20px; min-height: 12em; }
  .dash-tally { grid-template-columns: 1fr; gap: 24px 0; }
  .dash-stamps__status { margin-left: 0; }
}