/* =========================================================================
   Market Watch India
   Design direction: "reading room, not trading terminal."
   An ink-and-paper base with a single cool accent, generous headline
   typography, and tabular figures for every timestamp so times line up in a
   scanning column. Density is a *mode*, not a compromise: Beginner breathes,
   Advanced compresses, and both read from the same markup.
   ========================================================================= */

:root {
  --ts: 100%;

  --ink-0: #0b1220;
  --ink-1: #16203a;

  --bg:        #f7f8fa;
  --bg-raise:  #ffffff;
  --bg-sink:   #eceef3;
  --bg-hover:  #f0f2f7;
  /* Was #d9dde6 / #e6e9f0 (1.36:1 / 1.22:1 against the raised surface), which
     fails WCAG 1.4.11 for the visible boundary of every input, button and
     card. Darkened to clear 3:1 while staying quiet. */
  --line:      #a8b0bd;
  --line-soft: #ccd2dc;

  --fg:       #14191f;
  --fg-mute:  #5a6472;
  /* Was #7b8694 (3.48:1 on --bg): below AA for the small text it is used on,
     which is exactly the match reasons, exact timestamps and delay figures an
     Advanced user needs to read. Darkened to clear 4.5:1. */
  --fg-faint: #616b78;

  --accent:      #0f6d72;
  --accent-ink:  #ffffff;
  --accent-soft: #e2f1f1;
  --accent-line: #9fcccd;

  --new:      #8a4b00;
  --new-soft: #fdf0dc;
  --new-line: #e8c38f;

  --danger:      #a3281f;
  --danger-soft: #fbeae8;

  --ok:    #1f6b43;
  --warn:  #8a5a00;
  --bad:   #a3281f;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 1px 2px rgba(16,24,40,.06), 0 8px 24px -12px rgba(16,24,40,.18);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --maxw: 1440px;
  --rail-w: 252px;
  --side-w: 336px;
}

:root[data-theme="dark"],
:root[data-theme="auto"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { color-scheme: dark; }
  :root[data-theme="auto"] {
    --bg:        #0b1017;
    --bg-raise:  #141b25;
    --bg-sink:   #090d13;
    --bg-hover:  #1b2330;
    --line:      #2a3442;
    --line-soft: #1f2834;

    --fg:       #e8ecf2;
    --fg-mute:  #9aa6b6;
    --fg-faint: #76828f;

    --accent:      #4fd1c5;
    --accent-ink:  #06231f;
    --accent-soft: #10302f;
    --accent-line: #2c5f5c;

    --new:      #f0b357;
    --new-soft: #2e2416;
    --new-line: #5a4523;

    --danger:      #ff8a7a;
    --danger-soft: #331a17;

    --ok:   #5fd196;
    --warn: #e9b765;
    --bad:  #ff8a7a;

    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0b1017;
  --bg-raise:  #141b25;
  --bg-sink:   #090d13;
  --bg-hover:  #1b2330;
  /* Raised from #2a3442 / #1f2834 (1.38:1 / 1.16:1) to clear 3:1. */
  --line:      #45515f;
  --line-soft: #333e4b;

  --fg:       #e8ecf2;
  --fg-mute:  #9aa6b6;
  /* Was #76828f (4.42:1 on --bg-raise): just under AA. */
  --fg-faint: #8b97a5;

  --accent:      #4fd1c5;
  --accent-ink:  #06231f;
  --accent-soft: #10302f;
  --accent-line: #2c5f5c;

  --new:      #f0b357;
  --new-soft: #2e2416;
  --new-line: #5a4523;

  --danger:      #ff8a7a;
  --danger-soft: #331a17;

  --ok:   #5fd196;
  --warn: #e9b765;
  --bad:  #ff8a7a;

  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only a UA-stylesheet rule, so any author rule that
   sets `display` (e.g. `.sheet { display: grid }`) silently overrides it.
   This keeps `hidden` authoritative wherever we use it to show/hide panels. */
[hidden] { display: none !important; }

/* No -webkit-text-size-adjust: 100% here. That declaration disables Chrome
   on Android's text autosizer, which is how many users apply the system
   font-size they set for accessibility. Let the platform scale text. */
html { font-size: var(--ts); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 { line-height: 1.22; letter-spacing: -.015em; margin: 0; }

button, input, select { font: inherit; color: inherit; }

a { color: var(--accent); text-underline-offset: 2px; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

.hint { color: var(--fg-mute); font-size: .8125rem; margin: .4rem 0 0; }
.opt  { color: var(--fg-faint); font-weight: 400; font-size: .8em; }

/* ---------------- buttons ---------------- */
.btn {
  background: var(--bg-raise); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem 1rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--bg-hover); }
.btn-sm { padding: .55rem .85rem; font-size: .875rem; min-height: 44px; }
.btn-block { display: block; width: 100%; }
.btn-primary {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
  padding: .8rem 1rem; font-size: 1.0625rem;
}
.btn-primary:hover { filter: brightness(1.07); background: var(--accent); }
.btn-danger { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

/* Minimum 44px touch target. These sit next to a link that navigates away,
   so an undersized target costs the user their place in the feed. */
.textbtn {
  background: none; border: 0; cursor: pointer;
  color: var(--accent); font-weight: 600; font-size: .875rem;
  min-height: 44px; padding: .55rem .7rem;
  display: inline-flex; align-items: center;
  border-radius: var(--radius-sm);
}
.textbtn:hover { background: var(--bg-hover); }
.textbtn:hover { text-decoration: underline; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .48rem .75rem; cursor: pointer;
  font-size: .875rem; font-weight: 600;
  min-height: 44px; min-width: 44px;
}
.iconbtn:hover { background: var(--bg-hover); }
.iconbtn-label { display: none; }
@media (min-width: 780px) { .iconbtn-label { display: inline; } }

/* Icons drawn in CSS: no icon font, no network request, CSP-clean. */
[class^="i-"] {
  width: 1.05em; height: 1.05em; display: inline-block; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--svg) center / contain no-repeat;
          mask: var(--svg) center / contain no-repeat;
}
.i-refresh { --svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-3.2-6.9"/><path d="M21 3v6h-6"/></svg>'); }
.i-gear    { --svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round"><circle cx="12" cy="12" r="3.2"/><path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>'); }
.i-x       { --svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"/></svg>'); }
.i-tag     { --svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round"><path d="M20.6 13.4 12 22l-9-9 8.6-8.6L21 4z"/><circle cx="16" cy="8" r="1.4" fill="black"/></svg>'); }
.i-up      { --svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round"><path d="M12 20V5"/><path d="M5 12l7-7 7 7"/></svg>'); }
.i-save    { --svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round"><path d="M6 3h12v18l-6-4.5L6 21z"/></svg>'); }
.i-ext     { --svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round"><path d="M14 4h6v6"/><path d="M20 4 10 14"/><path d="M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5"/></svg>'); }

/* ---------------- onboarding ---------------- */
.onboarding {
  min-height: 100dvh; display: grid; place-items: start center;
  padding: clamp(1rem, 4vw, 3rem) 1rem 3rem;
  background:
    radial-gradient(90rem 42rem at 50% -14rem, var(--accent-soft), transparent 70%),
    var(--bg);
}
.ob-card {
  width: 100%; max-width: 40rem; background: var(--bg-raise);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2.25rem); box-shadow: var(--shadow);
}
.ob-kicker {
  margin: 0 0 .5rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
#ob-title { font-size: clamp(1.5rem, 5.2vw, 2.125rem); }
.ob-lede { color: var(--fg-mute); margin: .7rem 0 1.6rem; font-size: 1.0625rem; }
.ob-step { margin-bottom: 1.6rem; }
.ob-step h2 {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--fg-faint); margin-bottom: .7rem; font-weight: 700;
}
.ob-foot { color: var(--fg-faint); font-size: .8125rem; text-align: center; margin: .9rem 0 0; }

.row { display: flex; gap: .5rem; align-items: center; }
.row input[type="text"], .row input[type="search"] { flex: 1 1 auto; min-width: 0; }

input[type="text"], input[type="search"], select {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .6rem .75rem; width: 100%;
}
input::placeholder { color: var(--fg-faint); }

.chipwrap { display: flex; flex-wrap: wrap; gap: .45rem; }

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: .55rem .9rem; min-height: 44px; cursor: pointer;
  font-size: .875rem; font-weight: 600; color: var(--fg-mute);
  transition: background .13s, color .13s, border-color .13s;
}
.chip:hover { background: var(--bg-hover); }
.chip[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent);
}
:root[data-theme="dark"] .chip[aria-pressed="true"],
.chip[aria-pressed="true"] { font-weight: 700; }
.chip-x {
  border: 0; background: none; cursor: pointer; color: inherit;
  opacity: .8; font-size: 1.05em; line-height: 1;
  /* Was ~11x15px, with a destructive "remove" sitting 2px from an "add".
     Now a full target with real separation. */
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.chip-x:hover { opacity: 1; background: var(--bg-hover); }
.chip-x:hover { opacity: 1; }

/* ---------------- app shell ---------------- */
.app { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg-raise) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding: .55rem clamp(.75rem, 2.5vw, 1.25rem) 0;
}
.topbar-main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; max-width: var(--maxw); margin: 0 auto; width: 100%;
}
.brand {
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em;
  display: flex; align-items: center; gap: .5rem;
}
.brand-mark {
  width: .95rem; height: .95rem; border-radius: 4px;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c5cff));
}
.brand-in { color: var(--fg-faint); font-weight: 600; }
.topbar-actions { display: flex; gap: .4rem; }

.statusline {
  max-width: var(--maxw); margin: .4rem auto 0; width: 100%;
  font-size: .8125rem; color: var(--fg-mute);
  display: flex; flex-wrap: wrap; gap: .25rem .8rem; align-items: center;
}
.statusline .dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; margin-right: .3rem; }
.dot-ok { background: var(--ok); } .dot-warn { background: var(--warn); } .dot-bad { background: var(--bad); }
.statusline time, .statusline .num { font-variant-numeric: tabular-nums; }

/* Wraps rather than scrolling: hiding the scrollbar on an overflowing tab
   strip made "Saved" silently unreachable at large text sizes. */
.viewtabs {
  display: flex; gap: .1rem; max-width: var(--maxw); margin: .5rem auto 0;
  width: 100%; flex-wrap: wrap;
}
.vt {
  background: none; border: 0; border-bottom: 2.5px solid transparent;
  padding: .7rem .7rem; min-height: 44px; cursor: pointer; white-space: nowrap;
  color: var(--fg-mute); font-weight: 600; font-size: .9375rem;
}
.vt[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.vt-count {
  font-variant-numeric: tabular-nums; font-size: .75rem;
  background: var(--bg-sink); border-radius: 999px; padding: .05rem .4rem; margin-left: .25rem;
}
.vt[aria-pressed="true"] .vt-count { background: var(--accent-soft); color: var(--accent); }
.vt-count:empty { display: none; }

/* ---------------- layout ---------------- */
.layout {
  flex: 1 1 auto; width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 0;
  padding: 0 clamp(.75rem, 2.5vw, 1.25rem);
}

.feedcol { min-width: 0; padding: .75rem 0 5.5rem; }
.side { display: none; }

@media (min-width: 900px) {
  .layout { grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: 1.5rem; }
  .feedcol { padding-bottom: 3rem; }
}
@media (min-width: 1280px) {
  .layout { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--side-w); }
  .side {
    display: block; padding: 1rem 0 3rem;
    position: sticky; top: var(--topbar-h, 8.5rem); align-self: start;
    max-height: calc(100dvh - var(--topbar-h, 8.5rem) - 1.5rem); overflow-y: auto;
  }
}

/* ---------------- topics rail ---------------- */
.rail { display: none; }
@media (min-width: 900px) {
  .rail {
    display: block; position: sticky; top: var(--topbar-h, 8.5rem); align-self: start;
    max-height: calc(100dvh - var(--topbar-h, 8.5rem) - 1.5rem); padding: 1rem 0 2rem;
  }
  .rail-head h2 {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--fg-faint); margin-bottom: .6rem;
  }
  .rail-scroll { overflow-y: auto; max-height: calc(100dvh - var(--topbar-h, 8.5rem) - 4.5rem); padding-right: .35rem; }
}
.rail-actions { display: flex; gap: .8rem; margin-bottom: .5rem; }
.tgroup { margin-bottom: 1.1rem; }
.tgroup h3 {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-faint); margin-bottom: .45rem; font-weight: 700;
}
.rail-custom { border-top: 1px solid var(--line-soft); padding-top: 1rem; margin-top: .5rem; }
.rail-custom h3 {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-faint); margin-bottom: .5rem;
}
.customlist { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.customrow {
  display: flex; align-items: center; gap: .75rem; font-size: .875rem;
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .4rem .55rem;
}
.customrow b { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.customrow .al { color: var(--fg-faint); font-size: .78rem; }

/* Phone: rail becomes a bottom sheet */
@media (max-width: 899px) {
  .rail[data-open="1"] {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 60;
    background: var(--bg-raise); border-top: 1px solid var(--line);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow); max-height: 82dvh; display: flex; flex-direction: column;
    padding: .5rem 1rem 1.1rem;
    animation: sheetup .2s ease-out;
  }
  .rail[data-open="1"] .rail-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .35rem 0 .5rem; border-bottom: 1px solid var(--line-soft);
  }
  .rail[data-open="1"] .rail-head h2 { font-size: 1rem; }
  .rail[data-open="1"] .rail-scroll {
    overflow-y: auto; padding-top: .8rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}
@keyframes sheetup { from { transform: translateY(14%); opacity: .4; } to { transform: none; opacity: 1; } }

.only-phone { display: none; }
@media (max-width: 899px) { .only-phone { display: inherit; } }

/* ---------------- filter bar ---------------- */
.filterbar { margin: 0 0 .85rem; }
/* Must wrap: two selects at min-width 9rem plus the search field overflow a
   320px viewport in Advanced mode, which is a WCAG 1.4.10 reflow failure at
   200% zoom. */
.filterbar-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.filterbar-row #q { flex: 1 1 auto; min-width: 0; }
.adv-only { display: none; }
body[data-mode="advanced"] .adv-only { display: block; }
body[data-mode="advanced"] .adv-only select { width: auto; min-width: 9rem; }
.activefilters { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.activefilters:empty { margin-top: 0; }
.ftag {
  font-size: .78rem; background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 999px;
  padding: .2rem .55rem; display: inline-flex; align-items: center; gap: .3rem;
}

/* ---------------- banners ---------------- */
.banner {
  border-radius: var(--radius-sm); padding: .7rem .85rem; margin-bottom: .85rem;
  font-size: .875rem; border: 1px solid var(--line); background: var(--bg-raise);
  display: flex; gap: .6rem; align-items: flex-start;
}
.banner strong { display: block; }
.banner-warn { background: var(--new-soft); border-color: var(--new-line); color: var(--new); }
.banner-bad  { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.banner-info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.banner .textbtn { color: inherit; text-decoration: underline; }

/* ---------------- feed ---------------- */
.feed { list-style: none; margin: 0; padding: 0; }

.card {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .95rem 1rem;
  margin-bottom: .7rem; position: relative;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.card[data-read="1"] { background: var(--bg); }
.card[data-read="1"] .card-title a { color: var(--fg-mute); font-weight: 600; }
.card[data-new="1"] { border-left: 3px solid var(--new); }

.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem;
  font-size: .78rem; color: var(--fg-mute); margin-bottom: .45rem;
}
.pub { font-weight: 700; color: var(--fg); }
.tier {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; border-radius: 4px; padding: .08rem .3rem;
  background: var(--bg-sink); color: var(--fg-mute);
}
.tier-regulator { background: var(--accent-soft); color: var(--accent); }
.tier-exchange, .tier-government { background: var(--new-soft); color: var(--new); }
.age { font-variant-numeric: tabular-nums; }
.age-unknown { color: var(--warn); font-style: italic; }
.newflag {
  font-size: .6875rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--new); background: var(--new-soft);
  border: 1px solid var(--new-line); border-radius: 4px; padding: .05rem .3rem;
}

.card-title { margin: 0 0 .35rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.012em; }
.card-title a { color: var(--fg); text-decoration: none; }
.card-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.card-x { color: var(--fg-mute); font-size: .875rem; margin: 0 0 .5rem; }

.card-topics { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.tchip {
  font-size: .75rem; font-weight: 600; border-radius: 999px;
  padding: .14rem .5rem; background: var(--bg-sink); color: var(--fg-mute);
  border: 1px solid var(--line-soft);
}
.tchip-title { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.tchip-custom { background: var(--new-soft); color: var(--new); border-color: var(--new-line); }

.card-why { font-size: .78rem; color: var(--fg-mute); margin-top: .4rem; }
.card-why code { font-family: var(--mono); font-size: .95em; }

.card-foot { display: flex; align-items: center; gap: .3rem; margin-top: .6rem; flex-wrap: wrap; }
.card-foot .textbtn { font-size: .8125rem; }
.alsoline { font-size: .78rem; color: var(--fg-mute); margin-top: .4rem; }
.alsoline a { color: var(--fg-mute); }

.savebtn[aria-pressed="true"] { color: var(--new); }

/* Advanced mode: compress to scanning rows */
body[data-mode="advanced"] .card { padding: .62rem .75rem; margin-bottom: .4rem; border-radius: var(--radius-sm); }
body[data-mode="advanced"] .card-title { font-size: .9375rem; margin-bottom: .25rem; }
body[data-mode="advanced"] .card-x { display: none; }
body[data-mode="advanced"] .card-meta { margin-bottom: .28rem; font-size: .7375rem; }
body[data-mode="advanced"] .exact { font-family: var(--mono); font-size: .72rem; color: var(--fg-mute); }

body[data-mode="beginner"] .card-why { display: none; }
body[data-mode="beginner"] .exact { display: none; }
body[data-mode="beginner"] .delaytag { display: none; }

.delaytag {
  font-size: .7rem; font-variant-numeric: tabular-nums;
  color: var(--fg-mute); background: var(--bg-sink);
  border-radius: 4px; padding: .05rem .3rem;
}

/* ---------------- states ---------------- */
.feedstate { padding: 2.5rem 1rem; text-align: center; color: var(--fg-mute); }
.feedstate h3 { font-size: 1.0625rem; margin-bottom: .35rem; color: var(--fg); }
.feedstate p { margin: .2rem auto; max-width: 30rem; font-size: .9375rem; }
.feedstate .btn { margin-top: 1rem; display: inline-block; width: auto; }

.sk { border-radius: var(--radius); background: var(--bg-raise); border: 1px solid var(--line); padding: .95rem 1rem; margin-bottom: .7rem; }
.sk span {
  display: block; height: .7rem; border-radius: 4px; margin-bottom: .5rem;
  background: linear-gradient(90deg, var(--bg-sink) 25%, var(--bg-hover) 37%, var(--bg-sink) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
.sk span:nth-child(1) { width: 32%; }
.sk span:nth-child(2) { width: 92%; height: 1rem; }
.sk span:nth-child(3) { width: 68%; height: 1rem; }
.sk span:last-child { width: 45%; margin-bottom: 0; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .sk span { animation: none; }
  .rail[data-open="1"] { animation: none; }
}

/* ---------------- detail + health ---------------- */
.detail:empty { display: none; }
.detail {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem;
}
.detail h3 { font-size: 1rem; margin-bottom: .5rem; }
.detail dl { margin: 0; }

.health {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem;
}
.health h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-faint); }
.health-summary { font-size: .8125rem; color: var(--fg-mute); margin: .5rem 0 .7rem; }
.health-list { list-style: none; margin: 0; padding: 0; font-size: .8125rem; }
.health-list li {
  display: flex; align-items: center; gap: .45rem;
  padding: .32rem 0; border-top: 1px solid var(--line-soft);
}
.health-list li:first-child { border-top: 0; }
/* No ellipsis: the full text used to live only in a title tooltip, which a
   zoom or touch user cannot open. Let it wrap instead. */
.health-list .hname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.health-list .hwhen { color: var(--fg-mute); font-variant-numeric: tabular-nums; font-size: .78rem; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .8125rem; margin: .5rem 0 0; }
.kv dt { color: var(--fg-mute); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---------------- bottom bar (phone) ---------------- */
.bottombar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  background: color-mix(in srgb, var(--bg-raise) 95%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  padding: .3rem .4rem max(.3rem, env(safe-area-inset-bottom));
}
@media (max-width: 899px) { .bottombar { display: grid; grid-template-columns: repeat(4, 1fr); } }
.bb {
  background: none; border: 0; cursor: pointer; color: var(--fg-mute);
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .45rem .2rem; font-size: .6875rem; font-weight: 600; border-radius: var(--radius-sm);
}
.bb [class^="i-"] { width: 1.3rem; height: 1.3rem; }
.bb:active { background: var(--bg-hover); }

/* ---------------- settings sheet ---------------- */
.sheet { position: fixed; inset: 0; z-index: 80; background: rgba(8,12,18,.52); display: grid; }
.sheet-panel {
  background: var(--bg); width: 100%; max-width: 34rem; margin-left: auto;
  height: 100dvh; overflow-y: auto; border-left: 1px solid var(--line);
  animation: slidein .2s ease-out;
}
@media (max-width: 600px) {
  .sheet-panel { max-width: none; margin: auto 0 0; height: 94dvh; border-radius: var(--radius) var(--radius) 0 0; border-left: 0; }
}
@keyframes slidein { from { transform: translateX(4%); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sheet-panel { animation: none; } }

.sheet-head {
  position: sticky; top: 0; background: var(--bg); z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--line);
}
.sheet-head h2 { font-size: 1.125rem; }
.sheet-body { padding: 1.1rem 1.1rem max(2.5rem, env(safe-area-inset-bottom)); }

.fs { border: 0; padding: 0; margin: 0 0 1.9rem; }
.fs legend, .fs h3 {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-faint); font-weight: 700; padding: 0; margin-bottom: .6rem;
}

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.segmented-3 { grid-template-columns: repeat(3, 1fr); }
.seg {
  background: var(--bg-raise); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: .7rem .6rem; cursor: pointer;
  text-align: left; display: flex; flex-direction: column; gap: .15rem;
}
.seg strong { font-size: .9375rem; }
.seg span { font-size: .75rem; color: var(--fg-mute); }
.seg[aria-checked="true"] {
  border-color: var(--accent); background: var(--accent-soft);
}
.seg[aria-checked="true"] strong { color: var(--accent); }
.segmented-3 .seg { align-items: center; text-align: center; padding: .6rem .4rem; }

.field { display: block; margin-top: 1rem; font-size: .875rem; }
.field > span { display: flex; justify-content: space-between; margin-bottom: .4rem; color: var(--fg-mute); }
.field output { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg); }
input[type="range"] { width: 100%; accent-color: var(--accent); }

.check {
  display: flex; gap: .7rem; align-items: flex-start; font-size: .9375rem;
  cursor: pointer; min-height: 44px; padding: .5rem 0; margin-bottom: .25rem;
}
.check input { margin-top: .22rem; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: 0 0 auto; }
.check em { display: block; font-size: .78rem; color: var(--fg-mute); font-style: normal; }

.gl { border-top: 1px solid var(--line-soft); padding: .6rem 0; }
.gl:first-child { border-top: 0; }
.gl dt { font-weight: 700; font-size: .9375rem; }
.gl dd { margin: .15rem 0 0; font-size: .875rem; color: var(--fg-mute); }

/* ---------------- toast ---------------- */
.toast {
  position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%);
  background: var(--ink-0); color: #fff; padding: .6rem 1rem;
  border-radius: 999px; font-size: .875rem; z-index: 90; box-shadow: var(--shadow);
  max-width: calc(100vw - 2rem); text-align: center;
}
@media (min-width: 900px) { .toast { bottom: 1.5rem; } }

/* The light-mode override alone loses on specificity to
   :root[data-theme="dark"], so high-contrast users in dark mode previously
   got nothing. Repeat it for every theme selector, and include --fg-faint. */
@media (prefers-contrast: more) {
  :root { --line: #000; --line-soft: #000; --fg-mute: #2b2b2b; --fg-faint: #2b2b2b; }
  :root[data-theme="dark"],
  :root[data-theme="auto"] {
    --line: #fff; --line-soft: #cfd6df; --fg-mute: #f2f5f9; --fg-faint: #e3e9f0;
  }
  .card { border-width: 1.5px; }
  .watermark-bg, .watermark-corner { display: none; }
}

@media (forced-colors: active) {
  .gradient-canvas, .watermark-bg, .watermark-corner { display: none; }
  .card, .chip, .btn, .iconbtn, .seg { border: 1px solid CanvasText; }
  .chip[aria-pressed="true"], .seg[aria-checked="true"] { outline: 2px solid Highlight; }
}

@media (prefers-reduced-transparency: reduce) {
  .gradient-canvas { display: none; }
  .card, .ob-card, .health, .detail, .sheet-panel, .topbar, .bottombar {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    background: var(--bg-raise) !important;
  }
}

/* Selected story (desktop detail panel) */
.card[aria-current="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
@media (min-width: 1280px) { .card { cursor: default; } }
.detail .btn { display: inline-block; width: auto; margin-top: .8rem; text-decoration: none; }
.detail h3 + .kv { margin-bottom: .9rem; }
.detail h3 { margin-top: .9rem; }
.detail h3:first-child { margin-top: 0; font-size: .95rem; }

/* =========================================================================
   Ownership branding and watermarks
   Decorative only: both marks are aria-hidden and pointer-events:none, so
   they never intercept a tap or interrupt a screen reader. Contrast is kept
   deliberately low so the watermark cannot be mistaken for content, and it is
   removed from print output.
   ========================================================================= */

.brand-text { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.brand-name { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.02em; }
.brand-by {
  font-size: .6875rem; font-weight: 600; color: var(--fg-faint);
  letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ob-by { color: var(--fg-faint); font-weight: 600; letter-spacing: .04em; }

/* Large, very faint page mark sitting behind all content. */
.watermark-bg {
  position: fixed;
  right: -1.5rem;
  bottom: 12vh;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-size: clamp(3rem, 11vw, 9rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--fg);
  opacity: .028;
  transform: rotate(-90deg);
  transform-origin: 100% 100%;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .watermark-bg { opacity: .05; } }

/* "Off" must mean off. These blurs are the most expensive thing in the app on
   a mid-range GPU because they sit on sticky, full-width, scroll-repainted
   elements - and they previously ran even when the user chose "Fastest". */
:root[data-fx="off"] .topbar,
:root[data-fx="off"] .bottombar,
:root[data-fx="off"] .watermark-corner {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  background: var(--bg-raise);
}
:root[data-fx="off"] body::before { display: none; }
:root[data-fx="subtle"] body::before { opacity: .6; }
:root[data-theme="dark"] .watermark-bg { opacity: .05; }

/* Keep real content above the watermark. */
.app, .onboarding, .sheet, .toast { position: relative; z-index: 1; }

/* Persistent corner credit. */
.watermark-corner {
  /* Was position:fixed, which parked it permanently over the bottom-right of
     the feed - i.e. over the last card's action row. */
  position: absolute;
  right: .7rem;
  bottom: .6rem;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--fg-mute);
  background: var(--bg-raise);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: .22rem .6rem;
}
.wm-dot {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c5cff));
}
/* On phones the bottom bar owns the bottom edge, so sit above it. */
@media (max-width: 899px) {
  .watermark-corner { right: .5rem; font-size: .625rem; padding: .18rem .5rem; }
  .watermark-bg { bottom: 18vh; opacity: .025; }
}
@media print {
  .watermark-bg, .watermark-corner { display: none; }
}

/* =========================================================================
   LOADING VOCABULARY
   One spinner primitive, reused at several sizes, plus purpose-built states.
   Every animation is disabled under prefers-reduced-motion, where the loaders
   fall back to a static, still-legible indicator rather than disappearing.
   ========================================================================= */

/* ---- 1. Spinner primitive ---- */
.spinner {
  width: 1em; height: 1em; flex: 0 0 auto;
  display: inline-block; vertical-align: -.15em;
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.spinner-lg { width: 2.4rem; height: 2.4rem; border-width: 3px; color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 2. Button loader ---- */
/* The spinner occupies the icon's place only while the button is busy, so the
   button never changes width and the layout cannot jump. */
.btn-spinner { display: none; }
[aria-busy="true"] > .btn-spinner { display: inline-block; }
[aria-busy="true"] > .i-refresh { display: none; }
.iconbtn[aria-busy="true"], .bb[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] { opacity: .75; pointer-events: none; }

/* ---- 3. Top progress bar (indeterminate) ---- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100;
  background: transparent; overflow: hidden;
  opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.progress[data-on="1"] { opacity: 1; }
.progress > span {
  display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: slide 1.1s ease-in-out infinite;
}
@keyframes slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ---- 4. Fullscreen loader ---- */
.fullscreen-loader {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .28s ease, visibility .28s;
}
.fullscreen-loader[data-done="1"] { opacity: 0; visibility: hidden; }
.fl-inner { text-align: center; display: grid; justify-items: center; gap: .7rem; }
.fl-title { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; margin: .3rem 0 0; }
.fl-sub { font-size: .8125rem; color: var(--fg-mute); margin: 0; }

/* ---- 5. Pulsing ---- */
/* Used for the "live" dot while automatic checking is enabled, and for any
   element that should read as actively updating. */
.pulse { position: relative; }
.pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: inherit; animation: pulsering 1.8s ease-out infinite;
}
@keyframes pulsering {
  0%   { transform: scale(1);   opacity: .65; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.pulse-text { animation: pulsefade 1.6s ease-in-out infinite; }
@keyframes pulsefade { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ---- 6. Pull to refresh ---- */
.ptr {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  height: 0; overflow: hidden;
  font-size: .8125rem; color: var(--fg-mute);
  transition: height .18s ease;
}
.ptr[data-pull="1"] { height: var(--ptr-h, 3rem); }
.ptr[data-busy="1"] { height: 3rem; }
.ptr-circle {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  background: var(--bg-raise);
}
.ptr-arrow {
  width: .55rem; height: .55rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) translate(1px, -1px);
  transition: transform .18s ease;
}
.ptr[data-ready="1"] .ptr-arrow { transform: rotate(135deg) translate(1px, -1px); }
.ptr[data-busy="1"] .ptr-arrow { display: none; }
.ptr[data-busy="1"] .spinner { display: inline-block !important; color: var(--accent); }
@media (min-width: 900px) { .ptr { display: none; } }

/* ---- 7. Infinite scroll loader ---- */
.infinite {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1.2rem 1rem; color: var(--fg-mute); font-size: .875rem;
}
.sentinel { height: 1px; }

/* ---- 8. Reduced motion: keep meaning, drop movement ---- */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: currentColor; opacity: .85; }
  .progress > span { animation: none; width: 100%; opacity: .7; }
  .pulse::after { animation: none; opacity: 0; }
  .pulse-text { animation: none; }
  .fullscreen-loader { transition: none; }
  .ptr { transition: none; }
}

/* =========================================================================
   MESH GRADIENT BACKDROP + LIQUID GLASS
   The backdrop is a WebGL canvas (app/gradient.js) pinned behind everything.
   When WebGL is unavailable, or effects are set to Off, a static CSS gradient
   stands in so the page never looks broken.
   ========================================================================= */

.gradient-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -2; pointer-events: none; display: block;
}

:root[data-fx="off"] .gradient-canvas { display: none; }

/* CSS fallback / Off state: a still mesh gradient built from radial blobs. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -8%,  color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(52rem 36rem at 88% 4%,   color-mix(in srgb, #7c5cff 12%, transparent), transparent 62%),
    radial-gradient(70rem 48rem at 50% 108%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 64%);
}
/* Full mode is driven by the WebGL canvas, so the CSS backdrop steps back. */
:root[data-fx="full"] body::before { opacity: .3; }

/* ---- Liquid glass surfaces ----
   Layered translucency: a blurred, saturated backdrop, a soft inner highlight
   along the top edge, and a hairline border. Falls back to the solid raised
   surface where backdrop-filter is unsupported. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  :root[data-fx="full"] .card,
  :root[data-fx="full"] .health,
  :root[data-fx="full"] .detail,
  :root[data-fx="full"] .ob-card,
  :root[data-fx="full"] .sheet-panel,
  :root[data-fx="subtle"] .ob-card {
    background: color-mix(in srgb, var(--bg-raise) 62%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
            backdrop-filter: blur(16px) saturate(165%);
    /* 12% left cards with a ~1.3:1 boundary, i.e. effectively invisible.
       Glass should not cost the card its edge. */
    border-color: color-mix(in srgb, var(--fg) 34%, transparent);
    position: relative;
  }
  :root[data-fx="full"] .card::after,
  :root[data-fx="full"] .ob-card::after,
  :root[data-fx="full"] .health::after,
  :root[data-fx="full"] .detail::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg,
      color-mix(in srgb, #fff 26%, transparent) 0%,
      transparent 42%);
    opacity: .5;
    mix-blend-mode: soft-light;
  }
  :root[data-theme="dark"][data-fx="full"] .card::after { opacity: .28; }

  :root[data-fx="full"] .topbar,
  :root[data-fx="full"] .bottombar {
    background: color-mix(in srgb, var(--bg-raise) 68%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
  }
}

/* Glass must never cost legibility: if the user asks for more contrast,
   drop the translucency entirely. */
@media (prefers-contrast: more) {
  :root[data-fx] .card,
  :root[data-fx] .ob-card,
  :root[data-fx] .health,
  :root[data-fx] .detail { background: var(--bg-raise) !important; backdrop-filter: none !important; }
  .gradient-canvas { display: none; }
}


/* =========================================================================
   MARKET STATUS STRIP, STORY CLASSIFICATION, FOLDED GROUPS
   ========================================================================= */

.marketbar {
  max-width: var(--maxw); margin: .45rem auto 0; width: 100%;
  display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center;
  font-size: .78rem;
}

.mkt {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .6rem; background: var(--bg-raise); font-weight: 600;
}
.mkt strong { font-weight: 700; }
.mkt-detail { color: var(--fg-mute); font-weight: 500; font-variant-numeric: tabular-nums; }
.mkt-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--fg-faint); }
.mkt-open .mkt-dot, .mkt-special .mkt-dot { background: var(--ok); }
.mkt-open, .mkt-special { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.mkt-pre-open .mkt-dot, .mkt-closing-auction .mkt-dot { background: var(--warn); }
.mkt-closed .mkt-dot { background: var(--fg-faint); }
.mkt-unknown { border-style: dashed; }

.mkt-ev {
  color: var(--fg-mute); border-left: 1px solid var(--line-soft);
  padding-left: .5rem; font-variant-numeric: tabular-nums;
}
.mkt-ev:first-of-type { border-left: 0; padding-left: 0; }

/* Regulator document type: distinct from topic chips on purpose. */
.doctype {
  font-size: .6875rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; border-radius: 4px; padding: .08rem .35rem;
  background: var(--accent); color: var(--accent-ink);
}

.kindtag {
  font-size: .6875rem; font-weight: 700; border-radius: 4px;
  padding: .08rem .35rem; background: var(--bg-sink); color: var(--fg-mute);
  border: 1px solid var(--line-soft);
}
.kind-live { color: var(--new); background: var(--new-soft); border-color: var(--new-line); }
.kind-picks, .kind-sponsored { font-style: italic; }

/* Primary-source emphasis: regulator announcements outrank coverage of them. */
.card[data-tier="regulator"] { border-left: 3px solid var(--accent); }

/* Folded groups */
.foldrow { list-style: none; margin-bottom: .7rem; }
.foldbtn {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--bg); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: .7rem .9rem;
  display: grid; grid-template-columns: auto 1fr; gap: .15rem .7rem;
  align-items: center; min-height: 44px;
}
.foldbtn:hover { background: var(--bg-hover); border-style: solid; }
.foldcount {
  grid-row: span 2; font-size: 1.1rem; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--accent);
  background: var(--accent-soft); border-radius: var(--radius-sm);
  padding: .25rem .5rem; min-width: 2.4rem; text-align: center;
}
.foldlabel { font-weight: 700; font-size: .9375rem; }
.foldnote { font-size: .78rem; color: var(--fg-mute); }

/* Inline detail panel, used below 1280px where the side column is hidden. */
.card-detail {
  margin-top: .75rem; padding-top: .75rem;
  border-top: 1px dashed var(--line);
}
.card-detail h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint); }
.card-detail .btn { display: inline-block; width: auto; margin-top: .7rem; text-decoration: none; }
@media (min-width: 1280px) { .card-detail { display: none; } }

/* Toast visibility is driven by a data attribute, not `hidden`, so the live
   region stays in the accessibility tree while its text changes. */
.toast { opacity: 0; transform: translateX(-50%) translateY(.4rem); transition: opacity .18s, transform .18s; pointer-events: none; }
.toast[data-show="1"] { opacity: 1; transform: translateX(-50%); }

.noscript {
  max-width: 34rem; margin: 3rem auto; padding: 1.5rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raise);
}
.noscript h1 { font-size: 1.25rem; margin-bottom: .5rem; }

/* Install affordance. Chrome only fires beforeinstallprompt when the app is
   actually installable, so this button appears only when pressing it will
   really work -- never as a dead control. */
.iconbtn-cta {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
}
.iconbtn-cta:hover { background: var(--accent); filter: brightness(1.08); }
.i-install { --svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="M7 10l5 5 5-5"/><path d="M4 20h16"/></svg>'); }

.installnote {
  font-size: .78rem; color: var(--fg-mute); margin-top: .5rem;
}