/* The topics pages on top of the day page's sheet: what a topic looks like as a row and
   as a page, and nothing the day page already draws. Tokens are day.12cd07eaba.css's; the shapes and
   sizes are the v3 mockup's stylesheet. */


/* ---- the three biggest, as small arcs ---- */
#signal { margin-top: 1.15rem; }
#signal .signal-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
#signal .signal-head span:last-child { letter-spacing: .06em; }
.swells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.7rem; margin-top: .65rem; }
.swell { color: inherit; text-decoration: none; min-width: 0; display: block; }
.swell-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: .9rem; }
.swell-top span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.swell-top b { color: var(--accent); font: 400 .73rem var(--mono); white-space: nowrap; }
.swell svg { width: 100%; height: 72px; display: block; overflow: visible; }
.bars .bar { fill: var(--accent); opacity: .85; }
.bars .bar.quiet { opacity: .35; }
.bars .count { font: 400 9px var(--mono); fill: var(--ink); text-anchor: middle; }
.bars .now { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.swell:hover .bar { opacity: 1; }
.signal-axis { display: flex; justify-content: space-between; margin-top: .15rem; color: var(--dim); font: .6rem var(--mono); }

/* ---- the strip's two window chips, first in the row ---- */
.summary-btn { margin-right: .35rem; border-style: dashed; }
.summary-btn .n { font-size: .8rem; line-height: 1.35; }
/* A topic's chip with nothing in it: still there, still a page, just quiet. */
.daybtn.quiet { opacity: .45; }
.daybtn.quiet:focus-visible { opacity: 1; }

/* ---- since you left, followed ---- */
.since { margin-top: 1.2rem; font: 400 .61rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.since b { color: var(--accent); font-weight: 400; }
.changes { display: flex; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.changes a { text-decoration: none; font-size: .82rem; flex: 1; min-width: 0; }
.changes a small { display: block; margin-top: .15rem; color: var(--accent); font: .64rem var(--mono); }
.changes a:hover { color: var(--accent); }
.followed { padding: .65rem 0; display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; font-size: .78rem; color: var(--dim); }
.followed a { text-decoration: none; color: var(--ink); }
.followed b { color: var(--accent); font: .68rem var(--mono); }
.list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0 .6rem; border-bottom: 1px solid var(--line); }
.notice { padding: .9rem 0; border-bottom: 1px solid var(--line); color: var(--dim); font-size: .82rem; line-height: 1.65; }
.notice b { color: var(--ink); font-weight: 400; }
.empty { padding: 2rem 0; color: var(--dim); line-height: 1.8; }
.empty a { color: var(--accent); }
.topic.hide, .dayhead.empty { display: none; }

/* ---- a topic as a row ---- */
.topic { position: relative; isolation: isolate; cursor: pointer; display: grid; grid-template-columns: 2rem minmax(0, 1fr) 108px 32px; gap: .75rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); transition: background .15s; scroll-margin-top: calc(var(--strip-h, 70px) + 8px); }
.topic:hover, .topic:has(:focus-visible) { background: color-mix(in srgb, var(--tint, var(--accent)) 22%, rgba(232, 240, 251, .06)); }
.topic h3 a::after { content: ''; position: absolute; inset: 0; }
.topic .star, .topic .topic-name, .topic-wave { position: relative; z-index: 1; }
.topic:has(h3 a:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.topic h3 a:focus-visible { outline: none; }
.rank { font: .72rem var(--mono); color: var(--dim); padding-top: .3rem; }
.topic h3 { font: 500 1.12rem/1.5 var(--sans); margin: .3rem 0 .35rem; }
.topic h3 a { text-decoration: none; }
.topic-name { color: var(--accent); font-size: .77rem; text-decoration: none; }
.topic-meta { color: var(--dim); font-size: .74rem; line-height: 1.8; }
.topic-meta .age { display: inline-block; font-family: var(--mono); font-size: .62rem; white-space: nowrap; }
.topic-wave { align-self: center; text-align: right; }
.topic-wave svg { width: 108px; height: 36px; }
.topic-wave small { display: block; color: var(--dim); font: .6rem var(--mono); }
.star { color: var(--dim); font-size: 1.4rem; width: 36px; min-height: 44px; align-self: start; padding: 0; }
.star[aria-pressed=true] { color: var(--accent); }
/* The list's and the topic's own foot; the day's prev/next foot is the news page's. */
.foot.tail { gap: 1rem; flex-wrap: wrap; align-items: center; color: var(--dim); font-size: .8rem; }
.foot.tail a { color: var(--accent); text-decoration: none; }
.life { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 100%; height: 42px; align-items: end; }
.life span { background: var(--accent); min-height: 2px; opacity: .75; }
.life span.missing { height: 100%; background: repeating-linear-gradient(135deg, transparent 0 4px, var(--line) 4px 5px); opacity: .5; }
.life-axis { display: grid; grid-template-columns: repeat(7, 1fr); color: var(--dim); font: .55rem var(--mono); text-align: center; margin-top: .25rem; }

/* ---- one topic ---- */
.episode-signal { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: 2rem; margin-top: .6rem; }
.episode-signal svg { width: 100%; height: 75px; }
.episode-span { border-left: 1px solid var(--line); padding-left: 1rem; font: .67rem/1.8 var(--mono); color: var(--dim); }
.episode-span b { color: var(--ink); font-weight: 400; }
.episode-back { display: inline-block; margin: 1.15rem 0 .5rem; color: var(--accent); font: .7rem var(--mono); text-decoration: none; }
.state { position: relative; border-left: 4px solid var(--tint, var(--accent)); padding: .3rem 0 .4rem 1rem; margin: .8rem 0 1.2rem; }
.state .state-title { display: flex; justify-content: space-between; align-items: center; }
.state h3 { font: 500 1.5rem/1.55 var(--sans); margin: .5rem 0; }
.state p { color: var(--dim); font-size: .8rem; margin: .5rem 0; }
.summary .points { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.summary .points li { font-size: .98rem; line-height: 1.55; padding: .7rem 0 .7rem 1rem; border-bottom: 1px solid var(--line); position: relative; }
.summary .points li::before { content: ''; position: absolute; left: 0; top: 1.35rem; width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent); }
.developments { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.development { position: relative; isolation: isolate; cursor: pointer; padding: .9rem .5rem; margin: 0 -.5rem; border-bottom: 1px solid var(--line); transition: background .15s; }
.development:hover, .development:has(:focus-visible) { background: color-mix(in srgb, var(--tint, var(--accent)) 22%, rgba(232, 240, 251, .06)); }
.development > button, .development > .jump { position: relative; z-index: 1; color: var(--accent); padding: 0; font-size: .8rem; text-align: left; text-decoration: none; }
.development p { font-size: .98rem; line-height: 1.55; margin: .4rem 0; }
/* The province is the card's heading, its report count a badge beside it: the block is about where. */
.development > button.where { display: flex; align-items: baseline; gap: .55rem; color: var(--accent); font-size: 1.05rem; font-weight: 500; }
.development .count { font: .6rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: .1rem .45rem; white-space: nowrap; }
/* An odd card out takes the whole row rather than leaving a hole beside it. */
.development:last-child:nth-child(odd) { grid-column: 1 / -1; }
.development p a { text-decoration: none; }
.development p a::after { content: ''; position: absolute; inset: 0; }
.development:has(p a:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.development p a:focus-visible { outline: none; }
/* The news row's line: the outlet in the text face, figures in mono, the open count at the end. */
.development .meta { display: flex; flex-wrap: wrap; gap: 0 .5rem; font: 400 .8rem var(--sans); color: var(--dim); }
.development .meta .stamp { font: .78rem var(--mono); }
.development .meta .stamp::before { content: '·'; margin-right: .5rem; }
.development .meta .opened { margin-left: auto; opacity: .7; font: .72rem var(--mono); }
.filter-select { color: var(--ink); background: #0a1220; border: 1px solid var(--line); border-radius: 999px; padding: .55rem .8rem; max-width: 100%; font: .82rem var(--sans); }

/* ---- one story ---- */
.story-page h3 { margin: .3rem 0; font: 500 clamp(1.15rem, 3vw, 1.6rem)/1.4 var(--sans); }
.story-page .topic-link { color: var(--accent); text-decoration: none; font-size: .85rem; }
/* A story is one page with no day to pick or window to change. */
body[data-view='story'] .strip { display: none; }

/* ---- the panel: the day page's boxes; a story page has none ---- */
@media (min-width: 1000px) { body[data-view='story'] main { grid-template-columns: minmax(0, 1fr); } }
body[data-view='story'] aside { display: none; }
/* The list's province select stands in for the map where the panel folds away. */
.mobile-place { display: none; }
#dock { display: none; }
@media (max-width: 999px) {
  .mobile-place { display: block; margin-top: .5rem; }
  .mobile-place label { font-size: .72rem; color: var(--dim); margin-right: .5rem; }
}

@media (max-width: 700px) {
  .developments { grid-template-columns: 1fr; }
  #signal { margin-top: .9rem; }
  #signal .signal-head .label { font-size: .52rem; letter-spacing: .1em; }
  .swells { gap: .75rem; }
  .swell-top { font-size: .7rem; flex-wrap: wrap; gap: 0; }
  .swell-top span { width: 100%; }
  .swell-top b { font-size: .57rem; }
  .swell svg { height: 44px; }
  .signal-axis { font-size: .5rem; }
  .daybtn.summary-btn .n { font-size: .68rem; }
  .since { font-size: .53rem; }
  .changes { gap: .6rem; }
  .changes a { font-size: .73rem; }
  .changes a small { font-size: .56rem; }
  .followed { font-size: .7rem; gap: .5rem; }
  .list-head .label { font-size: .55rem; letter-spacing: .09em; }
  .topic { grid-template-columns: 1.3rem minmax(0, 1fr) 28px; gap: .5rem; padding: .95rem 0; }
  .topic h3 { font-size: 1.04rem; line-height: 1.55; }
  .topic .rank { font-size: .61rem; }
  .topic-wave { grid-column: 2; display: flex; align-items: center; gap: .7rem; text-align: left; margin-top: -.3rem; }
  .topic-wave svg { width: 88px; height: 25px; }
  .topic-wave small { font-size: .54rem; }
  .topic .star { grid-column: 3; grid-row: 1; width: 28px; }
  .topic-meta { font-size: .68rem; }
  .state h3 { font-size: 1.3rem; }
  .development { padding: .75rem 0; }
  .episode-signal { grid-template-columns: 1fr; gap: .4rem; }
  .episode-signal svg { height: 58px; }
  .episode-span { border-left: 0; padding: 0; font-size: .56rem; }
  .episode-span br { display: none; }
  .episode-span span { margin-right: 1rem; }
  .life { width: 120px; height: 26px; }
  .life-axis { display: none; }
  #dock { display: block; }
  .credit { padding-bottom: 6rem; }
}