/* ════════════════════════════════════════════════════════════════════════════
   NewsCards (newscards.in) — design system
   Token-frozen per HANDOFF 01-design-brief §4 and 04-ui-ux-spec. Do not tune.
   Sections: reset/ground · reel · coverflow · themes · card layers · furniture
   · kinetic/motion · render bases · amodal · masthead/splash · CMS chrome
   (views, auth, admin, toast) · a11y · reduced motion.
   ════════════════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#f4efe7;font-family:'Inter',system-ui,sans-serif}
:root{
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --rail:64px;
  --red:#C62828;
}

/* ── a11y furniture ────────────────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;top:8px;left:8px;z-index:100;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--red);padding:9px 14px;border-radius:6px;text-decoration:none;
  transform:translateY(-300%);transition:transform .2s}
.skip:focus-visible{transform:none}
:focus-visible{outline:2px solid var(--acc,#C62828);outline-offset:2px;border-radius:4px}

/* ── REEL CONTAINER: one card per screen, hard snap ───────────────────────── */
#reel{height:100dvh;width:100%;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
#reel::-webkit-scrollbar{display:none}
#reel[aria-hidden="true"]{visibility:hidden}

/* ── DESKTOP COVERFLOW — single breakpoint (min-width:900px)+(min-aspect 1/1) ──
   Cards fixed 480×854 (9:16); center 1.0 sharp, peeks 0.82 blurred, far 0.72. */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  #reel{
    flex-direction:row; align-items:center;
    overflow-x:scroll; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    display:flex;
    padding-left:calc((100vw - 480px)/2); padding-right:calc((100vw - 480px)/2);
    perspective:1400px; perspective-origin:50% 50%;
  }
  .r1{
    flex:0 0 480px; width:480px; height:854px; margin:0 24px;
    scroll-snap-align:center; scroll-snap-stop:always;
    transform-origin:center center;
    transition:transform .45s cubic-bezier(.16,1,.3,1), filter .45s ease, opacity .45s ease, box-shadow .45s ease;
    transform:scale(.72); filter:blur(8px) brightness(.55); opacity:.45; z-index:1;
    box-shadow:0 6px 22px rgba(0,0,0,.22);
  }
  .r1.center{ transform:scale(1); filter:none; opacity:1; z-index:5; box-shadow:0 24px 70px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.25); }
  .r1.peek-l,.r1.peek-r{ transform:scale(.82); filter:blur(5px) brightness(.7); opacity:.75; z-index:3; }
  .r1.peek-l{ margin-right:-60px; } .r1.peek-r{ margin-left:-60px; }
}
.r1{
  position:relative;height:100dvh;width:100%;
  scroll-snap-align:start;scroll-snap-stop:always;
  overflow:hidden;display:flex;flex-direction:column;
  isolation:isolate;
}

/* ── THEME FRAMES — the full 10 (hex frozen, 01 §4.2) ─────────────────────── */
.r1[data-th="editorial"]{--bg1:#fff;--bg2:#f4efe7;--ink:#14110f;--soft:rgba(20,17,15,.60);--acc:#C62828;--line:rgba(20,17,15,.14)}
.r1[data-th="bold"]    {--bg1:#C62828;--bg2:#8e1414;--ink:#fff;--soft:rgba(255,255,255,.78);--acc:#ffd24a;--line:rgba(255,255,255,.20)}
.r1[data-th="inverted"]{--bg1:#16130f;--bg2:#000;--ink:#fff;--soft:rgba(255,255,255,.66);--acc:#FF5C5C;--line:rgba(255,255,255,.16)}
.r1[data-th="acid"]    {--bg1:#d8ff36;--bg2:#9bdc00;--ink:#0a0f00;--soft:rgba(10,15,0,.62);--acc:#0a0f00;--line:rgba(10,15,0,.18)}
.r1[data-th="risograph"]{--bg1:#ff5a3c;--bg2:#ff3d81;--ink:#fff;--soft:rgba(255,255,255,.82);--acc:#fff14a;--line:rgba(255,255,255,.22)}
.r1[data-th="monsoon"] {--bg1:#0f4a5e;--bg2:#06303d;--ink:#eafcff;--soft:rgba(234,252,255,.66);--acc:#46e0c0;--line:rgba(234,252,255,.16)}
.r1[data-th="terminal"]{--bg1:#0a0e0a;--bg2:#031703;--ink:#caffca;--soft:rgba(160,255,160,.55);--acc:#39ff7a;--line:rgba(57,255,122,.20)}
.r1[data-th="broadsheet"]{--bg1:#f6f1e4;--bg2:#e7dcc4;--ink:#211a10;--soft:rgba(33,26,16,.62);--acc:#7a4a18;--line:rgba(33,26,16,.18)}
.r1[data-th="india"]   {--bg1:#fff;--bg2:#fff3e6;--ink:#14110f;--soft:rgba(20,17,15,.60);--acc:#FF7A00;--line:rgba(20,17,15,.14)}
.r1[data-th="AI"]      {--bg1:#1b1340;--bg2:#0a0620;--ink:#f3eeff;--soft:rgba(243,238,255,.66);--acc:#a78bfa;--line:rgba(243,238,255,.16)}

/* card background: 3 radial gradients + grain + vignette; Ken Burns 1.08→1 9s */
.r1 .bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(70% 55% at 82% 14%, color-mix(in srgb,var(--acc) 22%, transparent) 0%, transparent 58%),
  radial-gradient(120% 90% at 14% 10%, var(--bg1) 0%, transparent 52%),
  radial-gradient(150% 130% at 88% 94%, var(--bg2) 0%, var(--bg1) 68%),
  var(--bg2);
  background-color:var(--bg2);
  transform:scale(1.08);transition:transform 9s ease-out}
.r1.on .bg{transform:scale(1)}
.r1 .bg::after{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:4px 4px}
.r1 .bg::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.20) 100%)}

/* ── FRAME GRAMMAR ─────────────────────────────────────────────────────────── */
.r1 .top{position:absolute;top:max(50px,calc(env(safe-area-inset-top) + 40px));left:20px;right:var(--rail);z-index:5;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.r1 .eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bg2);background:var(--acc);padding:5px 9px;border-radius:4px;line-height:1}
.r1[data-th="acid"] .eyebrow,.r1[data-th="editorial"] .eyebrow,.r1[data-th="india"] .eyebrow,.r1[data-th="broadsheet"] .eyebrow{color:#fff}
.r1 .date{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}

.r1 .stage{position:relative;z-index:4;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:0 22px 0 22px;padding-right:calc(var(--rail) + 4px);gap:16px}
.r1 .foot{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:22px;right:var(--rail);z-index:5;
  display:flex;flex-direction:column;gap:8px}
.r1 .src{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--soft);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.r1 .src b{color:var(--ink);font-weight:700}
.hl{color:var(--ink)} .eyebrow2{color:var(--acc)}
.h-stack .corrob,.h-news .corrob{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink);display:flex;align-items:center;gap:8px;margin-top:6px}
.corrob .ck{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--acc);color:var(--bg1);font-size:12px;flex:none}
.r1[data-th="acid"] .corrob .ck,.r1[data-th="editorial"] .corrob .ck,.r1[data-th="india"] .corrob .ck,.r1[data-th="broadsheet"] .corrob .ck{color:#fff}

/* ── right action rail (identical on every viewport) ─────────────────────── */
.rail{position:absolute;right:12px;bottom:max(22px,env(safe-area-inset-bottom));z-index:6;
  display:flex;flex-direction:column;gap:14px;align-items:center}
.rail button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(127,127,127,.14);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .15s;position:relative}
.rail button:hover{background:rgba(127,127,127,.24)}
.rail button:active{transform:scale(.86)}
.rail svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rail button.on{background:var(--acc);border-color:var(--acc)}
.rail button.on svg{fill:var(--bg2);stroke:var(--bg2)}
.rail .rc{position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;font-weight:700;color:var(--soft);min-height:11px}
.r1:not([data-src]) [data-act="source"]{display:none}
[data-readmore]{cursor:pointer}

/* ── progress hairline (4px, flex segments, cap 60) ─────────────────────── */
#dots{position:fixed;top:0;left:0;right:0;height:4px;z-index:40;display:flex;gap:2px;padding:0 2px;pointer-events:none}
#dots i{flex:1;height:4px;background:rgba(180,180,180,.30);border-radius:2px;transition:background .3s}
#dots i.seen{background:rgba(180,180,180,.55)}
#dots i.cur{background:var(--curacc,#C62828)}
#dots i.old{opacity:.4}
#nom{position:fixed;left:16px;bottom:12px;z-index:46;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:#fff;mix-blend-mode:difference;pointer-events:none;display:none}
@media (min-width:900px) and (min-aspect-ratio:1/1){ #nom{display:block} }

/* ── KINETIC TYPE + fades ─────────────────────────────────────────────────── */
.kin .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(2.5deg);filter:blur(6px);
  transition:opacity .55s cubic-bezier(.2,.9,.2,1),transform .55s cubic-bezier(.2,.9,.2,1),filter .55s ease}
.r1.on .kin .w{opacity:1;transform:none;filter:blur(0)}
.r1.on .kin .w{transition-delay:calc(var(--i) * 45ms)}
.fade{opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity .6s ease .35s,transform .6s ease .35s,filter .6s ease .35s}
.r1.on .fade{opacity:1;transform:none;filter:blur(0)}
.fade.d2{transition-delay:.5s}.fade.d3{transition-delay:.65s}

/* ── DRAMA LAYER: ghost / orb / stamp / slash ────────────────────────────── */
.ghost{position:absolute;z-index:1;left:-4%;bottom:6%;font-family:var(--serif);font-weight:900;font-style:italic;
  font-size:min(38vw,46dvh);line-height:.8;color:var(--ink);opacity:0;letter-spacing:-.05em;white-space:nowrap;
  transform:rotate(-7deg) translateY(20px);pointer-events:none;user-select:none;
  transition:opacity 1.1s ease .2s,transform 1.1s cubic-bezier(.2,.9,.2,1) .2s}
.r1.on .ghost{opacity:.07;transform:rotate(-7deg) translateY(0)}
.orb{position:absolute;z-index:0;width:52vw;height:52vw;border-radius:50%;right:-14vw;top:8dvh;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 32%,transparent) 0%,transparent 68%);
  animation:breathe 5s ease-in-out infinite;pointer-events:none}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.16);opacity:1}}
.stamp{display:inline-block;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acc);border:3px solid var(--acc);border-radius:6px;padding:7px 14px;transform:rotate(-6deg) scale(2.6);opacity:0;width:fit-content}
.r1.on .stamp{animation:slam .45s cubic-bezier(.2,1.4,.4,1) .55s forwards}
@keyframes slam{to{transform:rotate(-6deg) scale(1);opacity:1}}
.slash{position:absolute;z-index:1;top:0;bottom:0;width:34%;left:-40%;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--acc) 10%,transparent) 50%,transparent 70%);
  transform:skewX(-12deg)}
.r1.on .slash{animation:sweep 1.4s ease .15s forwards}
@keyframes sweep{to{left:120%}}
@keyframes nudge{0%,100%{opacity:.4;transform:rotate(90deg) translateX(0)}50%{opacity:1;transform:rotate(90deg) translateX(6px)}}

/* ── PER-BASE HERO TREATMENTS ────────────────────────────────────────────── */
/* news_headline */
.h-news .hl{font-family:var(--serif);font-weight:800;font-size:clamp(30px,8.5vw,46px);line-height:1.05;
  letter-spacing:-.02em;color:var(--ink)}
.h-news .deck{font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--soft);font-weight:400;max-width:30ch}
.h-news .accentbar{width:54px;height:5px;background:var(--acc);border-radius:3px;transform-origin:left;transform:scaleX(0);transition:transform .6s ease .25s}
.r1.on .h-news .accentbar{transform:scaleX(1)}

/* top5 */
.h-top5{justify-content:flex-start;gap:9px;padding-top:6px}
.h-top5 .t5-title{font-family:var(--serif);font-weight:900;font-size:clamp(28px,8vw,42px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.h-top5 .t5-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);font-weight:700}
.h-top5 .t5-list{list-style:none;display:flex;flex-direction:column;margin:4px 0 0;padding:0}
.h-top5 .t5-item{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:11px;text-decoration:none;color:inherit;padding:9px 0;border-top:1px solid var(--line)}
.h-top5 .t5-list li:first-child .t5-item{border-top:none}
.h-top5 .t5-rank{font-family:var(--serif);font-weight:900;font-size:26px;line-height:1;color:var(--acc);min-width:1.1em;text-align:center}
.h-top5 .t5-delta{font-family:var(--mono);font-style:normal;font-size:10px;font-weight:700;color:var(--soft);margin-right:4px}
.h-top5 .t5-hl{font-family:var(--serif);font-weight:700;font-size:15.5px;line-height:1.22;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
.h-top5 .t5-out{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--soft);white-space:nowrap;align-self:center}
.h-top5 .t5-item:active{opacity:.55}
.h-top5 .t5-foot{font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--soft);margin-top:5px}

/* number */
.h-num{align-items:flex-start}
.h-num .big{font-family:var(--serif);font-weight:900;font-size:clamp(72px,26vw,150px);line-height:.82;
  letter-spacing:-.04em;color:var(--acc);display:flex;align-items:baseline;gap:.06em;flex-wrap:wrap}
.h-num .big .unit{font-size:.34em;color:var(--ink);font-weight:800}
.h-num .label{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);font-weight:700}
.h-num .ctx{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.25;color:var(--ink);max-width:24ch}

/* quote_of_day */
.h-quote .mark{font-family:var(--serif);font-size:120px;line-height:.6;color:var(--acc);opacity:.5;height:.5em}
.h-quote .q{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(26px,7vw,38px);line-height:1.22;color:var(--ink)}
.h-quote .who{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);font-weight:700}
.h-quote .who b{color:var(--acc);display:block;font-size:15px;letter-spacing:.02em;text-transform:none;margin-bottom:2px;font-family:var(--sans);font-weight:800}

/* source_stack */
.h-stack .hl{font-family:var(--serif);font-weight:800;font-size:clamp(26px,7vw,38px);line-height:1.08;color:var(--ink);letter-spacing:-.02em}
.h-stack .deck{font-size:14.5px;color:var(--soft);line-height:1.45;max-width:32ch}
.h-stack .chips{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.h-stack .chip{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);background:rgba(127,127,127,.12);
  border:1px solid var(--line);border-radius:7px;padding:8px 11px;display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateX(-14px);transition:opacity .4s ease,transform .4s ease}
.r1.on .h-stack .chip{opacity:1;transform:none}
.h-stack .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}
.h-stack .more{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);font-weight:700}

/* did_you_know */
.h-dyk{cursor:pointer}
.h-dyk .qtag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:700}
.h-dyk .q{font-family:var(--serif);font-weight:800;font-size:clamp(28px,8vw,44px);line-height:1.06;color:var(--ink);letter-spacing:-.02em}
.h-dyk .a{font-size:16px;line-height:1.5;color:var(--soft);max-width:32ch;
  max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .4s ease,margin .4s ease}
.h-dyk.flip .a{max-height:300px;opacity:1;margin-top:6px}
.h-dyk .tap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);font-weight:700;display:flex;align-items:center;gap:6px}
.h-dyk.flip .tap{display:none}

/* comparison */
.h-cmp .hl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);font-weight:700}
.h-cmp .vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:8px}
.h-cmp .side{padding:16px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(127,127,127,.08);text-align:center;min-width:0;overflow:hidden}
.h-cmp .side.win{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--acc) 30%,transparent)}
.h-cmp .nm{font-family:var(--sans);font-weight:800;font-size:14px;line-height:1.2;color:var(--ink);overflow-wrap:break-word}
.h-cmp .st{font-family:var(--serif);font-weight:900;font-size:clamp(15px,4.6vw,21px);color:var(--acc);margin-top:6px;overflow-wrap:break-word}
.h-cmp .vbadge{font-family:var(--serif);font-style:italic;font-weight:900;font-size:30px;color:var(--ink);opacity:.5}
.h-cmp .verdict{font-size:14px;line-height:1.45;color:var(--soft);max-width:34ch}

/* mistake_card */
.h-mis .wrong{font-family:var(--serif);font-weight:700;font-size:clamp(20px,5.6vw,30px);line-height:1.14;color:var(--ink);
  text-decoration:line-through;text-decoration-color:var(--acc);text-decoration-thickness:3px;opacity:.62;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.h-mis .rt{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--acc)}
.h-mis .right{font-size:15px;line-height:1.5;color:var(--ink);max-width:34ch;border-left:3px solid var(--acc);padding-left:14px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}

/* poll + quiz */
.h-poll .q,.h-quiz .q{font-family:var(--serif);font-weight:800;font-size:clamp(26px,7vw,38px);line-height:1.1;color:var(--ink);letter-spacing:-.02em}
.h-poll .eyebrow2,.h-quiz .eyebrow2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:700}
.opts{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.opt{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink);background:rgba(127,127,127,.10);
  border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;cursor:pointer;transition:all .2s;text-align:left;line-height:1.3}
.opt:active{transform:scale(.98)}
.opt.correct{border-color:#1ea672;background:rgba(30,166,114,.16)}
.opt.voted{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,transparent)}
.opt.wrong{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);opacity:.7}
.opt .pct{float:right;font-family:var(--mono);font-weight:700;color:var(--acc)}
.h-quiz .expl{font-size:14px;line-height:1.5;color:var(--soft);max-width:34ch;border-left:3px solid var(--acc);padding-left:14px}

/* price_tag */
.h-price .badge{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:700}
.h-price .big{font-family:var(--serif);font-weight:900;font-size:clamp(60px,20vw,120px);line-height:.85;color:var(--ink);letter-spacing:-.03em}
.h-price .unit{font-family:var(--mono);font-size:14px;color:var(--soft);font-weight:600}
.h-price .nm{font-family:var(--sans);font-weight:800;font-size:22px;color:var(--ink)}
.h-price .cmp{font-size:14px;color:var(--soft);line-height:1.4;max-width:30ch}

/* tip_card */
.h-tip .badge{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:700}
.h-tip .hl{font-family:var(--serif);font-weight:800;font-size:clamp(26px,7vw,38px);line-height:1.1;color:var(--ink);letter-spacing:-.02em}
.h-tip .reason{font-size:16px;line-height:1.5;color:var(--soft);max-width:34ch}

/* tool_pick */
.h-tool .badge{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:700}
.h-tool .nm{font-family:var(--serif);font-weight:900;font-size:clamp(34px,9vw,52px);line-height:1;color:var(--ink);letter-spacing:-.02em}
.h-tool .one{font-size:16px;line-height:1.45;color:var(--ink);max-width:32ch}
.h-tool .why{font-family:var(--mono);font-size:12px;color:var(--soft);font-weight:600}
.h-tool .lk{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--bg2);background:var(--acc);padding:9px 13px;border-radius:8px;text-decoration:none;letter-spacing:.04em;width:fit-content}
.r1[data-th="editorial"] .h-tool .lk,.r1[data-th="acid"] .h-tool .lk,.r1[data-th="india"] .h-tool .lk,.r1[data-th="broadsheet"] .h-tool .lk{color:#fff}

/* image_led */
.h-img-frame{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;transform:scale(1.1);transition:transform 10s ease}
.r1.on .h-img-frame{transform:scale(1)}
.h-img-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(0,0,0,.86) 8%,rgba(0,0,0,.25) 50%,rgba(0,0,0,.45))}
.h-img .hl{font-family:var(--serif);font-weight:800;font-size:clamp(30px,9vw,46px);line-height:1.04;color:#fff;letter-spacing:-.02em}
.h-img .cap{font-size:14px;color:rgba(255,255,255,.78);line-height:1.45;max-width:34ch}
.r1.has-img{--ink:#fff;--soft:rgba(255,255,255,.74)}

/* india_tag */
.h-india .flag{height:6px;width:80px;border-radius:3px;background:linear-gradient(to bottom,#FF9933 33%,#fff 33% 66%,#138808 66%)}
.h-india .hl{font-family:var(--serif);font-weight:800;font-size:clamp(30px,8.5vw,46px);line-height:1.06;color:var(--ink);letter-spacing:-.02em}

/* featured */
.h-feat .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:700}
.h-feat .hl{font-family:var(--serif);font-weight:800;font-size:clamp(30px,8vw,46px);line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.h-feat .deck{font-size:16px;line-height:1.5;color:var(--soft);max-width:34ch}
.h-feat .read{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;font-weight:700;
  color:var(--ink);border:1.5px solid var(--ink);padding:11px 16px;border-radius:999px;letter-spacing:.05em;width:fit-content;cursor:pointer;background:none}

/* trend_reddit */
.h-trend .hl{font-family:var(--serif);font-weight:800;font-size:clamp(28px,7.5vw,42px);line-height:1.06;color:var(--ink);letter-spacing:-.02em}
.h-trend .deck{font-size:14.5px;color:var(--soft);line-height:1.45;max-width:32ch}

/* edition_break — the "you're caught up" marker */
.h-edbrk{align-items:flex-start;gap:12px}
.h-edbrk .ed-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);font-weight:700}
.h-edbrk .ed-t{font-family:var(--serif);font-weight:900;font-size:clamp(34px,9vw,52px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.h-edbrk .ed-d{font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--soft);max-width:30ch}
.h-edbrk .ed-rule{width:54px;height:5px;background:var(--acc);border-radius:3px;transform-origin:left;transform:scaleX(0);transition:transform .6s ease .25s}
.r1.on .h-edbrk .ed-rule{transform:scaleX(1)}

/* weather / market_snapshot / sport_score — mono data rows */
.h-svc .q{font-family:var(--serif);font-weight:800;font-size:clamp(26px,7vw,38px);line-height:1.1;color:var(--ink);letter-spacing:-.02em}
.h-svc .rows{display:flex;flex-direction:column;gap:0;margin-top:4px}
.h-svc .srow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:13px;color:var(--ink)}
.h-svc .srow:first-child{border-top:none}
.h-svc .srow .v{font-weight:700}
.h-svc .srow .d{font-size:11px;font-weight:700;color:var(--soft)}
.h-svc .srow .d.up{color:#1ea672}.h-svc .srow .d.dn{color:var(--acc)}

/* ── article bottom sheet (#amodal) ─────────────────────────────────────── */
#amodal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:none;align-items:flex-end;justify-content:center}
#amodal.on{display:flex}
#amodal .asheet{position:relative;width:min(680px,100%);max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg2,#f4efe7);color:var(--ink,#1a1a1a);border-radius:18px 18px 0 0;padding:48px 22px calc(44px + env(safe-area-inset-bottom));box-shadow:0 -12px 44px rgba(0,0,0,.45);animation:asheetup .28s cubic-bezier(.16,1,.3,1)}
@keyframes asheetup{from{transform:translateY(48px);opacity:.5}to{transform:none;opacity:1}}
#amodal .aclose,#authmodal .aclose{position:absolute;top:12px;right:14px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(127,127,127,.16);color:var(--ink,#1a1a1a);font-size:23px;line-height:1;cursor:pointer;z-index:2}
#amodal .atag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc,#C62828);font-weight:700;margin-bottom:8px}
#amodal .atitle{font-family:var(--serif);font-weight:800;font-size:clamp(26px,6vw,38px);line-height:1.1;letter-spacing:-.02em;margin:0 0 12px}
#amodal .adeck{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--soft,#555);margin:0 0 18px}
#amodal .apara{font-family:var(--serif);font-size:17px;line-height:1.62;margin:0 0 15px;overflow-wrap:break-word}
#amodal .asrc{margin-top:22px;padding-top:16px;border-top:1px solid var(--line,rgba(0,0,0,.12))}
#amodal .asrc-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft,#555);font-weight:700;margin-bottom:8px}
#amodal .asrc a{display:block;font-family:var(--sans);font-size:13px;color:var(--acc,#C62828);text-decoration:none;margin-bottom:5px;overflow-wrap:anywhere}
#amodal .afull{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc,#C62828);font-weight:700;text-decoration:none;background:none;border:0;cursor:pointer;padding:0}

/* ── masthead + boot splash ─────────────────────────────────────────────── */
#mast{position:fixed;top:0;left:0;right:0;z-index:46;display:flex;align-items:center;justify-content:space-between;
  padding:max(11px,env(safe-area-inset-top)) 16px 8px;pointer-events:none}
#mast .mw{font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:-.01em;color:#fff;mix-blend-mode:difference;text-decoration:none;pointer-events:auto}
#mast .mw b{font-weight:500}
#mast .mright{display:flex;align-items:center;gap:8px;pointer-events:auto}
#mast .mclock{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;mix-blend-mode:difference}
#mast .mx{pointer-events:auto;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:7px 12px;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,.22);cursor:pointer}
#mast .mx:active{transform:scale(.94)}
#mast .mx img{width:16px;height:16px;border-radius:50%;vertical-align:-3px;margin-right:5px}

#load{position:fixed;inset:0;background:#f4efe7;z-index:99;display:grid;place-items:center;color:#14110f}
#load .boot{text-align:center}
#load .sweep{position:relative;display:inline-block;overflow:hidden;padding:0 3px}
#load .sweep .wm{display:inline-block;font-family:var(--serif);font-weight:500;font-size:38px;letter-spacing:-.02em;animation:swreveal 2.6s ease-in-out infinite}
#load .sweep .wm b{color:#C62828;font-weight:500}
#load .sweep .bar{position:absolute;top:-14px;bottom:-14px;width:3px;background:#C62828;left:-4px;animation:swbar 2.6s ease-in-out infinite}
#load .kick{display:block;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(20,17,15,.5);font-style:normal}
#load .dot{display:block;width:7px;height:7px;border-radius:50%;background:#C62828;margin:13px auto 0;animation:swpulse 1.2s ease-in-out infinite}
@keyframes swreveal{0%{clip-path:inset(0 100% 0 0)}44%,82%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes swbar{0%{left:-4px}44%{left:100%}100%{left:100%}}
@keyframes swpulse{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1.1);opacity:1}}
#load.gone{opacity:0;pointer-events:none;transition:opacity .5s}

/* branded boot error (04 §9) */
#load .berr{max-width:420px;padding:0 24px;text-align:center}
#load .berr .bar{width:54px;height:5px;background:#C62828;border-radius:3px;margin:0 auto 18px}
#load .berr h2{font-family:var(--serif);font-weight:800;font-size:28px;letter-spacing:-.02em;margin-bottom:10px}
#load .berr p{font-family:var(--mono);font-size:11.5px;line-height:1.6;letter-spacing:.04em;color:rgba(20,17,15,.55);margin-bottom:20px;overflow-wrap:anywhere}
#load .berr button{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:#C62828;border:0;border-radius:999px;padding:12px 22px;cursor:pointer}

/* fresh pill + offline banner + toast */
#freshpill{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;
  border:0;border-radius:999px;padding:11px 18px;font:600 13px/1 var(--sans);color:#fff;background:var(--acc,#C62828);
  box-shadow:0 6px 22px rgba(0,0,0,.32);cursor:pointer}
#offbanner{position:fixed;top:calc(max(11px,env(safe-area-inset-top)) + 34px);left:50%;transform:translateX(-50%);z-index:60;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(20,17,15,.85);padding:7px 14px;border-radius:999px}
#toast{position:fixed;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:#f4efe7;background:#14110f;
  padding:11px 18px;border-radius:999px;box-shadow:0 8px 28px rgba(0,0,0,.35);max-width:88vw;text-align:center}
#cfgbanner{position:fixed;top:calc(max(11px,env(safe-area-inset-top)) + 40px);left:50%;transform:translateX(-50%);z-index:70;
  width:min(680px,calc(100vw - 32px));font-family:var(--mono);font-size:11.5px;line-height:1.6;letter-spacing:.02em;
  color:#14110f;background:#f6f1e4;border:1px solid rgba(20,17,15,.14);border-left:4px solid #C62828;border-radius:8px;
  padding:12px 16px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
#cfgbanner code{background:rgba(20,17,15,.08);padding:1px 5px;border-radius:4px}

/* ── full-screen views (#/saved #/profile #/admin) ─────────────────────── */
#view{position:fixed;inset:0;z-index:70;background:#f4efe7;color:#14110f;overflow-y:auto;-webkit-overflow-scrolling:touch}
.vwrap{max-width:1080px;margin:0 auto;padding:calc(max(11px,env(safe-area-inset-top)) + 56px) 20px 80px}
.vhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.vhead h2{font-family:var(--serif);font-weight:800;font-size:clamp(28px,5vw,40px);letter-spacing:-.02em}
.vback{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#C62828;text-decoration:none}
.vsub{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:rgba(20,17,15,.55);margin-bottom:26px}
.vcard{background:#fff;border:1px solid rgba(20,17,15,.12);border-radius:14px;padding:22px;margin-bottom:18px}
.vcard h3{font-family:var(--serif);font-weight:800;font-size:20px;letter-spacing:-.01em;margin-bottom:4px}
.vcard .vh-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(20,17,15,.5);margin-bottom:16px}
.vempty{font-family:var(--serif);font-style:italic;font-weight:600;font-size:22px;color:rgba(20,17,15,.55);padding:48px 0;text-align:center}

/* forms */
.frow{display:flex;gap:14px;flex-wrap:wrap}
.fcol{flex:1;min-width:220px}
label.fl{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(20,17,15,.6);margin-bottom:14px}
label.fl input,label.fl select,label.fl textarea{display:block;width:100%;margin-top:6px;font-family:var(--sans);font-size:15px;font-weight:500;
  color:#14110f;background:#fff;border:1.5px solid rgba(20,17,15,.18);border-radius:9px;padding:11px 13px;outline:none}
label.fl textarea{min-height:120px;resize:vertical;line-height:1.5}
label.fl input:focus,label.fl select:focus,label.fl textarea:focus{border-color:#C62828}
.fhint{display:block;margin-top:5px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.02em;text-transform:none;color:rgba(20,17,15,.45)}
.btn{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;
  padding:11px 20px;cursor:pointer;border:1.5px solid #14110f;background:#14110f;color:#f4efe7}
.btn.ghostb{background:none;color:#14110f}
.btn.red{background:#C62828;border-color:#C62828;color:#fff}
.btn.small{padding:7px 13px;font-size:10px}
.btn:disabled{opacity:.45;cursor:default}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.fok{font-family:var(--mono);font-size:11px;color:#1ea672;font-weight:700}
.ferr{font-family:var(--mono);font-size:11px;color:#C62828;font-weight:700}

/* role badge + pills */
.rolebadge{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:4px;background:#14110f;color:#f4efe7}
.rolebadge.admin{background:#C62828;color:#fff}
.rolebadge.author{background:#0f4a5e;color:#eafcff}
.pill{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.pill.published{background:rgba(30,166,114,.14);color:#157347}
.pill.draft{background:rgba(255,170,0,.16);color:#8a5a00}
.pill.archived{background:rgba(20,17,15,.08);color:rgba(20,17,15,.5)}

/* saved grid */
.svgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.svcard{position:relative;background:#fff;border:1px solid rgba(20,17,15,.12);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.svcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.12)}
.svcard .svstrip{height:6px;background:var(--svacc,#C62828)}
.svcard .svin{padding:14px 16px 16px}
.svcard .sveyebrow{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--svacc,#C62828)}
.svcard .svtitle{font-family:var(--serif);font-weight:700;font-size:16.5px;line-height:1.25;margin:7px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svcard .svmeta{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:rgba(20,17,15,.5)}
.svcard .svunsave{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(20,17,15,.16);
  background:#fff;color:#C62828;cursor:pointer;display:grid;place-items:center}
.svcard .svunsave svg{width:14px;height:14px;fill:#C62828;stroke:#C62828;stroke-width:1.8}

/* profile */
.pfhead{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pfavatar{width:84px;height:84px;border-radius:50%;background:#14110f;color:#f4efe7;display:grid;place-items:center;
  font-family:var(--serif);font-weight:800;font-size:32px;overflow:hidden;flex:none}
.pfavatar img{width:100%;height:100%;object-fit:cover}
.pfwho{flex:1;min-width:200px}
.pfwho .pfn{font-family:var(--serif);font-weight:800;font-size:24px;letter-spacing:-.01em}
.pfwho .pfu{font-family:var(--mono);font-size:11.5px;color:rgba(20,17,15,.55);margin:3px 0 8px}
.pfstats{display:flex;gap:22px;margin-top:4px}
.pfstat b{font-family:var(--serif);font-weight:900;font-size:22px;display:block}
.pfstat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(20,17,15,.5)}

/* admin tabs + tables */
.atabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1.5px solid rgba(20,17,15,.12)}
.atab{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:none;border:0;
  color:rgba(20,17,15,.55);padding:10px 14px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px}
.atab.on{color:#C62828;border-bottom-color:#C62828}
.atable{width:100%;border-collapse:collapse;font-size:13.5px}
.atable th{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(20,17,15,.5);
  text-align:left;padding:8px 10px;border-bottom:1.5px solid rgba(20,17,15,.14)}
.atable td{padding:10px;border-bottom:1px solid rgba(20,17,15,.08);vertical-align:middle}
.atable .at-title{font-family:var(--serif);font-weight:700;font-size:14.5px;line-height:1.3;max-width:340px}
.atable .at-meta{font-family:var(--mono);font-size:10px;color:rgba(20,17,15,.5);margin-top:2px}
.atable select{font-family:var(--mono);font-size:11px;padding:5px 7px;border-radius:6px;border:1px solid rgba(20,17,15,.2);background:#fff}
.thdot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;border:1px solid rgba(0,0,0,.15)}
.rowbtns{display:flex;gap:6px}

/* editor + live preview */
.edgrid{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:1100px){ .edgrid{grid-template-columns:minmax(0,1fr) auto} }
.pvbox{position:sticky;top:20px}
.pvframe{width:240px;height:427px;overflow:hidden;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.28);position:relative;background:#f4efe7}
.pvframe .pvscale{transform:scale(.5);transform-origin:top left;width:480px;height:854px;pointer-events:none}
.pvframe .r1{width:480px;height:854px;flex:none}
.pvframe .r1 .ghost{font-size:182px}
.pvframe .orb{width:250px;height:250px;right:-67px;top:68px}
.pvcap{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(20,17,15,.45);text-align:center;margin-top:8px}
.themeswatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.thsw{width:34px;height:34px;border-radius:8px;border:2px solid rgba(20,17,15,.15);cursor:pointer;position:relative;padding:0}
.thsw.on{border-color:#14110f;box-shadow:0 0 0 2px #f4efe7,0 0 0 4px #14110f}
.thsw span{position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%);font-family:var(--mono);font-size:8px;
  letter-spacing:.04em;color:rgba(20,17,15,.55);white-space:nowrap;display:none}
.thsw.on span,.thsw:hover span{display:block}

/* tokens tab */
.toknew{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.toknew label{flex:1;min-width:200px;margin-bottom:0}
.tokonce{background:#14110f;color:#f4efe7;border-radius:12px;padding:18px;margin:16px 0}
.tokonce .tk-l{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ffd24a;margin-bottom:8px}
.tokonce .tk-v{font-family:var(--mono);font-size:13px;word-break:break-all;background:rgba(255,255,255,.08);border-radius:8px;padding:12px 14px;user-select:all}
.tokonce .tk-w{font-family:var(--mono);font-size:10.5px;line-height:1.6;color:rgba(244,239,231,.6);margin-top:10px}
.agentbox{background:#0a0e0a;color:#caffca;border-radius:12px;padding:18px;margin-top:18px}
.agentbox .ag-l{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#39ff7a;margin-bottom:8px}
.agentbox pre{font-family:var(--mono);font-size:11px;line-height:1.65;white-space:pre-wrap;word-break:break-all;color:#caffca;opacity:.85}

/* auth modal */
#authmodal{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px}
#authmodal[hidden]{display:none}
.amsheet{position:relative;width:min(430px,100%);background:#f4efe7;color:#14110f;border-radius:18px;padding:40px 26px 30px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);animation:asheetup .28s cubic-bezier(.16,1,.3,1)}
.amtag{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#C62828;margin-bottom:8px}
.amtitle{font-family:var(--serif);font-weight:800;font-size:30px;letter-spacing:-.02em;margin-bottom:6px}
.amsub{font-size:14px;line-height:1.5;color:rgba(20,17,15,.6);margin-bottom:18px}
.amtabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1.5px solid rgba(20,17,15,.12)}
.amtabs button{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:none;border:0;
  color:rgba(20,17,15,.55);padding:9px 13px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px}
.amtabs button[aria-selected="true"]{color:#C62828;border-bottom-color:#C62828}
#auth-form label{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(20,17,15,.6);margin-bottom:12px}
#auth-form input{display:block;width:100%;margin-top:6px;font-family:var(--sans);font-size:15px;padding:11px 13px;border:1.5px solid rgba(20,17,15,.18);border-radius:9px;background:#fff;outline:none}
#auth-form input:focus{border-color:#C62828}
.amgo{width:100%;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:#C62828;border:0;border-radius:999px;padding:13px;cursor:pointer;margin-top:4px}
.amerr{font-family:var(--mono);font-size:11px;font-weight:700;color:#C62828;margin:0 0 10px}
.amnote{font-family:var(--mono);font-size:11px;line-height:1.6;color:#157347;margin-top:12px}

/* help overlay */
#helpov{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:18px}
#helpov[hidden]{display:none}
#helpov .hsheet{background:#f4efe7;border-radius:18px;padding:34px 28px;max-width:420px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.45)}
#helpov h2{font-family:var(--serif);font-weight:800;font-size:24px;margin-bottom:14px}
#helpov .hk{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:11.5px;padding:7px 0;border-bottom:1px solid rgba(20,17,15,.1)}
#helpov .hk b{font-weight:700;color:#C62828;white-space:nowrap}

/* ── reduced motion: tier 1 nuclear floor + tier 2 opacity-only fades ────── */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .r1 .bg,.h-img-frame{transform:none!important}
  /* tier 2: comprehension fades stay, transforms stay dead */
  .fade,.ghost,.kin .w{transition:opacity .01s!important}
  .kin .w,.fade{transform:none!important;filter:none!important}
  .r1.on .ghost{opacity:.07}
  [data-count] .numv{transition:none!important}
}

/* ── state onboarding + mix slider ──────────────────────────────────────── */
#statemodal{position:fixed;inset:0;z-index:86;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px}
#statemodal[hidden]{display:none}
#statemodal .aclose{position:absolute;top:12px;right:14px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(127,127,127,.16);color:#14110f;font-size:23px;line-height:1;cursor:pointer;z-index:2}
#statemodal select{width:100%;margin-top:6px;padding:11px 12px;border:1.5px solid rgba(20,17,15,.18);border-radius:10px;background:#fff;font:inherit;font-size:14.5px}
.mixbox{margin:18px 0 20px}
.mixends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(20,17,15,.55);margin-bottom:8px}
.mixends span:last-child{color:#C62828}
#mix-range{width:100%;accent-color:#C62828;height:26px;cursor:pointer}
.mixread{margin-top:8px;font-size:13.5px;line-height:1.45;color:rgba(20,17,15,.7);min-height:20px;font-style:italic}
.amskip{width:100%;margin-top:10px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:none;border:0;color:rgba(20,17,15,.55);cursor:pointer;padding:10px;text-decoration:underline;text-underline-offset:3px}
.amskip:hover{color:#14110f}
#mast-state{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── desk v2: toolbar + list rows + studio split-pane ──────────────────── */
.dkbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.dkbar input[type=search]{flex:1;min-width:150px;padding:9px 12px;border:1.5px solid rgba(20,17,15,.15);border-radius:9px;background:#fff;font:inherit;font-size:13.5px}
.dkbar select{padding:9px 10px;border:1.5px solid rgba(20,17,15,.15);border-radius:9px;background:#fff;font:inherit;font-size:13px;text-transform:capitalize}
.dkcount{font-family:var(--mono);font-size:11px;color:rgba(20,17,15,.5);white-space:nowrap}
.dklayout{margin-left:auto;display:flex;gap:2px;background:rgba(20,17,15,.07);border-radius:8px;padding:2px}
.dklbtn{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:0;background:none;padding:6px 10px;border-radius:6px;cursor:pointer;color:rgba(20,17,15,.55)}
.dklbtn.on{background:#fff;color:#C62828;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.dkgrid{display:grid;grid-template-columns:minmax(290px,370px) minmax(0,1fr);gap:20px;align-items:start}
.dklist{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 250px);overflow:auto;padding-right:4px}
.dklist-full{display:flex;flex-direction:column;gap:6px}
.dkrow{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1.5px solid rgba(20,17,15,.08);border-radius:11px;cursor:pointer;text-align:left;transition:border-color .12s}
.dkrow:hover{border-color:rgba(198,40,40,.35)}
.dkrow.sel{border-color:#C62828;box-shadow:inset 0 0 0 1px #C62828}
.dkrow:focus-visible{outline:2px solid #C62828;outline-offset:2px}
.dkmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dkmain b{font-family:var(--serif);font-size:13.5px;line-height:1.3;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dkmain small{font-family:var(--mono);font-size:9.5px;color:rgba(20,17,15,.5);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkquick{display:flex;gap:4px;flex-shrink:0;align-items:center}
.dked{min-width:0}
.dkkbd{font-family:var(--mono);font-size:10px;color:rgba(20,17,15,.4);letter-spacing:.05em}
@media (max-width:1000px){.dkgrid{grid-template-columns:1fr}.dklist{max-height:300px;order:1}.dked{order:0}}

/* ════════════════════════════════════════════════════════════════════════════
   CHROME THEME LAYER — light defaults + html[data-mode=dark] overrides.
   Cards keep their own 10 frozen themes; only the app chrome adapts.
   Later-in-file rules override the originals at equal specificity.
   ════════════════════════════════════════════════════════════════════════════ */
:root{--g-bg:#f4efe7;--g-ink:#14110f;--g-panel:#fff;--g-panel2:#f6f1e4;--g-soft:rgba(20,17,15,.58);--g-soft2:rgba(20,17,15,.45);
  --g-line:rgba(20,17,15,.15);--g-input:#fff;--g-ok:#157347;--g-redtext:#C62828}
html[data-mode="dark"]{--g-bg:#131110;--g-ink:#f2ece2;--g-panel:#1e1a16;--g-panel2:#282219;--g-soft:rgba(242,236,226,.66);--g-soft2:rgba(242,236,226,.5);
  --g-line:rgba(242,236,226,.17);--g-input:#211c17;--g-ok:#4cd394;--g-redtext:#ef6a58}

html,body{background:var(--g-bg)}
#load{background:var(--g-bg);color:var(--g-ink)}
#load .kick{color:var(--g-soft)}
#load .berr p{color:var(--g-soft)}
#view{background:var(--g-bg);color:var(--g-ink)}
.vwrap{max-width:1080px;margin:0 auto;padding:calc(max(11px,env(safe-area-inset-top)) + 56px) 20px 80px}
.vwrap-wide{max-width:1380px}
.vback{color:var(--g-redtext)}
.vsub{color:var(--g-soft)}
.vcard{background:var(--g-panel);border-color:var(--g-line)}
.vcard .vh-sub{color:var(--g-soft2)}
.vempty{color:var(--g-soft)}
label.fl{color:var(--g-soft)}
label.fl input,label.fl select,label.fl textarea{background:var(--g-input);color:var(--g-ink);border-color:var(--g-line)}
.fhint{color:var(--g-soft2)}
.btn{border-color:var(--g-ink);background:var(--g-ink);color:var(--g-bg)}
.btn.ghostb{background:none;color:var(--g-ink)}
.btn.red{background:#C62828;border-color:#C62828;color:#fff}
.fok{color:var(--g-ok)}
.ferr{color:var(--g-redtext)}
.rolebadge{background:var(--g-ink);color:var(--g-bg)}
.rolebadge.admin{background:#C62828;color:#fff}
.rolebadge.author{background:#0f4a5e;color:#eafcff}
.pill.archived{background:var(--g-line);color:var(--g-soft)}
html[data-mode="dark"] .pill.published{color:#4cd394}
html[data-mode="dark"] .pill.draft{color:#e8b45c}
.atabs{border-bottom-color:var(--g-line)}
.atab{color:var(--g-soft)}
.atab.on{color:var(--g-redtext);border-bottom-color:var(--g-redtext)}
.atable th{color:var(--g-soft2);border-bottom-color:var(--g-line)}
.atable td{border-bottom-color:var(--g-line)}
.atable .at-meta{color:var(--g-soft2)}
.atable select{background:var(--g-input);color:var(--g-ink);border-color:var(--g-line)}
.svcard{background:var(--g-panel);border-color:var(--g-line)}
.svcard .svmeta{color:var(--g-soft2)}
.svcard .svunsave{background:var(--g-panel);border-color:var(--g-line)}
.pfavatar{background:var(--g-ink);color:var(--g-bg)}
.pfwho .pfu{color:var(--g-soft)}
.pfstat span{color:var(--g-soft2)}
.pvcap{color:var(--g-soft2)}
.thsw{border-color:var(--g-line)}
.thsw.on{border-color:var(--g-ink);box-shadow:0 0 0 2px var(--g-bg),0 0 0 4px var(--g-ink)}
.thsw span{color:var(--g-soft)}
.amsheet,#helpov .hsheet{background:var(--g-bg);color:var(--g-ink)}
.amtag{color:var(--g-redtext)}
.amsub{color:var(--g-soft)}
.amtabs{border-bottom-color:var(--g-line)}
.amtabs button{color:var(--g-soft)}
.amtabs button[aria-selected="true"]{color:var(--g-redtext);border-bottom-color:var(--g-redtext)}
#auth-form label{color:var(--g-soft)}
#auth-form input{background:var(--g-input);color:var(--g-ink);border-color:var(--g-line)}
.amerr{color:var(--g-redtext)}
.amnote{color:var(--g-ok)}
.amskip{color:var(--g-soft)}
.amskip:hover{color:var(--g-ink)}
#helpov .hk{border-bottom-color:var(--g-line)}
#helpov .hk b{color:var(--g-redtext)}
#statemodal select{background:var(--g-input);color:var(--g-ink);border-color:var(--g-line)}
.mixends{color:var(--g-soft)}
.mixends span:last-child{color:var(--g-redtext)}
.mixread{color:var(--g-soft)}
#amodal .asheet{background:var(--g-bg);color:var(--g-ink)}
#amodal .adeck{color:var(--g-soft)}
#amodal .asrc{border-top-color:var(--g-line)}
#amodal .asrc-h{color:var(--g-soft)}
#amodal .aclose,#authmodal .aclose,#statemodal .aclose{color:var(--g-ink)}
#cfgbanner{color:var(--g-ink);background:var(--g-panel2);border-color:var(--g-line);border-left-color:#C62828}
#cfgbanner code{background:var(--g-line)}
.dkbar input[type=search],.dkbar select{background:var(--g-input);color:var(--g-ink);border-color:var(--g-line)}
.dkcount{color:var(--g-soft2)}
.dklayout{background:var(--g-line)}
.dklbtn{color:var(--g-soft)}
.dklbtn.on{background:var(--g-panel);color:var(--g-redtext)}
.dkrow{background:var(--g-panel);border-color:var(--g-line)}
.dkmain small{color:var(--g-soft2)}
.dkkbd{color:var(--g-soft2)}
.catform-panel,.vcard[style*="f6f1e4"]{background:var(--g-panel2)!important}

/* masthead: chips instead of blend-mode — readable over ANY card, both modes */
#mast .mw{mix-blend-mode:normal;color:#fff;background:rgba(0,0,0,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.22)}
#mast .mclock{mix-blend-mode:normal;color:#fff;background:rgba(0,0,0,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font-weight:700}
#mast-mode{min-width:34px}

/* ── india tile map + settings extras ───────────────────────────────────── */
.inmap{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin:2px 0 6px}
.intile{aspect-ratio:1;border-radius:7px;border:1.5px solid transparent;background:var(--g-line);
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.02em;color:var(--g-soft);
  display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .1s,background .15s}
.intile:hover{border-color:#C62828;color:var(--g-ink);transform:scale(1.12)}
.intile.on{background:#C62828;color:#fff;border-color:#C62828}
.ingeo{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--g-ok);margin:4px 0 2px}
.topicgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.topicchk{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--g-ink);
  background:var(--g-panel2);border:1.5px solid var(--g-line);border-radius:9px;padding:9px 12px;cursor:pointer}
.topicchk input{accent-color:#C62828;width:15px;height:15px;flex:none}
.topicchk:has(input:not(:checked)){opacity:.55}

/* ── QA pass 1 fixes ────────────────────────────────────────────────────── */
#statemodal .amsheet{max-height:92vh;overflow-y:auto}
#auth-form label[hidden]{display:none}
div.fl{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g-soft)}
input[type="range"]{accent-color:#C62828}

/* QA pass 2: editor live preview must never inherit coverflow blur/scale */
.pvframe .r1{transform:none!important;filter:none!important;opacity:1!important;box-shadow:none!important;margin:0!important}

/* ── real India map (SVG state shapes) ──────────────────────────────────── */
.inmapwrap{margin:2px 0 6px}
.inmap-svg{width:100%;height:auto;max-height:44vh;display:block;margin:0 auto}
.inmap-svg .instate{fill:var(--g-line);stroke:var(--g-bg);stroke-width:.7;cursor:pointer;transition:fill .15s ease}
.inmap-svg .instate:hover{fill:color-mix(in srgb,#C62828 42%,var(--g-line))}
.inmap-svg .instate.on{fill:#C62828}
.inmap-svg .instate:focus-visible{outline:none;stroke:#C62828;stroke-width:1.6}
.inmap-sel{margin-top:8px;text-align:center;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g-soft)}
.inmap-sel.picked{color:#C62828}

/* ── masthead logo + settings mode segment ─────────────────────────────── */
.mwlogo{pointer-events:auto;display:block;line-height:0}
.mwlogo img{width:30px;height:30px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.35);display:block;transition:transform .12s}
.mwlogo:active img{transform:scale(.92)}
.modeseg{display:inline-flex;gap:2px;background:var(--g-line);border-radius:9px;padding:3px}
.modebtn{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:0;background:none;
  padding:8px 16px;border-radius:7px;cursor:pointer;color:var(--g-soft)}
.modebtn.on{background:var(--g-panel);color:#C62828;box-shadow:0 1px 3px rgba(0,0,0,.15)}