/* RwezeVault — application styles. Copyright © Rweze. */
:root {
  --bg: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --line: #e1e0d9;
  --brand: #14532d;
  --brand-2: #1c7a41;
  --accent: #2a78d6;
  --danger: #d03b3b;
  --good: #0ca30c;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(11,11,11,.08);
  /* viz tokens (light) */
  --viz-series: #2a78d6;
  --viz-grid: #e1e0d9;
  --viz-tick: #898781;
  --viz-ink: #0b0b0b;
  --viz-ink2: #52514e;
  color-scheme: light;
}
/* Dark tokens are applied in exactly two places, and nowhere else:
   an explicit [data-theme="dark"], or "auto" while the operating system asks
   for dark. A light choice therefore always wins over the OS, which is what a
   member who deliberately picked light expects. */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7;
    --muted: #898781; --line: #2c2c2a; --brand: #2ea15c; --brand-2: #1c7a41;
    --viz-series: #3987e5; --viz-grid: #2c2c2a; --viz-tick: #898781;
    --viz-ink: #ffffff; --viz-ink2: #c3c2b7;
    color-scheme: dark;
  }
}
html[data-theme="dark"] {
  --bg: #0d0d0d; --surface: #1a1a19; --ink: #ffffff; --ink-2: #c3c2b7;
  --muted: #898781; --line: #2c2c2a; --brand: #2ea15c; --brand-2: #1c7a41;
  --viz-series: #3987e5; --viz-grid: #2c2c2a; --viz-tick: #898781;
  --viz-ink: #ffffff; --viz-ink2: #c3c2b7;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: .3rem 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 .7rem; }
code { font-size: .85em; background: color-mix(in srgb, var(--line) 50%, transparent); padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: auto; }
.skip:focus {
  left: .6rem; top: .6rem; z-index: 200; width: auto; height: auto;
  background: var(--surface); color: var(--ink); border: 2px solid var(--brand);
  border-radius: 8px; padding: .55rem .9rem; font-weight: 600; box-shadow: var(--shadow);
}
/* Anything hidden from the eye but not from a screen reader. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- top bar ---------- */
/* ======================================================== the top bar ====
   Rebuilt in v1.13. Two things were wrong before:
   1. the menu button inherited .iconbtn's dark ink, which is invisible on the
      dark green bar — it is now its own component and never borrows that ink;
   2. on a phone the search box was the only flexible thing in a row of eight
      fixed ones, so it collapsed to about forty pixels. It now drops to a
      full-width row of its own, opened by the magnifier.
   Every control here is at least 40x40 CSS pixels: a finger is about 9mm. */
.topbar { background: var(--brand); color: #fff; position: sticky; top: 0; z-index: 30; }
.topbar-in { display: flex; align-items: center; gap: .45rem;
  padding: .45rem .7rem; max-width: 1200px; margin: 0 auto; }
.barspacer { flex: 1 1 auto; }

.brand { color: #fff; font-size: 1.1rem; display: flex; align-items: center; gap: .4rem;
  flex: 0 0 auto; min-width: 0; }
.brand b { font-weight: 800; }
.brand:hover { text-decoration: none; }
.brand-word { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* every button that lives ON the bar: white ink, its own surface, always seen */
.barbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 40px; padding: .35rem .6rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px; color: #fff; font: inherit; font-size: .9rem;
  cursor: pointer; text-decoration: none; flex: 0 0 auto;
}
.barbtn:hover { background: rgba(255,255,255,.26); text-decoration: none; }
.barbtn:active { background: rgba(255,255,255,.34); }
.barbtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.barbtn.iconly { min-width: 40px; padding: .35rem; font-size: 1.05rem; }

/* the three bars, drawn rather than typed: a glyph can fail to render, and on
   this bar a missing glyph means a member cannot find the menu at all */
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; }
.burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.menu-toggle[aria-expanded="true"] { background: rgba(255,255,255,.3); }
.barbtn-word { font-weight: 600; letter-spacing: .01em; }
.menu-toggle { display: none; }

.searchbar { position: relative; flex: 1 1 auto; min-width: 0; max-width: 520px;
  display: flex; align-items: center; }
.searchbar .searchicon { position: absolute; left: .7rem; font-size: .95rem; opacity: .55; pointer-events: none; }
/* These carry .topbar deliberately. The generic input[type=search] rule further
   down this sheet has the same specificity and comes later, so without the
   extra class it would win — and its .7rem left padding puts the magnifier
   glyph directly on top of what the member is typing. */
.topbar .searchbar input {
  width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  padding: .55rem 3.2rem .55rem 2.3rem; margin: 0; font-size: 1rem; min-height: 42px;
  background: #fff; color: #16160f;
}
.topbar .searchbar input::placeholder { color: #6b6a63; opacity: 1; }
.topbar .searchbar input:focus { outline: 3px solid #fff; outline-offset: 1px; border-color: #fff; }
.searchclose { display: none; }

.whoami { font-size: .88rem; opacity: .92; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px; white-space: nowrap; flex: 0 0 auto; }
.net-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem;
  background: rgba(255,255,255,.16); border-radius: 999px; padding: .28rem .6rem; flex: 0 0 auto; }
.net-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #7CFC9A; flex: none; }
.net-badge.off .dot { background: #fab219; }

/* the theme button draws its own icon from the current mode */
.themeicon { display: inline-block; width: 1.1em; text-align: center; }
[data-theme="light"] .themeicon::before { content: '☀️'; }
[data-theme="dark"]  .themeicon::before { content: '🌙'; }
[data-theme="auto"]  .themeicon::before { content: '🌗'; }

.search-open { display: none; }

/* ---------- shell ---------- */
.shell { display: flex; flex: 1; max-width: 1200px; margin: 0 auto; width: 100%; }
.shell.minimal { justify-content: center; }
.sidenav { width: 225px; flex-shrink: 0; padding: 1rem .6rem; border-right: 1px solid var(--line); }
.sidenav a, .navlink-btn {
  display: flex; align-items: center; gap: .55rem; padding: .45rem .7rem; border-radius: 8px;
  color: var(--ink-2); font-size: .95rem; width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
}
.sidenav a:hover, .navlink-btn:hover { background: color-mix(in srgb, var(--line) 45%, transparent); text-decoration: none; }
.sidenav a.active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--ink); font-weight: 600; }
.navgroup { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1rem .7rem .3rem; }
.navsection { margin:.35rem 0; }
.navsection-toggle { display:flex; align-items:center; gap:.45rem; width:100%; min-height:38px; padding:.4rem .65rem;
  border:0; border-radius:8px; background:none; color:var(--muted); font:inherit; font-size:.72rem; font-weight:800;
  letter-spacing:.06em; text-align:left; text-transform:uppercase; cursor:pointer; }
.navsection-toggle:hover { background:color-mix(in srgb,var(--line) 45%,transparent); color:var(--ink); }
.navsection-toggle .navchev { margin-left:auto; transition:transform .18s ease; }
.navsection-toggle[aria-expanded="true"] .navchev { transform:rotate(90deg); }
.navsection-panel[hidden] { display:none!important; }
.ic { width: 1.3em; text-align: center; }
.main { flex: 1; padding: 1.2rem 1.4rem 2.5rem; min-width: 0; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 39; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: auto; }
.footer-in { max-width: 1200px; margin: 0 auto; padding: .7rem 1rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; font-size: .85rem; color: var(--ink-2); flex-wrap: wrap; }
.footer-lang a { margin-right: .6rem; }
.footer-lang a.cur { font-weight: 700; color: var(--ink); }

/* ---------- components ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.btn { display: inline-flex; align-items: center; gap: .35rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .95rem; font-size: .93rem; cursor: pointer; }
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-2); }
.btn.danger { color: var(--danger); }
.btn.small { padding: .3rem .7rem; font-size: .85rem; }
.btn.wide { width: 100%; justify-content: center; }
.btnrow { display: flex; gap: .6rem; flex-wrap: wrap; }
.iconbtn { background: none; border: 0; cursor: pointer; font-size: 1rem; padding: .25rem .4rem; border-radius: 6px; color: var(--ink-2); }
.iconbtn:hover { background: color-mix(in srgb, var(--line) 50%, transparent); }
.iconbtn.danger:hover { color: var(--danger); }
label { display: block; margin-bottom: .8rem; font-size: .92rem; color: var(--ink-2); }
input[type=text], input[type=url], input[type=email], input[type=password], input[type=search], input[type=date], input[type=file], select, textarea {
  width: 100%; padding: .55rem .7rem; margin-top: .25rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font-size: .95rem;
}
/* a <select> sizes itself to its longest option, which on a phone is how a
   country list 134 entries long pushes the whole page sideways */
select { width: auto; min-width: 0; max-width: 100%; }
.form-narrow select { width: 100%; }
.inline { display: inline; }
.form-narrow { max-width: 480px; }
.flash { border-radius: 8px; padding: .65rem .9rem; margin-bottom: .9rem; font-size: .93rem; border: 1px solid; }
.flash-success { background: color-mix(in srgb, var(--good) 12%, var(--surface)); border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.flash-error { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.flash-info { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.badge { display: inline-block; font-size: .74rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; border: 1px solid var(--line); }
.badge.ok { color: #fff; background: var(--good); border-color: var(--good); }
.badge.bad { color: #fff; background: var(--danger); border-color: var(--danger); }
.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: .6rem 1.1rem; border-radius: 999px; font-size: .9rem; z-index: 60; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.offline-banner { background: #fab219; color: #201700; border-radius: 8px; padding: .6rem .9rem; margin-bottom: 1rem; font-size: .92rem; }
.offline-banner { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.offline-banner-link { color:#201700; font-weight:800; white-space:nowrap; text-decoration:underline; }

/* v2.14 — offline is a destination, not an error screen. */
.offline-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:1.2rem; align-items:center; padding:clamp(1.2rem,4vw,2.4rem); border-radius:24px; color:#fff; background:linear-gradient(135deg,#073d28 0%,#0f6b45 55%,#14915d 100%); box-shadow:0 18px 50px rgba(5,62,39,.22); }
.offline-hero::after { content:""; position:absolute; width:320px; height:320px; right:-110px; top:-170px; border-radius:50%; background:rgba(255,255,255,.09); }
.offline-hero-copy,.offline-meter { position:relative; z-index:1; }
.offline-kicker { display:inline-flex; padding:.28rem .65rem; border:1px solid rgba(255,255,255,.32); border-radius:999px; background:rgba(255,255,255,.12); font-size:.78rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.offline-hero h1 { margin:.65rem 0 .35rem; font-size:clamp(1.75rem,5vw,2.8rem); line-height:1.05; }
.offline-hero p { margin:0; color:rgba(255,255,255,.84); max-width:650px; }
.offline-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.1rem; }
.offline-actions .btn { border-color:rgba(255,255,255,.34); color:#fff; background:rgba(255,255,255,.1); }
.offline-actions .offline-download { background:#fff; color:#0b5537; border-color:#fff; font-weight:800; }
.offline-meter { display:flex; align-items:center; gap:1rem; padding:1rem; border:1px solid rgba(255,255,255,.22); border-radius:18px; background:rgba(0,0,0,.13); backdrop-filter:blur(9px); }
.offline-meter p { font-size:.82rem; margin:.2rem 0 0; }
.offline-ring { --offline-pct:0; flex:0 0 92px; width:92px; height:92px; border-radius:50%; display:grid; place-content:center; text-align:center; background:radial-gradient(circle at center,#0c6040 57%,transparent 59%),conic-gradient(#a8ffbf calc(var(--offline-pct)*1%),rgba(255,255,255,.22) 0); }
.offline-ring strong { font-size:1.35rem; line-height:1; }.offline-ring span{font-size:.67rem;color:rgba(255,255,255,.78);margin-top:.2rem}
.offline-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin:1rem 0 1.6rem; }
.offline-stats>div { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:.65rem; align-items:center; padding:.8rem 1rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); }
.offline-stats>div>span { grid-row:1/3; font-size:1.45rem; }.offline-stats strong{font-size:1.2rem}.offline-stats small{color:var(--muted)}
.offline-library { margin:0 0 1.4rem; }
.offline-section-head { display:flex; justify-content:space-between; gap:1rem; align-items:end; margin-bottom:.85rem; }
.offline-section-head h2 { margin:0 0 .15rem; }.offline-section-head p{margin:0;color:var(--muted);font-size:.88rem}
.offline-search { display:flex; align-items:center; gap:.35rem; min-width:min(330px,100%); border:1px solid var(--line); border-radius:999px; padding:.1rem .75rem; background:var(--surface); }
.offline-search input { border:0; margin:0; box-shadow:none; background:transparent; }.offline-search input:focus{box-shadow:none}
.offline-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.offline-card { overflow:hidden; display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 6px 24px rgba(0,0,0,.07); transition:transform .18s ease,box-shadow .18s ease; }
.offline-card:hover { transform:translateY(-3px); box-shadow:0 13px 32px rgba(0,0,0,.12); }
.offline-cover { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 78%,#061b12),color-mix(in srgb,var(--brand-2) 66%,#d8fbe3)); }
.offline-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }.offline-card:hover .offline-cover img{transform:scale(1.025)}
.offline-cover.no-cover::after { content:"RwezeVault"; position:absolute; left:1rem; bottom:1rem; color:rgba(255,255,255,.72); font-size:.78rem; font-weight:800; letter-spacing:.08em; }
.offline-source-mark { position:absolute; left:.7rem; top:.7rem; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#fff; background:rgba(0,0,0,.62); backdrop-filter:blur(5px); }
.offline-ready-pill { position:absolute; right:.6rem; top:.6rem; padding:.24rem .55rem; border-radius:999px; color:#fff; background:rgba(15,23,42,.78); backdrop-filter:blur(5px); font-size:.7rem; font-weight:800; }
.offline-card.is-ready .offline-ready-pill { background:rgba(10,112,66,.92); }
.offline-progress { position:absolute; left:0; bottom:0; height:4px; background:#a8ffbf; }
.offline-card-body { display:flex; flex-direction:column; flex:1; padding:.85rem .9rem .75rem; }
.offline-source { color:var(--brand-2); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.offline-card h3 { margin:.35rem 0 .4rem; font-size:1rem; line-height:1.3; }.offline-card h3 a{color:inherit}.offline-card h3 a:hover{text-decoration:none;color:var(--brand-2)}
.offline-card-body>p { margin:0 0 .75rem; color:var(--ink-2); font-size:.82rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.offline-card-foot { display:flex; justify-content:space-between; gap:.5rem; align-items:center; margin-top:auto; padding-top:.55rem; border-top:1px solid var(--line); font-size:.76rem; color:var(--muted); }.offline-card-foot a{font-weight:800;white-space:nowrap}
.offline-empty { text-align:center; padding:2.5rem 1rem; border:1px dashed var(--line); border-radius:16px; background:color-mix(in srgb,var(--surface) 92%,var(--brand) 8%); }.offline-empty>span{font-size:2.5rem}.offline-empty h3{margin:.45rem 0}.offline-empty p{color:var(--muted)}
.offline-settings { padding:0; overflow:hidden; }.offline-settings summary{display:flex;gap:.55rem;align-items:center;cursor:pointer;padding:1rem}.offline-settings summary span{margin-left:auto;color:var(--muted);font-size:.82rem}.offline-settings form{padding:0 1rem 1rem;border-top:1px solid var(--line)}
.offline-mode .offline-card:not(.is-ready) { display:none; }
@media(max-width:720px){.offline-hero{grid-template-columns:1fr;border-radius:18px}.offline-meter{padding:.75rem}.offline-stats{grid-template-columns:1fr}.offline-section-head{align-items:stretch;flex-direction:column}.offline-search{min-width:0}.offline-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.offline-card-body{padding:.7rem}.offline-card-body>p{display:none}.offline-card h3{font-size:.88rem}.offline-card-foot span{display:none}.offline-cover{aspect-ratio:4/3}.offline-banner{align-items:flex-start;flex-direction:column}.offline-banner-link{white-space:normal}}
@media(max-width:390px){.offline-grid{grid-template-columns:1fr}.offline-card{display:grid;grid-template-columns:116px 1fr}.offline-cover{aspect-ratio:auto;height:100%;min-height:145px}.offline-source-mark{display:none}.offline-card h3{font-size:.9rem}}
.count { font-size: .85rem; background: color-mix(in srgb, var(--line) 60%, transparent); border-radius: 999px; padding: .1rem .6rem; vertical-align: middle; color: var(--ink-2); }

/* ---------- auth & hero ---------- */
.authcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem; max-width: 400px; margin: 3rem auto; width: 100%; }
.authcard h1 { font-size: 1.2rem; }
.authalt { text-align: center; font-size: .9rem; margin-top: 1rem; }
.hero { text-align: center; margin: 3.5rem auto; max-width: 560px; padding: 0 1rem; }
.hero h1 { font-size: 2.4rem; margin: .8rem 0 .4rem; }
.hero-logo { border-radius: 20px; }
.tagline { font-size: 1.15rem; color: var(--ink-2); }
.hero-actions { display: flex; gap: .8rem; justify-content: center; margin: 1.4rem 0; }
.hero-points { list-style: none; padding: 0; color: var(--ink-2); display: grid; gap: .45rem; }

/* ---------- library ---------- */
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.savebar { display: flex; gap: .6rem; margin: .4rem 0 1rem; }
.savebar input { flex: 1; margin-top: 0; }
.tagcloud { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.chip { font-size: .82rem; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: .18rem .65rem; color: var(--ink-2); }
.chip:hover { text-decoration: none; border-color: var(--muted); }
.chip.cur { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.mini { font-size: .74rem; padding: .08rem .5rem; }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
.itemcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.itemlink { color: inherit; padding: 0 .9rem; }
.itemlink:hover { text-decoration: none; }
.itemlink h3 { font-size: 1rem; margin: .7rem 0 .3rem; line-height: 1.35; }
.itemlink:hover h3 { color: var(--brand-2); }
/* position:relative is not decoration here — it is what stops .playbadge,
   .thumbtime and .thumbbar (all position:absolute) from resolving against the
   page itself. Without it a single media card's play badge becomes a
   full-viewport overlay that swallows every click on the page. */
.thumb {
  position: relative; height: 120px; background-size: cover;
  background-position: center; background-repeat: no-repeat;
  margin: 0 -0.9rem; overflow: hidden;
}
.itemcard .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A video in the ordinary list gets the same taller frame as on the media page. */
.mediathumb { height: 150px; background-color: color-mix(in srgb, var(--line) 60%, transparent); }
.excerpt { font-size: .85rem; color: var(--ink-2); margin: 0 0 .5rem; }
.itemmeta { padding: 0 .9rem; font-size: .8rem; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.progresspill { font-size: .72rem; background: color-mix(in srgb, var(--brand) 18%, transparent); border-radius: 999px; padding: .05rem .5rem; }
.itemtags { padding: .35rem .9rem 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.itemactions { margin-top: auto; padding: .4rem .6rem; border-top: 1px solid var(--line); }
.empty { text-align: center; padding: 3rem 1rem; color: var(--ink-2); }
.pager { display: flex; gap: .3rem; justify-content: center; margin: 1.4rem 0; flex-wrap: wrap; }
.pager a { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 6px; }
.pager a.cur { background: var(--brand); border-color: var(--brand); color: #fff; }
.sortform select { font-size: .88rem; }

/* ---------- reader ---------- */
.reader { max-width: 720px; margin: 0 auto; }
.reader-head h1 { font-size: 1.7rem; line-height: 1.25; }
.reader-meta { color: var(--muted); font-size: .9rem; }
.reader-toolbar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: .8rem 0; }
.translatebar { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; margin: .8rem 0 1rem; padding: .65rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 92%, var(--brand) 8%); }
.translatebar form { align-items: end; flex-wrap: wrap; }
.translatebar select { margin-top: .2rem; }
.successnote { color: var(--success, #18794e); font-size: .86rem; align-self: center; }
.reader-hero { margin: 0 0 1.2rem; }
.reader-hero img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 12px; background: var(--line); }
.fontctl { display: inline-flex; gap: .2rem; align-items: center; margin-left: auto; }
.tagform { display: flex; gap: .5rem; margin-bottom: 1.2rem; }
.tagform input { margin-top: 0; }
.reader-body { font-size: var(--reader-size, 1.06rem); line-height: 1.75; }
.reader-body img { max-width: 100%; height: auto; border-radius: 8px; }
.reader-body blockquote { border-left: 3px solid var(--brand); margin-left: 0; padding-left: 1rem; color: var(--ink-2); }
.reader-body pre { overflow-x: auto; background: color-mix(in srgb, var(--line) 40%, transparent); padding: .8rem; border-radius: 8px; }
.reader-body table { border-collapse: collapse; width: 100%; overflow-x: auto; display: block; }
.reader-body td, .reader-body th { border: 1px solid var(--line); padding: .35rem .55rem; }
.readprogress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; pointer-events: none; }
.readprogress .bar { height: 100%; width: 0; background: #7CFC9A; transition: width .2s; }
.highlights { margin-top: 2.2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
#hlForm { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
#hlForm input[type=text] { flex: 1; margin-top: 0; min-width: 180px; }
.hl { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #eda100; border-radius: 8px; margin: 0 0 .8rem; padding: .7rem .95rem; }
.hl p { margin: 0 0 .3rem; }
.hlnote { color: var(--ink-2); font-size: .9rem; }
.hl footer { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; }
::selection { background: color-mix(in srgb, #eda100 40%, transparent); }

/* ---------- admin ---------- */
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1rem; }
.stat-n, .stat > b { display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.15; }
.stat-l, .stat > span { display: block; color: var(--ink-2); font-size: .85rem; }
/* A figure that is a word or a date rather than a number must not be set at
   1.9rem, or it wraps into three lines and the tile stops being scannable. */
.stat > b { overflow-wrap: anywhere; }
.stat > b.word { font-size: 1.2rem; line-height: 1.3; }
.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
.table td { padding: .5rem .6rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); vertical-align: top; }
.table .details { max-width: 320px; overflow-wrap: anywhere; font-size: .8rem; }
.filterbar { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.filterbar label { margin: 0; }
.filterbar input, .filterbar select { margin-top: .2rem; }
.cols-logs { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; }
.filelist { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.filelist li { padding: .35rem .4rem; border-radius: 6px; display: flex; flex-direction: column; }
.filelist li.cur { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.logpre { font-size: .78rem; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 65vh; overflow-y: auto; background: color-mix(in srgb, var(--line) 30%, transparent); padding: .8rem; border-radius: 8px; }
.switchrow { display: flex; gap: .5rem; align-items: center; }
.switchrow input { width: auto; margin: 0; }

/* ---------- viz (BI charts) ---------- */
.viz { width: 100%; height: auto; display: block; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-line { stroke: var(--viz-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-dot { fill: var(--viz-series); opacity: 0; }
.viz-hit { fill: transparent; }
.viz-pt:hover .viz-dot { opacity: 1; }
.viz-bar { fill: var(--viz-series); }
.viz-pt:hover .viz-bar { fill: color-mix(in srgb, var(--viz-series) 82%, var(--viz-ink)); }
.viz-tick { fill: var(--viz-tick); font-size: 10px; font-variant-numeric: tabular-nums; }
.viz-label { fill: var(--viz-ink2); font-size: 11px; font-weight: 600; }
.viz-barlabel { fill: var(--viz-ink2); font-size: 11.5px; }
.viz-value { fill: var(--viz-ink2); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---------- knowledge spaces ---------- */
.space-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 980px) { .space-grid { grid-template-columns: 1fr; } }
.chatlog { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; margin-bottom: .8rem; padding-right: .3rem; }
.msg { border-radius: 12px; padding: .55rem .85rem; font-size: .93rem; max-width: 92%; }
.msg p { margin: .25rem 0; }
.msg-user { align-self: flex-end; background: var(--brand); color: #fff; }
.msg-assistant { align-self: flex-start; background: color-mix(in srgb, var(--line) 45%, transparent); }
.msg-assistant .cite { font-weight: 700; }
.picklist { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; margin-bottom: .7rem; display: grid; gap: .3rem; font-size: .88rem; }
.fsresult form { margin-top: .3rem; }
.legal { max-width: 760px; }
.legal h2 { margin-top: 1.4rem; }
.legal ol, .legal ul { padding-left: 1.3rem; }

/* ---------- media players ---------- */
.mediabox { margin: 0 0 1.4rem; }
.mediahead { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .88rem; margin-bottom: .4rem; }
.rv-player { background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.rv-player.rv-embed { position: relative; padding-top: 56.25%; }
.rv-player.rv-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rv-player video { width: 100%; display: block; max-height: 70vh; background: #000; }
.rv-player-audio { background: transparent; padding: 0; }
.rv-player-audio audio { width: 100%; display: block; }
.rv-player-audio iframe { width: 100%; border: 0; border-radius: var(--radius); }
.mediafoot { font-size: .82rem; margin-top: .4rem; }
.excerpt-lg { font-size: 1.05rem; color: var(--ink-2); }
.mediacard .thumb { position: relative; height: 140px; background-color: color-mix(in srgb, var(--line) 60%, transparent); }
.thumb-ph { display: flex; align-items: center; justify-content: center; }
/* Decoration drawn over the thumbnail. It must never take a click: the whole
   thumbnail is already inside the card's link, and an overlay that intercepts
   pointer events is exactly how a card stops opening. */
.playbadge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; text-shadow: 0 2px 8px rgba(0,0,0,.6); pointer-events: none; }
.thumbtime, .thumbbar { pointer-events: none; }
.thumbtime { position: absolute; right: .4rem; bottom: .5rem; background: rgba(0,0,0,.78); color: #fff; font-size: .72rem; padding: .05rem .4rem; border-radius: 4px; font-variant-numeric: tabular-nums; }
.thumbbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.28); }
.thumbbar i { display: block; height: 100%; background: #7CFC9A; }
.queuebar { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.queuelist { list-style: decimal inside; padding: 0; margin: .8rem 0 0; max-height: 300px; overflow-y: auto; font-size: .9rem; }
.queuelist li { padding: .35rem .5rem; border-radius: 6px; display: flex; gap: .5rem; align-items: baseline; justify-content: space-between; }
.queuelist li:hover { background: color-mix(in srgb, var(--line) 40%, transparent); }
.queuelist li.cur { background: color-mix(in srgb, var(--brand) 16%, transparent); font-weight: 600; }
.queuelist .qtitle { cursor: pointer; flex: 1; }
.related { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.relgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.relcard { display: flex; flex-direction: column; gap: .2rem; border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; background: var(--surface); color: inherit; font-size: .88rem; }
.relcard:hover { border-color: var(--brand-2); text-decoration: none; }

/* ---------- command palette ---------- */
.kbdhint { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: color-mix(in srgb, var(--line) 70%, transparent); border: 0; border-radius: 5px; font-size: .7rem; padding: .12rem .35rem; color: var(--ink-2); cursor: pointer; }
.searchbar { position: relative; }
.topbar .searchbar input { padding-right: 3.2rem; }
.palette { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 70; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1rem; }
/* the hidden attribute must win over display:flex, or the overlay would swallow every click */
/* Any display: rule beats the hidden attribute, and every button in this sheet
   has one. So say it once, for everything: hidden means hidden. Without this a
   control that only works with JavaScript is still offered to a reader who has
   none. */
[hidden] { display: none !important; }
.palette[hidden], .scrim[hidden], .toast[hidden], .offline-banner[hidden] { display: none !important; }
.palette-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; width: 100%; max-width: 560px; box-shadow: 0 18px 50px rgba(0,0,0,.32); overflow: hidden; }
#paletteInput { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .9rem 1.1rem; font-size: 1.02rem; margin: 0; background: var(--surface); color: var(--ink); }
#paletteInput:focus { outline: none; }
.palette-list { list-style: none; margin: 0; padding: .3rem; max-height: 46vh; overflow-y: auto; }
.palette-item { display: flex; gap: .6rem; align-items: center; padding: .5rem .7rem; border-radius: 8px; cursor: pointer; font-size: .93rem; }
.palette-item.cur { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.pi-icon { width: 1.4em; text-align: center; }
.pi-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-hint { font-size: .78rem; white-space: nowrap; }
.palette-foot { padding: .45rem 1rem; border-top: 1px solid var(--line); font-size: .76rem; }

/* ---------- billing ---------- */
.licensekey { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; font-size: .82rem; }
.quota { display: inline-block; width: 110px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--line) 80%, transparent); overflow: hidden; vertical-align: middle; margin-right: .5rem; }
.quota i { display: block; height: 100%; background: var(--good); }
.quota i.warn { background: #eda100; }
.quota i.danger { background: var(--danger); }
.plancard { padding: 0 0 .8rem; }
.plancard.cur { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.planprice { margin: .2rem 0 .5rem; font-size: 1.1rem; }
.planlist { list-style: none; padding: 0; margin: 0; font-size: .86rem; color: var(--ink-2); display: grid; gap: .18rem; }
.planlist li::before { content: '· '; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.licform { padding: .7rem; border: 1px solid var(--line); border-radius: 8px; margin-top: .4rem; min-width: 260px; background: var(--bg); }
.licform label { font-size: .82rem; display: block; }
.licform input, .licform select { width: 100%; display: block; }
.licform .btnrow { margin-top: .5rem; }
details > summary { cursor: pointer; list-style: none; display: inline-flex; }
details > summary::-webkit-details-marker { display: none; }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; }
  .sidenav { position: fixed; left: 0; top: 0; bottom: 0; z-index: 40; background: var(--surface); transform: translateX(-105%); transition: transform .2s; overflow-y: auto; padding-top: 3.4rem; box-shadow: 4px 0 18px rgba(0,0,0,.15); }
  .sidenav.open { transform: none; }
  .whoami { display: none; }
  .main { padding: 1rem .9rem 2rem; }
  .cols-logs { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.9rem; }
  /* Narrow enough that the word will not fit: the light keeps the same shape
     and height as the buttons beside it, so it reads as part of the row rather
     than as a stray dot somebody forgot to remove. */
  .net-badge { padding: 0; min-width: 40px; min-height: 40px; justify-content: center;
    border-radius: 10px; border: 1px solid rgba(255,255,255,.28); }
  .net-badge .dot { width: 11px; height: 11px; }
  .net-badge .net-label { display: none; }
  .kbdhint { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .palette { padding: 4vh .6rem; }

  /* the search leaves the row and becomes a row */
  .topbar-in { flex-wrap: wrap; row-gap: .45rem; }
  .search-open { display: inline-flex; }
  .searchbar { display: none; order: 99; flex: 1 0 100%; max-width: none; }
  .topbar-in.searching .searchbar { display: flex; }
  .topbar-in.searching .search-open { background: rgba(255,255,255,.3); }
  .topbar .searchbar input { padding-right: 2.8rem; font-size: 16px; }  /* 16px stops iOS zooming on focus */
  .searchclose { display: inline-flex; align-items: center; justify-content: center;
    position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent;
    color: #4a4941; font-size: 1rem; cursor: pointer; }
  .searchclose:hover { background: rgba(0,0,0,.07); }
}
/* a narrow phone: the word "Menu" and the product name give way, the controls
   never do — a member must always be able to find the menu and the search */
@media (max-width: 430px) {
  .barbtn-word { display: none; }
  .menu-toggle { min-width: 40px; padding: .35rem; }
  .brand-word { display: none; }
  .topbar-in { gap: .35rem; padding: .45rem .5rem; }
}
@media print { .topbar, .sidenav, .footer, .itemactions, .reader-toolbar, .tagform, #hlForm { display: none !important; } }

/* ---------- feed directory ---------- */
.dirfound { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
            padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.dirfound:last-child { border-bottom: 0; }
.dirlatest { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: var(--muted); }
.diractions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.dirrequest { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.dirrequest input { margin-top: 0; width: auto; max-width: 160px; }
.small { font-size: .85rem; }
.switchrow span { display: inline-block; }

/* ---------- feed scout & moderation (v1.5) ---------- */
.scoutnotes { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .2rem; font-size: .84rem; color: var(--ink-2); }
.scoutnotes li::before { content: '· '; color: var(--muted); }
.scoutwhy { list-style: none; padding: .35rem .5rem; margin: .3rem 0 0; display: grid; gap: .15rem;
            font-size: .78rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; min-width: 200px; }
.scoutwhy li { display: flex; gap: .4rem; }
.scoutwhy b { flex: 0 0 2.4rem; text-align: right; font-variant-numeric: tabular-nums; }
.bulkbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .55rem .7rem; margin: .6rem 0;
           background: color-mix(in srgb, var(--brand) 8%, var(--surface)); border: 1px solid var(--line); border-radius: 8px; }
.bulkbar .grow { flex: 1 1 auto; }
.bulkbox { width: 1rem; height: 1rem; margin: 0; accent-color: var(--brand); }
.hiddenform { display: none; }
.scoutpanel { display: grid; gap: .6rem; }
.scoutstat { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-2); }
.scoutstat b { color: var(--ink); }

/* ---------- smart collections (v1.5) ---------- */
.collcard { display: flex; flex-direction: column; gap: .35rem; }
.collrule { font-size: .8rem; color: var(--muted); word-break: break-word; }
.collcount { font-variant-numeric: tabular-nums; }
.pinned { display: grid; gap: .1rem; }
.pinned a { font-size: .86rem; }
.navpin { font-size: .86rem; }
@media (max-width: 860px) {
  .bulkbar { position: sticky; bottom: 0; z-index: 5; }
  .scoutwhy { min-width: 0; }
}
/* moderation table: keep the per-row action panel compact so it fits the card */
.tablewrap .licform { min-width: 0; width: 210px; max-width: 100%; padding: .5rem; }
.tablewrap .licform input { font-size: .82rem; padding: .3rem .4rem; }
.tablewrap .licform .btnrow { display: flex; flex-wrap: wrap; gap: .3rem; }
.tablewrap .table td { vertical-align: top; }

/* ---------- save from anywhere (v1.6) ---------- */
.steps { margin: .3rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: .9rem; }
.steps li { padding-left: .15rem; }
#bmCode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; width: 100%;
          word-break: break-all; background: var(--bg); }
#epCode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.bmlink { cursor: grab; }

/* ---------- social layer (v1.6) ---------- */
.bell { position: relative; text-decoration: none; }
.belldot { position: absolute; top: -2px; right: -4px; min-width: 1rem; height: 1rem; padding: 0 .2rem;
           border-radius: 999px; background: var(--danger); color: #fff; font-size: .62rem; font-weight: 700;
           line-height: 1rem; text-align: center; }
.dirfound.unread { background: color-mix(in srgb, var(--brand) 7%, transparent); border-radius: 6px; padding-left: .5rem; }

.srccard { border-left: 3px solid var(--brand); }
.comment { margin-bottom: .6rem; }
.cmeta { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .35rem; }
.cbody { white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.comment .itemactions { margin-top: .5rem; gap: .35rem; align-items: flex-start; flex-wrap: wrap; }
.comment details { min-width: 0; }
.comment details[open] { display: block; width: 100%; }
.comment details textarea { width: 100%; margin-top: .4rem; }

.reactbar { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .5rem; }
.reactbtn { border: 1px solid var(--line); background: var(--bg); border-radius: 999px;
            padding: .1rem .5rem; font-size: .85rem; cursor: pointer; color: var(--ink-2); line-height: 1.5; }
.reactbtn:hover { border-color: var(--brand); }
.reactbtn.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--ink); }
.reactbtn b { font-size: .74rem; font-variant-numeric: tabular-nums; }

.invlink { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem;
           width: 100%; max-width: 340px; background: var(--bg); }
.justnew { background: color-mix(in srgb, var(--good) 10%, transparent); }

@media (max-width: 860px) {
  .comment { margin-left: 0 !important; }
  .invlink { max-width: none; }
}

/* ---------- dashboard (v1.7) ---------- */
.quickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; margin-top: .7rem; }
.quicktile { display: flex; flex-direction: column; gap: .1rem; padding: .75rem .8rem; text-decoration: none;
             border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink);
             transition: border-color .15s, transform .15s; }
.quicktile:hover { border-color: var(--brand); transform: translateY(-1px); }
.quicktile .qi { font-size: 1.35rem; line-height: 1.2; }
.quicktile strong { font-size: .93rem; }
.quicktile .muted { font-size: .78rem; }
.quicktile.done { opacity: .62; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .55rem; margin-top: .6rem; }
.stattile { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .6rem .75rem;
            border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
            text-decoration: none; color: var(--ink); }
a.stattile:hover { border-color: var(--brand); }
.stattile b { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stattile span { font-size: .78rem; color: var(--ink-2); }
.stattile.hot { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.stattile.hot b { color: var(--brand); }

.progressbar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; margin: .5rem 0; }
.progressbar span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.progressbar.small { height: 5px; margin: .25rem 0; flex: 1 1 auto; }

.pickcard { cursor: pointer; }
.pickcard:hover { border-color: var(--brand); }
.pickcard:has(.bulkbox:checked), .pickcard.is-selected { border-color:var(--brand); background:color-mix(in srgb,var(--brand) 7%,var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 13%,transparent); }
.picktop { display: flex; gap: .5rem; align-items: flex-start; }
.picktop h3 { margin: 0; font-size: .98rem; }
.picktop .bulkbox { margin-top: .2rem; flex: 0 0 auto; }

/* ---------- diagnostics (v1.7) ---------- */
.diagalert { border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
             background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.cmdbox { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem;
          background: var(--bg); word-break: break-all; }
.logbox { max-height: 320px; overflow: auto; background: var(--bg); border: 1px solid var(--line);
          border-radius: 8px; padding: .6rem; font-size: .74rem; line-height: 1.5; white-space: pre-wrap;
          word-break: break-word; }

@media (max-width: 860px) {
  .quickgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .statgrid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* ---------- scheduling & signals (v1.8) ---------- */
.modechoice { align-items: flex-start; padding: .6rem .7rem; border: 1px solid var(--line);
              border-radius: 10px; margin-bottom: .5rem; background: var(--bg); cursor: pointer; }
.modechoice:hover { border-color: var(--brand); }
.modechoice input { margin-top: .25rem; flex: 0 0 auto; }
.modechoice .muted { font-size: .84rem; }
.srcrow { display: flex; gap: .7rem; align-items: center; padding: .3rem 0; font-size: .9rem; }
.srclabel { flex: 0 0 11rem; }
.srcrow .progressbar { flex: 1 1 auto; margin: 0; }
h3 { font-size: .95rem; margin: 1rem 0 .3rem; }
@media (max-width: 860px) {
  .srclabel { flex: 0 0 7.5rem; font-size: .82rem; }
}

/* ================================================================ v1.9 ==== */

/* ---------- source logos ---------- */
.srcicon { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; flex: 0 0 auto;
           background: var(--bg); border: 1px solid var(--line); vertical-align: middle; }
.srcicon.fallback { display: inline-flex; align-items: center; justify-content: center;
                    font-size: .72rem; font-weight: 800; line-height: 1; color: #fff; border: 0;
                    background: hsl(var(--h, 210) 55% 45%); }

/* ---------- the hero strip, with the weather ---------- */
.hero { display: flex; gap: 1rem; align-items: center; justify-content: space-between;
        flex-wrap: wrap; margin-bottom: 1rem; }
.hero-hi h1 { margin: 0 0 .15rem; }
.wxwidget { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem;
            background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
            box-shadow: var(--shadow); color: var(--ink); }
.wxwidget:hover { border-color: var(--brand); text-decoration: none; }
.wxicon { font-size: 1.5rem; line-height: 1; }
.wxnow { display: flex; flex-direction: column; line-height: 1.2; }
.wxnow b { font-size: 1.05rem; }
.wxplace { border-left: 1px solid var(--line); padding-left: .6rem; }
.wxwidget.empty .wxicon { opacity: .6; }

/* ---------- the weather page ---------- */
.wxcard .wxbig { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.wxbigicon { font-size: 3.2rem; line-height: 1; }
.wxbig h2 { margin: 0; }
.wxbig p { margin: .15rem 0; }
.wxbig form { margin-left: auto; }
.wxdays { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .5rem;
          margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.wxday { display: flex; flex-direction: column; align-items: center; gap: .15rem;
         padding: .5rem .3rem; background: var(--bg); border-radius: 10px; font-size: .9rem; }
.wxdayicon { font-size: 1.4rem; line-height: 1; }

/* ---------- the newsstand ---------- */
.newsfilters .filterline { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
                           margin-bottom: .55rem; }
.newsfilters .filterline input[type="search"] { flex: 1 1 14rem; min-width: 0; margin: 0; }
.inlinefield { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem;
                min-width: 0; max-width: 100%; }
/* a select sizes itself to its longest option, so it has to be told not to:
   one magazine with a long name would otherwise push the whole page sideways */
.inlinefield select { margin: 0; width: auto; min-width: 0; max-width: 15rem;
                      padding: .35rem .5rem; text-overflow: ellipsis; }
.chiprow { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip { display: inline-block; padding: .22rem .8rem; border-radius: 999px; font-size: .82rem;
        border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); }
.chip:hover { border-color: var(--muted); text-decoration: none; }
.chip.cur { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

.magbar { display: flex; align-items: center; gap: .7rem; }
.magbar .srcicon { width: 30px; height: 30px; }
.magbar > a:last-child { margin-left: auto; }

.newsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: .9rem; }
.newscard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
            border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.newscard.saved { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.newsimg { display: block; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.newsimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.newsbody { padding: .7rem .8rem .8rem; display: flex; flex-direction: column; gap: .35rem; flex: 1 1 auto; }
.newssrc { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .8rem; }
.newscard h3 { margin: 0; font-size: .96rem; line-height: 1.35; }
.newscard h3 a { color: var(--ink); }
.newscard .excerpt { margin: 0; font-size: .85rem; color: var(--ink-2); }
.newsactions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: auto; padding-top: .35rem; }
.pickone { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.hiddenform { display: none; }
.newsnote { margin-top: 1.2rem; }
.badge.have { border-color: color-mix(in srgb, var(--good) 45%, var(--line));
              background: color-mix(in srgb, var(--good) 12%, var(--surface));
              color: var(--ink); }

/* ---------- "the top of the moment" on the dashboard ---------- */
.toprow { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .8rem; }
.topcard { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line);
           border-radius: 10px; overflow: hidden; }
.topimg { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.topimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topbody { padding: .55rem .65rem .65rem; display: flex; flex-direction: column; gap: .3rem; flex: 1 1 auto; }
.topcard h3 { margin: 0; font-size: .9rem; line-height: 1.3; }
.topcard h3 a { color: var(--ink); }

/* ---------- google sign-in ---------- */
.orline { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 .8rem; color: var(--muted); font-size: .82rem; }
.orline::before, .orline::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.gbtn { justify-content: center; gap: .55rem; font-weight: 600; }
.gbtn svg { flex: 0 0 auto; }
.copyrow { display: flex; gap: .4rem; margin: .35rem 0 .2rem; }
.copyrow input { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; background: var(--bg); }
.steps { margin: .4rem 0 .6rem 1.1rem; padding: 0; }
.steps li { margin-bottom: .5rem; }
.stattile.ok { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }

/* ---------- the guided tour ---------- */
body.tour-on { overflow: hidden; }
.tourlayer { position: fixed; inset: 0; z-index: 90; }
.tourveil { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.tourring { position: absolute; border: 2px solid var(--brand); border-radius: 12px;
            box-shadow: 0 0 0 9999px rgba(0,0,0,.55); pointer-events: none;
            transition: top .2s, left .2s, width .2s, height .2s; }
.tourbox { position: absolute; z-index: 92; margin: 0; max-width: 92vw; }
.tourbox h3 { margin: 0 0 .3rem; font-size: 1rem; }
.tourbox p { margin: 0 0 .7rem; font-size: .9rem; color: var(--ink-2); }
.tourfoot { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tourfoot .muted { margin-right: auto; }
.tourline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 1.4rem 0 .5rem; }

@media (max-width: 860px) {
  .hero { gap: .6rem; }
  .wxwidget { width: 100%; border-radius: var(--radius); justify-content: flex-start; }
  .newsgrid { grid-template-columns: 1fr; }
  .toprow { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .inlinefield { width: 100%; }
  .inlinefield select { flex: 1 1 auto; width: 100%; max-width: 100%; }
  .newsfilters .filterline { gap: .4rem; }
  .tourring { border-radius: 10px; }
}

/* ================================================================ v1.10 ==== */

/* ---------- the three-rung activation ladder ---------- */
.ladder { list-style: none; margin: .8rem 0; padding: 0; }
.ladder li { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0;
             border-left: 2px solid var(--line); margin-left: 14px; padding-left: 1.1rem; }
.ladder li:last-child { border-left-color: transparent; }
.rung { flex: 0 0 auto; width: 28px; height: 28px; margin-left: -2.55rem; border-radius: 999px;
        display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
        font-size: .85rem; background: var(--surface); border: 2px solid var(--line); color: var(--muted); }
.ladder li.done .rung { background: var(--good); border-color: var(--good); color: #fff; }
.ladder li.done { border-left-color: var(--good); }
.ladder li.now .rung { border-color: var(--brand); color: var(--brand); }
.ladder li.now strong { color: var(--brand); }
.ladder li.later { opacity: .68; }
.badge.bad { color: #fff; background: var(--danger); border-color: var(--danger); }

/* ---------- 👍 👎 🚫 : what a member thinks of an article or a source ---------- */
.vdrow { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
         padding-top: .4rem; margin-top: .2rem; border-top: 1px dashed var(--line); font-size: .78rem; }
.vdsep { margin-left: .3rem; }
.vdbar { display: inline-flex; gap: 2px; }
.vdbtn { border: 1px solid var(--line); background: var(--bg); cursor: pointer;
         font-size: .9rem; line-height: 1; padding: .2rem .4rem; border-radius: 7px;
         filter: grayscale(1); opacity: .55; transition: opacity .12s, filter .12s; }
.vdbtn:hover { opacity: 1; filter: none; border-color: var(--muted); }
.vdbtn.on { opacity: 1; filter: none; font-weight: 700; }
.vdbtn.on.more  { border-color: var(--good);   background: color-mix(in srgb, var(--good) 15%, var(--surface)); }
.vdbtn.on.less  { border-color: var(--muted);  background: color-mix(in srgb, var(--muted) 15%, var(--surface)); }
.vdbtn.on.block { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, var(--surface)); }
.magbar .vdbar { margin-left: .4rem; }

/* ---------- reading with no network ---------- */
.progressbar.big { height: 12px; border-radius: 999px; margin: .6rem 0; }
.progressbar.big span { border-radius: 999px; }
.pickchip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .85rem;
            border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
            cursor: pointer; font-size: .88rem; }
.pickchip input { margin: 0; width: auto; }
.pickchip.cur { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface));
                font-weight: 600; }
.tablewrap { overflow-x: auto; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.rowacts { display: flex; gap: .3rem; flex-wrap: wrap; }
.dirfound.cur { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }

/* ---------- second factor ---------- */
.codeinput { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.5rem;
             letter-spacing: .35em; text-align: center; }
.qrrow { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; margin: .8rem 0; }
.qrbox { background: #fff; padding: 10px; border-radius: 10px; border: 1px solid var(--line);
         line-height: 0; flex: 0 0 auto; }
.qrbox svg { display: block; width: 190px; height: 190px; }
.qrside { flex: 1 1 15rem; min-width: 0; }
.codelist { list-style: none; margin: .6rem 0; padding: 0; display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; }
.codelist li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem;
               background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
               padding: .4rem .6rem; text-align: center; letter-spacing: .04em; }
.card.danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.linkbtn { background: none; border: 0; color: var(--brand); cursor: pointer; font-size: .9rem;
           padding: 0; text-decoration: underline; }
.tfahelp { margin-top: 1rem; font-size: .9rem; }
.tfahelp summary { cursor: pointer; color: var(--ink-2); }

@media print {
  .sidenav, .topbar, .footer, .btnrow, .tourline { display: none !important; }
  .codelist li { break-inside: avoid; }
}

/* ---------- the guide ---------- */
.whatis { display: block; font-size: .88rem; margin-top: -.2rem; }
.helpbtn { font-size: 1.05rem; }
.helpcard { position: fixed; z-index: 80; width: min(330px, 92vw); margin: 0;
            box-shadow: 0 10px 32px rgba(0,0,0,.22); }
.helpcard h3 { margin: 0 0 .3rem; font-size: 1rem; }
.helpcard p { margin: 0 0 .7rem; font-size: .88rem; color: var(--ink-2); }
.guidegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: .6rem; }
.guidecard { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .75rem;
             background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.guidecard:hover { border-color: var(--brand); text-decoration: none; }
.guidecard.seen { border-left: 3px solid var(--good); }
.gicon { font-size: 1.3rem; line-height: 1.2; flex: 0 0 auto; }
.gtext { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.gtext .badge.small { align-self: flex-start; font-size: .68rem; margin-top: .15rem; }
kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem;
      background: var(--bg); border: 1px solid var(--line); border-bottom-width: 2px;
      border-radius: 5px; padding: .1rem .4rem; }

/* ---------- watchlists ---------- */
.watchcard.paused { opacity: .72; }
.chip.small { font-size: .74rem; padding: .1rem .55rem; }

/* ---------- the second-factor setup key ---------- */
.setupsteps > li { margin-bottom: 1.1rem; }
.setupsteps p { margin: .25rem 0 .5rem; }
.keybox { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; }
.keybox input { flex: 1 1 18rem; min-width: 0; margin: 0;
                font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                font-size: 1.05rem; letter-spacing: .12em; text-align: center;
                background: var(--bg); }

/* ================================================================ v1.11 ==== */

/* ---------------------------------------------------- the landing page ---- */
.shell.minimal .lp-hero, .lp-hero { padding: 3.2rem 1rem 2.4rem; text-align: center;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--brand) 20%, transparent) 0%, transparent 62%),
    var(--bg); }
.lp-inner { max-width: 1080px; margin: 0 auto; padding: 0 .4rem; }
.lp-eyebrow { display: inline-block; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand); font-weight: 700; border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  padding: .25rem .8rem; border-radius: 999px; margin-bottom: 1rem; }
.lp-hero h1 { font-size: clamp(2rem, 5.2vw, 3.3rem); line-height: 1.1; margin: 0 0 .8rem; letter-spacing: -.02em; }
.lp-hero h1 b { color: var(--brand); }
.lp-lede { font-size: clamp(1rem, 2.1vw, 1.2rem); color: var(--ink-2); max-width: 46rem;
  margin: 0 auto 1.6rem; line-height: 1.55; }
.lp-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.btn.big { padding: .8rem 1.6rem; font-size: 1.02rem; font-weight: 600; }
.lp-reassure { margin-top: .9rem; font-size: .86rem; color: var(--muted); }

.lp-flow { display: flex; align-items: stretch; justify-content: center; gap: .5rem;
  flex-wrap: wrap; margin-top: 2.4rem; }
.lp-step { flex: 0 1 200px; display: flex; flex-direction: column; gap: .2rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem .8rem; box-shadow: var(--shadow); }
.lp-step b { font-size: .96rem; }
.lp-step .muted { font-size: .82rem; line-height: 1.4; }
.lp-ico { font-size: 1.7rem; line-height: 1; }
.lp-arrow { align-self: center; color: var(--muted); font-size: 1.2rem; }

.lp-band { background: var(--surface); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); padding: 2.6rem 1rem; }
.lp-section { padding: 2.8rem 1rem; }
.lp-section h2, .lp-band h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); text-align: center; margin: 0 0 .4rem; }
.lp-sub { text-align: center; color: var(--muted); max-width: 44rem; margin: 0 auto 1.8rem; }

.lp-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.4rem; }
.lp-why > div { text-align: center; }
.lp-why b { font-size: 1.8rem; display: block; line-height: 1.2; }
.lp-why h3 { margin: .4rem 0 .25rem; font-size: 1rem; }
.lp-why p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }

.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: .9rem; }
.lp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; box-shadow: var(--shadow); }
.lp-card h3 { margin: .5rem 0 .3rem; font-size: 1.02rem; }
.lp-card p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.55; }

.lp-vs th.us, .lp-vs td.us { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.lp-vs th.us { color: var(--brand); }
.lp-vs td { vertical-align: top; }

.lp-faq details { border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: .75rem 1rem; margin-bottom: .5rem; }
.lp-faq summary { cursor: pointer; font-weight: 600; }
.lp-faq p { margin: .6rem 0 0; color: var(--ink-2); line-height: 1.6; }

.lp-final { text-align: center; padding: 3rem 1rem 3.4rem;
  background: radial-gradient(120% 120% at 50% 120%, color-mix(in srgb, var(--brand) 18%, transparent) 0%, transparent 60%), var(--bg); }

/* ------------------------------------------------------------- pricing ---- */
.plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1rem; }
.plancard { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem 1.2rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .5rem; }
.plancard.featured { border-color: var(--brand); box-shadow: 0 6px 22px color-mix(in srgb, var(--brand) 22%, transparent); }
.plancard.owned { border-color: var(--good); }
.plancard h2, .plancard h3 { margin: 0; font-size: 1.2rem; }
.ribbon { position: absolute; top: -11px; right: 14px; background: var(--brand); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .18rem .6rem; border-radius: 999px; }
.price { margin: .3rem 0; }
.price b { font-size: 2rem; line-height: 1; letter-spacing: -.02em; }
.price .per { color: var(--muted); font-size: .9rem; }
.planfeat { list-style: none; margin: .4rem 0 .9rem; padding: 0; font-size: .9rem; }
.planfeat li { padding: .28rem 0; border-bottom: 1px dashed var(--line); }
.planfeat li:last-child { border-bottom: 0; }
.plancard .btn { margin-top: auto; justify-content: center; }
.btn[aria-disabled="true"] { opacity: .6; cursor: default; justify-content: center; }

.curbar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.methodrow { display: flex; gap: .4rem; flex-wrap: wrap; }
.methodrow.center { justify-content: center; }
.methodchip { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem;
  padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.methodchip.on { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--surface)); }

/* ------------------------------------------------------------ checkout ---- */
.checkoutsum { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.checkoutsum h2 { margin: .15rem 0; }
.checkoutprice { text-align: right; }
.checkoutprice b { font-size: 1.7rem; }
.monthrow .pickchip { flex-direction: column; align-items: flex-start; padding: .5rem .9rem; }
.monthrow .pickchip b { display: block; }
.methodpick .modechoice { display: flex; gap: .6rem; }

/* ------------------------------------------------------------- invoice ---- */
.invoicehead { display: flex; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.bigamount { font-size: 2.1rem; font-weight: 700; margin: .2rem 0; letter-spacing: -.02em; }
.invoiceref { min-width: 15rem; flex: 1 1 15rem; }
.paysteps > li { margin-bottom: 1rem; }
.paydetails { margin: .5rem 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.payline { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.payline:last-child { border-bottom: 0; }
.payline > .muted { flex: 0 0 9rem; font-size: .86rem; }
.payvalue { display: flex; gap: .35rem; flex: 1 1 12rem; min-width: 0; }
.payvalue input { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem; background: var(--bg); }
.payqr { max-width: 190px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.instructions { background: var(--bg); border-left: 3px solid var(--brand); padding: .6rem .8rem;
  border-radius: 0 8px 8px 0; font-size: .9rem; }

/* ------------------------------------------------------ admin money desk --- */
.paycard { border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem;
  margin-bottom: .6rem; background: var(--bg); }
.paycard .picktop { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bigish { font-size: 1.1rem; font-weight: 700; }
.refuseinput { flex: 1 1 12rem; margin: 0; min-width: 0; font-size: .85rem; }
.paymethod.on { border-left: 3px solid var(--good); }
.curgrid { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0; }
.ratesgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; }
.ratefield { display: flex; align-items: center; gap: .4rem; }
.ratefield > span:first-child { flex: 0 0 auto; font-size: .85rem; color: var(--muted); }
.ratefield input { margin: 0; }
.ratecode { flex: 0 0 auto; font-size: .8rem; color: var(--muted); }

/* -------------------------------------------------------------- receipt ---- */
.receipt { max-width: 46rem; }
.receipthead { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding-bottom: .8rem; border-bottom: 2px solid var(--line); margin-bottom: .8rem; }
.receipthead h2 { margin: 0; }
.receiptref { text-align: right; }
.receipttable th { text-align: left; width: 12rem; color: var(--muted); font-weight: 500; }
.receipttotal th, .receipttotal td { border-top: 2px solid var(--line); font-size: 1.1rem; padding-top: .6rem; }
@media print { .noprint, .sidenav, .topbar, .footer { display: none !important; } }

@media (max-width: 860px) {
  .lp-arrow { display: none; }
  .lp-step { flex: 1 1 45%; }
  .checkoutprice { text-align: left; }
  .payline > .muted { flex: 1 1 100%; }
  .receipthead { flex-direction: column; }
  .receiptref { text-align: left; }
}
.lp-curs { justify-content: center; margin-bottom: 1.2rem; }

/* ============================================================== v1.12 ==== */

/* -------------------------------------------------- the welcome (discovery) */
.wel-head { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; }
.wel-steps { display: flex; align-items: center; gap: .4rem; }
.wel-dot { display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: .8rem; font-weight: 600; }
.wel-dot.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.wel-line { width: 2rem; height: 1px; background: var(--line); }
.wel-skip { margin: 0; }
.wel-card { max-width: 46rem; }
.wel-card h1 { margin-top: 0; }
.wel-card h2 { margin-top: 1.4rem; font-size: 1.05rem; }
.wel-country { width: 100%; max-width: 100%; min-width: 0; }
.wel-invite { border-left: 3px solid var(--brand); }

.wel-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .55rem; margin: .6rem 0 1rem; }
.wel-topics.compact { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.wel-topic { display: flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-size: .9rem; transition: border-color .12s, background .12s; }
.wel-topic:hover { border-color: var(--brand-2); }
.wel-topic input { margin: 0; flex: none; }
.wel-topic .wel-ico { font-size: 1.15rem; line-height: 1; }
.wel-topic:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
/* the :has() fallback — the server also marks the chosen ones */
.wel-topic.on { border-color: var(--brand); }

/* ------------------------------------------------------------ the news wall */
.wallgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .8rem; margin: 1rem 0; }
.wallgrid.small { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
.wallcard { display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: inherit; text-decoration: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
.wallcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand-2); }
.wallcard.as-card { display: flex; }
.wallgo { display: flex; flex-direction: column; color: inherit; text-decoration: none; flex: 1; }
.wallimg { display: block; width: 100%; height: 8.5rem; background-size: cover;
  background-position: center; background-color: var(--bg); }
.wallgrid.small .wallimg { height: 6.5rem; }
.wallimg-none { display:grid; place-items:center; height:3.25rem; font-size:1.15rem; opacity:.58;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,var(--surface)),var(--surface)); }
.wallbody { display: flex; flex-direction: column; gap: .35rem; padding: .65rem .7rem; }
.wallsrc { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  font-size: .72rem; color: var(--muted); }
.walltitle { font-size: .88rem; line-height: 1.35; font-weight: 600; }
.wallcard .newsactions { padding: 0 .7rem .65rem; }

/* sources offered on the welcome */
.srcpicks { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .5rem; margin: .6rem 0; }
.srcpick { display: flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); font-size: .85rem; }
.srcpick input { margin: 0; flex: none; }
.srcname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srcpick { position:relative; min-height:64px; padding:.65rem .75rem; transition:border-color .16s,box-shadow .16s,background .16s; }
.srcpick:has(input:checked), .srcpick.is-selected { border-color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 14%,transparent); }
.srcpick-copy { min-width:0; display:grid; gap:.12rem; flex:1; }
.srcpick-copy small { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srcpick-state { display:grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; border:1px solid var(--line); color:transparent; font-size:.72rem; font-weight:900; }
.srcpick:has(input:checked) .srcpick-state, .srcpick.is-selected .srcpick-state { background:var(--brand); border-color:var(--brand); color:#fff; }
.source-selection-bar { position:sticky; bottom:.6rem; z-index:6; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-top:1rem; padding:.75rem;
  border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--surface) 92%,transparent); box-shadow:var(--shadow); backdrop-filter:blur(12px); }
.source-selection-bar .grow { flex:1; }

/* ---------------------------------------------------------- country filters */
.dirwhere { margin: .6rem 0 1rem; flex-wrap: wrap; }
.dirwhere select { min-width: 0; max-width: 100%; }
.seedask { border-left: 3px solid var(--accent); }
.rowwarn td:first-child { border-left: 3px solid var(--danger); }

/* -------------------------------------------------------------- announcements */
.annbanner { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.annitem h2 { margin-top: .3rem; }
.annbody { line-height: 1.6; }
.card.danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }

/* ------------------------------------------------------------------ bitcoin */
.btcbox { margin-top: .8rem; padding: .8rem; border: 1px dashed var(--line);
  border-radius: var(--radius); background: var(--bg); }
.btcbox input[readonly] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 860px) {
  .wel-head { flex-direction: column; align-items: stretch; }
  .wallgrid, .wallgrid.small { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
  .wallimg { height: 6.5rem; }
  .wallimg-none { height:2.75rem; }
  .wel-topics { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
  .srcpicks { grid-template-columns: 1fr; }
}
.wallimg:is(img) { object-fit: cover; }


/* ==========================================================================
   v1.14 — text written by somebody else must never widen the page.
   A publisher's excerpt can be one unbroken run of hundreds of characters
   (YouTube's footer is exactly that). With overflow-wrap:normal such a run
   pushes the whole document sideways, and every page of the platform then
   scrolls horizontally on a phone. Every surface that renders foreign text
   breaks it instead.
   ========================================================================== */
.reader, .reader p, .reader li, .reader td, .reader h1, .reader h2, .reader h3,
.excerpt, .excerpt-lg, .hitsnip, .itemlink h3, .hitlink h3, .notebody,
.newsitem p, .newsitem h3, .cardgrid p, .cardgrid h3, .annbody, .msg-body {
  overflow-wrap: anywhere;
  word-break: normal;
}
/* Long addresses and code inside a saved article get a scrollbar of their own
   rather than dragging the page with them. */
.reader pre, .reader table { max-width: 100%; overflow-x: auto; }
.reader img, .reader video, .reader iframe { max-width: 100%; height: auto; }

/* ==========================================================================
   v1.13 — search results, the listen bar, and the accessibility pass.
   Everything below uses the same tokens as the rest of the sheet, so it
   follows light, dark and auto without a single extra rule.
   Copyright © Rweze.
   ========================================================================== */

/* ---------- A visible focus ring, everywhere, for keyboards only ----------
   :focus-visible means a mouse click never draws a ring, but a Tab always
   does. Without this a keyboard user cannot tell where they are on the page,
   which is the single most common way a platform becomes unusable without a
   mouse. The bar buttons keep their own white ring against the dark green. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Anyone who asks their system for less movement gets none of ours. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
/* Anyone who asks for more contrast gets harder edges, not a different design. */
@media (prefers-contrast: more) {
  :root { --line: #8a8880; --muted: #4a4945; }
  .card, .btn, .chip, .badge { border-width: 2px; }
}

/* ---------- The search page ---------- */
.searchpage .filterline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.searchpage .filterline input[type=search] { flex: 1 1 16rem; min-width: 0; min-height: 44px; margin: 0; }
.searchpage .chiprow { margin-top: .7rem; }
.searchpage p.small { margin: .7rem 0 0; font-size: .82rem; }
.search-refine { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)) auto; gap: .55rem; align-items: end; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.search-refine label { display: grid; gap: .25rem; min-width: 0; color: var(--muted); font-size: .76rem; font-weight: 750; }
.search-refine select { width: 100%; min-width: 0; margin: 0; }

.alsoin { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .7rem 1.1rem; }

.hitlist { display: grid; gap: .8rem; margin-bottom: 1.2rem; }
.hit {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .85rem 0 .7rem; overflow: hidden;
}
.hit:focus-within { border-color: var(--brand-2); }
.hitlink { display: block; color: inherit; padding: 0 1.1rem; }
.hitlink:hover { text-decoration: none; }
.hitlink:hover h3 { color: var(--brand-2); }
.hitlink h3 { margin: 0 0 .3rem; font-size: 1.04rem; line-height: 1.35; color: var(--ink); }
.hitsnip {
  margin: 0 0 .55rem; font-size: .9rem; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* The matched words. Never colour alone — the weight carries it for anyone
   who cannot separate the two colours. */
.hitsnip mark, .hit mark {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: inherit; font-weight: 700; padding: 0 .12em; border-radius: 3px;
}
.hit .itemmeta { padding: 0 1.1rem; }
.hit .itemtags { padding: .45rem 1.1rem 0; display: flex; gap: .3rem; flex-wrap: wrap; }

/* ---------- Listen to the article ---------- */
.listenbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--line) 25%, transparent);
}
.listenbar.speaking { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 12%, transparent); }
.listenbar .btn { background: var(--surface); }
.listenrate { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.listenrate select, .listenvoice { margin: 0; width: auto; min-height: 34px; padding: .2rem .5rem; font-size: .85rem; }
.listenvoice { max-width: 12rem; }
@media (max-width: 560px) {
  .listenbar { width: 100%; border-radius: var(--radius); justify-content: flex-start; }
  .listenvoice { max-width: 100%; flex: 1 1 100%; }
}

/* ---------- Small pieces the new pages lean on ---------- */
.field { display: block; margin-bottom: .9rem; }
.field > span { display: block; margin-bottom: .25rem; font-size: .88rem; color: var(--ink-2); }
.fieldlabel { display: block; margin-bottom: .4rem; font-size: .92rem; color: var(--ink-2); }
.check { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .6rem; color: var(--ink); }
.check input[type=checkbox] { margin: .2rem 0 0; width: 18px; height: 18px; flex: 0 0 auto; }
.legal-lead {
  border-left: 3px solid var(--brand); padding: .1rem 0 .1rem .9rem;
  margin: 0 0 1.2rem; font-size: 1rem; line-height: 1.6;
}
.codescard { border-color: var(--brand); }
.logview { max-height: 60vh; overflow: auto; }
.lp-plans { margin-top: 1rem; }

/* v2.7 — compact, thumb-friendly Quick access customization. */
.near-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1rem}.near-tabs .active{box-shadow:inset 0 -2px currentColor}.discoverybox{border-inline-start:4px solid var(--brand,#166534)}.discovery-row .evmeta{width:100%}.discovery-row .btnrow{margin-top:.4rem}.discovery-list{margin-top:.6rem}
.quick-fixed { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:.75rem }
.quick-fixed span { padding:.65rem .8rem; border:1px solid var(--line); border-radius:.75rem; background:var(--card) }

/* v2.12 — opt-out magazine shelf: useful immediately, easy to tune. */
.magazinebox { border-inline-start:4px solid var(--brand); }
.magazinebox .lib-head { align-items:flex-start; }
.magazinebox summary { cursor:pointer; display:inline-flex; margin:.3rem 0 .75rem; list-style:none; }
.magazinebox summary::-webkit-details-marker { display:none; }
.magazinelist { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.55rem; }
.magazineitem { display:flex; align-items:center; gap:.55rem; min-width:0; padding:.65rem; border:1px solid var(--line); border-radius:.75rem; background:var(--surface); }
.magazineitem.is-hidden { opacity:.72; background:color-mix(in srgb,var(--line) 22%,transparent); }
.magazineitem .grow { min-width:0; }
.magazineitem strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.magrestore { margin-top:.75rem; }
.magazine-homebar { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
@media (max-width:600px) { .magazinelist { grid-template-columns:1fr; } .magazineitem { padding:.55rem; } }

/* v2.13.1 — a magazine rail and a separate, scrollable headline reader. */
.news-two-pane { display:grid; grid-template-columns:minmax(250px,310px) minmax(0,1fr); gap:1rem; align-items:start; }
.news-mag-pane,.news-headline-pane { min-width:0; }
.news-mag-pane .magazinebox { position:sticky; top:5.5rem; margin:0; }
.magazine-scroll { max-height:calc(100vh - 15rem); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding-inline-end:.25rem; }
.news-mag-pane .magazinelist { grid-template-columns:1fr; }
.magazineitem.selected { border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 18%,transparent); }
.magazineitem .grow a { color:var(--ink); text-decoration:none; }
.magazineitem .grow a:hover { color:var(--brand); text-decoration:underline; }
.news-headline-pane { max-height:calc(100vh - 8rem); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding-inline-end:.25rem; }
.pane-title { margin:.1rem 0 .75rem; }
@media (max-width:860px) {
  .news-two-pane { grid-template-columns:1fr; }
  .news-mag-pane .magazinebox { position:static; }
  .magazine-scroll { max-height:none; overflow-x:auto; overflow-y:hidden; padding:0 0 .4rem; }
  .news-mag-pane .magazinelist { display:flex; width:max-content; max-width:none; }
  .news-mag-pane .magazineitem { flex:0 0 min(78vw,280px); }
  .news-headline-pane { max-height:72vh; }
}

@media (max-width: 600px) {
  .backup-table thead { display:none }
  .backup-table, .backup-table tbody, .backup-table tr, .backup-table td { display:block; width:100% }
  .backup-table tr { padding:.6rem 0; border-bottom:1px solid var(--line) }
  .backup-table td { display:grid; grid-template-columns:minmax(6.5rem, 34%) 1fr; gap:.65rem; padding:.35rem 0; border:0; white-space:normal }
  .backup-table td::before { content:attr(data-label); color:var(--muted); font-size:.78rem; font-weight:700; text-transform:uppercase }
  .backup-table .btnrow { margin:0 }
}
.footer-langlinks { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.themebtn .themeicon { font-size: 1.05rem; line-height: 1; }

/* Printing an article, a receipt or a set of recovery codes should give paper
   that is worth keeping: no navigation, no buttons, black on white. */
@media print {
  .topbar, .sidebar, .drawer, .footer, .btnrow, .btn, .iconbtn, .barbtn,
  .pager, .listenbar, .skip, .palette, .fontctl, .tagform, .searchbar,
  .chiprow, .guide, button, input, select, textarea { display: none !important; }
  /* One exception: a warning printed on a page of recovery codes is the part
     the reader most needs to keep. */
  .codescard .flash { display: block !important; border: 1px solid #999; }
  body { background: #fff; color: #000; }
  .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #444; }
  .codescard a[href]::after { content: ""; }
}

/* ==========================================================================
   v1.15 — two shelves, a date rail, and a list that never ends in a wall of
   page numbers.
   Copyright © Rweze.
   ========================================================================== */

/* ---------- the two shelves ----------
   Side by side and always both present, so the structure is legible on the
   first visit rather than something a member has to discover. */
.shelfbar { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 0 0 .9rem; }
.shelftab {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  min-height: 62px;
}
.shelftab:hover { border-color: var(--muted); text-decoration: none; }
.shelftab.cur { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand), var(--shadow); }
.shelftab .ic { font-size: 1.35rem; flex: 0 0 auto; line-height: 1; }
.shelftext { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.shelftext strong { font-size: .96rem; line-height: 1.25; }
.shelftext small { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.shelftab .count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.shelftab.cur .count { background: var(--brand); color: #fff; }

/* the lenses on the open shelf */
.lensrow { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.lensrow .chip small { opacity: .7; margin-left: .2rem; font-variant-numeric: tabular-nums; }

.libfilters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; }
.libfilters .sortform { margin: 0; }
.monthnote { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-radius: var(--radius); padding: .5rem .8rem; margin: 0 0 .9rem; font-size: .9rem; }

/* ---------- tidying the stream ---------- */
.tidybox { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: .6rem .9rem; margin-bottom: .9rem; }
.tidybox summary { cursor: pointer; font-weight: 600; }
.tidyform { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.tidyform select { width: auto; margin: 0; }

/* ---------- the list beside its rail ---------- */
.libbody { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }

/* The rail: months, newest at the top, each bar as wide as that month was
   busy. It is a column of ordinary links — it works with JavaScript off, and
   it is what replaces sixty-four numbered buttons. */
.daterail {
  position: sticky; top: 1rem; align-self: start;
  display: flex; flex-direction: column; gap: 1px;
  width: 5.6rem; max-height: calc(100vh - 3rem); overflow-y: auto;
  padding: .4rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  scrollbar-width: thin;
}
.railhint { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); padding: .1rem .3rem .3rem; }
.railyear { font-size: .72rem; font-weight: 700; color: var(--ink-2);
  padding: .45rem .3rem .15rem; position: sticky; top: 0; background: var(--surface); }
.railmonth {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: .3rem; padding: .18rem .3rem; border-radius: 5px;
  font-size: .74rem; color: var(--ink-2); overflow: hidden;
}
.railmonth:hover { text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--line) 45%, transparent); }
/* the bar sits behind the text, so the label is never covered by it */
.railbar { position: absolute; left: 0; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--brand) 16%, transparent); z-index: 0; }
.raillabel, .railn { position: relative; z-index: 1; }
.railn { font-variant-numeric: tabular-nums; opacity: .65; font-size: .68rem; }
.railmonth.here { color: var(--ink); font-weight: 600; }
.railmonth.here .railbar { background: color-mix(in srgb, var(--brand) 30%, transparent); }
.railmonth.cur { background: var(--brand); color: #fff; font-weight: 600; }
.railmonth.cur .railbar { background: rgba(255,255,255,.22); }
.railmonth.cur .railn { opacity: .85; }

/* ---------- selecting several ---------- */
.itemcard { position: relative; }
/* The tick sits in the bottom-right corner of the card, where the action row
   leaves empty space. It was over the top-left corner at first, and on a card
   whose title runs to three lines it covered the first two words — a selection
   control that hides what you are selecting is worse than no control. Down
   here it never overlaps text, it lands under the thumb on a phone, and it is
   faintly visible at rest so it can be discovered rather than stumbled on. */
.pickbox { position: absolute; right: .5rem; bottom: .42rem; z-index: 3; margin: 0;
  opacity: .32; transition: opacity .12s ease; }
.itemcard:hover .pickbox, .itemcard:focus-within .pickbox,
.pickbox:has(input:checked), .cardgrid.picking .pickbox { opacity: 1; }
.pickbox input { width: 22px; height: 22px; margin: 0; cursor: pointer;
  accent-color: var(--brand);
  box-shadow: 0 0 0 2px var(--surface); border-radius: 4px; }
/* A picked card says so on its own, so a long list of selections stays
   readable without counting ticks. */
.itemcard:has(.pickbox input:checked) {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent), var(--shadow);
}
/* On a touch screen there is no hover, so the ticks are simply always there. */
@media (hover: none) { .pickbox { opacity: .8; } }

.bulkbar {
  position: sticky; bottom: .6rem; z-index: 20;
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  background: var(--surface); border: 1px solid var(--brand); border-radius: 999px;
  padding: .5rem .8rem; margin: .8rem 0; box-shadow: 0 8px 28px -14px rgba(0,0,0,.55);
}
.bulkbar[hidden] { display: none !important; }
.bulkcount { font-size: .9rem; margin-right: .3rem; }
.bulkcount strong { font-variant-numeric: tabular-nums; }

/* ---------- where a card came from ---------- */
.originpill { font-size: .8rem; opacity: .55; }

/* ---------- the end of the list ---------- */
.morebar { margin: 1.4rem 0 .5rem; text-align: center; }
.morebar .btn { justify-content: center; }
.morebar p { margin: .5rem 0 0; }
.endnote { text-align: center; margin: 1.4rem 0; }

@media (max-width: 860px) {
  /* The rail becomes a horizontal strip above the list: still one press to any
     month, but it never steals width from the cards on a phone. */
  .libbody { grid-template-columns: 1fr; }
  .daterail {
    position: static; width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    max-height: none; gap: .3rem; align-items: center; padding: .45rem .5rem;
    order: -1; margin-bottom: .8rem;
    scroll-snap-type: x proximity;
  }
  .railhint { display: none; }
  .railyear { position: static; padding: 0 .2rem; align-self: center; }
  .railmonth { flex: 0 0 auto; flex-direction: column; gap: 0; min-width: 3.1rem;
    padding: .3rem .35rem; text-align: center; scroll-snap-align: center; }
  .railbar { top: auto; bottom: 0; height: 3px; left: .2rem; right: .2rem; width: auto !important; }
  .shelfbar { grid-template-columns: 1fr; }
  .shelftab { min-height: 54px; }
}

/* ---------- v1.15: the two shelves in the side menu ----------
   The member has to see, without reading, that their own things and the
   stream from their sources are two different piles, and that favourites,
   notes and saved pages are ways of looking at the first one rather than
   four more places to lose something in. A guide line and an indent say
   that; a second column of equal-weight links would not. */
.sidenav a.navshelf { font-weight: 600; color: var(--ink); }
.sidenav .navnest {
  margin: .1rem 0 .35rem 1.15rem;
  padding-left: .55rem;
  border-left: 2px solid color-mix(in srgb, var(--line) 85%, transparent);
}
.sidenav a.navsub { font-size: .88rem; padding-top: .32rem; padding-bottom: .32rem; }
.sidenav a.navsub .ic { font-size: .92em; opacity: .85; }
.sidenav a.navshelf .count, .sidenav a.navsub .count {
  margin-left: auto; font-size: .74rem; padding: .05rem .45rem; font-variant-numeric: tabular-nums;
}
.sidenav a.navshelf.active .count { background: var(--brand); color: #fff; }

/* ================= v1.16: the growth cockpit =================
   Dense on purpose. An owner reading their own numbers wants them all on one
   screen; scrolling between the funnel and the cohort grid is how a leak goes
   unnoticed for a month. Every colour here is a token, so the whole thing is
   as readable at midnight as at noon. */
.kpirow { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; margin: .6rem 0 0; }
.kpi {
  border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem;
  background: color-mix(in srgb, var(--line) 12%, transparent);
  display: flex; flex-direction: column; gap: .1rem; min-width: 0;
}
.kpilabel { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.kpival { font-size: 1.5rem; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpidelta { font-size: .78rem; font-variant-numeric: tabular-nums; }
.kpidelta.up   { color: #157f3d; }
.kpidelta.down { color: #a3271f; }
.kpidelta.flat { color: var(--muted); }
.kpihint { font-size: .72rem; color: var(--muted); margin-top: .15rem; }
:root:not([data-theme="light"]) .kpidelta.up   { color: #63d68d; }
:root:not([data-theme="light"]) .kpidelta.down { color: #ff8f85; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .kpidelta.up { color: #157f3d; } }
:root[data-theme="dark"] .kpidelta.up   { color: #63d68d; }
:root[data-theme="dark"] .kpidelta.down { color: #ff8f85; }

/* ---- what to do first ---- */
.advicelist { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.advice { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .7rem; border-radius: 10px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--line) 10%, transparent); }
.advice p { margin: .2rem 0 0; font-size: .9rem; color: var(--ink-2); }
.sevdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; margin-top: .4rem; background: var(--muted); }
.advice.sev-high .sevdot { background: #c8442f; }
.advice.sev-med  .sevdot { background: #d39a1c; }
.advice.sev-ok   .sevdot { background: #2e7d4f; }
.advice.sev-high { border-color: color-mix(in srgb, #c8442f 45%, var(--line)); }

/* ---- the funnel ---- */
.funnel { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.funnel li { display: grid; grid-template-columns: minmax(120px, 1.3fr) 3fr auto auto auto;
  gap: .5rem; align-items: center; font-size: .9rem; padding: .25rem .3rem; border-radius: 8px; }
.funnel li.leak { background: color-mix(in srgb, #c8442f 12%, transparent); }
.fname { overflow-wrap: anywhere; }
.fbar { display: block; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--line) 55%, transparent); overflow: hidden; }
.fbar i { display: block; height: 100%; background: var(--brand); }
.funnel li.leak .fbar i { background: #c8442f; }
.fn, .fpct, .flost { font-variant-numeric: tabular-nums; text-align: right; }
.fpct { color: var(--ink-2); min-width: 3.4em; }
.flost { color: #a3271f; min-width: 3.4em; font-size: .82rem; }

/* ---- cohort heat grid ---- */
.tablewrap { overflow-x: auto; }
table.cohort { border-collapse: collapse; font-size: .82rem; }
table.cohort th, table.cohort td { padding: .3rem .45rem; text-align: center; white-space: nowrap; }
table.cohort th[scope="row"] { text-align: left; font-weight: 600; }
.csize { color: var(--muted); font-variant-numeric: tabular-nums; }
.ccell { font-variant-numeric: tabular-nums; border-radius: 5px;
  background: color-mix(in srgb, var(--brand) var(--heat, 0%), transparent);
  color: var(--ink); }
.ccell.empty { background: none; color: transparent; }

/* ---- a percentage you can compare at a glance ---- */
.minibar { display: inline-block; width: 46px; height: 7px; border-radius: 999px; margin-right: .4rem;
  background: linear-gradient(to right, var(--brand) var(--v, 0%), color-mix(in srgb, var(--line) 55%, transparent) 0); }

.advicebox h2, .card > h3 { margin-bottom: .2rem; }
.card.wide { grid-column: 1 / -1; }
/* the bar and its number belong on one line, or the eye reads two columns */
td .minibar { vertical-align: middle; }
table td:has(.minibar) { white-space: nowrap; }
.kpidelta:empty { display: none; }

/* ---------- v1.16: sharing a list, and the streak ---------- */
.sharebox { margin-top: .5rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.sharebox summary { cursor: pointer; font-size: .88rem; color: var(--ink-2); }
.sharebox .shareinput { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.shareurl { display: block; margin: .4rem 0; }
.sharepill { font-size: .78rem; padding: .05rem .45rem; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 16%, transparent); }

.streakbar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; margin: .1rem 0 .8rem;
  background: color-mix(in srgb, var(--line) 12%, transparent); }
.streakbar.fed { border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  background: color-mix(in srgb, var(--brand) 9%, transparent); }
.streakflame { font-size: 1.4rem; line-height: 1; }
.streaktext { display: flex; flex-direction: column; min-width: 0; }
.streaktext strong { font-size: 1.02rem; }
.streakbar .btn { margin-left: auto; }

/* ---------- the public reading list ---------- */
.publist { max-width: 760px; margin: 0 auto; padding: 1rem .2rem 3rem; }
.publist-head h1 { margin: .2rem 0 .4rem; overflow-wrap: anywhere; }
.publist-note { font-size: 1.03rem; color: var(--ink-2); margin: .2rem 0 .5rem; }
.publist-items { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .9rem; counter-reset: pub; }
.publist-items li { display: flex; gap: .8rem; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 12px; padding: .75rem .85rem; background: var(--surface); }
.pubthumb { flex: 0 0 84px; height: 62px; border-radius: 8px; background-size: cover; background-position: center;
  background-color: color-mix(in srgb, var(--line) 40%, transparent); }
.pubbody { min-width: 0; }
.publist-items h2 { font-size: 1.02rem; margin: 0 0 .2rem; overflow-wrap: anywhere; }
.pubexcerpt { margin: .1rem 0 .3rem; color: var(--ink-2); font-size: .92rem; overflow-wrap: anywhere; }
.publist-cta { margin-top: 1.6rem; text-align: center; }
@media (max-width: 560px) { .pubthumb { display: none; } }

/* ---------- v1.17: bringing follows in ---------- */
.howgrid { display: grid; gap: .45rem; margin-top: .5rem; }
.howgrid details { border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; }
.howgrid summary { cursor: pointer; font-weight: 600; }
.howsteps { margin: .5rem 0 .3rem 1.1rem; padding: 0; display: grid; gap: .3rem; font-size: .93rem; }
.patternlist { margin: .4rem 0 0 1.1rem; padding: 0; font-size: .9rem; display: grid; gap: .25rem; }
.patternlist code { font-size: .86rem; background: color-mix(in srgb, var(--line) 40%, transparent);
  padding: .05rem .3rem; border-radius: 4px; overflow-wrap: anywhere; }

.reviewcounts { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.pill { font-size: .85rem; padding: .15rem .6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--line) 45%, transparent); }
.pill.ok   { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.pill.warn { background: color-mix(in srgb, #d39a1c 22%, transparent); }
table.reviewtable td { vertical-align: top; }
table.reviewtable tr.nofeed td { opacity: .62; }
table.reviewtable tr.already td { opacity: .55; }

/* the offer, on the dashboard */
.proposebox { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.propgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem; margin: .6rem 0; }
.proptile { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem;
  border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--line) 10%, transparent); }
.proptile:hover { border-color: var(--brand); text-decoration: none; }
.proptile .qi { font-size: 1.3rem; }

/* ---------- v1.18: linked accounts, and the seven days ---------- */
.connlist { display: grid; gap: .7rem; }
.conncard { padding: .9rem 1rem; }
.connhead { display: flex; align-items: flex-start; gap: .7rem; }
.connhead h2 { margin: 0; font-size: 1.05rem; }
.connicon { font-size: 1.6rem; line-height: 1; }
.connbadge { margin-left: auto; font-size: .74rem; padding: .12rem .55rem; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--line) 50%, transparent); }
.connbadge.ok   { background: color-mix(in srgb, var(--brand) 20%, transparent); }
.connbadge.warn { background: color-mix(in srgb, #d39a1c 26%, transparent); }
.connbadge.no   { background: color-mix(in srgb, #c8442f 16%, transparent); }
.conncard .btnrow { margin-top: .5rem; align-items: center; }

.trialbar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); border-radius: 10px;
  padding: .6rem .8rem; margin-bottom: .9rem;
  background: color-mix(in srgb, var(--brand) 9%, transparent); }
.trialbar.last { border-color: color-mix(in srgb, #d39a1c 60%, var(--line));
  background: color-mix(in srgb, #d39a1c 12%, transparent); }
.trialbar.over { border-color: color-mix(in srgb, #c8442f 45%, var(--line));
  background: color-mix(in srgb, #c8442f 9%, transparent); }
.trialbar .btn { margin-left: auto; }
.trialtext strong { display: block; }

tr.pausedrow td { opacity: .68; }
.pausedpill { font-size: .74rem; padding: .05rem .45rem; border-radius: 999px;
  background: color-mix(in srgb, #d39a1c 24%, transparent); }

/* ================= v1.19: the cockpit, made interactive =================
   The chart is inline SVG so it inherits the theme's own colours and costs
   nothing to load. Everything here degrades: with the script blocked the page
   is still the same page, minus the hovering. */
.bihead { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bihead h2 { margin: 0; }
.bicontrols { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.rangebtns { display: inline-flex; gap: .2rem; }
.rangebtns .btn.cur { background: var(--brand); color: #fff; border-color: var(--brand); }

.bichartbox { margin-top: .6rem; }
.bichart { width: 100%; height: 220px; display: block; overflow: visible; }
.bichart:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.biline { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.biarea { fill: color-mix(in srgb, var(--brand) 16%, transparent); stroke: none; }
.bigrid { stroke: color-mix(in srgb, var(--line) 70%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.biaxis { fill: var(--muted); font-size: 11px; }
.bicross { stroke: var(--muted); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.bidot { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.biaxisrow { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); margin-top: .1rem; }
.bireadout { min-height: 1.3em; margin: .2rem 0 0; font-variant-numeric: tabular-nums; font-weight: 600; }

.biflags { display: flex; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 0; }
.biflag { font-size: .78rem; padding: .1rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--line) 50%, transparent); }
.biflag.high  { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.biflag.low   { background: color-mix(in srgb, #c8442f 18%, transparent); }
.biflag.trend { background: color-mix(in srgb, #d39a1c 20%, transparent); cursor: help; }

th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--brand); }
th.sortable[data-dir="asc"]::after  { content: " ▲"; font-size: .7em; }
th.sortable[data-dir="desc"]::after { content: " ▼"; font-size: .7em; }

.drilllink { border-bottom: 1px dotted currentColor; text-decoration: none; }
.drilllink:hover { text-decoration: none; border-bottom-style: solid; }
.drillpanel { border-color: var(--brand); }
.drillpanel[hidden] { display: none !important; }

/* ---------- v1.19: a space, managed by whoever owns it ---------- */
.spacetools { margin: .4rem 0 1rem; }
.spacetools summary { cursor: pointer; color: var(--ink-2); font-size: .92rem; }
.spacetools-in { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: .5rem; }
.spacetools-in .card { margin: 0; }
.artbar { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.artbar input[type=text] { max-width: 240px; }

/* ---------- v1.20: a headline opens HERE ----------
   The wall, the top row and the newsstand used to link straight to the
   publisher. They are buttons now, because pressing one creates something (the
   article is saved to the member's library and opened in the reader) and a
   link must never do that. These rules make a button look exactly like the
   link it replaced — same block, same cursor, same everything. */
button.wallgo, button.topimg, button.newsimg, button.linkbtn {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  text-align: inherit; cursor: pointer; width: 100%;
}
.pubthumb:is(img) { width: 84px; object-fit: cover; }
button.wallgo { display: flex; flex-direction: column; }
button.topimg, button.newsimg { display: block; }
button.linkbtn { color: var(--ink); font-weight: inherit; overflow-wrap: anywhere; }
button.linkbtn:hover, button.wallgo:hover .walltitle { text-decoration: underline; }
button.wallgo:focus-visible, button.topimg:focus-visible,
button.newsimg:focus-visible, button.linkbtn:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}
.hiddenform { display: none; }

/* ==================================================================
   v2.0 — Ask, Recall, Brief, Inbox, Listen, Chat.
   Everything below is built from the tokens already declared at the
   top of this file, so light and dark are handled once and these
   components can never drift from the rest of the platform.
   ================================================================== */

/* --- shared small pieces ---------------------------------------- */
.plain { list-style: none; margin: .5rem 0; padding: 0; }
.plain li { padding: .3rem 0; border-bottom: 1px solid var(--line); }
.plain li:last-child { border-bottom: 0; }
.narrow { max-width: 12rem; }
.inlineform { display: inline; margin-left: .4rem; }
.bigstat { font-size: 1.9rem; font-weight: 700; margin: .3rem 0; line-height: 1.1; }
.note { border-left: 3px solid var(--accent); }
.card.ok { border-left: 3px solid var(--good); }
.passage { margin: .6rem 0; padding: .6rem .9rem; border-left: 3px solid var(--brand);
           background: color-mix(in srgb, var(--line) 28%, transparent);
           border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; }
.passage.big { font-size: 1.08rem; font-style: normal; line-height: 1.55; }
.passage footer { font-style: normal; margin-top: .4rem; }

.bar { height: 8px; border-radius: 99px; overflow: hidden; margin: .4rem 0;
       background: color-mix(in srgb, var(--line) 60%, transparent); }
.bar > span { display: block; height: 100%; background: var(--brand-2); transition: width .3s ease; }
.bar.hot > span { background: var(--danger); }

.sparkbars { display: flex; align-items: flex-end; gap: 2px; height: 74px; margin: .6rem 0; }
.sparkbars .sb { flex: 1 1 auto; display: flex; align-items: flex-end; min-width: 3px; }
.sparkbars .sb > span { width: 100%; background: var(--viz-series); border-radius: 2px 2px 0 0; }

/* --- Ask my library --------------------------------------------- */
.askbox textarea { width: 100%; resize: vertical; font: inherit; }
.answer .answerbody { font-size: 1.02rem; line-height: 1.65; }
.answerbody p { margin: .7rem 0; }
.answerbody sup.cite { font-weight: 700; color: var(--brand-2); font-size: .72em;
                       padding: 0 .12em; vertical-align: super; }
.cites { margin: .5rem 0 0; padding-left: 1.4rem; }
.cites li { margin: .45rem 0; }
.cites details { margin-top: .3rem; }

/* --- daily recall ------------------------------------------------ */
.recallstack { display: grid; gap: .8rem; }
.recallcard { border-left: 3px solid var(--brand-2); }
.recall-ladder { display: flex; align-items: flex-end; gap: .5rem; height: 84px; margin: .6rem 0; }
.recall-rung { display: flex; flex-direction: column; align-items: center;
               justify-content: flex-end; gap: .2rem; flex: 1 1 0; }
.recall-rungbar { display: block; width: 100%; max-width: 26px; border-radius: 3px 3px 0 0;
                  background: var(--brand-2); }

/* --- the newsletter inbox ---------------------------------------- */
.addrcard { border-left: 3px solid var(--accent); }
.bigaddr { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .5rem 0; }
.bigaddr code { font-size: 1.05rem; padding: .45rem .7rem; border-radius: var(--radius);
                background: color-mix(in srgb, var(--line) 45%, transparent);
                word-break: break-all; user-select: all; }

/* --- listening --------------------------------------------------- */
.player { position: sticky; top: .5rem; z-index: 5; }
.nowplaying { display: flex; gap: .8rem; align-items: center; }
.pl-icon { font-size: 1.6rem; }
.pl-meta { display: flex; flex-direction: column; min-width: 0; }
.pl-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-bar { height: 5px; border-radius: 99px; margin: .6rem 0;
          background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; }
.pl-bar > span { display: block; height: 100%; width: 0; background: var(--brand-2); }
.pl-controls { align-items: center; }

.queue { list-style: none; margin: .8rem 0; padding: 0; display: grid; gap: .35rem; }
.qitem { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem;
         border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.qitem.playing { border-color: var(--brand-2); box-shadow: 0 0 0 1px var(--brand-2) inset; }
.qitem.done { opacity: .55; }
.qmeta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.qmeta a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- chat -------------------------------------------------------- */
.chathead h1 { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.topicline { margin: -.4rem 0 .6rem; }
.roomlist { list-style: none; margin: .8rem 0; padding: 0; display: grid; gap: .35rem; }
.roomlist .room > a { display: flex; gap: .7rem; align-items: center; padding: .6rem .75rem;
                      border: 1px solid var(--line); border-radius: var(--radius);
                      background: var(--surface); text-decoration: none; color: inherit; }
.roomlist .room.unread > a { border-color: var(--brand-2); }
.ravatar { font-size: 1.4rem; }
.rmeta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rmeta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { display: inline-block; width: .55em; height: .55em; border-radius: 99px; vertical-align: middle; }
.dot.online { background: var(--good); }

/* Scoped under .chatwrap so the Knowledge Space transcript, which owns
   .chatlog and .msg elsewhere in this file, is left exactly as it was. */
.chatwrap .chatlog { max-height: 58vh; min-height: 12rem; padding: .5rem;
                     border: 1px solid var(--line); border-radius: var(--radius);
                     background: var(--surface); }
.chatwrap .msg { align-self: flex-start; background: color-mix(in srgb, var(--line) 45%, transparent);
                 display: flex; flex-direction: column; gap: .15rem; }
.chatwrap .msg.mine { align-self: flex-end; background: var(--brand); color: #fff; }
.chatwrap .msg.mine a { color: #fff; }
.chatwrap .msg.system { align-self: center; background: none; max-width: 100%; text-align: center; padding: .2rem; }
.chatwrap .msg .who { font-weight: 700; font-size: .8rem; opacity: .85; }
.chatwrap .msg .when { font-size: .72rem; opacity: .7; }
.sharedcard { display: flex; flex-direction: column; gap: .15rem; margin-top: .35rem;
              padding: .45rem .6rem; border-radius: 8px; text-decoration: none;
              background: color-mix(in srgb, var(--bg) 70%, transparent); color: inherit;
              border: 1px solid var(--line); }
.typing { min-height: 1.1em; margin: .3rem 0; }
.chatform { display: flex; gap: .5rem; align-items: flex-end; margin-top: .6rem; }
.chatform textarea { flex: 1 1 auto; resize: none; font: inherit; min-height: 2.4rem;
                     max-height: 10rem; padding: .55rem .7rem; border-radius: var(--radius);
                     border: 1px solid var(--line); background: var(--surface); color: inherit; }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .3rem; }

@media (max-width: 700px) {
  .player { position: static; }
  .chatwrap .chatlog { max-height: 52vh; }
  .chatwrap .msg { max-width: 96%; }
  .bigaddr code { font-size: .95rem; }
}

/* ==================================================================
   v2.1 — interface repairs.

   Three things were wrong on a phone and all three were mine:
   the word "Message" sat visibly beside the chat box because .sr-only
   was used in a view but never defined in this sheet; the top bar
   spilled onto a second row once the chat button joined it; and the
   compose row squeezed the text box down to a stub between a select
   and a send button. Each is fixed at the source below.
   ================================================================== */

/* For labels a screen reader must read and a screen must not show.
   Not display:none — that would hide it from screen readers too, which
   is the whole point of the class. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- the top bar stays one row ----------------------------------- */
/* The icon buttons live in one group that never wraps. The search still
   drops to its own row when opened, which is what the wrap was for. */
.barcluster { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }

@media (max-width: 640px) {
  /* Help has a floating button of its own on every page, so it is the one
     that can leave the bar without anybody losing a way in. */
  .helpbtn { display: none; }
  .barcluster { gap: .3rem; }
}
@media (max-width: 400px) {
  /* Last to go, and only on the narrowest phones: the theme switch is also
     in Settings. The menu, search, presence, alerts and chat never leave. */
  .themebtn { display: none; }
  .topbar-in { gap: .28rem; padding: .4rem .4rem; }
  .barbtn.iconly { min-width: 36px; font-size: 1rem; }
}

/* --- the chat room ------------------------------------------------ */
/* A conversation should fill the space it has and no more. An empty room
   showed a 450px void; now it sizes to its content down to a small floor
   and only scrolls once there is something to scroll. */
.chatwrap { display: flex; flex-direction: column; gap: .5rem; }
.chatwrap .chatlog { max-height: 55vh; min-height: 0; overflow-y: auto; }
.chatwrap .chatlog:empty { display: none; }
.chatempty { text-align: center; padding: 1.6rem 1rem; color: var(--muted); }
.chatempty .big { font-size: 2rem; display: block; margin-bottom: .4rem; }

/* The compose row: the text box gets the width, the controls get their
   own line beneath it. Two 40px buttons and a select cannot share a phone
   row with a text box and leave the text box usable. */
.chatform { display: grid; grid-template-columns: 1fr auto; gap: .5rem;
  align-items: end; margin-top: 0; }
.chatform textarea { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
.chattools { grid-column: 1; display: flex; gap: .4rem; align-items: center;
  flex-wrap: wrap; min-width: 0; }
.chatform .sendbtn { grid-column: 2; min-width: 52px; min-height: 44px; font-size: 1.15rem; }

/* the settings block reads as a control, not as a slab of page */
details.roomcard { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 0; margin-top: .8rem; }
details.roomcard > summary { padding: .75rem .9rem; cursor: pointer; font-weight: 600;
  list-style: none; }
details.roomcard > summary::-webkit-details-marker { display: none; }
details.roomcard > summary::after { content: '▾'; float: right; opacity: .6; }
details.roomcard[open] > summary::after { content: '▴'; }
details.roomcard > *:not(summary) { padding-left: .9rem; padding-right: .9rem; }
details.roomcard > *:last-child { padding-bottom: .9rem; }

/* ==================================================================
   v2.1 — faces, and a conversation with something in it.
   ================================================================== */

/* --- avatars ------------------------------------------------------ */
.avatar { display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; flex: none; object-fit: cover; vertical-align: middle;
  background: var(--line); overflow: hidden; }
.avatar-ini { color: #fff; font-weight: 700; letter-spacing: .02em; line-height: 1;
  text-transform: uppercase; }

.whoami-link { display: inline-flex; align-items: center; gap: .4rem; color: #fff;
  text-decoration: none; }
.whoami-link:hover { text-decoration: none; opacity: .9; }
.whoami-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
@media (max-width: 860px) { .whoami-link .whoami-name { display: none; }
  .whoami-link { display: inline-flex; } .whoami { display: inline-flex; } }

/* --- profiles ----------------------------------------------------- */
.profhead { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.profpic { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.profid { flex: 1 1 14rem; min-width: 0; }
.profname { font-size: 1.35rem; display: block; }
.proftag { margin: .4rem 0; font-size: 1.02rem; }
.memberrow { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; }
.memberlist { list-style: none; margin: .5rem 0; padding: 0; }
.memberlist li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .4rem 0; border-bottom: 1px solid var(--line); }
.memberlist li:last-child { border-bottom: 0; }

/* --- the conversation header -------------------------------------- */
.chathead { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; flex-wrap: nowrap; }
.chathead h1 { font-size: 1.15rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatwho { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: inherit;
  min-width: 0; flex: 1 1 auto; }
.chatwho:hover { text-decoration: none; }
.chatwho-t { display: flex; flex-direction: column; min-width: 0; }
.chatwho-t strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinnedbar { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: var(--radius); margin-bottom: .5rem; font-size: .88rem; }
.pin-body { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttlnote { margin: -.2rem 0 .5rem; }
.locked { text-align: center; padding: .8rem; }

/* --- message bubbles ---------------------------------------------- */
.chatwrap .msg { display: flex; gap: .45rem; align-items: flex-end; background: none;
  padding: 0; max-width: 100%; }
.chatwrap .msg .msg-in { display: flex; flex-direction: column; gap: .18rem; max-width: 78%;
  background: color-mix(in srgb, var(--line) 45%, transparent);
  border-radius: 12px; padding: .5rem .75rem; min-width: 0; }
.chatwrap .msg.mine { flex-direction: row-reverse; align-self: flex-end; }
.chatwrap .msg.mine .msg-in { background: var(--brand); color: #fff; }
.chatwrap .msg.mine .msg-in a { color: #fff; }
.chatwrap .msg.mine .muted { color: rgba(255,255,255,.8); }
.chatwrap .msg.system { justify-content: center; }
.msg-av { align-self: flex-end; }
.msg .body { overflow-wrap: anywhere; }
.msg .fwd { font-style: italic; }
.quote { border-left: 3px solid currentColor; padding: .15rem .5rem; margin-bottom: .2rem;
  opacity: .8; font-size: .85rem; border-radius: 0 6px 6px 0; }
.quote span { display: block; }

.msg-img img { max-width: 220px; max-height: 260px; border-radius: 8px; display: block; margin-top: .3rem; }
.msg-audio { width: 210px; margin-top: .3rem; }
.msg-video { max-width: 240px; border-radius: 8px; margin-top: .3rem; }
.msg-file { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem;
  padding: .35rem .55rem; border-radius: 8px; text-decoration: none;
  background: color-mix(in srgb, var(--bg) 65%, transparent); }
.keepbtn { margin-top: .35rem; }

.reactions { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .25rem; }
.reaction { border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 99px; padding: .05rem .4rem; font-size: .78rem; cursor: pointer; line-height: 1.5; }
.reaction.mine { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand-2) 18%, var(--surface)); }
.msgactions { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .35rem;
  padding-top: .35rem; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.emojibtn { border: 0; background: none; font-size: 1.15rem; cursor: pointer; padding: .1rem .2rem;
  border-radius: 6px; line-height: 1; }
.emojibtn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* --- polls -------------------------------------------------------- */
.poll { display: flex; flex-direction: column; gap: .25rem; margin-top: .35rem; min-width: 12rem; }
.poll-q { font-size: .95rem; }
.polloption { position: relative; display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 8px; padding: .35rem .55rem; cursor: pointer; overflow: hidden;
  font: inherit; font-size: .85rem; text-align: left; }
.polloption:disabled { cursor: default; }
.polloption.chosen { border-color: var(--brand-2); font-weight: 600; }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--brand-2) 22%, transparent);
  transition: width .3s ease; }
.poll-label, .poll-n { position: relative; }
.poll-label { flex: 1 1 auto; }

/* --- compose extras ------------------------------------------------ */
.replybar { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem;
  padding: .35rem .6rem; border-left: 3px solid var(--brand-2);
  background: color-mix(in srgb, var(--line) 30%, transparent); border-radius: 0 8px 8px 0; }
.replybar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emojirow { display: flex; gap: .2rem; flex-wrap: wrap; padding: .4rem 0; }
.fileform { border: 1px dashed var(--line); border-radius: var(--radius); padding: .7rem; margin-top: .5rem; }
.fileform input[type=file] { width: 100%; }
#voiceBtn.recording { background: var(--danger); color: #fff; border-color: var(--danger); }
.mentionbox { grid-column: 1 / -1; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  overflow: hidden; max-height: 12rem; overflow-y: auto; }
.mentionrow { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.mentionrow:hover { background: color-mix(in srgb, var(--line) 40%, transparent); }

/* --- the room list ------------------------------------------------- */
.ravatar-wrap { position: relative; flex: none; }
.onbadge { position: absolute; right: 0; bottom: 2px; width: 11px; height: 11px;
  border: 2px solid var(--surface); }
.rside { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: none; }

/* --- galleries ---------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .7rem; }
.galitem { margin: 0; }
.galitem img, .galitem video { width: 100%; border-radius: 8px; display: block; }
.galitem audio { width: 100%; }
.thumbrow { display: flex; gap: .4rem; flex-wrap: wrap; }
.thumbrow .thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }

@media (max-width: 700px) {
  .chatwrap .msg .msg-in { max-width: 84%; }
  .msg-img img { max-width: 62vw; }
  .profhead { gap: .7rem; }
  .profname { font-size: 1.15rem; }
}

/* v2.11 — richer but still bandwidth-conscious conversations. */
.chatroomsearch { display: block; margin: .65rem 0 .35rem; }
.chatroomsearch input { width: 100%; margin: 0; }
.chatolder { align-self: center; margin: .1rem auto .45rem; }
.chatjump { align-self: center; margin: -.2rem auto 0; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.unreadline { display: flex; align-items: center; gap: .6rem; color: var(--brand-2);
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.unreadline::before,.unreadline::after { content: ''; height: 1px; flex: 1; background: currentColor; opacity: .45; }
.sharedcard { overflow: hidden; }
.sharedcard > a { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; }
.sharedcover { display: block; width: calc(100% + 1.2rem); height: 132px; margin: -.45rem -.6rem .2rem;
  object-fit: cover; background: var(--line); }
.delivery { white-space: nowrap; }
.sharedactions,.sharedreader-footer { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-top:.35rem; }
.sharedinline { max-height:55vh; overflow:auto; margin:.5rem -.15rem 0; padding:.75rem;
  border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); }
.sharedinline img { max-width:100%; height:auto; border-radius:7px; }
.sharedinline[hidden] { display:none; }
.chatarticle { max-width:54rem; margin-inline:auto; }
.sharedreader-footer { padding-top:1rem; border-top:1px solid var(--line); }
.galarticle { display:flex; flex-direction:column; gap:.35rem; color:inherit; text-decoration:none; }
.galarticle img { aspect-ratio:16/9; object-fit:cover; background:var(--line); }
.sourcecover { display:grid; place-items:center; min-height:145px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 18%,var(--surface)),color-mix(in srgb,var(--accent) 12%,var(--surface))); }
.sourcecover-in { display:flex; flex-direction:column; align-items:center; gap:.55rem; padding:1rem;
  position:absolute; inset:0; justify-content:center; text-align:center; color:var(--text); }
.sourcecover > img { position:relative; z-index:1; }
.sourcecover-in .srcicon { width:54px; height:54px; border-radius:13px; font-size:1.6rem; }
.editbar { border-left-color: var(--accent); }
.chatwrap .msg .body { white-space: normal; }
@media (max-width:700px) {
  .chatwrap .chatlog { max-height: 61vh; }
  .sharedcover { height: 112px; }
  .msgactions { max-width: 78vw; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; }
  .msgactions .btn,.msgactions .emojibtn { flex: 0 0 auto; }
}

/* ==================================================================
   v2.2 — the checkout pay bar.
   The single most important control on the page is pinned to the
   bottom of the screen, not the bottom of the document. It is always
   visible, and it always says the whole sentence: amount, and where
   the money goes.
   ================================================================== */
.checkoutform { padding-bottom: 5.5rem; }   /* room so the bar never hides content */
.methodsingle p { margin: .3rem 0; }

.paybar {
  position: sticky; bottom: 0; z-index: 20;
  margin: 1rem -0.2rem 0; padding: .7rem 0 .2rem;
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.paybar-in {
  display: flex; align-items: center; gap: .9rem;
  max-width: 640px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: .7rem .9rem; box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.paybar-total { display: flex; flex-direction: column; line-height: 1.1; flex: 0 0 auto; }
.paybar-total b { font-size: 1.35rem; }
.paybar-go { flex: 1 1 auto; justify-content: center; font-size: 1.05rem;
  min-height: 52px; padding: .6rem 1rem; font-weight: 700; }
.paybar-go.is-busy { opacity: .7; pointer-events: none; }
.checkoutprivacy { text-align: center; }

/* the redirect button on the invoice page gets the same weight, in case a
   member reaches it (e.g. came back to an unpaid invoice) */
.invoicego .btn.primary { min-height: 52px; font-size: 1.05rem; font-weight: 700; }

@media (max-width: 560px) {
  .paybar { margin-left: -0.9rem; margin-right: -0.9rem; padding-left: .9rem; padding-right: .9rem; }
  .paybar-total b { font-size: 1.2rem; }
  .paybar-go { font-size: 1rem; }
}

/* ==================================================================
   v2.2 — the events map, and the list beside it.
   The map engine (rvmap.js) draws OSM tiles into these panes; the
   styling here is all it needs. Everything is built from the tokens
   at the top of this file, so light and dark are handled once.
   ================================================================== */
.mapcard { padding: 0; overflow: hidden; }
.rvmap-holder { position: relative; width: 100%; height: 460px; background: var(--line);
  touch-action: none; user-select: none; outline: none; }
.rvmap-holder.small { height: 300px; }
.rvmap { position: relative; overflow: hidden; cursor: grab; }
.rvmap.rvmap-drag { cursor: grabbing; }
.rvmap-tiles, .rvmap-markers { position: absolute; inset: 0; }
.rvmap-markers { pointer-events: none; }
.rvmap-tile { position: absolute; width: 256px; height: 256px; opacity: 0;
  transition: opacity .25s; }
.rvmap-tile-on { opacity: 1; }
.rvmap-tile-miss { opacity: 0; }
/* offline: a calm graticule instead of a grey void */
.rvmap-offline .rvmap-tiles {
  background-color: color-mix(in srgb, var(--brand) 8%, var(--surface));
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
}
.rvmap-offline::after { content: attr(data-t-offline); position: absolute; left: 50%; top: 10px;
  transform: translateX(-50%); background: var(--surface); color: var(--muted);
  border: 1px solid var(--line); border-radius: 99px; padding: .2rem .7rem; font-size: .78rem;
  pointer-events: none; z-index: 6; }

.rvmap-pin { position: absolute; transform: translate(-50%, -100%); pointer-events: auto;
  border: 0; background: none; cursor: pointer; font-size: 1.5rem; line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); padding: 0; }
.rvmap-pin .rvmap-ico { display: block; }
.rvmap-pin.coarse { opacity: .8; }
.rvmap-pin.sev-severe { color: #c2410c; } .rvmap-pin.sev-extreme { color: #b91c1c; }
.rvmap-cluster { position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  min-width: 30px; height: 30px; border-radius: 99px; border: 2px solid #fff;
  background: var(--brand); color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.rvmap-ctl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column;
  gap: 2px; z-index: 5; }
.rvmap-btn { width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 8px; }
.rvmap-att { position: absolute; right: 4px; bottom: 3px; font-size: .68rem; z-index: 5;
  background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--muted);
  padding: .05rem .35rem; border-radius: 5px; text-decoration: none; }
.rvmap-card { position: absolute; transform: translate(-50%, -100%); z-index: 7;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .7rem; width: 200px; box-shadow: 0 6px 20px rgba(0,0,0,.22);
  display: flex; flex-direction: column; gap: .25rem; }
.rvmap-card strong { font-size: .95rem; }
.rvmap-coarse { font-style: italic; }
.maphint { padding: .5rem .9rem; margin: 0; }

/* the filter bar */
.evfilter .filterline { align-items: end; }
.inlinefield.grow { flex: 1 1 8rem; }
.inlinefield.grow input { width: 100%; }

/* the list */
.evlist { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .35rem; }
.evrow > a { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  text-decoration: none; color: inherit; }
.evrow.sev-severe > a { border-left: 3px solid #c2410c; }
.evrow.sev-extreme > a { border-left: 3px solid #b91c1c; }
.evicon { font-size: 1.5rem; flex: none; line-height: 1.2; }
.evmeta { display: flex; flex-direction: column; min-width: 0; }
.evmeta strong { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.evsum { margin-top: .1rem; }
.pill.official { background: color-mix(in srgb, var(--good) 18%, var(--surface)); }
.pill.sev-severe { background: color-mix(in srgb, #c2410c 20%, var(--surface)); }
.pill.sev-extreme { background: color-mix(in srgb, #b91c1c 22%, var(--surface)); }
.pill.status-pending { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.pill.status-rejected { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); }
.evwhen { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.evbody { margin-top: .5rem; line-height: 1.6; }

/* admin */
.modrow, .srcrow { display: flex; gap: .8rem; align-items: center; justify-content: space-between;
  padding: .6rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.modrow:last-child, .srcrow:last-child { border-bottom: 0; }
.modmeta, .srcrow > div:first-child { display: flex; flex-direction: column; min-width: 0; flex: 1 1 14rem; }
.modacts, .srcacts { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }

@media (max-width: 560px) {
  .rvmap-holder { height: 62vh; }
  .rvmap-holder.small { height: 40vh; }
}

/* ==================================================================
   v2.3 — community & growth: people, feed, badges, event social,
   invites/QR, public event page. Mobile-first, built on the existing
   design tokens so light and dark come for free.
   ================================================================== */

/* small button + centred rows used across the new views */
.btn.tiny { padding: .18rem .5rem; font-size: .76rem; }
.btnrow.center { justify-content: center; }
.bigemoji { font-size: 2.6rem; text-align: center; margin: .2rem 0 .4rem; }
.checkrow { display: flex; gap: .55rem; align-items: flex-start; margin: .5rem 0 .2rem; }
.checkrow input { width: auto; margin: .15rem 0 0; flex: 0 0 auto; }

/* ---- people directory + person cards ---- */
.peoplegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.peoplegrid.tight { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.personcard { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.personmain { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; min-width: 0; flex: 1; }
.personmain img, .personmain .avatar, .personmain .initials { flex: 0 0 auto; }
.personmeta { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.personmeta strong { font-size: .95rem; line-height: 1.2; overflow-wrap: anywhere; }
.personmeta .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.personwhy { color: var(--brand-2); }
.personact { flex: 0 0 auto; }
.friendpill { background: color-mix(in srgb, var(--brand) 12%, transparent); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); color: var(--brand-2); }
.peoplesearch .filterline { flex-wrap: wrap; }
.pager { display: flex; align-items: center; gap: .8rem; justify-content: center; margin-top: .8rem; }

/* ---- activity feed ---- */
.feedlist { list-style: none; margin: 0; padding: 0; }
.feedrow { display: flex; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.feedrow:last-child { border-bottom: 0; }
.feedav { flex: 0 0 auto; text-decoration: none; }
.feedbody { min-width: 0; flex: 1; }
.feedtext { margin: 0; line-height: 1.4; }
.feedname { font-weight: 700; color: inherit; text-decoration: none; }
.feedname:hover { text-decoration: underline; }
.feedicon { margin: 0 .1rem; }
.feedwhen { display: block; margin-top: .15rem; }
.feedreact { margin-top: .35rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.reactbtn { cursor: pointer; }
.reactbtn.on { background: color-mix(in srgb, var(--brand) 14%, transparent); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.reactcount { font-size: .8rem; color: var(--ink-2); }
.feedlist.compact .feedrow { padding: .5rem 0; }
.feedsuggest .peoplegrid { margin-top: .5rem; }
.feedsuggest h2 a { float: right; font-weight: 400; }

/* ---- badges ---- */
.badgewrap { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem; }
.badgechip { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600;
  padding: .28rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  text-decoration: none; color: var(--ink); }
.badgeico { font-size: 1rem; }
.badgechip.more { color: var(--ink-2); }
.dashbadges { margin-top: .6rem; }
.dashbadges .muted { display: block; margin-bottom: .3rem; }

/* ---- profile extras ---- */
.profwhy { margin: .2rem 0 .4rem; color: var(--brand-2); }

/* ---- event social: attendees, host, comments ---- */
.attendees { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; margin-top: .7rem; }
.attendees .att { display: inline-flex; }
.attendees .att img, .attendees .att .avatar, .attendees .att .initials { border: 2px solid var(--surface); border-radius: 50%; }
.attendees .att.more, .att.more { font-size: .8rem; color: var(--ink-2); padding-left: .3rem; }
.hostcard { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.invitednote { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.friendsgoing { margin-top: .5rem; }
.evcomments { list-style: none; margin: .3rem 0 .8rem; padding: 0; }
.evcomment { display: flex; gap: .55rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.evcomment:last-child { border-bottom: 0; }
.evcav { flex: 0 0 auto; }
.evcbody { min-width: 0; flex: 1; }
.evcbody p { margin: .1rem 0; overflow-wrap: anywhere; }
.commentform textarea { width: 100%; resize: vertical; }
.commentform .btn { margin-top: .4rem; }

/* ---- trending strip + map controls ---- */
.trendstrip h2 { margin-bottom: .5rem; }
.trendrow { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; }
.trendcard { flex: 0 0 200px; display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: inherit; }
.trendcard strong { line-height: 1.25; }
.trendico { font-size: 1.3rem; }
.mapcontrols { display: flex; gap: .5rem; padding: .5rem .5rem 0; flex-wrap: wrap; }

/* ---- invites: QR ---- */
.qrcard { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.qrbox { flex: 0 0 auto; background: #fff; padding: .5rem; border-radius: var(--radius); border: 1px solid var(--line); line-height: 0; }
.qrbox img { display: block; width: 150px; height: 150px; }
.qrside { min-width: 220px; flex: 1; }

/* ---- public event page ---- */
.pubevent { max-width: 640px; margin: 1rem auto; }
.pubkicker { color: var(--ink-2); margin: 0 0 .2rem; font-size: .85rem; }
.pubhead h1 { margin: .1rem 0 .4rem; }
.pubwhen { font-size: 1.05rem; margin: .2rem 0; }
.pubsum { margin: .6rem 0; }
.pubcta { text-align: center; }

@media (max-width: 560px) {
  .peoplegrid, .peoplegrid.tight { grid-template-columns: 1fr; }
  .qrcard { justify-content: center; text-align: center; }
  .qrside { min-width: 0; }
  .feedsuggest h2 a { float: none; display: block; margin-top: .2rem; }
}

/* ==================================================================
   v2.4 — the Growth Autopilot admin page.
   ================================================================== */
.growthplay { border-left: 3px solid var(--line); }
.growthplay.recommended { border-left-color: var(--danger); }
.playhead { display: flex; gap: .7rem; align-items: flex-start; }
.playicon { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
.playtitle { min-width: 0; }
.playtitle strong { font-size: 1.05rem; }
.playaudience { margin: .5rem 0; }
.playplan { margin: .3rem 0 .6rem; }
.playplan > summary { cursor: pointer; font-weight: 600; padding: .2rem 0; }
.playplan .planlist { margin: .4rem 0 .2rem 1.2rem; }
.playplan .planlist li { margin: .25rem 0; }
.playctl { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.growthlog { list-style: none; margin: .2rem 0 0; padding: 0; }
.growthlog li { padding: .4rem 0; border-bottom: 1px solid var(--line); display: flex; gap: .4rem;
  flex-wrap: wrap; align-items: baseline; }
.growthlog li:last-child { border-bottom: 0; }

/* v2.8 — privacy-first product intelligence. */
.pa-command { border-top: 4px solid var(--accent, #167447); }
.pa-settings { display:flex; gap:.75rem; align-items:end; flex-wrap:wrap; margin-top:1rem; }
.pa-settings label { margin:0; }
.pa-settings input[type="number"] { width:7rem; margin-left:.35rem; }
.pa-journeys { list-style:none; padding:0; margin:.5rem 0 0; }
.pa-journeys li { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--line); }
.pa-hours { display:grid; grid-template-columns:repeat(12,1fr); gap:.3rem; margin-top:1rem; }
.pa-hours span { min-height:2.6rem; border-radius:.35rem; display:grid; place-items:center; background:color-mix(in srgb, var(--accent, #167447) var(--heat), var(--surface, #fff)); border:1px solid var(--line); }
.pa-hours i { font-style:normal; font-size:.72rem; }
.pa-devices { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.8rem; }
@media (max-width:600px) { .pa-hours { grid-template-columns:repeat(6,1fr); } .pa-settings { align-items:stretch; flex-direction:column; } }
.advice.sev-ok { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
/* v2.16 — Today: a time-boxed daily intelligence surface. */
.today-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(24px,5vw,54px);margin-bottom:16px;border-radius:28px;color:#f7fff9;background:radial-gradient(circle at 92% 12%,rgba(250,204,21,.32),transparent 28%),linear-gradient(135deg,#052e1a,#166534 58%,#15803d)}
.today-hero:after{content:"";position:absolute;right:-70px;bottom:-110px;width:260px;height:260px;border:1px solid rgba(255,255,255,.18);border-radius:50%}
.today-hero h1{margin:.2rem 0 .45rem;font-size:clamp(2rem,5vw,3.6rem);line-height:1.03;color:#fff}.today-hero p{max-width:680px;margin:0;color:rgba(255,255,255,.82);font-size:1.05rem}
.today-kicker{display:block;color:var(--primary);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.today-hero .today-kicker{color:#bbf7d0}
.today-score{position:relative;z-index:1;min-width:210px;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:18px 20px;border:1px solid rgba(255,255,255,.2);border-radius:20px;background:rgba(0,0,0,.18);backdrop-filter:blur(12px)}
.today-score strong{font-size:1.45rem;color:#fff;text-align:right}.today-score span{align-self:center;color:rgba(255,255,255,.78);font-size:.82rem}
.today-time{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:12px;margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.today-time label{margin:0;font-weight:800;white-space:nowrap}.today-time input[type="range"]{width:100%;margin:0;accent-color:var(--primary);cursor:pointer}.today-time output{display:grid;place-items:center;min-width:68px;padding:8px 12px;border:2px solid var(--primary);border-radius:999px;background:var(--primary);color:#fff;font-weight:900;font-variant-numeric:tabular-nums}.today-presets{grid-column:2/4;display:flex;gap:7px;flex-wrap:wrap}.today-presets a{padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);text-decoration:none;font-weight:750}.today-presets a.active{border-color:#14532d;background:#14532d;color:#fff;box-shadow:0 0 0 3px rgba(20,83,45,.18)}
.today-insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.today-insight{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--text);text-decoration:none}.today-insight.primary{border-color:rgba(22,101,52,.3);background:linear-gradient(135deg,rgba(34,197,94,.12),var(--card))}.today-insight-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--soft);font-size:1.35rem}.today-insight small{display:block;margin-bottom:3px;color:var(--muted);font-weight:700}.today-insight strong{display:block;line-height:1.35}
.today-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:16px;align-items:start}.today-grid>aside{position:sticky;top:84px;display:grid;gap:14px}.today-section{padding:clamp(16px,3vw,26px)}.today-section h2{margin:.2rem 0}
.today-feed{display:grid;gap:2px}.today-story{display:grid;grid-template-columns:28px 150px minmax(0,1fr);gap:15px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line)}.today-story:last-child{border-bottom:0}.today-rank{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--soft);color:var(--primary);font-size:.75rem;font-weight:900}.today-story>img,.today-placeholder{width:150px;aspect-ratio:16/10;object-fit:cover;border-radius:14px;background:linear-gradient(135deg,var(--soft),var(--bg));display:grid;place-items:center;font-size:2rem}.today-story h3{margin:7px 0 6px;font-size:1.05rem;line-height:1.3}.today-story p{margin:0 0 10px;color:var(--muted);line-height:1.45}.today-story .btn{margin-top:3px}
.today-lenses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.today-lenses article{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}.today-lenses h3{font-size:1rem;line-height:1.35;margin:8px 0 12px}.today-lenses a{display:block;padding:8px 0;border-top:1px solid var(--line);color:var(--text);font-size:.84rem;line-height:1.35;text-decoration:none}.today-lenses a span{display:block;color:var(--primary);font-size:.7rem;font-weight:800;text-transform:uppercase}.today-source-count{display:inline-flex;padding:4px 8px;border-radius:99px;background:rgba(34,197,94,.12);color:var(--primary);font-size:.72rem;font-weight:800}
.today-capture .savebar{grid-template-columns:1fr auto;margin-bottom:10px}.today-capture .wide{display:flex;justify-content:center;width:100%}.today-continue a{display:block;padding:11px 0;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}.today-continue a:last-child{border:0}.today-continue a span{display:block;height:4px;margin-top:8px;overflow:hidden;border-radius:99px;background:var(--soft)}.today-continue a i{display:block;height:100%;border-radius:99px;background:var(--primary)}.today-trust{background:linear-gradient(145deg,var(--card),rgba(34,197,94,.08))}.today-trust p{color:var(--muted);line-height:1.5}
@media(max-width:880px){.today-grid{grid-template-columns:1fr}.today-grid>aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.today-trust{grid-column:1/-1}}
@media(max-width:620px){.today-hero{display:block;border-radius:20px;padding:24px 20px}.today-score{margin-top:20px;min-width:0}.today-insight-grid{grid-template-columns:1fr}.today-story{grid-template-columns:24px 92px minmax(0,1fr);gap:10px}.today-story>img,.today-placeholder{width:92px;border-radius:10px}.today-story p{display:none}.today-story .newssrc span{font-size:.68rem}.today-story h3{font-size:.94rem}.today-lenses{grid-template-columns:1fr}.today-grid>aside{grid-template-columns:1fr}.today-trust{grid-column:auto}}
@media(max-width:620px){.today-time{grid-template-columns:1fr auto}.today-time label{grid-column:1/-1}.today-presets{grid-column:1/-1}}

/* v2.20 — progressive dashboard disclosure keeps the landing calm. */
.dash-panel{margin-bottom:1rem}.dash-panel>summary{display:flex;align-items:center;gap:.55rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-weight:800;cursor:pointer}.dash-panel>summary::after{content:'›';margin-left:auto;color:var(--brand);font-size:1.3rem;transition:transform .16s}.dash-panel[open]>summary::after{transform:rotate(90deg)}.dash-panel[open]>summary{border-radius:14px 14px 0 0;border-bottom-color:transparent}.dash-panel>.card{border-radius:0 0 var(--radius) var(--radius);margin-top:0}
.dash-panel>.card>h2:first-child,.dash-panel>.card>.lib-head h2{display:none}.dash-panel>.card>.lib-head{justify-content:flex-end}
.dashbadges>summary{cursor:pointer;list-style:none;padding:.35rem 0}.dashbadges>summary::-webkit-details-marker{display:none}.dashbadges>summary::after{content:' +';color:var(--brand);font-weight:900}.dashbadges[open]>summary::after{content:' −'}.dash-panel[data-dashboard-panel="progress"] .statgrid{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}.dash-panel[data-dashboard-panel="progress"] .stattile b{font-size:1.3rem;color:var(--brand)}
.dash-shortcuts{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.7rem}.wel-compact{max-width:820px}.wel-choice-grid{align-items:end}.wel-choice-grid h2{margin-bottom:.45rem}.wel-finish{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.dash-glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:.2rem 0 1rem}.dash-glance a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.55rem;align-items:center;min-width:0;padding:.72rem .8rem;border:1px solid var(--line);border-radius:14px;color:var(--ink);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--brand) 7%,var(--surface)));text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.04)}.dash-glance a:hover{border-color:var(--brand);transform:translateY(-1px);text-decoration:none}.dash-glance a>span{grid-row:1/3;font-size:1.35rem}.dash-glance b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem}.dash-glance small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fresh-empty{border-style:dashed}
.dual-time{display:grid;gap:.1rem}.dual-time strong{color:var(--ink);font-variant-numeric:tabular-nums}.dual-time small{color:var(--muted);font-size:.7rem;font-weight:500}.tracking-builder .copyrow{display:flex;gap:.4rem}.tracking-builder .copyrow input{min-width:0;flex:1}
.no-code-guide{border-inline-start:4px solid var(--brand)}.no-code-guide .grid3>div{padding:.8rem;border-radius:12px;background:var(--soft)}.no-code-guide p{margin:.35rem 0 0;color:var(--muted);line-height:1.45}
@media(max-width:620px){.wel-choice-grid{grid-template-columns:1fr}.wel-finish{align-items:stretch;flex-direction:column}.wel-finish .btn{width:100%}.dash-glance{gap:.4rem}.dash-glance a{display:flex;flex-direction:column;justify-content:center;gap:.12rem;padding:.58rem .25rem;text-align:center}.dash-glance a>span{font-size:1.15rem}.dash-glance b{max-width:100%;font-size:.95rem}.dash-glance small{max-width:100%;font-size:.72rem}}
/* v2.17 — governed Rweze Intelligence, three-day weather and Growth CRM. */
.ri-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(25px,5vw,52px);margin-bottom:16px;border-radius:28px;color:#fff;background:radial-gradient(circle at 85% 10%,rgba(96,165,250,.35),transparent 25%),linear-gradient(135deg,#0f172a,#312e81 55%,#166534)}.ri-hero>div>span{font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#c7d2fe}.ri-hero h1{margin:.25rem 0;font-size:clamp(2rem,5vw,3.5rem);color:#fff}.ri-hero p{max-width:700px;color:rgba(255,255,255,.8)}.ri-state{min-width:220px;display:grid;gap:5px;padding:18px;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(0,0,0,.2)}.ri-state small{color:rgba(255,255,255,.75)}
.ri-compose{padding:clamp(18px,4vw,30px)}.ri-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.ri-action input{position:absolute;opacity:0}.ri-action span{display:block;height:100%;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);font-weight:800;cursor:pointer}.ri-action small{display:block;margin-top:4px;color:var(--muted);font-weight:500;line-height:1.35}.ri-action input:checked+span{border-color:var(--primary);box-shadow:0 0 0 2px rgba(34,197,94,.18);background:rgba(34,197,94,.08)}.ri-compose textarea{width:100%;font-size:1.05rem}.ri-answer{border-top:4px solid var(--primary)}.ri-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.ri-principles div{display:grid;gap:4px;padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}.ri-principles span{color:var(--muted);font-size:.86rem}
.today-weather{display:block;color:var(--text);text-decoration:none;background:linear-gradient(145deg,var(--card),rgba(59,130,246,.09))}.today-weather>div:first-child{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:9px}.today-weather-icon{font-size:2rem}.today-weather>div>strong{font-size:1.8rem}.today-weather-days{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;margin-top:14px}.today-weather-days>span{display:grid;gap:2px;text-align:center;padding:8px 3px;border-radius:10px;background:var(--bg)}.today-weather-days small{font-size:.68rem;color:var(--muted)}
.crm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:16px 0}.crm-kpis a{display:grid;gap:3px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--text);text-decoration:none}.crm-kpis b{font-size:1.65rem;color:var(--primary)}.crm-kpis span{font-size:.8rem;color:var(--muted)}.crm-score{display:inline-grid;place-items:center;min-width:38px;height:38px;border-radius:50%;background:#fef3c7;color:#92400e;font-weight:900}.crm-score.good{background:#dcfce7;color:#166534}.crm-score.bad{background:#fee2e2;color:#991b1b}.crm-contact-head{display:grid;grid-template-columns:1fr minmax(250px,360px);gap:16px;align-items:center;margin:18px 0}.crm-contact-head>div:first-child{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;align-items:center}.crm-contact-head h1,.crm-contact-head p{margin:0}.crm-contact-head p{grid-column:2}.crm-timeline{display:grid}.crm-timeline article{display:grid;grid-template-columns:90px 1fr auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.crm-timeline article>span{color:var(--primary);font-size:.72rem;font-weight:900}.crm-timeline p{margin:.3rem 0;line-height:1.5}.crm-new summary{cursor:pointer}.crm-new form{margin-top:16px}.crm-task-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.crm-task-list a{display:grid;gap:4px;padding:13px;border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none}.crm-task-list span{font-size:.82rem;color:var(--muted)}
@media(max-width:850px){.ri-actions{grid-template-columns:repeat(2,1fr)}.crm-kpis{grid-template-columns:repeat(3,1fr)}.crm-contact-head{grid-template-columns:1fr}.ri-hero{display:block}.ri-state{margin-top:18px}}
@media(max-width:560px){.ri-hero{border-radius:20px;padding:24px 20px}.ri-actions,.ri-principles{grid-template-columns:1fr}.crm-kpis{grid-template-columns:repeat(2,1fr)}.crm-timeline article{grid-template-columns:1fr;gap:5px}.crm-contact-head>div:first-child{grid-template-columns:auto 1fr}}

/* v2.23 — calm subscription connections and trusted hosted-card checkout. */
.quick-expand{margin-top:.9rem;border-top:1px solid var(--line)}.quick-expand>summary{display:flex;align-items:center;gap:.45rem;padding:.85rem .15rem .15rem;cursor:pointer;list-style:none}.quick-expand>summary::-webkit-details-marker{display:none}.quick-expand>summary::after{content:'›';margin-left:auto;color:var(--primary);font-size:1.3rem;transition:transform .15s}.quick-expand[open]>summary::after{transform:rotate(90deg)}.quick-expand>summary .muted{margin-left:.3rem}.quick-expand-body{padding:.7rem 0 .15rem}.propgrid.compact{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem}.propgrid.compact .proptile{min-height:0;padding:.8rem}.proptile.tileform,form.proptile{margin:0}.tilebutton{display:grid;grid-template-columns:auto 1fr;gap:.15rem .55rem;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}.tilebutton .qi{grid-row:1/3}.provider-trust,.card-network-row{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;margin:.7rem 0;padding:.65rem .75rem;border:1px solid var(--line);border-radius:12px;background:var(--soft)}.provider-trust>span,.card-network-row>span{padding:.28rem .48rem;border-radius:7px;background:var(--card);font-size:.75rem;font-weight:900;letter-spacing:.03em}.provider-trust small,.card-network-row small{color:var(--muted)}.release-readiness{display:flex;align-items:center;justify-content:space-between;gap:1rem}.release-readiness>div:first-child{display:grid;gap:.25rem}.import-simple{border-inline-start:4px solid var(--primary)}
@media(max-width:620px){.quick-expand>summary{align-items:flex-start;flex-wrap:wrap}.quick-expand>summary .muted{width:100%;margin-left:1.8rem}.release-readiness{align-items:flex-start;flex-direction:column}.card-network-row small{width:100%}}

/* v2.18 — native Rweze AI, Google Weather drill-down and CRM operating suite. */
.ri-feedback{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:10px 0 24px}.wx-now-details{display:flex;flex-wrap:wrap;gap:8px}.wx-now-details span,.wx-metrics span{padding:7px 10px;border-radius:999px;background:var(--soft);font-size:.82rem}.wx-deep-grid{display:grid;gap:8px}.wx-deep{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}.wx-deep summary{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:14px;cursor:pointer}.wx-deep>div{padding:0 14px 14px;border-top:1px solid var(--line)}.wx-metrics{display:flex;flex-wrap:wrap;gap:7px}.crm-suite-nav{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px;scrollbar-width:thin}.crm-suite-nav a{white-space:nowrap;padding:10px 13px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);text-decoration:none;font-weight:750}.crm-create-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}.crm-create-grid h2,.crm-create-grid .span2{grid-column:1/-1}.crm-kanban{display:grid;grid-template-columns:repeat(6,minmax(230px,1fr));gap:12px;overflow-x:auto;padding-bottom:12px}.crm-kanban>section{background:var(--soft);border-radius:16px;padding:12px;min-height:220px}.crm-kanban h3{margin:.25rem}.crm-kanban article{display:grid;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px;margin:9px 0}.crm-kanban article span,.crm-kanban article small{color:var(--muted)}.crm-kanban form{display:grid;grid-template-columns:1fr auto;gap:6px}.dangertext{color:var(--danger);font-weight:800}.crm-bar{display:flex;justify-content:space-between;padding:10px;border-bottom:1px solid var(--line)}.crm-goals{display:grid;gap:12px}.crm-goals article{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,2fr) auto;align-items:center;gap:14px}.crm-goals article div{display:grid}.crm-goals span{font-size:.8rem;color:var(--muted)}.crm-goals progress{width:100%;accent-color:var(--primary)}.crm-kpis>div{display:grid;gap:3px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.crm-kpis>div b{font-size:1.45rem;color:var(--primary)}.crm-kpis>div span{font-size:.8rem;color:var(--muted)}
@media(max-width:900px){.crm-create-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-goals article{grid-template-columns:1fr}.wx-deep summary{grid-template-columns:1fr auto}}
@media(max-width:560px){.crm-create-grid{grid-template-columns:1fr}.crm-create-grid .span2{grid-column:auto}.wx-deep summary{grid-template-columns:1fr}.wx-now-details,.wx-metrics{display:grid;grid-template-columns:1fr 1fr}}
.crm-currency-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.crm-currency-grid article{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}.crm-currency-grid h3{margin:0 0 10px}.crm-currency-grid span{display:flex;justify-content:space-between;gap:12px;padding:5px 0}.crm-currency-grid b{font-variant-numeric:tabular-nums}

/* v2.19 — local-first sync, governed agents, Customer 360, journeys and hourly weather. */
.sync-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.sync-kpis>div{display:grid;gap:4px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card)}.sync-kpis b{font-size:1.7rem;color:var(--primary)}.sync-kpis span{color:var(--muted);font-size:.82rem}.sync-list{display:grid;gap:9px}.sync-list article{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px}.sync-list article div{display:grid;gap:3px;min-width:0}.sync-list small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}.sync-list em{font-style:normal;font-size:.74rem;color:var(--warning)}
.agent-guardrail{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 20px;border:1px solid rgba(34,197,94,.3);background:rgba(34,197,94,.07);border-radius:18px;margin:16px 0}.agent-guardrail>span{font-size:2rem}.agent-guardrail p{margin:0}.agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.agent-grid article{padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--soft)}.agent-grid article>small{display:block;margin:10px 0;color:var(--muted)}
.c360-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:10px}.c360-grid>a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;color:var(--text);text-decoration:none}.c360-grid>a:hover{border-color:var(--primary);transform:translateY(-1px)}.c360-grid div{display:grid;min-width:0}.c360-grid small{overflow:hidden;text-overflow:ellipsis;color:var(--muted)}.c360-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}.c360-fields form{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:end}.timeline-row{display:grid;gap:3px;padding:11px 0;border-bottom:1px solid var(--line)}.timeline-row small{color:var(--muted)}
.journey-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px}.journey-grid>a{color:var(--text);text-decoration:none}.journey-mini{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.78rem}.journey-canvas{display:grid;justify-items:center;gap:8px;padding:24px;margin:16px 0;border:1px solid var(--line);border-radius:20px;background:radial-gradient(circle at 50% 0,rgba(34,197,94,.09),transparent 45%),var(--soft)}.journey-node{display:grid;gap:4px;width:min(100%,520px);padding:16px 20px;border:1px solid var(--line);border-radius:15px;background:var(--card);box-shadow:var(--shadow-sm)}.journey-node.start{border-color:var(--primary)}.journey-node.end{text-align:center;background:rgba(34,197,94,.08)}.journey-node span{color:var(--muted)}.journey-arrow{font-size:1.3rem;color:var(--primary)}.journey-step-form{max-width:760px;margin-inline:auto}
.control-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(22px,5vw,42px);border-radius:24px;background:linear-gradient(135deg,#10291d,#173b52);color:#fff}.control-hero h1{margin:.2rem 0}.control-hero p{max-width:720px;opacity:.85}.control-hero>strong{font-size:2rem}.control-switches{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.rollout{display:grid;grid-template-columns:minmax(100px,1fr) 48px;align-items:center;gap:8px}.rollout input{accent-color:var(--primary)}.control-save{position:sticky;bottom:16px;z-index:4;margin:14px 0;box-shadow:var(--shadow)}.control-links{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.control-links a{display:grid;gap:5px;color:var(--text);text-decoration:none}.control-links a:first-letter{font-size:1.5rem}.control-links span{color:var(--muted);font-size:.8rem}
.wx-hourly{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.wx-hour-detail{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:15px;border-radius:16px;background:var(--soft)}.wx-hour-detail>div:first-child{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center}.wx-hour-detail small{grid-column:2;color:var(--muted)}.wxhouricon{grid-row:1/3;font-size:2.1rem}.wx-hour-range{width:100%;margin:16px 0;accent-color:var(--primary)}.wx-hour-strip{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 10px;scroll-snap-type:x proximity}.wx-hour-strip button{display:grid;justify-items:center;gap:5px;min-width:76px;padding:11px 8px;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--text);scroll-snap-align:center}.wx-hour-strip button.active{border-color:var(--primary);background:rgba(34,197,94,.08);box-shadow:0 0 0 2px rgba(34,197,94,.13)}.wx-hour-strip time,.wx-hour-strip small{font-size:.72rem;color:var(--muted)}
@media(max-width:800px){.sync-kpis,.control-links{grid-template-columns:repeat(2,1fr)}.control-switches{grid-template-columns:1fr}.wx-hour-detail{grid-template-columns:1fr}.agent-guardrail{grid-template-columns:auto 1fr}.agent-guardrail .btn{grid-column:1/-1}.control-hero>strong{display:none}}
@media(max-width:480px){.sync-kpis{grid-template-columns:1fr 1fr}.sync-list article{align-items:flex-start}.control-links{grid-template-columns:1fr}.c360-fields form{grid-template-columns:1fr}.wx-hour-strip button{min-width:68px}}

/* v2.25 — compact search refinements and time-zone-safe weather detail. */
.wx-zone-note{margin:.35rem 0 .8rem;color:var(--muted);font-size:.8rem}.wx-hour-strip .wxutc{font-size:.62rem}.wx-sun-times{display:flex;flex-wrap:wrap;gap:.6rem;margin:.8rem 0 0}.wx-sun-times span{display:flex;align-items:baseline;gap:.35rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:11px;background:var(--soft)}.wx-sun-times small{color:var(--muted)}
@media(max-width:700px){.search-refine{grid-template-columns:1fr 1fr}.search-refine label:last-of-type{grid-column:1/-1}.search-refine .btn{width:100%}}
@media(max-width:430px){.search-refine{grid-template-columns:1fr}.search-refine label:last-of-type{grid-column:auto}.wx-sun-times{display:grid}.wx-sun-times span{justify-content:space-between}}

/* v2.26 — rich notes, calm knowledge review and operational mission control. */
.language-menu{position:fixed;z-index:80;top:68px;right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;gap:.55rem;padding:.65rem;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow)}.language-menu[hidden]{display:none}.language-menu label{margin:0;font-size:.78rem;font-weight:800}.language-menu select{min-width:150px;margin:0}
.rich-editor{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:var(--bg)}.rich-toolbar{display:flex;gap:3px;overflow-x:auto;padding:7px;border-bottom:1px solid var(--line);background:var(--soft)}.rich-toolbar button{min-width:44px;min-height:44px;padding:.45rem .65rem;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text);font:inherit;cursor:pointer}.rich-toolbar button:hover,.rich-toolbar button:focus-visible{border-color:var(--primary);background:var(--card)}.rich-canvas{min-height:260px;padding:16px;line-height:1.65;outline:none}.rich-canvas:empty:before{content:attr(data-placeholder);color:var(--muted)}.rich-canvas li[data-task=true],.reader li[data-task=true]{list-style:'☐  '}.rich-canvas:focus{box-shadow:inset 0 0 0 2px var(--primary)}
.stats.compact{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:1rem}.review-row{padding:.9rem 0;border-bottom:1px solid var(--line)}.review-row blockquote{margin:0 0 .45rem}.connection-grid,.mission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.connection-card h3{font-size:1rem}.connection-arrow{margin:.75rem 0;color:var(--primary);font-weight:800}.decision-card{border-inline-start:4px solid var(--primary)}.decision-card details{padding:.5rem 0}.source-chip{padding:.7rem;border-radius:10px;background:var(--soft);font-weight:800}.stack{display:grid;gap:1rem}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.audit-list{display:grid}.audit-row{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:.75rem 0;border-bottom:1px solid var(--line)}.audit-row p{margin:.2rem 0}.role-preview{display:flex;justify-content:space-between;gap:1rem;padding:.7rem;border-bottom:1px solid var(--line)}.big-number{display:block;font-size:2.4rem;color:var(--primary)}
button,.btn,input,select,textarea,.barbtn{min-height:44px}:focus-visible{outline:3px solid #2563eb!important;outline-offset:3px!important}
@media(max-width:600px){.language-menu{left:12px;right:12px;top:64px;justify-content:space-between}.formgrid{grid-template-columns:1fr}.rich-canvas{min-height:220px}}
@media(max-width:400px){.themebtn{display:inline-flex}.net-badge{display:none}.barcluster{gap:.18rem}.barbtn.iconly{min-width:34px;padding:.3rem}}