/* AI Signal prototype — Discover (the briefing home), plus the Saved list which reuses the signal tile.
   Phones: headline, briefing panel, then a horizontal snap carousel of asymmetric cards.
   Desktop: a two-column editorial opening and a bento grid — its own layout, not a stretched phone. */

.d-hero { padding-top: 22px; display: grid; gap: 22px; }
.d-copy { display: grid; gap: 18px; justify-items: start; }
.d-copy .display { max-width: 9ch; }

/* Briefing panel: the "finish line". Progress ring, time left, start and listen. */
.brief { border-radius: var(--r-xl); background: var(--stage); color: var(--on-stage); padding: 22px; display: grid; gap: 18px; box-shadow: var(--shadow-2); }
[data-theme="dark"] .brief { box-shadow: inset 0 0 0 1px var(--stage-line); }
.brief-top { display: flex; align-items: center; gap: 16px; }
.ring { width: 64px; height: 64px; flex: none; position: relative; display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; stroke: rgba(255, 255, 255, .14); }
.ring .ring-on { stroke: var(--signal); stroke-linecap: round; transition: stroke-dasharray .6s var(--ease); }
.ring.full .ring-on { stroke: #6fd3a2; }
.brief-top b { display: block; font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.15; letter-spacing: -.015em; }
.brief-top span { font-size: 13.5px; opacity: .68; }
.brief-list { display: none; }
.brief-actions { display: flex; gap: 8px; }
.brief-actions .btn { flex: 1; }
.brief-actions .btn-dim { flex: 0 0 auto; }

/* Rail: horizontal, snapping, bounded. The last card is always the end of the briefing. */
.d-sec { margin-top: 34px; }
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 22px 0 14px; }
.rail-nav { display: flex; gap: 6px; }
.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding: 6px 16px 18px; scroll-padding-inline: 16px; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.dots { display: flex; justify-content: center; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--line-2); transition: width .3s var(--ease), background .3s; }
.dots i.on { width: 20px; background: var(--ink); }

/* Signal tile: tinted destination with its own drawn scene (the District bento idea, re-cut for stories). */
.sig { position: relative; isolation: isolate; overflow: hidden; flex: none; width: min(78vw, 320px); min-height: 404px; scroll-snap-align: start; border-radius: var(--r-xl); background: var(--t); padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.sig:first-child { width: min(86vw, 360px); }
.sig:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.sig:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.sig-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rank { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--d); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.rank .ic { width: 18px; height: 18px; }
.sig h3 { font-size: 24px; max-width: 16ch; }
.sig:first-child h3 { font-size: 28px; }
.sig h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sig h3 a:focus-visible { outline: none; }
.sig-hook { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); max-width: 26ch; }
.sig-art { position: absolute; z-index: -1; right: -10px; bottom: 50px; width: 76%; transition: transform .6s var(--ease); transform-origin: 80% 100%; }
.sig:hover .sig-art { transform: scale(1.04); }
.sig-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.sig-foot .meta { margin-right: auto; white-space: nowrap; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sig-read { position: relative; z-index: 2; height: 40px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-weight: 600; font-size: 13px; }
.sig-read:hover { background: var(--surface); }
.sig-play { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; transition: transform .3s var(--ease); }
.sig-play .ic { width: 16px; height: 16px; }
.sig:hover .sig-play { transform: scale(1.08); }
.sig.seen .sig-art { opacity: .45; }
.sig.seen h3 { color: var(--ink-2); }

/* The end of the rail. Finishing is the reward. */
.sig-end { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); justify-content: center; align-items: flex-start; }
.sig-end.done { background: var(--stage); color: var(--on-stage); box-shadow: none; }
.sig-end h3 { font-size: 28px; max-width: 12ch; }
.sig-end p { font-size: 14.5px; color: var(--muted); max-width: 26ch; }
.sig-end.done p { color: rgba(244, 241, 235, .7); }
.sig-end .btn { margin-top: 6px; position: relative; z-index: 2; }
.end-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); color: var(--muted); }
.sig-end.done .end-mark { background: #6fd3a2; color: #0f2a1d; }

/* Tune card: invitation to personalise, never a gate. */
.tune { margin-top: 26px; border-radius: var(--r-lg); padding: 18px 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tune p { font-size: 14.5px; color: var(--ink-2); max-width: 48ch; }
.tune b { color: var(--ink); font-weight: 600; }

/* "Also in this edition": a short, finite list. No feed. */
.more { display: grid; margin-top: 18px; }
.more li { position: relative; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.more li:last-child { border-bottom: 1px solid var(--line); }
.more i { width: 10px; height: 10px; border-radius: 50%; background: var(--d); }
.more b { display: block; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.25; }
.more b a::after { content: ""; position: absolute; inset: 0; }
.more span { font-size: 13px; color: var(--muted); }
.more .ic { color: var(--muted); }
.more li.seen b { color: var(--muted); }

/* Saved view */
.page-head { padding-top: 26px; display: grid; gap: 10px; margin-bottom: 26px; }
.page-head h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 7vw, 64px); line-height: 1; letter-spacing: -.03em; }
.saved-grid { display: grid; gap: 12px; }
.saved-grid .sig { width: auto; min-height: 300px; }
.saved-grid .sig:first-child h3 { font-size: 24px; }
.saved-grid .sig-art { width: 52%; }

@media (min-width: 620px) {
  .saved-grid { grid-template-columns: 1fr 1fr; }
  .sig { width: 340px; } .sig:first-child { width: 420px; }
}
@media (min-width: 1000px) {
  .d-hero { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding-top: 48px; }
  .d-copy { gap: 22px; }
  .brief { padding: 28px; }
  .brief-list { display: grid; counter-reset: b; border-top: 1px solid var(--stage-line); }
  .brief-list li { counter-increment: b; position: relative; display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--stage-line); font-size: 14.5px; }
  .brief-list li::before { content: "0" counter(b); font-size: 12px; opacity: .5; font-variant-numeric: tabular-nums; }
  .brief-list a::after { content: ""; position: absolute; inset: 0; }
  .brief-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .brief-list span { font-size: 12.5px; opacity: .6; font-variant-numeric: tabular-nums; }
  .brief-list li.seen a { opacity: .5; text-decoration: line-through; }
  .brief-list li.seen span { color: #6fd3a2; opacity: 1; }
  .brief-actions .btn { flex: 0 0 auto; }
  .d-sec { margin-top: 64px; }
  .rail-nav, .dots { display: none; }
  /* Bento: first story is the cover, the rest step down in size. */
  .rail { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 264px; grid-auto-flow: dense; gap: 16px; overflow: visible; margin: 0; padding: 0; }
  .rail .sig, .rail .sig:first-child { width: auto; min-height: 0; }
  .rail .sig h3, .saved-grid .sig h3 { font-size: 21px; }
  .rail .sig-hook { display: none; }
  .rail .sig-art { width: 52%; bottom: 44px; }
  .rail .xl { grid-column: span 2; grid-row: span 2; padding: 32px; }
  .rail .xl h3 { font-size: clamp(32px, 3.2vw, 44px); letter-spacing: -.03em; line-height: 1.02; max-width: 14ch; }
  .rail .xl .sig-hook { display: block; font-size: 17px; }
  .rail .xl .sig-art { width: 78%; bottom: 40px; }
  .rail .sig:not(.xl):not(.wide) .sig-read { display: none; }
  .rail .sig:not(.xl):not(.wide) .sig-art { width: 46%; }
  .rail .wide { grid-column: span 2; }
  .rail .wide h3 { font-size: 26px; max-width: 18ch; }
  .rail .wide .sig-art { width: 38%; right: 16px; bottom: 56px; }
  .saved-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .more { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .more li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}