/* The console — the working surface.
   Not a settings page: a rack of stories on the left, the transmission log on
   the right, and a strip across the top saying what is true right now. */

.console-body{background:var(--bg)}

/* ────────────────────────────────────────────────────────── topbar ─── */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:1.6rem;
  padding:.7rem clamp(1rem,3vw,1.8rem);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.topbar-tabs{display:flex;gap:.2rem;align-items:center}
.ttab{
  border:0;background:none;color:var(--muted);cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:500;text-decoration:none;
  padding:.4rem .7rem;border-radius:var(--r-sm);
}
.ttab:hover{color:var(--ink);background:var(--surface)}
.ttab.active{color:var(--accent);background:var(--accent-dim)}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.who{font-size:.78rem;color:var(--muted);max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){.who{display:none}}

/* The topbar is one flex row and would not wrap, so on a narrow screen the
   actions were pushed past the viewport and the whole page scrolled sideways.
   Let it wrap, and let the tabs scroll inside themselves instead. */
@media (max-width:760px){
  .topbar{flex-wrap:wrap;gap:.5rem .9rem;padding:.6rem .9rem}
  .topbar-tabs{
    order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;padding-bottom:.15rem;
    /* The row scrolls and its scrollbar is hidden, so the last tab was simply
       sliced down the middle — which reads as a broken layout rather than as
       something to swipe. Fading the edge says there is more. */
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  }
  .topbar-tabs::-webkit-scrollbar{display:none}
  .ttab{flex:none}
  .topbar-actions{margin-left:auto}
}

.console{padding:1.4rem clamp(1rem,3vw,1.8rem) 5rem;max-width:1400px;margin:0 auto}

/* ─────────────────────────────────────────────── transmission strip ─── */
.strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-bottom:1.5rem;
}
.strip-cell{background:var(--surface);padding:.85rem 1rem}
.strip-cell.live{background:var(--accent-dim)}
.strip-n{
  display:block;font-weight:750;font-size:1.55rem;line-height:1;letter-spacing:-.02em;
}
.strip-cell.live .strip-n{color:var(--accent)}
.strip-l{
  display:flex;align-items:center;gap:.4rem;margin-top:.3rem;
  font-size:.76rem;font-weight:650;color:var(--muted);
}

/* ──────────────────────────────────────────────────────── layout ─── */
.console-grid{display:grid;grid-template-columns:1fr 340px;gap:1.4rem;align-items:start}
.console-grid.one-col{grid-template-columns:1fr}
@media (max-width:1080px){.console-grid{grid-template-columns:1fr}}
.col-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.col-head h2{font-size:1.15rem}

/* ──────────────────────────────────── the rack: one row per story ─── */
.rack{display:flex;flex-direction:column;gap:.7rem}
.unit{
  display:grid;grid-template-columns:4px 1fr auto;gap:0 1rem;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:0;overflow:visible;position:relative;
  transition:border-color .16s;
}
.unit{cursor:pointer}
.unit:hover{border-color:var(--accent-line);box-shadow:var(--shadow-lg)}
.unit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* controls keep the default cursor so they don't look like part of the link */
.unit-controls{cursor:default}
.unit-lamp{align-self:stretch;background:var(--line);border-radius:var(--r) 0 0 var(--r)}
/* The lamp is the fastest read on the page, so each state gets a distinct one.
   Only a story that is genuinely moving glows. */
.unit[data-state="live"] .unit-lamp{background:var(--good);box-shadow:none}
.unit[data-state="fetch"] .unit-lamp{background:var(--accent);box-shadow:none}
.unit[data-state="bad"] .unit-lamp{background:var(--bad);box-shadow:none}
.unit[data-state="idle"] .unit-lamp{background:var(--accent-line)}
.unit[data-state="done"] .unit-lamp{background:var(--good)}
/* Finished is archival, not healthy. Two shades of the same green made
   "Caught up" and "Finished" read as the same badge — the one pair that must
   never be confused. */
.unit[data-state="fin"] .unit-lamp{background:#64748B}
.unit[data-state="off"] .unit-lamp{background:var(--muted);opacity:.5}
.unit[data-state="draft"] .unit-lamp{background:var(--warn)}

/* a plain-language line: what is it doing right now */
.unit-doing{margin-top:.45rem;font-size:.8rem;color:var(--ink-2)}
.unit[data-state="live"] .unit-doing{color:var(--good)}
.unit[data-state="fetch"] .unit-doing{color:var(--accent)}

.unit-main{padding:.95rem 0;min-width:0}
.unit-head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.unit-name{
  font-weight:750;font-size:1.04rem;
  letter-spacing:-.01em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.unit-state{
  display:inline-flex;align-items:center;gap:.35rem;flex:none;
  font-size:.76rem;font-weight:650;color:var(--muted);
}
.unit[data-state="live"] .unit-state{color:var(--good)}
.unit[data-state="fetch"] .unit-state{color:var(--accent)}
.unit[data-state="bad"] .unit-state{color:var(--bad)}
.unit[data-state="off"] .unit-state,
.unit[data-state="done"] .unit-state{color:var(--muted)}
.unit-chan{font-size:.75rem;color:var(--muted);margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit-msg{
  margin-top:.5rem;font-size:.8rem;padding:.35rem .55rem;border-radius:var(--r-sm);
  background:var(--bg-2);border-left:2px solid var(--line);
}
.unit-msg.bad{color:var(--bad);border-left-color:var(--bad)}
.unit-msg.wait{color:var(--accent);border-left-color:var(--accent)}
.unit-meter{margin-top:.7rem}
.unit-nums{
  display:flex;gap:.9rem;margin-top:.35rem;font-size:.72rem;color:var(--ink-2);
}
.unit-nums .ahead{color:var(--accent)}
.unit-controls{
  display:flex;align-items:center;gap:.4rem;padding:0 1rem 0 0;position:relative;flex:none;
}
/* The phone layout for a unit lives in one place, further down. There was a
   second copy here from when the row was two columns: it pinned .unit-controls
   to `grid-column:2`, and that outlived the columns themselves. Grid does not
   ignore a column that is not there — it creates one, sized to the row's own
   contents — so every card was indented by a different amount and a card
   shifted whenever a control appeared. */

/* the ⋯ menu */
.popmenu{
  position:absolute;right:0;top:calc(100% + .3rem);z-index:20;min-width:170px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:0 14px 34px rgba(0,0,0,.4);padding:.25rem;
  display:flex;flex-direction:column;
}
.popmenu button{
  border:0;background:none;color:var(--ink-2);text-align:left;cursor:pointer;
  font:inherit;font-size:.86rem;padding:.45rem .6rem;border-radius:4px;
}
.popmenu button:hover{background:var(--surface-2);color:var(--ink)}
.popmenu button.danger{color:var(--bad)}

/* ──────────────────────────────────────────── transmission log ─── */
.log-col{position:sticky;top:74px}
@media (max-width:1080px){.log-col{position:static}}
/* No height cap and no inner scrollbar. The log used to be unbounded, so it
   needed one; it is ten entries and a pager now, and clipping that at 70vh hid
   the last two rows AND the buttons behind a scroll nobody expects inside a
   panel. Bounded lists should not scroll. */
.log{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:hidden;
}
.log-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:start;
  padding:.7rem .85rem;border-bottom:1px solid var(--line-soft);
  border-left:2px solid transparent;
}
.log-row:last-child{border-bottom:0}
.log-row.done{border-left-color:var(--good)}
.log-row.wait{border-left-color:var(--accent)}
.log-row.bad{border-left-color:var(--bad)}
.log-when{font-size:.68rem;color:var(--muted);white-space:nowrap;padding-top:.15rem;min-width:52px}
.log-body{min-width:0}
.log-eps{font-size:.8rem;color:var(--ink)}
.log-story{
  font-size:.75rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.log-err{font-size:.72rem;color:var(--bad);margin-top:.2rem}
.log-side{display:flex;align-items:center;gap:.4rem;flex:none}
.log-opens{font-size:.7rem;color:var(--accent)}


/* ────────────────────────────────────────────────────── admin settings ─── */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:start;margin-top:1.2rem}
@media (max-width:900px){.settings-grid{grid-template-columns:1fr}}
.settings-preview{position:sticky;top:84px}
@media (max-width:900px){.settings-preview{position:static}}
/* Template editors are monospace but must stay at 16px on a phone, or iOS
   zooms the whole page the moment one is focused. */
textarea.tpl{font-family:"DM Mono",monospace;font-size:.82rem;line-height:1.5}
@media (max-width:640px){textarea.tpl{font-size:16px}}

/* An inline link inside a note is still a tap target. */
.note a{display:inline-block;padding:.2rem 0}
@media (max-width:640px){.note a{min-height:34px;line-height:34px}}

/* ─────────────────────────────────────────────────── console on a phone ─── */
@media (max-width:640px){
  .console{padding:1rem .8rem 4rem}

  /* Two columns of numbers beats six squeezed ones. */
  .strip{grid-template-columns:1fr 1fr}
  .strip-n{font-size:1.3rem}
  /* Seven numbers into two columns leaves a hole, and the hole showed as a
     grey block: the strip draws its dividers by letting its own background
     through 1px gaps, so an empty cell is a 1px line stretched to fill it.
     An odd last number takes the whole row instead. */
  .strip-cell:last-child:nth-child(odd){grid-column:1 / -1}

  /* A unit becomes a stacked block: lamp across the top, controls full width. */
  .unit{grid-template-columns:1fr;gap:0}
  .unit-lamp{height:3px;width:100%;border-radius:var(--r) var(--r) 0 0}
  .unit-main{padding:.9rem .95rem .2rem}
  .unit-art{width:44px;height:44px;border-radius:8px}
  .unit-controls{padding:.8rem .95rem .95rem;flex-wrap:wrap;gap:.5rem}
  .unit-controls .btn{flex:1 1 auto}
  .unit-head{flex-direction:column;align-items:flex-start;gap:.2rem}
  .unit-name{white-space:normal}
  .unit-nums{flex-wrap:wrap;gap:.5rem .9rem}

  /* The menu opens as a sheet from the bottom, not a clipped popover. */
  .popmenu{
    position:fixed;inset:auto 0 0 0;top:auto;min-width:0;
    border-radius:14px 14px 0 0;padding:.5rem;
    box-shadow:0 -10px 40px rgba(0,0,0,.5);
  }
  .popmenu button{padding:.85rem .8rem;font-size:.95rem}

  .log-row{grid-template-columns:1fr auto}
  .log-when{grid-column:1;grid-row:1;min-width:0;font-size:.66rem}
  .log-body{grid-column:1;grid-row:2}
  .log-side{grid-column:2;grid-row:1/3;align-items:center}
  .col-head{flex-wrap:wrap;gap:.6rem}
}


/* Auto-fetch reads as live when it is on, so you can tell at a glance whether
   new episodes will be picked up without opening the story. */
/* The live dot only appears when auto-fetch is on, which changed the switch's
   width and pushed every progress bar to a different length. Reserve the space
   whether the dot is showing or not. */
.auto-switch{min-width:84px}
.auto-switch > span{display:inline-flex;align-items:center;gap:.35rem}
.auto-switch.is-on{color:var(--accent);font-weight:600}
.auto-switch .auto-dot{background:var(--accent);flex:none}


/* ═══════════════════════════════════════════════════════ alignment ═══ */

/* The unit row was `4px 1fr auto` with the lamp stretched and everything
   vertically centred, so a row with an error message sat lower than one
   without, and the controls floated mid-height instead of lining up with the
   title. Align to the top and give the grid explicit gutters instead. */
.unit{align-items:stretch}
/* Cover art lives inside .unit-main rather than as a fourth grid column: the
   row is a grid at three breakpoints and a new column would need re-tuning at
   each. A spanning first column here works at every width untouched. */
.unit-main{
  padding:1rem 0;display:grid;align-content:center;
  grid-template-columns:auto minmax(0,1fr);column-gap:.85rem;
}
.unit-main > *:not(.unit-art){grid-column:2}
.unit-art{
  grid-column:1;grid-row:1 / -1;align-self:center;
  width:54px;height:54px;border-radius:10px;overflow:hidden;
  background:var(--surface-2);flex:none;
}
.unit-art img{width:100%;height:100%;object-fit:cover;display:block}
.unit-art-fallback{
  width:100%;height:100%;display:grid;place-items:center;
  background:var(--accent-dim);color:var(--accent);
  font-size:1.35rem;font-weight:750;text-transform:uppercase;
}
/* Start and Pause are different widths, so the controls column changed size
   per row and every progress bar ended somewhere different. Fix the column so
   the meters line up down the page. */
.unit-controls{align-items:center;align-self:center;min-width:200px;justify-content:flex-end}
@media (max-width:640px){.unit-controls{min-width:0;justify-content:flex-start}}
/* Start / Pause occupy the same footprint whichever is showing. */
.unit-controls [data-act="start"],
.unit-controls [data-act="pause"],
.unit-controls [data-act="verify"]{min-width:74px}

/* Column heads across the console sit on one baseline. */
.col-head{min-height:34px}
.col-head h2{line-height:1.25}

/* Numbers under the meter line up on a consistent baseline and never wrap
   mid-value. */
.unit-nums{align-items:baseline}
.unit-nums span{white-space:nowrap}

/* The log's three columns were `auto 1fr auto`, so a long story name pushed
   the timestamp column wider on some rows and not others — rows visibly
   stepped. Fix the first and last columns. */
.log-row{grid-template-columns:66px 1fr auto;align-items:start}
.log-when{min-width:0;text-align:left}
.log-side{min-height:20px}

/* The strip cells had uneven text baselines because the label wrapped on some
   and not others. */
.strip-cell{display:flex;flex-direction:column;justify-content:flex-start;min-height:74px}
.strip-l{margin-top:auto}

/* ═══════════════════════════════════════════════════ guide in-place ═══ */
.guide-embed{max-width:820px}
.guide-embed h2{margin:1.8rem 0 .6rem;font-size:1.2rem}
.guide-embed section:first-of-type h2{margin-top:.4rem}
.guide-embed section{scroll-margin-top:70px}
.guide-embed p,.guide-embed li{color:var(--ink-2);font-size:.92rem}
.guide-embed .toc{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:0 0 1.4rem;
  padding:.85rem 1rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);font-size:.85rem;
}
.guide-embed .toc a{color:var(--ink-2)}
.guide-embed .kv-list{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;margin:1rem 0}
.guide-embed .kv-list dt{font-weight:650;color:var(--ink);font-size:.9rem}
.guide-embed .kv-list dd{margin:0;color:var(--muted);font-size:.9rem}
.guide-embed .faq{margin-top:1rem}
@media (max-width:640px){
  .guide-embed .toc{flex-direction:column;gap:0}
  .guide-embed .toc a{min-height:40px;display:flex;align-items:center}
  .guide-embed .kv-list{grid-template-columns:1fr;gap:.1rem}
  .guide-embed .kv-list dd{margin-bottom:.6rem}
}


/* ═══════════════════════════════════════════════════ story detail ═══ */
.story-hero{
  display:grid;grid-template-columns:132px 1fr;gap:1.4rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem;box-shadow:var(--shadow);margin-bottom:1.6rem;
  position:relative;overflow:hidden;
}
.story-hero::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--line)}
.story-hero[data-state="live"]::before{background:var(--good)}
.story-hero[data-state="fetch"]::before{background:var(--accent)}
.story-hero[data-state="bad"]::before{background:var(--bad)}
.story-art{width:132px;height:132px;border-radius:var(--r);overflow:hidden;flex:none;background:var(--surface-2)}
.story-art img{width:100%;height:100%;object-fit:cover;display:block}
.story-art-fallback{
  width:100%;height:100%;display:grid;place-items:center;
  background:var(--accent-dim);color:var(--accent);
  font-size:2.6rem;font-weight:750;text-transform:uppercase;
}
.story-info{min-width:0}
.story-top-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.story-top-row h1{font-size:clamp(1.3rem,3vw,1.75rem);margin:0}
.story-sub{font-size:.8rem;color:var(--muted);margin-top:.25rem}
.story-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:1.1rem}
/* Delivery mode and shortener account: settings, not actions, so they sit
   above the buttons and read quieter than them. */
.story-opts{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)}
.story-opts .opt{display:flex;flex-direction:column;gap:.3rem}
.story-opts .opt[hidden]{display:none}
.story-opts .mini{font:inherit;font-size:.86rem;padding:.4rem .55rem;
  border:1px solid var(--line);border-radius:8px;
  background:var(--bg-2);color:var(--ink)}
.story-opts .mini:focus{outline:2px solid var(--accent);outline-offset:1px}
#a-mode-hint{flex:1 1 14rem;line-height:1.4;padding-bottom:.45rem}

.story-grid{display:grid;grid-template-columns:1fr 320px;gap:1.4rem;align-items:start}
@media (max-width:1000px){.story-grid{grid-template-columns:1fr}}
@media (max-width:600px){
  .story-hero{grid-template-columns:1fr;gap:1rem;padding:1rem}
  .story-art{width:92px;height:92px}
  .story-actions .btn{flex:1 1 auto}
  .story-opts{flex-direction:column;align-items:stretch;gap:.7rem}
  /* 34px is a fiddly target with a thumb; the rest of the phone layout is
     already built to 44px. */
  .story-opts .mini{width:100%;min-height:44px}
  /* flex-basis follows the main axis, and the row turns into a column
     here. The 14rem that reads as a sensible column width on a wide
     screen became 224px of empty height on a phone — a blank half-screen
     between the settings and the buttons. */
  #a-mode-hint{padding-bottom:0;flex:0 0 auto}
}

/* one batch per row: episodes, state, link, and the repair control */
.batch{
  display:grid;grid-template-columns:96px 1fr auto;gap:1rem;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.8rem 1rem;margin-bottom:.6rem;border-left:3px solid var(--line);
}
.batch.done{border-left-color:var(--good)}
.batch.wait{border-left-color:var(--accent)}
.batch.bad{border-left-color:var(--bad)}
.batch-eps{font-size:.85rem;font-weight:600;color:var(--ink);white-space:nowrap}
.batch-mid{min-width:0}
.batch-line{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.batch-link{margin-top:.3rem;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.batch-err{margin-top:.3rem;font-size:.8rem;color:var(--bad)}
.batch-act{flex:none}
@media (max-width:600px){
  .batch{grid-template-columns:1fr auto;gap:.5rem .8rem}
  .batch-eps{grid-column:1}
  .batch-act{grid-column:2;grid-row:1}
  .batch-mid{grid-column:1/3}
}

/* a story row is clickable through to its own page */
.unit:hover .unit-name{color:var(--accent)}

/* Two fields that belong together — an episode range reads wrong stacked. */
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:520px){ .two-up{grid-template-columns:1fr} }

/* History pager. Sticks to the bottom of the log rather than floating away
   from it, so ten entries and their controls read as one panel. */
/* Shared by the history panel and the batch list. Inside the log it is the
   panel's last row, so it takes the panel's chrome; the batch list is separate
   cards, where that chrome would look like a card that lost its content. */
.log-pager{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.65rem .2rem;
}
.log > .log-pager{
  padding:.65rem .85rem;border-top:1px solid var(--line);
  background:var(--surface-2);
}
.log-pager button[disabled]{opacity:.35;cursor:default}

/* Filter segments beside the section head. A view control, so it reads quieter
   than the Add button it sits next to. */
.head-tools{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);padding:2px;gap:2px}
.seg-b{
  border:0;background:none;color:var(--muted);cursor:pointer;font:inherit;
  font-size:.82rem;padding:.32rem .7rem;border-radius:999px;white-space:nowrap;
}
.seg-b:hover{color:var(--ink)}
.seg-b.is-on{background:var(--accent-dim);color:var(--accent);font-weight:600}
@media (max-width:560px){
  .col-head{flex-wrap:wrap;gap:.6rem}
  .head-tools{width:100%;justify-content:space-between}
  .seg-b{padding:.32rem .55rem;font-size:.78rem}
}

/* ── history timeline ──────────────────────────────────────────────────
   A rail with a dot per event. The rail is drawn by the row rather than as
   one element behind them, so it starts at the first dot and stops at the
   last instead of running off both ends of the panel. */
.ev{display:grid;grid-template-columns:34px 1fr;gap:0 4px;position:relative}
.ev-rail{position:relative;display:flex;justify-content:center}
.ev-rail::before{
  /* --line is the border colour and disappears as a hairline down a white
     panel. The rail has to read as a thread joining the dots. */
  content:"";position:absolute;top:0;bottom:0;width:2px;
  background:var(--line-soft);
  box-shadow:inset 0 0 0 1px var(--line);
}
.ev.first .ev-rail::before{top:16px}
.ev.last  .ev-rail::before{bottom:calc(100% - 16px)}
.ev-dot{
  position:relative;z-index:1;margin-top:6px;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;line-height:1;
  background:var(--accent-dim);color:var(--accent);
}
.ev.done .ev-dot{background:rgba(22,163,74,.14);color:var(--good)}
.ev.warn .ev-dot{background:rgba(217,119,6,.14);color:var(--warn)}
.ev.bad  .ev-dot{background:rgba(220,38,38,.12);color:var(--bad)}
.ev.mute .ev-dot{background:var(--line-soft);color:var(--muted)}
.ev-body{padding:.55rem 0 .9rem}
.ev.last .ev-body{padding-bottom:.4rem}
.ev-head{display:flex;align-items:baseline;gap:.6rem}
.ev-title{font-size:.86rem;font-weight:600;color:var(--ink)}
.ev.bad .ev-title{color:var(--bad)}
.ev-when{margin-left:auto;font-size:.72rem;color:var(--muted);white-space:nowrap}
.ev-eps{font-size:.76rem;margin-top:.15rem;color:var(--accent);font-weight:500}
.ev.done .ev-eps{color:var(--good)}
.ev.warn .ev-eps{color:var(--warn)}
.ev-detail{font-size:.76rem;color:var(--muted);margin-top:.15rem;line-height:1.45}
@media (max-width:560px){
  .ev{grid-template-columns:28px 1fr}
  .ev-dot{width:20px;height:20px;font-size:.66rem}
}
.p-fin{background:rgba(100,116,139,.14);color:#64748B}