* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
  /* ===== DARK theme (default) — mirrors app dark.theme.dart ===== */
  :root {
    --brand: #11D979;
    --on-brand: #04130B;
    --bg: #0A0D0C;
    --surface: #15191A;
    --surface-2: #1A1F1E;
    --chip: #1F2422;
    --text: #EEF2F1;
    --text-2: #9BA4A1;
    --text-3: #6C7673;
    --border: rgba(255,255,255,0.085);
    --brand-tint: rgba(17,217,121,0.14);
    --brand-line: rgba(17,217,121,0.28);
    --brand-ink: #6FEAB4;
    --warn: #FF8A3D;
    --gold: #F4B740;
    --card-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 22px rgba(0,0,0,0.4);
    --nav-bg: rgba(20,24,23,0.86);
    --page-bg: radial-gradient(1200px 700px at 50% -10%, #11201a 0%, #070a09 55%, #050706 100%);
    --frame-ring: #131615;
    --av-ph-bg: var(--chip);
    --dash: rgba(17,217,121,0.4);
  }
  /* ===== LIGHT theme — mirrors app light.theme.dart ===== */
  body.light {
    --brand: #0FC36E;
    --on-brand: #FFFFFF;
    --bg: #EEF1F0;
    --surface: #FFFFFF;
    --surface-2: #F6F8F7;
    --chip: #EEF1F0;
    --text: #15201C;
    --text-2: #515B58;
    --text-3: #79827F;
    --border: rgba(15,25,22,0.13);
    --brand-tint: rgba(15,195,110,0.11);
    --brand-line: rgba(15,160,90,0.42);
    --brand-ink: #079A53;
    --warn: #D9641B;
    --gold: #B8860B;
    --card-shadow: 0 1px 2px rgba(16,40,30,0.05), 0 4px 14px rgba(16,40,30,0.07);
    --nav-bg: rgba(255,255,255,0.90);
    --page-bg: linear-gradient(180deg, #e9efec 0%, #eef1ef 40%, #eaeeec 100%);
    --frame-ring: #e7eae9;
    --av-ph-bg: #E3E7E5;
    --dash: rgba(15,160,90,0.5);
  }
  body {
    font-family: 'Outfit', 'Noto Sans Devanagari', -apple-system, system-ui, sans-serif;
    background: var(--page-bg);
    color: var(--text);
    min-height: 100vh;
    padding: 44px 20px 80px;
    transition: background .25s ease, color .25s ease;
  }
  .theme-toggle { position: fixed; top: 16px; right: 18px; z-index: 200; display:flex; gap:4px; background: var(--surface); border:1px solid var(--border); border-radius: 22px; padding: 4px; box-shadow: var(--card-shadow); }
  .theme-toggle button { border:none; background:transparent; color: var(--text-2); font-family:inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 18px; cursor:pointer; display:flex; align-items:center; gap:6px; }
  .theme-toggle button.on { background: var(--brand); color: var(--on-brand); }
  .theme-toggle button svg { width:14px; height:14px; }

  /* ===== slim header + screens index ===== */
  .page-head { text-align: center; margin-bottom: 10px; }
  .page-head h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.5px; }
  .page-head h1 em { color: var(--brand); font-style: normal; }
  .page-head p { color: var(--text-2); font-size: 13.5px; margin-top: 7px; max-width: 740px; margin-inline: auto; line-height: 1.5; }
  .page-head p b { color: var(--brand-ink); font-weight: 700; }
  .sindex { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin: 16px auto 36px; max-width: 980px; }
  .sindex a { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--text-2); background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:7px 13px; text-decoration:none; box-shadow:var(--card-shadow); }
  .sindex a b { color:var(--brand-ink); font-weight:800; font-size:10.5px; letter-spacing:.6px; }
  .sindex a:hover { border-color:var(--brand-line); color:var(--text); }

  /* ===== stage / column / caption scaffolding ===== */
  .stage { display: flex; gap: 34px; justify-content: center; align-items: flex-start; flex-wrap: wrap; max-width: 1720px; margin: 0 auto; }
  .col { width: 392px; }
  .col-cap { text-align:center; margin-bottom: 16px; min-height: 96px; }
  .col-cap .step { display:inline-block; font-size: 11px; font-weight:800; letter-spacing: 1.2px; color: var(--on-brand); background: var(--brand); padding: 3px 10px; border-radius: 20px; }
  .col-cap h3 { font-size: 16px; font-weight: 700; margin-top: 10px; }
  .col-cap p { font-size: 12.5px; color: var(--text-2); margin-top: 5px; line-height: 1.45; }
  .col-cap p b { color: var(--brand-ink); font-weight: 700; }

  /* ===== phone frame ===== */
  .phone { position: relative; width: 392px; height: 860px; border-radius: 46px; background: var(--bg); box-shadow: 0 0 0 11px var(--frame-ring), 0 0 0 12px var(--border), 0 50px 90px rgba(0,0,0,0.28); overflow: hidden; }
  .notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width: 124px; height: 33px; border-radius: 0 0 20px 20px; background:#000; z-index: 90; }
  .screen { position:absolute; inset:0; display:flex; flex-direction:column; background: var(--bg); }
  .statusbar { height: 50px; display:flex; align-items:flex-end; justify-content:space-between; padding: 0 26px 6px; font-size: 13px; font-weight: 600; color: var(--text); flex-shrink:0; }
  .statusbar .right { display:flex; gap:6px; align-items:center; }

  /* ===== bottom nav (Place = root branch tab) ===== */
  .nav { flex-shrink:0; display:flex; justify-content:space-around; align-items:center; padding: 9px 6px 24px; background: var(--nav-bg); backdrop-filter: blur(18px); border-top:1px solid var(--border); }
  .nav .ni { display:flex; flex-direction:column; align-items:center; gap:3px; color: var(--text-3); font-size: 9.5px; font-weight:500; }
  .nav .ni svg { width:22px;height:22px; }
  .nav .ni.on { color: var(--brand); }

  /* ===================================================================== */
  /* BASE VOCABULARY — premium components carried over from the Overview   */
  /* redesign (offgrp/off official rows, sec header, today strip). The     */
  /* S1 ladder + future journey screens speak THIS language (F25).         */
  /* ===================================================================== */
  .sec { display:flex; align-items:center; gap:9px; padding:18px 18px 9px 18px; }
  .sec .stitle { font-size:15px; font-weight:800; letter-spacing:-0.2px; color:var(--text); }
  .sec .scount { font-size:11px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:9px; padding:2px 8px; flex-shrink:0; }
  .sec .saside { margin-left:auto; display:flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--brand-ink); flex-shrink:0; }
  .sec .saside.muted { color:var(--text-3); font-weight:600; }
  .sec .saside svg { width:13px;height:13px; }

  .today { display:flex; align-items:stretch; gap:9px; margin:11px 16px 2px; }
  .today .tcell { flex:1; display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px 11px; box-shadow:var(--card-shadow); min-width:0; }
  .today .tcell .tico { width:30px;height:30px;border-radius:9px; background:var(--brand-tint); border:1px solid var(--brand-line); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .today .tcell .tico svg { width:15px;height:15px;color:var(--brand-ink); }
  .today .tcell .tmeta { min-width:0; line-height:1.15; }
  .today .tcell .tnum { font-size:16px; font-weight:800; letter-spacing:-0.3px; display:flex; align-items:center; gap:5px; }
  .today .tcell .tlbl { font-size:10.5px; font-weight:600; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .today .tcell.rank { background:linear-gradient(120deg, var(--brand-tint), rgba(17,217,121,0.03) 85%); border-color:var(--brand-line); }
  .today .tcell.rank .tico { background:var(--gold); border-color:transparent; }
  .today .tcell.rank .tico svg { color:var(--on-brand); }
  body.light .today .tcell.rank .tico svg { color:#fff; }

  .offgrp { margin:0 16px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--card-shadow); overflow:hidden; }
  .off { display:flex; align-items:center; gap:12px; padding:12px 13px; border-bottom:1px solid var(--border); }
  .off:last-child { border-bottom:none; }
  .off .oav { width:42px;height:42px;border-radius:50%; background-size:cover; background-position:center; flex-shrink:0; border:2px solid var(--brand-line); }
  .off .oav.icon { background:var(--chip); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
  .off .oav.icon svg { width:19px;height:19px;color:var(--brand-ink); }
  .off .oav.vacant { border-style:dashed; border-color:var(--dash); background:transparent; }
  .off .oav.vacant svg { color:var(--text-3); }
  .off .om { flex:1; min-width:0; }
  .off .orole { font-size:11px; color:var(--text-3); font-weight:600; display:flex; align-items:center; gap:6px; }
  .off .oname { font-size:15px; font-weight:800; letter-spacing:-0.2px; margin-top:2px; display:flex; align-items:center; gap:6px; min-width:0; }
  .off .oname .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .off .osub { font-size:11px; color:var(--text-3); margin-top:3px; display:flex; align-items:center; gap:5px; }
  .off .oact { flex-shrink:0; display:flex; align-items:center; gap:8px; }
  .callbtn { width:40px;height:40px;border-radius:50%; background:var(--brand); border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 8px rgba(17,217,121,0.3); }
  .callbtn svg { width:17px;height:17px;color:var(--on-brand); }
  .addbtn { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:13px; padding:7px 11px; flex-shrink:0; }
  .addbtn svg { width:12px;height:12px; }
  .addbtn .pts { font-size:10px; color:var(--gold); }
  .off .ochev { width:30px;height:30px;border-radius:50%; background:var(--chip); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .off .ochev svg { width:15px;height:15px;color:var(--text-2); }

  /* ===================================================================== */
  /* S1 — SET YOUR PLACE component system (S1-decision-sheet.md)           */
  /* Ladder speaks the offgrp/off language (F25); Material-style icon      */
  /* glyphs replace ALL emojis (F24); dark card border lifted to ~13%      */
  /* white and secondary copy uses the text-2 tier, never the AA-failing   */
  /* grey (F26). Mirror these 1:1 in set_your_place.page.dart.             */
  /* ===================================================================== */
  .sp { flex:1; min-height:0; display:flex; flex-direction:column; padding:14px 20px 12px; --sp-border: rgba(255,255,255,0.13); }
  body.light .sp { --sp-border: rgba(15,25,22,0.13); }
  .sppin { width:54px;height:54px;border-radius:50%; background:var(--brand-tint); border:1px solid var(--brand-line); display:flex;align-items:center;justify-content:center; margin:2px auto 10px; flex-shrink:0; animation:sp-pin-idle 2.6s ease-in-out infinite alternate; }
  /* Owner 2026-06-12: pin never sits dead-static — loaded states get a slow
     gentle breath (micro-scale + soft glow); .pulse (locating) overrides with
     the strong fast pulse. */
  @keyframes sp-pin-idle { from { transform:scale(1); box-shadow:0 0 0 0 rgba(35,213,130,0); } to { transform:scale(1.02); box-shadow:0 0 5px 2.5px rgba(35,213,130,0.14); } }
  .sppin svg { width:26px;height:26px;color:var(--brand); }
  .sppin.pulse { animation:sp-pin 1.5s ease-in-out infinite; }
  @keyframes sp-pin { 0%,100%{ box-shadow:0 0 0 0 var(--brand-tint);} 50%{ box-shadow:0 0 0 11px var(--brand-tint);} }
  /* title (C13 AS AMENDED + DECISIONS #8: ONE language per screen — single locale via i18n, no dual-line) */
  .sp-hi { font-size:21.5px; font-weight:700; text-align:center; line-height:1.3; } /* Devanagari metrics (hi locale frame) */
  .sp-hi.lead { font-size:22px; font-weight:800; letter-spacing:-0.4px; } /* Latin metrics (en frames) */
  .sp-sub { font-size:12.5px; color:var(--text-2); text-align:center; margin-top:6px; line-height:1.45; }
  .sp-sub b { color:var(--brand-ink); font-weight:700; }
  /* trust microline (B9) — text-2 tier per F26 */
  .sp-trust { display:flex; align-items:center; justify-content:center; gap:5px; font-size:11px; font-weight:600; color:var(--text-2); margin-top:7px; }
  .sp-trust svg { width:12px;height:12px;color:var(--brand-ink); flex-shrink:0; }
  /* ladder card — offgrp/off vocabulary (F25): ancestors = neutral chip icon bg; leaf = brand fill */
  .sp-card { background:var(--surface); border:1px solid var(--sp-border); border-radius:16px; box-shadow:var(--card-shadow); overflow:hidden; margin-top:13px; }
  .sp-rung { display:flex; align-items:center; gap:12px; padding:10px 13px; border-bottom:1px solid var(--sp-border); }
  .sp-rung:last-child { border-bottom:none; }
  .sp-rung .ri { width:34px;height:34px;border-radius:10px; background:var(--chip); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .sp-rung .ri svg { width:16px;height:16px;color:var(--text-2); }
  .sp-rung.leaf { padding:12px 13px; }
  .sp-rung.leaf .ri { width:40px;height:40px;border-radius:12px; background:var(--brand); border-color:transparent; }
  .sp-rung.leaf .ri svg { width:19px;height:19px;color:var(--on-brand); }
  .sp-rung .rm { flex:1; min-width:0; }
  .sp-rung .rl { font-size:9.5px; font-weight:700; color:var(--text-3); letter-spacing:.5px; text-transform:uppercase; }
  .sp-rung .rn { font-size:15px; font-weight:700; margin-top:1px; }
  .sp-rung.leaf .rn { font-size:17px; font-weight:800; letter-spacing:-0.2px; }
  .sp-rung .rsub { display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--text-2); margin-top:3px; }
  .sp-rung .rsub svg { width:12px;height:12px;color:var(--brand-ink); flex-shrink:0; }
  .sp-rung .rsub b { color:var(--brand-ink); font-weight:700; }
  .sp-rung .rck { color:var(--brand); margin-left:auto; flex-shrink:0; display:flex; }
  .sp-rung .rck svg { width:19px;height:19px; }
  /* confirm-success pulse (E22) — app fires ONE-SHOT ~350ms; looped here so the mockup shows it */
  .sp-rung.won { background:var(--brand-tint); animation:sp-won 1.4s ease-in-out infinite; }
  @keyframes sp-won { 0%,100%{ box-shadow:inset 0 0 0 1px var(--brand-line);} 50%{ box-shadow:inset 0 0 0 2px var(--brand);} }
  /* skeleton shimmer (A1/E21 locating state) */
  .sp .sk { background:linear-gradient(90deg, var(--chip) 25%, var(--surface-2) 50%, var(--chip) 75%); background-size:200% 100%; animation:sp-sk 1.2s linear infinite; border-radius:7px; }
  @keyframes sp-sk { from{ background-position:200% 0;} to{ background-position:-200% 0;} }
  .sp-locating { display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; font-weight:700; color:var(--brand-ink); margin-top:9px; animation:sp-fade 1.4s ease-in-out infinite; }
  @keyframes sp-fade { 0%,100%{ opacity:.5;} 50%{ opacity:1;} }
  .sp-locating .dot { width:7px;height:7px;border-radius:50%;background:var(--brand); flex-shrink:0; }
  /* "Pick a different place" — search affordance DIRECTLY under the ladder (E20: swaps candidate in branch state) */
  .sp-search { display:flex; align-items:center; gap:10px; width:100%; margin-top:9px; padding:12px 14px; border-radius:14px; background:var(--surface); border:1px solid var(--sp-border); color:var(--text); font-family:inherit; font-size:13px; font-weight:700; box-shadow:var(--card-shadow); text-align:left; }
  .sp-search svg { width:16px;height:16px;color:var(--brand-ink); flex-shrink:0; }
  .sp-search small { margin-left:auto; font-size:11px; font-weight:600; color:var(--text-3); }
  /* inline search FIELD (D17 urban/migrant — co-equal with the ladder; also the denied-permission layout) */
  .sp-inp { display:flex; align-items:center; gap:10px; margin-top:13px; padding:13px 14px; border-radius:14px; background:var(--surface); border:1.4px solid var(--brand-line); box-shadow:var(--card-shadow); }
  .sp-inp svg { width:17px;height:17px;color:var(--brand-ink); flex-shrink:0; }
  .sp-inp .ph { font-size:13.5px; font-weight:600; color:var(--text-3); }
  .sp-inp .cur { width:1.5px; height:16px; background:var(--brand); flex-shrink:0; }
  /* capped spacer (F26 — no unconstrained Spacer) */
  .sp-gap { flex:1; max-height:26px; }
  /* home-place check card (C14) — ticked = brand tint; .off = visible unchecked state (F26) */
  .sp-check { display:flex; align-items:center; gap:11px; padding:12px 13px; background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:14px; font-size:12.5px; color:var(--text); font-weight:600; line-height:1.4; margin-top:9px; }
  .sp-check .spbox { width:22px;height:22px;border-radius:7px; background:var(--brand); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .sp-check .spbox svg { width:13px;height:13px;color:var(--on-brand); }
  .sp-check b { font-weight:700; }
  .sp-check.off { background:var(--surface); border-color:var(--sp-border); box-shadow:var(--card-shadow); }
  .sp-check.off .spbox { background:transparent; border:2px solid var(--text-2); }
  /* people-tab disclosure (S9-A2 consent capture): shown ONLY when check is ticked.
     Code renders this below the check card; mockup follows code per improve-freely rule. */
  .sp-disc { font-size:11px; color:var(--text-2); text-align:center; margin-top:7px; padding:0 4px; line-height:1.4; }
  /* CTA (.dis = disabled-opacity state, F26; wraps to 2 lines for long names) + integrated Later (E19) */
  .sp-cta { width:100%; padding:14px; border-radius:24px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:15px; font-weight:800; margin-top:11px; line-height:1.25; white-space:normal; }
  .sp-cta.dis { opacity:.45; }
  .sp-later { width:100%; padding:10px; background:transparent; border:none; font-family:inherit; font-size:13px; font-weight:700; color:var(--text-2); margin-top:2px; }
  /* welcome bar (E22 confirm beat) */
  .sp-welcome { width:100%; padding:13px; border-radius:24px; background:var(--brand); color:var(--on-brand); border:none; text-align:center; margin-top:11px; }
  .sp-welcome .w1 { font-size:15px; font-weight:800; }
  .sp-next { text-align:center; font-size:10.5px; color:var(--text-3); font-weight:600; margin-top:9px; }
  /* after-"Later" branch placeholder (E19 — Later never strands) */
  .sp-empty { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 36px; }
  .sp-empty .epin { width:66px;height:66px;border-radius:50%; border:1.6px dashed var(--dash); background:var(--brand-tint); display:flex;align-items:center;justify-content:center; margin-bottom:14px; }
  .sp-empty .epin svg { width:30px;height:30px;color:var(--brand); }
  .sp-empty h4 { font-size:19px; font-weight:800; line-height:1.3; letter-spacing:-0.3px; }
  .sp-empty .ep { font-size:12.5px; color:var(--text-2); line-height:1.5; margin-top:8px; }
  .sp-empty .sp-cta { margin-top:18px; }
  .sp-empty .enote { font-size:11px; color:var(--text-3); font-weight:600; margin-top:10px; }

  /* ===================================================================== */
  /* S2 — INTRO component system (S2-decision-sheet.md). The carousel is   */
  /* DEAD (A1): user lands on the HOME VILLAGE page (A2) under a ~40%      */
  /* NON-MODAL sheet. The page behind = the v2 vocabulary MINIATURIZED     */
  /* (.pl* mini place-page header; content reuses .sec/.today/.offgrp).    */
  /* Rich story = re-watchable "How {place} works" view (A4). Points are   */
  /* named SEVA (DECISIONS #10 resolves C12): "★ +15 Seva" / "Seva score"  */
  /* — the word "karma" is never rendered (code ids may stay karma).       */
  /* ===================================================================== */
  .s2-body { flex:1; min-height:0; position:relative; overflow:hidden; display:flex; flex-direction:column; }
  .s2-pg { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
  /* mini place-page header — Bheldi's REAL page, slightly scrimmed (A2: no preview imagery, the live page IS the visual) */
  .plbar { display:flex; align-items:center; gap:8px; padding:10px 16px 0; }
  .plbar h2 { font-size:19px; font-weight:800; letter-spacing:-0.3px; display:flex; align-items:center; gap:7px; min-width:0; }
  .plbar .tag { font-size:9.5px; font-weight:700; color:var(--text-3); border:1px solid var(--border); border-radius:6px; padding:1px 6px; text-transform:uppercase; letter-spacing:.4px; flex-shrink:0; }
  .plbar .rgt { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .fpill { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:14px; padding:6px 11px; }
  .fpill svg { width:12px;height:12px; }
  .plbar .dots { width:30px;height:30px;border-radius:50%; background:var(--chip); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--text-2); flex-shrink:0; }
  .plbar .dots svg { width:16px;height:16px; }
  .plad { display:flex; gap:6px; padding:9px 16px 0; overflow:hidden; }
  .plad .lstep { flex-shrink:0; padding:6px 11px; border-radius:12px; background:var(--surface); border:1px solid var(--border); font-size:11.5px; font-weight:600; color:var(--text-2); white-space:nowrap; }
  .plad .lstep.on { background:var(--brand); color:var(--on-brand); border-color:transparent; font-weight:800; }
  /* completeness area — slim build bar; NO "% complete" stat anywhere in the intro (B8 🚫) */
  .plbuild { margin:10px 16px 0; background:linear-gradient(110deg, var(--brand-tint), rgba(17,217,121,0.03) 80%); border:1px solid var(--brand-line); border-radius:14px; padding:11px 12px; }
  .plbuild .bh { font-size:12.5px; font-weight:800; display:flex; align-items:center; gap:7px; }
  .plbuild .bh svg { width:14px;height:14px;color:var(--brand); flex-shrink:0; }
  .plbuild .track { height:6px; border-radius:5px; background:var(--chip); margin-top:8px; overflow:hidden; }
  .plbuild .fill { height:100%; border-radius:5px; background:linear-gradient(90deg, var(--brand), #38e89a); }
  .plbuild .bs { font-size:11px; color:var(--text-2); margin-top:7px; }
  .plbuild .bs b { color:var(--brand-ink); font-weight:700; }
  .pltabs { display:flex; gap:2px; padding:8px 10px 0; border-bottom:1px solid var(--border); }
  .pltab { padding:9px 12px; font-size:12.5px; font-weight:600; color:var(--text-3); position:relative; white-space:nowrap; }
  .pltab.on { color:var(--text); font-weight:700; }
  .pltab.on::after { content:''; position:absolute; bottom:-1px; left:16%; right:16%; height:3px; border-radius:3px 3px 0 0; background:var(--brand); }
  /* empty-village page (S2·B) — the empty states ARE the build CTAs */
  .plhero { margin:10px 16px 0; height:92px; border-radius:16px; border:1.6px dashed var(--dash); background:var(--brand-tint); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
  .plhero svg { width:22px;height:22px;color:var(--brand); }
  .plhero .t { font-size:12px; font-weight:700; color:var(--brand-ink); }
  .plhero .s { font-size:10.5px; color:var(--text-3); font-weight:600; }
  .plchips { display:flex; flex-wrap:wrap; gap:7px; padding:10px 16px 0; }
  .plchip { display:flex; align-items:center; gap:6px; padding:7px 11px; border-radius:12px; border:1px dashed var(--dash); background:var(--surface); color:var(--text); font-size:11.5px; font-weight:600; }
  .plchip svg { width:12px;height:12px;color:var(--brand); flex-shrink:0; }
  .plchip .pts { color:var(--gold); font-size:10px; font-weight:800; }
  /* scrim — page "slightly scrimmed", nav stays clear (A1: never blocks) */
  .s2-scrim { position:absolute; inset:0; background:rgba(4,10,8,0.38); z-index:4; }
  body.light .s2-scrim { background:rgba(12,22,18,0.22); }
  /* the ~40%-height intro sheet (A1: rises ~1.2s after landing, non-modal, swipe-down or "Got it" dismisses) */
  .s2-sheet { position:absolute; left:0; right:0; bottom:0; z-index:5; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:22px 22px 0 0; box-shadow:0 -14px 44px rgba(0,0,0,0.35); padding:9px 20px 18px; }
  .s2-grab { width:42px; height:4.5px; border-radius:3px; background:var(--text-3); opacity:.45; margin:0 auto 13px; }
  /* social proof — gated ≥3 (B9); ABSENT in the empty-village variant */
  .s2-proof { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--brand-ink); margin-bottom:8px; }
  .s2-proof svg { width:13px;height:13px; flex-shrink:0; }
  .s2-l1 { font-size:18.5px; font-weight:800; letter-spacing:-0.3px; line-height:1.34; }
  .s2-l1 b { color:var(--brand-ink); }
  .s2-l1.dev { font-weight:700; letter-spacing:0; font-size:17.5px; } /* Devanagari metrics */
  .s2-row { display:flex; gap:11px; margin-top:12px; align-items:flex-start; }
  .s2-row .ri2 { width:34px;height:34px;border-radius:10px; background:var(--brand-tint); border:1px solid var(--brand-line); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .s2-row .ri2 svg { width:16px;height:16px;color:var(--brand-ink); }
  .s2-row p { font-size:12.5px; color:var(--text-2); line-height:1.5; }
  .s2-row p b { color:var(--text); font-weight:700; }
  .s2-feed { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--text-2); margin-top:11px; }
  .s2-feed svg { width:13px;height:13px;color:var(--brand-ink); flex-shrink:0; }
  .s2-ctas { display:flex; align-items:center; gap:9px; margin-top:14px; }
  .s2-ctas .go { flex:1.6; padding:13px; border-radius:22px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:14.5px; font-weight:800; }
  .s2-ctas .ghost { flex:1; padding:13px 8px; border-radius:22px; background:transparent; border:1px solid var(--border); color:var(--text-2); font-family:inherit; font-size:13px; font-weight:700; }
  /* "How {place} works" full view (A4) — re-watchable, REAL-component mini visuals only */
  .s2-hiw { flex:1; min-height:0; display:flex; flex-direction:column; padding:8px 16px 12px; overflow:hidden; }
  .s2-hiw .hh { display:flex; align-items:flex-start; gap:10px; padding:4px 2px 10px; }
  .s2-hiw .hh .hm { flex:1; min-width:0; }
  .s2-hiw .hh h2 { font-size:20px; font-weight:800; letter-spacing:-0.4px; }
  .s2-hiw .hh .hs { font-size:11.5px; color:var(--text-2); margin-top:3px; }
  .s2-hiw .hh .x { width:32px;height:32px;border-radius:50%; background:var(--chip); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .s2-hiw .hh .x svg { width:15px;height:15px;color:var(--text-2); }
  .hcard { background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--card-shadow); padding:12px 13px; margin-bottom:10px; }
  .hcard .hk { font-size:9.5px; font-weight:800; letter-spacing:.7px; color:var(--brand-ink); text-transform:uppercase; }
  .hcard .ht { font-size:14.5px; font-weight:800; letter-spacing:-0.2px; margin-top:3px; }
  .hcard .hp { font-size:11.5px; color:var(--text-2); line-height:1.45; margin-top:5px; }
  .hcard .hp b { color:var(--text); font-weight:700; }
  .hmini { margin-top:9px; border:1px solid var(--border); border-radius:12px; padding:9px 9px 0; background:var(--bg); overflow:hidden; }
  .hmini .plad { padding:0; }
  .hmini .plad .lstep { padding:4px 9px; font-size:10px; border-radius:9px; }
  .hmini .pltabs { padding:6px 0 0; border-bottom:none; }
  .hmini .pltab { padding:7px 9px 9px; font-size:10.5px; }
  /* issue status track — labelled as THE JOURNEY, not a guarantee (C10) */
  .trk { display:flex; align-items:center; margin-top:11px; padding:2px 2px 0; }
  .trk .tn { display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; width:78px; }
  .trk .tn .dotx { width:22px;height:22px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--chip); border:1.6px solid var(--border); color:var(--text-3); }
  .trk .tn .dotx svg { width:11px;height:11px; }
  .trk .tn.done .dotx { background:var(--brand); border-color:transparent; color:var(--on-brand); }
  .trk .tn.cur .dotx { background:var(--brand-tint); border-color:var(--brand); color:var(--brand-ink); }
  .trk .tn small { font-size:8.5px; font-weight:800; letter-spacing:.4px; color:var(--text-2); text-transform:uppercase; text-align:center; white-space:nowrap; }
  .trk .tl { flex:1; height:2px; background:var(--border); margin:0 2px 16px; border-radius:2px; min-width:12px; }
  .trk .tl.done { background:var(--brand); }
  /* building & Seva — "★ +N Seva" pills + role names; "karma" never rendered (C12 → DECISIONS #10) */
  .hearn { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
  .hearn .ep { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; background:var(--chip); border:1px solid var(--border); border-radius:11px; padding:6px 10px; }
  .hearn .ep b { color:var(--gold); font-weight:800; }
  .hroles { display:flex; align-items:center; gap:5px; margin-top:9px; flex-wrap:wrap; }
  .hroles .rp2 { font-size:10.5px; font-weight:700; padding:5px 9px; border-radius:10px; background:var(--chip); border:1px solid var(--border); color:var(--text-2); }
  .hroles .rp2.you { background:var(--brand-tint); border-color:var(--brand-line); color:var(--brand-ink); }
  .hroles .arr { color:var(--text-3); font-size:10px; }
  .s2-hiw .hcta { width:100%; padding:13px; border-radius:22px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:14px; font-weight:800; margin-top:auto; }

  /* ===================================================================== */
  /* S3 — ADAPTIVE LANDING + HEADER DIET (S3-decision-sheet.md).           */
  /* Header = 4 things ONLY (B5): .plbar top bar → .s3lad activity-teaser  */
  /* ladder (A2 counts) → .today 3-cell strip (B7) → STICKY .pltabs.       */
  /* Hero/breadcrumb/stats/completeness moved INTO the Overview tab (B6).  */
  /* ===================================================================== */
  .s3b { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
  .s3sc { flex:1; min-height:0; overflow:hidden; }
  /* AMENDMENT 2026-06-11 (b): number-first Today cells — ~19px number + small unit word, 11px icon+label
     line beneath, 3px coloured LEFT ACCENT per cell: ① brand ② warn ③ gold (personal). Tap semantics and
     S3 content rules (no 0-shame etc.) unchanged. Scoped to .s3b so the S2-era strip stays untouched. */
  .s3b .today { margin:11px 12px 2px; gap:7px; }
  .s3b .today .tcell { display:block; padding:8px 10px 8px 13px; position:relative; overflow:hidden; }
  .s3b .today .tcell::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand); opacity:.85; }
  .s3b .today .tcell:nth-child(2)::before { background:var(--warn); }
  .s3b .today .tcell:nth-child(3)::before { background:var(--gold); }
  .s3b .today .tcell .tnum { font-size:19px; font-weight:800; letter-spacing:-0.5px; line-height:1; display:flex; align-items:baseline; gap:4px; }
  .s3b .today .tcell .tnum .u { font-size:11px; font-weight:700; color:var(--text-2); }
  .s3b .today .tcell .tlbl { font-size:11px; font-weight:600; color:var(--text-3); margin-top:5px; display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .s3b .today .tcell .tlbl svg { width:11px; height:11px; flex-shrink:0; }
  /* AMENDMENT 2026-06-11 (c): 34px brand-tint rounded-square pin tile anchors the top-bar title block */
  .s3b .plbar .ppin { width:34px; height:34px; border-radius:11px; background:var(--brand-tint); border:1px solid var(--brand-line); color:var(--brand-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .s3b .plbar .ppin svg { width:17px; height:17px; }
  /* "Home · Resident" status chip (D13) — tappable → residency sheet; NEVER a bare Follow CTA on own home */
  .hchip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:14px; padding:6px 10px; flex-shrink:0; white-space:nowrap; }
  .hchip svg { width:12px; height:12px; flex-shrink:0; }
  /* level-aware solid Follow (D14) */
  .fpill.solid { background:var(--brand); color:var(--on-brand); border-color:transparent; }
  /* activity-teaser ladder (A2) — AMENDMENT 2026-06-11 (a): TWO-LINE rungs, place name (12.5/700) over
     level sublabel (10/600 muted); count = brand-tint pill ("1.4k" abbreviation ≥1000); QUIET keeps its
     quiet style; ACTIVE rung = SOLID brand fill, on-brand text/icon, translucent on-brand badge — NO pulse
     dot. Home chip keeps the house icon EVEN WHEN ACTIVE (F17); maxWidth+ellipsis+scroll-to-active = urban fit */
  .s3lad .lstep { display:inline-flex; align-items:center; gap:7px; max-width:170px; padding:5px 11px; border-radius:13px; }
  .s3lad .lstep svg { width:13px; height:13px; flex-shrink:0; }
  .s3lad .lstep .rlb { display:flex; flex-direction:column; line-height:1.18; min-width:0; }
  .s3lad .lstep .ln { display:block; font-size:12.5px; font-weight:700; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .s3lad .lstep .lv { font-size:10px; font-weight:600; color:var(--text-3); white-space:nowrap; }
  .s3lad .lstep .ct { font-size:11px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border-radius:7px; padding:2px 6px; flex-shrink:0; }
  .s3lad .lstep .qt { font-size:11px; font-weight:600; color:var(--text-3); flex-shrink:0; }
  .s3lad .lstep.home { background:var(--brand-tint); border-color:var(--brand-line); }
  .s3lad .lstep.home .ln, .s3lad .lstep.home svg { color:var(--brand-ink); }
  .s3lad .lstep.on { background:var(--brand); border-color:transparent; }
  .s3lad .lstep.on .ln, .s3lad .lstep.on svg { color:var(--on-brand); }
  .s3lad .lstep.on .lv { color:var(--on-brand); opacity:.75; }
  .s3lad .lstep.on .ct { background:color-mix(in srgb, var(--on-brand) 20%, transparent); color:var(--on-brand); }
  .s3lad .lstep.on .qt { color:var(--on-brand); opacity:.85; }
  /* sticky tab bar (B5) — .stag is a spec annotation, not UI */
  .pltabs.stick { background:var(--nav-bg); backdrop-filter:blur(14px); }
  /* AMENDMENT 2026-06-11 (d): brand-tint count badges on Feed/Issues tabs, rendered only when count >0;
     (e) animated tab ink underline is BUILD-ONLY — the static .pltab.on::after bar stands in here */
  .pltab .tdot { display:inline-block; min-width:15px; text-align:center; font-size:9.5px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:7px; padding:1px 5px; margin-left:5px; vertical-align:1px; }
  .pltabs .stag { margin-left:auto; align-self:center; font-size:8.5px; font-weight:800; letter-spacing:.7px; color:var(--text-3); border:1px dashed var(--border); border-radius:7px; padding:2px 6px; margin-right:4px; }
  /* header-budget annotation (B5: ≈230px vs 510px) — spec note, not UI */
  .dietline { display:flex; align-items:center; gap:8px; padding:7px 16px 0; }
  .dietline::before, .dietline::after { content:''; flex:1; border-top:1.5px dashed var(--dash); }
  .dietline span { font-size:9px; font-weight:800; letter-spacing:.6px; color:var(--brand-ink); text-transform:uppercase; white-space:nowrap; }
  /* compact feed cards (C9 Feed-default daily view) */
  .pcard { margin:10px 16px 0; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--card-shadow); padding:11px 13px; }
  .pcard .phd { display:flex; align-items:center; gap:9px; }
  .pcard .pav { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12.5px; font-weight:800; }
  .pcard .pm { flex:1; min-width:0; }
  .pcard .pn { font-size:13px; font-weight:800; letter-spacing:-0.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pcard .pt { font-size:10.5px; color:var(--text-3); font-weight:600; margin-top:1px; }
  .pcard .px { font-size:12.5px; color:var(--text-2); line-height:1.5; margin-top:8px; }
  .pcard .px b { color:var(--text); font-weight:700; }
  .pcard .sevap { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; color:var(--gold); background:var(--chip); border:1px solid var(--border); border-radius:9px; padding:3px 7px; margin-top:8px; }
  .pcard .pacts { display:flex; gap:16px; margin-top:9px; color:var(--text-3); font-size:11px; font-weight:700; }
  .pcard .pacts span { display:inline-flex; align-items:center; gap:5px; }
  .pcard .pacts svg { width:13px; height:13px; }
  /* Overview-tab identity blocks (B6) — filled hero w/ "Edit photo" (level-aware), breadcrumb, AC/PC chips (C11), stats, completeness */
  .hero2 { margin:10px 16px 0; height:116px; border-radius:16px; position:relative; overflow:hidden; box-shadow:var(--card-shadow); background:linear-gradient(180deg,#8fc3e0 0%,#bcd9e8 36%,#86b06a 37%,#42703c 100%); }
  .hero2::after { content:''; position:absolute; inset:0; background:radial-gradient(360px 130px at 78% 8%, rgba(255,244,200,.5), transparent 62%); }
  .hero2 .hedit { position:absolute; right:9px; bottom:9px; z-index:2; display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; color:#fff; background:rgba(8,14,12,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.28); border-radius:11px; padding:5px 9px; }
  .hero2 .hedit svg { width:11px; height:11px; }
  .crumb { padding:11px 18px 0; font-size:12px; font-weight:600; color:var(--text-2); }
  .crumb b { color:var(--text); font-weight:800; }
  .crumb i { font-style:normal; color:var(--text-3); padding:0 3px; }
  .ccrow { display:flex; gap:6px; padding:8px 16px 0; flex-wrap:wrap; }
  .ccrow .cc { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:4px 9px; }
  .ccrow .cc small { font-size:8.5px; font-weight:800; letter-spacing:.5px; color:var(--text-3); text-transform:uppercase; }
  .statsline { display:flex; align-items:center; gap:13px; padding:10px 18px 0; font-size:11.5px; font-weight:600; color:var(--text-2); flex-wrap:wrap; }
  .statsline span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
  .statsline svg { width:13px; height:13px; color:var(--brand-ink); flex-shrink:0; }
  .plbuild .bh .fin { margin-left:auto; font-size:11px; font-weight:800; color:var(--brand-ink); flex-shrink:0; }
  /* the ONE banner slot, 3 states, neutral-info tone (C10) — the orange alarm is dead as a resting state */
  .bann { margin:10px 16px 0; display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); }
  .bann .bico { width:28px; height:28px; border-radius:9px; background:var(--chip); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .bann .bico svg { width:14px; height:14px; color:var(--text-2); }
  .bann .bt { flex:1; min-width:0; font-size:12px; font-weight:600; color:var(--text-2); line-height:1.35; }
  .bann .bt b { color:var(--text); font-weight:700; }
  .bann .bcta { flex-shrink:0; font-size:11.5px; font-weight:800; color:var(--brand-ink); white-space:nowrap; }
  .bann.share { background:var(--brand-tint); border-color:var(--brand-line); }
  .bann.share .bico { background:var(--brand); border-color:transparent; }
  .bann.share .bico svg { color:var(--on-brand); }
  .bann.none { border-style:dashed; border-color:var(--dash); background:transparent; justify-content:center; }
  .bann.none .bt { flex:none; color:var(--text-3); text-align:center; font-size:11px; }
  .speclbl { padding:16px 18px 0; font-size:9.5px; font-weight:800; letter-spacing:.8px; color:var(--brand-ink); text-transform:uppercase; }
  .specnote { padding:7px 18px 0; font-size:10.5px; font-weight:600; color:var(--text-3); line-height:1.5; }
  .specnote b { color:var(--text-2); }

  /* ===================================================================== */
  /* S4 — OVERVIEW TAB CONTENT (S4-decision-sheet.md). Identity blocks =   */
  /* the tab's FIRST blocks (A1); ONE conditional reorder at 60% (A2);     */
  /* builder surfaces consolidated into ONE card (A3). Directory trust     */
  /* anatomy: checkmark ONLY on claimed (B6), no party on administrative   */
  /* roles (B7), call only when a phone exists (B8), elected/appointed     */
  /* split (B9), inline attribution (B10). .pgrid/.aboutcard/.scard are    */
  /* the premium legacy-hub patterns ported into the v2 vocabulary.        */
  /* ===================================================================== */
  /* role-line context chips — B12 renames: Vidhansabha / Lok Sabha / Thana / Circle */
  .lvchip { font-size:9px; font-weight:700; color:var(--text-3); border:1px solid var(--border); border-radius:6px; padding:1.5px 6px; flex-shrink:0; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
  /* three-tier trust anatomy (B6): dataOnly = NOTHING · linked = subtle link mark · claimed+verifiedCivic = verified badge */
  .off .oname .verif { color:var(--brand); display:flex; flex-shrink:0; }
  .off .oname .verif svg { width:14px;height:14px; }
  .off .oname .lnk { color:var(--text-3); display:flex; flex-shrink:0; }
  .off .oname .lnk svg { width:12px;height:12px; }
  /* party chip — ELECTED seats only; a render-level guard keeps it OFF administrative roles (B7) */
  .off .oname .pty { font-size:9px; font-weight:800; padding:2px 6px; border-radius:6px; flex-shrink:0; letter-spacing:.2px; }
  /* inline attribution (B10) — subtle + social; mini avatar; system-seeded rows say "from election records" */
  .off .osub .av2 { width:13px;height:13px;border-radius:50%; flex-shrink:0; }
  /* ⋯ report-wrong affordance — overflow/long-press on the row, never an inline flag icon (B11) */
  .off .omore { width:30px;height:30px;border-radius:50%; background:var(--chip); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; flex-shrink:0; color:var(--text-2); }
  .off .omore svg { width:15px;height:15px; }
  /* term-ended degrade — fade, don't delete (B9) */
  .off.term .oav, .off.term .oname, .off.term .orole { opacity:.55; }
  .off .tnote { display:inline-flex; align-items:center; gap:4px; color:var(--warn); font-weight:700; }
  /* gradient initials inside the .off avatar slot (v2 uses no external imagery) */
  .off .oav.gi { display:flex; align-items:center; justify-content:center; color:#fff; font-size:13.5px; font-weight:800; border:2px solid var(--brand-line); }
  /* compact "Active residents" rows (B19) */
  .off.sm { padding:9px 13px; gap:10px; }
  .off.sm .oav { width:34px;height:34px; }
  .off.sm .oav.gi { font-size:12px; }
  .off.sm .oname { font-size:13.5px; margin-top:0; }
  /* THE BUILDER CARD (A3) — bar + top-3 chips + see-all + low-weight steward row, ONE surface */
  .bcard { margin:10px 16px 0; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--card-shadow); padding:13px 14px; }
  .bcard .bh2 { font-size:13px; font-weight:800; display:flex; align-items:center; gap:7px; }
  .bcard .bh2 svg { width:14px;height:14px;color:var(--brand); flex-shrink:0; }
  .bcard .bh2 .pct { margin-left:auto; font-size:11.5px; font-weight:800; color:var(--brand-ink); flex-shrink:0; }
  .bcard .track { height:6px; border-radius:5px; background:var(--chip); margin-top:9px; overflow:hidden; }
  .bcard .fill { height:100%; border-radius:5px; background:linear-gradient(90deg, var(--brand), #38e89a); }
  .bcard .plchips { padding:11px 0 0; }
  .bcard .ball { display:inline-flex; align-items:center; gap:4px; margin-top:10px; font-size:11.5px; font-weight:800; color:var(--brand-ink); }
  .bcard .bstew { display:flex; align-items:center; gap:8px; margin-top:11px; padding-top:11px; border-top:1px solid var(--border); font-size:11px; font-weight:600; color:var(--text-3); }
  .bcard .bstew svg { width:13px;height:13px; flex-shrink:0; }
  .bcard .bstew .bgo { margin-left:auto; flex-shrink:0; display:flex; }
  /* 100% celebration — ONE line where the builder card was, then gone (A3) */
  .celeb { margin:10px 16px 0; display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:13px; background:var(--brand-tint); border:1px solid var(--brand-line); font-size:11.5px; font-weight:600; color:var(--brand-ink); line-height:1.35; }
  .celeb svg { width:15px;height:15px; flex-shrink:0; }
  .celeb b { font-weight:800; }
  /* local places hybrid (B15): ≥4 POIs = dense 2-col grid w/ counts (never a 0-count card) */
  .pgrid { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:10px 16px 0; }
  .pgcard { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 12px; box-shadow:var(--card-shadow); min-width:0; }
  .pgcard .pgi { width:34px;height:34px;border-radius:10px; background:var(--brand-tint); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .pgcard .pgi svg { width:17px;height:17px;color:var(--brand-ink); }
  .pgcard .pgm { min-width:0; line-height:1.2; }
  .pgcard .pgn { font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pgcard .pgc { font-size:11px; color:var(--text-3); font-weight:600; margin-top:1px; }
  /* ≤3 POIs = flat chips; ONE inline add per section; .pin = located POI glyph → detail sheet/maps (B16) */
  .pchips { display:flex; flex-wrap:wrap; gap:7px; padding:9px 16px 0; }
  .pchipx { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:7px 11px; box-shadow:var(--card-shadow); }
  .pchipx svg { width:13px;height:13px;color:var(--brand-ink); flex-shrink:0; }
  .pchipx.add { color:var(--brand-ink); border-style:dashed; border-color:var(--dash); background:var(--brand-tint); box-shadow:none; font-weight:700; }
  .pchipx .pts { color:var(--gold); font-size:10px; font-weight:800; }
  .pchipx .pin { color:var(--brand); display:flex; }
  .pchipx .pin svg { color:var(--brand); }
  /* About + Did-you-know folded into ONE card surface (B17) */
  .aboutcard { margin:10px 16px 0; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px 15px; box-shadow:var(--card-shadow); }
  .aboutcard .at { font-size:13px; line-height:1.55; color:var(--text); }
  .aboutcard .dyk { margin-top:11px; padding-top:11px; border-top:1px solid var(--border); display:flex; gap:9px; }
  .aboutcard .dyk svg { width:15px;height:15px;color:var(--gold); flex-shrink:0; margin-top:1px; }
  .aboutcard .dyk .dt { font-size:12px; color:var(--text-2); line-height:1.45; }
  .aboutcard .dyk .dt b { color:var(--gold); font-weight:800; }
  /* "This page is maintained by" steward cards (B18) — Lead crown + Seva score, tappable → profile */
  .stews { display:flex; gap:9px; padding:10px 16px 0; }
  .scard { flex:1; min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:15px; padding:13px 8px 12px; text-align:center; box-shadow:var(--card-shadow); position:relative; }
  .scard .crown { position:absolute; top:7px; right:8px; color:var(--gold); display:flex; }
  .scard .crown svg { width:13px;height:13px; }
  .scard .sav { width:44px;height:44px;border-radius:50%; margin:0 auto 7px; display:flex;align-items:center;justify-content:center; color:#fff; font-size:15px; font-weight:800; }
  .scard .nm2 { font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .scard .rl2 { font-size:10px; color:var(--brand-ink); font-weight:800; margin-top:2px; }
  .scard .kp2 { font-size:10px; color:var(--text-3); font-weight:600; margin-top:3px; }
  /* POI detail sheet (B16): name · big CALL (locked Call·WhatsApp·Copy on tap, B8) · note · distance · open-in-maps · report-wrong */
  .poish { position:absolute; left:0; right:0; bottom:0; z-index:5; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:22px 22px 0 0; box-shadow:0 -14px 44px rgba(0,0,0,0.35); padding:9px 20px 18px; }
  .poish .ph2 { display:flex; align-items:center; gap:11px; }
  .poish .pi2 { width:42px;height:42px;border-radius:12px; background:var(--brand-tint); border:1px solid var(--brand-line); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .poish .pi2 svg { width:20px;height:20px;color:var(--brand-ink); }
  .poish .pn2 { font-size:17px; font-weight:800; letter-spacing:-0.3px; }
  .poish .pc2 { font-size:11px; color:var(--text-3); font-weight:600; margin-top:2px; }
  .poicall { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border-radius:24px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:15px; font-weight:800; margin-top:13px; }
  .poicall svg { width:16px;height:16px; flex-shrink:0; }
  .poish .pnote { font-size:12.5px; color:var(--text-2); line-height:1.5; margin-top:11px; }
  .poish .pdist { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--brand-ink); margin-top:9px; }
  .poish .pdist svg { width:13px;height:13px; flex-shrink:0; }
  .poish .pmap { display:flex; align-items:center; gap:10px; margin-top:11px; padding:12px 13px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); font-size:13px; font-weight:700; }
  .poish .pmap svg { width:16px;height:16px;color:var(--brand-ink); flex-shrink:0; }
  .poish .pmap .mchev { margin-left:auto; color:var(--text-3); display:flex; }
  .poish .pmap .mchev svg { width:14px;height:14px;color:var(--text-3); }
  .poish .preport { width:100%; padding:11px 0 2px; background:transparent; border:none; font-family:inherit; font-size:12px; font-weight:700; color:var(--text-3); margin-top:4px; }

  /* ===================================================================== */
  /* S4 EXTENSIONS — shell state, grouped multi-role row, honesty line     */
  /* ===================================================================== */
  /* Aggregate honesty — sits BELOW the offgrp, clearly metadata not a row */
  .honesty-line { display:flex; align-items:center; gap:6px; margin:6px 16px 0; padding:7px 10px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); font-size:11px; font-weight:600; color:var(--text-3); }
  .honesty-line svg { width:12px;height:12px;color:var(--text-3); flex-shrink:0; }
  /* Grouped multi-instance role row (ward members, etc.) — one row represents N slots */
  .grp-row { display:flex; align-items:center; gap:12px; padding:11px 13px; border-bottom:1px solid var(--border); background:var(--surface-2); }
  .grp-row:last-child { border-bottom:none; }
  .grp-row .gri { width:42px;height:42px;border-radius:50%; background:var(--chip); border:1.5px dashed var(--dash); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .grp-row .gri svg { width:16px;height:16px;color:var(--text-3); }
  .grp-row .gm { flex:1; min-width:0; }
  .grp-row .grole { font-size:11px; color:var(--text-3); font-weight:600; }
  .grp-row .gname { font-size:13px; font-weight:700; letter-spacing:-0.1px; margin-top:2px; color:var(--text-2); }
  .grp-row .gsub { font-size:11px; color:var(--brand-ink); font-weight:700; margin-top:2px; }
  /* Shell state first-builder encouragement (0% — you're among the first) */
  .first-note { margin:10px 16px 0; display:flex; align-items:flex-start; gap:9px; padding:11px 13px; border-radius:14px; background:linear-gradient(110deg, var(--brand-tint), rgba(17,217,121,0.03) 80%); border:1px solid var(--brand-line); }
  .first-note .fni { width:32px;height:32px;border-radius:10px; background:var(--brand); display:flex;align-items:center;justify-content:center; flex-shrink:0; margin-top:1px; }
  .first-note .fni svg { width:16px;height:16px;color:var(--on-brand); }
  .first-note .fnm { flex:1; min-width:0; }
  .first-note .fn1 { font-size:13px; font-weight:800; letter-spacing:-0.1px; color:var(--text); line-height:1.3; }
  .first-note .fn2 { font-size:11.5px; color:var(--text-2); margin-top:4px; line-height:1.45; }
  /* Shell Today cell — muted zero state for feed/issues */
  .today .tcell.zero .tnum { color:var(--text-3); }
  .today .tcell.zero .tlbl { color:var(--text-3); opacity:.7; }

  /* ===================================================================== */
  /* S5 — CONTRIBUTION FLOWS (S5-decision-sheet.md, ✅ rulings only).      */
  /* Sheets ride the s2-body/scrim stack; .s5-sheet = contribution sheet. */
  /* Red asterisk = error TOKEN (.s5-req, per-theme), never literal red.  */
  /* Map picker (S5·D) is LIBRARY-AGNOSTIC per C16 — neutral theme-token  */
  /* tiles, zero provider chrome; the design binds whichever library      */
  /* ships. Points render as Seva (DECISIONS #10) — "karma" never in UI.  */
  /* ===================================================================== */
  .s5-sheet { position:absolute; left:0; right:0; bottom:0; z-index:5; background:var(--surface); border:1px solid var(--border); border-bottom:none; border-radius:22px 22px 0 0; box-shadow:0 -14px 44px rgba(0,0,0,0.35); padding:9px 18px 16px; }
  .s5-ttl { display:flex; align-items:center; gap:8px; font-size:18px; font-weight:800; letter-spacing:-0.3px; }
  .s5-ttl.dev { font-weight:700; letter-spacing:0; font-size:17px; } /* Devanagari metrics */
  .s5-ttl .x { margin-left:auto; width:30px;height:30px;border-radius:50%; background:var(--chip); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .s5-ttl .x svg { width:14px;height:14px;color:var(--text-2); }
  .s5-req { color:#FF6E72; font-weight:800; }
  body.light .s5-req { color:#C62A2A; }
  /* area chip as a GIFT (B11) — brand tint + check, NO lock icon */
  .s5-gift { display:flex; align-items:center; gap:9px; margin-top:11px; padding:9px 11px; border-radius:13px; background:var(--brand-tint); border:1px solid var(--brand-line); }
  .s5-gift .gi { width:30px;height:30px;border-radius:9px; background:var(--brand); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .s5-gift .gi svg { width:15px;height:15px;color:var(--on-brand); }
  .s5-gift .gm { min-width:0; }
  .s5-gift .gv { font-size:13px; font-weight:800; }
  .s5-gift .gl { font-size:10.5px; font-weight:700; color:var(--brand-ink); margin-top:1px; }
  /* fields */
  .s5-f { margin-top:10px; }
  .s5-f .fl { font-size:11.5px; font-weight:700; color:var(--text-2); display:flex; align-items:center; gap:3px; }
  .s5-f .fl small { font-weight:600; color:var(--text-3); margin-left:4px; font-size:10.5px; }
  .s5-f .fin { display:flex; align-items:center; gap:9px; margin-top:5px; padding:11px 12px; border-radius:13px; background:var(--surface-2); border:1px solid var(--border); font-size:13.5px; font-weight:600; }
  .s5-f .fin.focus { background:var(--surface); border-color:var(--brand-line); }
  .s5-f .fin svg { width:15px;height:15px;color:var(--text-3); flex-shrink:0; }
  .s5-f .fin .ph2 { color:var(--text-3); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .s5-f .fin .cur { width:1.5px; height:15px; background:var(--brand); flex-shrink:0; }
  .s5-f .fin .pdot { width:10px;height:10px;border-radius:50%; flex-shrink:0; }
  .s5-f .fin .chev { margin-left:auto; display:flex; flex-shrink:0; }
  .s5-f .fin .chev svg { color:var(--text-2); }
  .s5-fnote { display:flex; align-items:flex-start; gap:5px; font-size:10.5px; font-weight:700; color:var(--warn); margin-top:5px; line-height:1.4; }
  .s5-fnote svg { width:12px;height:12px; flex-shrink:0; margin-top:1px; }
  .s5-fnote.calm { color:var(--brand-ink); }
  .s5-fnote.plain { color:var(--text-3); font-weight:600; }
  .s5-row2 { display:flex; gap:9px; }
  .s5-row2 .s5-f { flex:1; min-width:0; }
  /* attribution preview line (A9/D20) — opt-out lives AT the moment of fear */
  .s5-attr { display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--text-2); margin-top:10px; }
  .s5-attr svg { width:13px;height:13px;color:var(--text-3); flex-shrink:0; }
  .s5-attr b { color:var(--text); font-weight:800; }
  .s5-attr .chg { color:var(--brand-ink); font-weight:800; }
  /* "Add more details" expander (B10 progressive disclosure) */
  .s5-exp { display:flex; align-items:center; gap:8px; width:100%; margin-top:10px; padding:10px 12px; border-radius:13px; background:transparent; border:1.4px dashed var(--dash); color:var(--brand-ink); font-family:inherit; font-size:12.5px; font-weight:800; text-align:left; }
  .s5-exp svg { width:14px;height:14px; flex-shrink:0; }
  .s5-exp small { margin-left:auto; font-size:10.5px; font-weight:600; color:var(--text-3); }
  /* trust note (B13) — destination-framed, fear-free */
  .s5-trust { display:flex; gap:8px; margin-top:11px; padding:10px 11px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); font-size:10.8px; font-weight:600; color:var(--text-2); line-height:1.45; }
  .s5-trust svg { width:14px;height:14px;color:var(--brand-ink); flex-shrink:0; margin-top:1px; }
  .s5-trust b { color:var(--text); font-weight:700; }
  /* submit — live Seva badge on the CTA (C17 / DECISIONS #10) */
  .s5-pub { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:12px; padding:12px; border-radius:22px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:14.5px; font-weight:800; }
  .s5-pub .sv { font-size:11px; font-weight:800; background:rgba(0,0,0,0.16); border-radius:10px; padding:2.5px 8px; }
  body.light .s5-pub .sv { background:rgba(255,255,255,0.22); }
  /* 3-tier location stack (C15): GPS primary → landmark text → map ghost */
  .s5-gps { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:6px; padding:13px; border-radius:14px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:14px; font-weight:800; }
  .s5-gps svg { width:16px;height:16px; }
  .s5-saved { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:11.5px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:12px; padding:5px 10px; }
  .s5-saved svg { width:12px;height:12px; }
  .s5-ghost { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:9px; padding:11px; border-radius:14px; background:transparent; border:1px solid var(--border); color:var(--text-2); font-family:inherit; font-size:12.5px; font-weight:700; }
  .s5-ghost svg { width:14px;height:14px;color:var(--brand-ink); }
  .s5-or { display:flex; align-items:center; gap:8px; margin-top:9px; color:var(--text-3); font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; }
  .s5-or::before, .s5-or::after { content:''; flex:1; border-top:1px solid var(--border); }
  /* live Seva ladder (C17): +5 name-only / +7 landmark / +10 pin */
  .s5-lvl { display:flex; gap:7px; margin-top:10px; }
  .s5-lvl .lv { flex:1; text-align:center; padding:7px 4px 6px; border-radius:11px; border:1px solid var(--border); background:var(--surface-2); }
  .s5-lvl .lv b { display:block; color:var(--gold); font-size:11.5px; font-weight:800; }
  .s5-lvl .lv span { display:block; font-size:9.5px; color:var(--text-3); font-weight:700; margin-top:2px; }
  .s5-lvl .lv.on { border-color:var(--brand-line); background:var(--brand-tint); }
  .s5-lvl .lv.on span { color:var(--brand-ink); }
  /* S5·D — FULL-SCREEN map picker (C15; C16 library-agnostic theme-token tiles) */
  .s5map { flex:1; min-height:0; display:flex; flex-direction:column; }
  .s5map .mhead { display:flex; align-items:center; gap:10px; padding:8px 16px 10px; }
  .s5map .mhead .hm { flex:1; min-width:0; }
  .s5map .mhead h2 { font-size:17px; font-weight:800; letter-spacing:-0.3px; }
  .s5map .mhead .hs { font-size:10.5px; color:var(--text-2); font-weight:600; margin-top:2px; }
  .s5map .mhead .x { width:30px;height:30px;border-radius:50%; background:var(--chip); border:1px solid var(--border); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .s5map .mhead .x svg { width:14px;height:14px;color:var(--text-2); }
  .s5map .marea { flex:1; min-height:0; position:relative; background:var(--surface-2); border-top:1px solid var(--border); overflow:hidden; }
  .s5map .tiles { position:absolute; inset:0; background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size:72px 72px; opacity:.55; }
  .s5map .blk { position:absolute; border-radius:9px; background:var(--chip); border:1px solid var(--border); }
  .s5map .blk.grn { background:var(--brand-tint); border-color:var(--brand-line); opacity:.7; }
  .s5map .rd { position:absolute; background:var(--border); }
  .s5map .hairx { position:absolute; left:0; right:0; top:50%; height:1px; background:var(--dash); opacity:.6; }
  .s5map .hairy { position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--dash); opacity:.6; }
  .s5map .ring { position:absolute; left:50%; top:50%; width:44px; height:44px; border:1.6px dashed var(--dash); border-radius:50%; transform:translate(-50%,-50%); }
  .s5map .cpin { position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); color:var(--brand); filter:drop-shadow(0 4px 8px rgba(0,0,0,0.35)); }
  .s5map .cpin svg { width:38px;height:38px; display:block; }
  .s5map .mhint { position:absolute; top:12px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:10.5px; font-weight:700; color:var(--text-2); background:var(--nav-bg); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:12px; padding:6px 11px; }
  .s5map .cbar { padding:12px 16px 10px; background:var(--nav-bg); backdrop-filter:blur(14px); border-top:1px solid var(--border); }
  .s5map .cbtn { width:100%; padding:13px; border-radius:22px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:14.5px; font-weight:800; }
  .s5map .clink { display:block; width:100%; margin-top:7px; padding:6px; background:transparent; border:none; font-family:inherit; font-size:12px; font-weight:700; color:var(--brand-ink); }
  /* S5·E — publish-moment spec components (D19) */
  .s5toast { margin:8px 16px 0; display:flex; align-items:center; gap:9px; padding:11px 12px; border-radius:14px; background:var(--surface); border:1px solid var(--brand-line); box-shadow:var(--card-shadow); }
  .s5toast .ti { width:28px;height:28px;border-radius:50%; background:var(--brand); display:flex;align-items:center;justify-content:center; flex-shrink:0; }
  .s5toast .ti svg { width:14px;height:14px;color:var(--on-brand); }
  .s5toast .tt { flex:1; min-width:0; font-size:11.5px; font-weight:700; line-height:1.4; }
  .s5toast .tt b { color:var(--brand-ink); }
  .s5toast .tgo { flex-shrink:0; font-size:10.5px; font-weight:800; color:var(--brand-ink); white-space:nowrap; }
  .s5toast.pend { border-color:var(--border); }
  .s5toast.pend .ti { background:var(--chip); border:1px solid var(--border); }
  .s5toast.pend .ti svg { color:var(--brand-ink); }
  .s5dlg { margin:8px 30px 0; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--card-shadow); padding:16px 15px 13px; text-align:center; }
  .s5dlg .dico { width:46px;height:46px;border-radius:50%; background:var(--brand-tint); border:1px solid var(--brand-line); display:flex;align-items:center;justify-content:center; margin:0 auto 9px; }
  .s5dlg .dico svg { width:22px;height:22px;color:var(--gold); }
  .s5dlg h5 { font-size:15px; font-weight:800; letter-spacing:-0.2px; }
  .s5dlg p { font-size:11.5px; color:var(--text-2); line-height:1.45; margin-top:5px; }
  .s5dlg p b { color:var(--text); font-weight:700; }
  .s5dlg .dcta { width:100%; margin-top:11px; padding:11px; border-radius:18px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:13px; font-weight:800; }
  .s5dlg .dlink { display:block; width:100%; margin-top:4px; padding:7px; background:transparent; border:none; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--text-2); }

  /* ===================================================================== */
  /* S6 — PLACE FEED + COMPOSER (S6-decision-sheet.md, ✅ rulings only).   */
  /* The post card is a 1:1 HTML redraw of the REAL UserPostWidget        */
  /* (refs/real-place-feed-post.png + real-profile-posts.png, DECISIONS   */
  /* #11): avatar + name + tick + @handle + kebab, "Place, State · time"  */
  /* line, content text, FULL-BLEED media, 6-icon action row, place-tag   */
  /* chip on media. Only the surrounding place chrome is new design:      */
  /* slim compose bar (B6), civic WRAPPER overlay (C9 — rendered AROUND   */
  /* the card, never inside it), composer destination/type/category/      */
  /* routing system (D11–D13, evolving the owner-APPROVED                 */
  /* place-composer.html), empty/quiet/2G states (E15–E18, F19).          */
  /* ===================================================================== */
  .s6-wrap { --wtint: rgba(255,138,61,0.13); --wline: rgba(255,138,61,0.34); }
  body.light .s6-wrap { --wtint: rgba(217,100,27,0.10); --wline: rgba(217,100,27,0.32); }
  /* slim compose bar (B6) — WhatsApp fake-input pattern: edit glyph, NO avatar */
  .s6-cb { display:flex; align-items:center; gap:10px; margin:9px 16px 0; padding:11px 14px; border-radius:24px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--card-shadow); flex-shrink:0; }
  .s6-cb svg { width:16px; height:16px; color:var(--brand-ink); flex-shrink:0; }
  .s6-cb .cph { flex:1; min-width:0; font-size:13.5px; font-weight:500; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* AMENDMENT 2026-06-11 (g): amber one-tap ISSUE shortcut at the bar's right end — opens the composer
     directly in Shikayat mode (rural "one big tap to complain"). Bar keeps: no avatar, edit glyph, persona placeholder. */
  .s6-cb .ciss { width:32px; height:32px; border-radius:10px; background:color-mix(in srgb, var(--warn) 14%, transparent); border:1px solid color-mix(in srgb, var(--warn) 34%, transparent); color:var(--warn); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .s6-cb .ciss svg { width:16px; height:16px; color:var(--warn); }
  /* "Residents post here" belonging signal (B7) — surfaced, never a gate */
  .s6-resline { display:flex; align-items:center; gap:5px; padding:5px 24px 0; font-size:10px; font-weight:700; color:var(--text-3); }
  .s6-resline svg { width:11px; height:11px; color:var(--brand-ink); flex-shrink:0; }
  /* THE post card — real UserPostWidget anatomy 1:1 (DECISIONS #11) */
  .s6-post { padding:11px 16px 9px; border-bottom:1px solid var(--border); }
  .s6-ph { display:flex; align-items:flex-start; gap:9px; }
  .s6-av { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13.5px; font-weight:800; }
  .s6-pmm { flex:1; min-width:0; }
  .s6-nr { display:flex; align-items:center; gap:5px; min-width:0; font-size:13.5px; font-weight:800; letter-spacing:-0.2px; }
  .s6-nr .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .s6-nr .vt { color:var(--brand); display:flex; flex-shrink:0; }
  .s6-nr .vt svg { width:13px; height:13px; }
  .s6-nr .hd { font-size:11px; font-weight:600; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .s6-loc { display:flex; align-items:center; gap:4px; margin-top:2.5px; font-size:11px; font-weight:600; color:var(--text-3); }
  .s6-loc svg { width:11px; height:11px; flex-shrink:0; }
  .s6-loc .rch { font-size:8.5px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:7px; padding:1px 6px; flex-shrink:0; }
  .s6-kb { margin-left:auto; color:var(--text-3); flex-shrink:0; display:flex; padding-top:2px; }
  .s6-kb svg { width:16px; height:16px; }
  .s6-tx { font-size:13.5px; line-height:1.5; color:var(--text); margin-top:7px; }
  .s6-media { margin:9px -16px 0; position:relative; overflow:hidden; }
  .s6-media .ptag { position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; color:#fff; background:rgba(8,14,12,0.6); backdrop-filter:blur(6px); border-radius:11px; padding:4px 9px; }
  .s6-media .ptag svg { width:10px; height:10px; flex-shrink:0; }
  .s6-acts { display:flex; align-items:center; justify-content:space-between; margin-top:9px; padding:0 4px; color:var(--text-3); }
  .s6-acts span { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; }
  .s6-acts svg { width:16px; height:16px; }
  /* compact text-only variant for state frames — same anatomy, tighter metrics */
  .s6-post.sm { padding:9px 16px 8px; }
  .s6-post.sm .s6-av { width:32px; height:32px; font-size:12px; }
  .s6-post.sm .s6-tx { font-size:12.5px; margin-top:5px; }
  .s6-post.sm .s6-acts { margin-top:7px; }
  .s6-post.sm .s6-acts svg { width:14px; height:14px; }
  /* civic overlay = WRAPPER around the UNTOUCHED card (C9): colour bar (amber open / green resolved) + status strip */
  .s6-civic { border-left:3px solid var(--warn); }
  .s6-civic.res { border-left-color:var(--brand); }
  .s6-cstrip { display:flex; align-items:center; gap:7px; margin-bottom:8px; min-width:0; }
  .s6-cstat { font-size:9px; font-weight:800; letter-spacing:.4px; color:var(--warn); background:var(--wtint); border:1px solid var(--wline); border-radius:8px; padding:2.5px 8px; flex-shrink:0; text-transform:uppercase; }
  .s6-cstat.res { color:var(--brand-ink); background:var(--brand-tint); border-color:var(--brand-line); }
  .s6-crt { font-size:10.5px; font-weight:600; color:var(--text-2); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .s6-csup { margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:800; color:var(--warn); flex-shrink:0; }
  .s6-csup svg { width:12px; height:12px; }
  /* ---- composer chrome — evolves the owner-APPROVED place-composer.html ---- */
  .s6-comp { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
  .s6-comp .s6-ta { flex:1; min-height:0; }
  .s6-cbar { display:flex; align-items:center; justify-content:space-between; padding:6px 16px 8px; border-bottom:1px solid var(--border); flex-shrink:0; }
  .s6-cbar .ic { width:34px; height:34px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
  .s6-cbar .ic svg { width:16px; height:16px; color:var(--text-2); }
  .s6-cbar .ttl { font-size:16px; font-weight:800; letter-spacing:-0.2px; }
  .s6-cbar .go { background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:14px; font-weight:800; padding:9px 20px; border-radius:22px; }
  .s6-cbar .go.dim { background:var(--chip); color:var(--text-3); }
  .s6-cbar .go.warnb { background:var(--warn); color:#fff; }
  /* destination chip (D11): Post mode = PLACE BRAND GREEN, Shikayat mode ONLY = amber; non-editable, no caret */
  .s6-dest { padding:10px 16px 0; }
  .s6-dest .chipx { display:inline-flex; align-items:center; gap:7px; background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:22px; padding:7px 13px; font-size:13px; font-weight:800; color:var(--brand-ink); }
  .s6-dest .chipx svg { width:13px; height:13px; flex-shrink:0; }
  .s6-dest .chipx .lb { font-size:11.5px; font-weight:600; color:var(--text-3); }
  .s6-dest.amber .chipx { background:var(--wtint); border-color:var(--wline); color:var(--warn); }
  /* [Post | Shikayat] selector (B8) — Shikayat = slightly LARGER tap target (mis-mode guard on budget phones) */
  .s6-typerow { display:flex; align-items:center; gap:6px; padding:10px 16px 0; }
  .s6-tsel { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:22px; font-size:13px; font-weight:700; border:1px solid var(--border); background:var(--chip); color:var(--text-3); }
  .s6-tsel svg { width:14px; height:14px; flex-shrink:0; }
  .s6-tsel.shk { padding:11px 19px; font-size:13.5px; }
  .s6-tsel.on { background:var(--brand-tint); border-color:var(--brand-line); color:var(--brand-ink); }
  .s6-tsel.shk.on { background:var(--wtint); border-color:var(--wline); color:var(--warn); }
  .s6-author { display:flex; align-items:center; gap:10px; padding:11px 18px 0; }
  .s6-author .aav { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800; }
  .s6-author .an { font-size:13.5px; font-weight:700; }
  .s6-author .as { font-size:11px; color:var(--text-3); font-weight:600; margin-top:1px; }
  .s6-ta { padding:12px 18px 6px; }
  .s6-ta .tph { font-size:16px; color:var(--text-3); line-height:1.5; }
  .s6-cur { display:inline-block; width:2px; height:16px; background:var(--brand); border-radius:1px; margin-left:1px; vertical-align:text-bottom; }
  .s6-mchips { display:flex; gap:22px; align-items:center; padding:10px 20px 8px; border-top:1px solid var(--border); flex-shrink:0; }
  .s6-mchips .mi { display:flex; flex-direction:column; align-items:center; gap:3px; }
  .s6-mchips .mi svg { width:21px; height:21px; color:var(--text-3); }
  .s6-mchips .mi span { font-size:9.5px; font-weight:600; color:var(--text-3); white-space:nowrap; }
  .s6-mchips .mi.dis { opacity:.35; }
  .s6-achips { display:flex; gap:7px; padding:7px 16px 12px; border-top:1px solid var(--border); overflow:hidden; flex-shrink:0; }
  .s6-achip { display:inline-flex; align-items:center; gap:5px; padding:7px 11px; border-radius:22px; font-size:12px; font-weight:600; color:var(--text-3); background:var(--chip); border:1px solid transparent; white-space:nowrap; flex-shrink:0; }
  .s6-achip svg { width:13px; height:13px; flex-shrink:0; }
  .s6-achip.on { background:var(--brand-tint); border-color:var(--brand-line); color:var(--brand-ink); }
  /* Shikayat extras: 10 icon+label category chips (D13 "Yojana") + title field + routing preview */
  .s6-cat { padding:11px 16px 0; }
  .s6-cat .cl { font-size:10.5px; font-weight:800; letter-spacing:.5px; color:var(--text-3); text-transform:uppercase; margin-bottom:7px; }
  .s6-catw { display:flex; flex-wrap:wrap; gap:6px; }
  .s6-catc { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:22px; font-size:11.5px; font-weight:700; background:var(--chip); border:1px solid var(--border); color:var(--text-2); white-space:nowrap; }
  .s6-catc svg { width:12px; height:12px; flex-shrink:0; color:var(--text-3); }
  .s6-catc.on { background:var(--wtint); border-color:var(--wline); color:var(--warn); }
  .s6-catc.on svg { color:var(--warn); }
  .s6-titf { margin:9px 16px 0; background:var(--surface); border:1px solid var(--wline); border-radius:14px; padding:10px 13px; }
  .s6-titf .tl { font-size:10.5px; font-weight:800; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; }
  /* Multi-line description area — text starts top-left and the box grows; NOT a
     vertically-centred single line (owner feedback 2026-06-14). */
  .s6-titf .tv { font-size:14px; font-weight:600; margin-top:6px; min-height:62px; line-height:1.45; }
  /* routing preview — ALWAYS visible in Shikayat mode (D12); .empty = pre-category state, never hidden */
  .s6-route { margin:9px 16px 0; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 13px; box-shadow:var(--card-shadow); }
  .s6-route .ric { width:34px; height:34px; border-radius:10px; background:var(--brand-tint); border:1px solid var(--brand-line); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .s6-route .ric svg { width:16px; height:16px; color:var(--brand-ink); }
  .s6-route .rm { flex:1; min-width:0; }
  .s6-route .rl { font-size:9.5px; font-weight:800; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; }
  .s6-route .rv { font-size:13px; font-weight:800; margin-top:2px; line-height:1.3; }
  .s6-route .rs { font-size:10.5px; font-weight:600; color:var(--text-3); margin-top:2px; }
  .s6-route.empty { border-style:dashed; border-color:var(--dash); box-shadow:none; background:transparent; }
  .s6-route.empty .ric { background:var(--chip); border-color:var(--border); }
  .s6-route.empty .ric svg { color:var(--text-3); }
  .s6-route.empty .rv { color:var(--text-2); font-weight:700; }
  /* ---- empty / quiet states (E15–E17) ---- */
  .s6-sil { margin:9px 16px 0; padding:11px 14px 7px; border-radius:16px; background:var(--brand-tint); border:1px solid var(--brand-line); text-align:center; color:var(--brand-ink); }
  .s6-sil svg { width:172px; height:54px; opacity:.85; }
  .s6-uc { display:flex; align-items:center; gap:11px; margin:8px 16px 0; padding:8px 11px; border-radius:14px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--card-shadow); }
  .s6-uc .ui { width:30px; height:30px; border-radius:9px; background:var(--chip); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .s6-uc .ui svg { width:15px; height:15px; color:var(--brand-ink); }
  .s6-uc .ut { flex:1; min-width:0; font-size:11.5px; font-weight:600; color:var(--text-2); line-height:1.4; }
  .s6-uc .ut b { color:var(--text); font-weight:700; }
  .s6-nudge { display:flex; align-items:center; justify-content:center; gap:6px; margin:10px 16px 0; padding:9px 12px; border-radius:13px; background:var(--surface-2); border:1px solid var(--border); font-size:11px; font-weight:700; color:var(--text-2); }
  .s6-nudge svg { width:12px; height:12px; color:var(--brand-ink); flex-shrink:0; }
  .s6-nudge b { color:var(--brand-ink); }
  /* D15 share-card placeholder slot (E17 — card itself designed at the S14/S16 window) */
  .s6-d15 { margin:8px 16px 0; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; border:1.5px dashed var(--dash); background:var(--brand-tint); }
  .s6-d15 .di { width:30px; height:30px; border-radius:9px; background:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .s6-d15 .di svg { width:14px; height:14px; color:var(--on-brand); }
  .s6-d15 .dm { flex:1; min-width:0; font-size:11.5px; font-weight:700; color:var(--brand-ink); line-height:1.35; }
  .s6-d15 .dtag { flex-shrink:0; font-size:8.5px; font-weight:800; letter-spacing:.5px; color:var(--text-3); border:1px dashed var(--border); border-radius:7px; padding:2px 6px; text-transform:uppercase; }
  /* ---- 2G loading / error / end of feed (F19, E18) — shimmer reuses @keyframes sp-sk ---- */
  .s6-sk { background:linear-gradient(90deg, var(--chip) 25%, var(--surface-2) 50%, var(--chip) 75%); background-size:200% 100%; animation:sp-sk 1.2s linear infinite; border-radius:7px; }
  .s6-skav { width:38px; height:38px; border-radius:50%; flex-shrink:0; }
  .s6-skmedia { margin:9px -16px 0; height:96px; border-radius:0; }
  .s6-err { margin:10px 16px 0; padding:15px 14px; border-radius:16px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--card-shadow); text-align:center; }
  .s6-err .ei { width:38px; height:38px; border-radius:50%; background:var(--chip); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin:0 auto 8px; }
  .s6-err .ei svg { width:18px; height:18px; color:var(--text-2); }
  .s6-err .et { font-size:13px; font-weight:700; }
  .s6-err .es { font-size:11px; font-weight:600; color:var(--text-3); margin-top:3px; }
  .s6-retry { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:46px; margin-top:11px; padding:12px; border-radius:23px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:14px; font-weight:800; }
  .s6-retry svg { width:15px; height:15px; flex-shrink:0; }
  .s6-end { height:30px; display:flex; align-items:center; justify-content:center; }
  .s6-end i { width:34px; height:3.5px; border-radius:3px; background:var(--border); }

  /* ===================================================================== */
  /* S7 — ISSUES TAB + CLOSURE LOOP (S7-decision-sheet.md, ✅ rulings).     */
  /* An issue card = the REAL post card (refs/real-place-feed-post.png +  */
  /* real-profile-posts.png) PLUS a civic overlay — never a different     */
  /* card (DECISIONS #11). Views hidden on issue cards; like-label =      */
  /* SAMARTHAN with raised hand, count+word together (D15/D16). Status    */
  /* colours = theme-safe --s7-* var pairs, 4 distinct states (C14).      */
  /* ===================================================================== */
  body { --s7-amber:#E8A93C; --s7-amber-t:rgba(232,169,60,.15); --s7-amber-l:rgba(232,169,60,.45); --s7-red:#FF7A59; --s7-red-t:rgba(255,122,89,.14); --s7-red-l:rgba(255,122,89,.45); --s7-rej:#FF6E72; --s7-rej-t:rgba(255,110,114,.12); --s7-rej-l:rgba(255,110,114,.45); }
  body.light { --s7-amber:#9A6A00; --s7-amber-t:rgba(154,106,0,.10); --s7-amber-l:rgba(154,106,0,.40); --s7-red:#BF4A1E; --s7-red-t:rgba(191,74,30,.09); --s7-red-l:rgba(191,74,30,.40); --s7-rej:#C62A2A; --s7-rej-t:rgba(198,42,42,.08); --s7-rej-l:rgba(198,42,42,.40); }
  /* tab anatomy (E18): sort row + filter chips; report CTA = bullhorn (E21) */
  .s7sort { display:flex; gap:6px; padding:10px 16px 0; overflow:hidden; }
  .s7sort .so { flex-shrink:0; padding:6px 11px; border-radius:12px; background:var(--surface); border:1px solid var(--border); font-size:11px; font-weight:700; color:var(--text-2); white-space:nowrap; }
  .s7sort .so.on { background:var(--brand-tint); border-color:var(--brand-line); color:var(--brand-ink); font-weight:800; }
  .s7filt { display:flex; gap:6px; padding:7px 16px 0; overflow:hidden; }
  .s7filt .fc { flex-shrink:0; display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:11px; background:var(--chip); border:1px solid var(--border); font-size:10.5px; font-weight:700; color:var(--text-2); white-space:nowrap; }
  .s7filt .fc svg { width:10px; height:10px; }
  .s7cta { display:flex; align-items:center; justify-content:center; gap:8px; margin:10px 16px 0; padding:11px; border-radius:22px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:13.5px; font-weight:800; }
  .s7cta svg { width:16px; height:16px; }
  /* THE REAL POST CARD (DECISIONS #11): header → place·time → text → media → action row */
  .s7post { margin:10px 16px 0; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--card-shadow); padding:12px 13px; }
  .s7post .ph { display:flex; align-items:flex-start; gap:9px; }
  .s7post .pav { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800; }
  .s7post .pav.anon { background:var(--chip); border:1px solid var(--border); color:var(--text-2); }
  .s7post .pav.anon svg { width:17px; height:17px; }
  .s7post .pid { flex:1; min-width:0; }
  .s7post .pnm { display:flex; align-items:center; gap:5px; font-size:13.5px; font-weight:800; letter-spacing:-0.2px; min-width:0; }
  .s7post .pnm .vt { width:13px; height:13px; border-radius:50%; background:var(--brand); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
  .s7post .pnm .vt svg { width:8px; height:8px; color:var(--on-brand); }
  .s7post .pnm .hd { font-size:11px; font-weight:600; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .s7post .plc { display:flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; color:var(--text-3); margin-top:2px; }
  .s7post .plc svg { width:10px; height:10px; color:var(--brand-ink); flex-shrink:0; }
  .s7post .kb { flex-shrink:0; color:var(--text-3); padding-top:2px; }
  .s7post .kb svg { width:16px; height:16px; }
  .s7post .ptx { font-size:12.5px; color:var(--text); line-height:1.5; margin-top:9px; }
  .s7media { margin-top:9px; height:92px; border-radius:12px; display:flex; align-items:flex-end; padding:8px 9px; overflow:hidden; }
  .s7media span { font-size:9px; font-weight:800; color:#fff; background:rgba(8,14,12,.55); border-radius:7px; padding:2px 7px; }
  .s7acts { display:flex; align-items:center; gap:15px; margin-top:10px; color:var(--text-3); font-size:11px; font-weight:700; }
  .s7acts .a { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
  .s7acts .a svg { width:14px; height:14px; }
  .s7acts .sam { color:var(--brand-ink); font-weight:800; }
  .s7acts .mr { margin-left:auto; }
  /* civic OVERLAY on the same card (E19 3-dot track · C11 staleness · A1–A4 routed-to) */
  .s7ov { margin-top:10px; padding:9px 11px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); }
  .s7st { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .s7trk { display:inline-flex; align-items:center; flex-shrink:0; }
  .s7trk .d { width:8px; height:8px; border-radius:50%; background:var(--chip); border:1.5px solid var(--border); flex-shrink:0; }
  .s7trk .sg { width:13px; height:2px; background:var(--border); flex-shrink:0; }
  .s7trk .d.rep { background:var(--text-3); border-color:var(--text-3); }
  .s7trk .d.done { background:var(--brand); border-color:var(--brand); }
  .s7trk .d.amb { background:var(--s7-amber); border-color:var(--s7-amber); }
  .s7trk .d.red { background:var(--s7-red); border-color:var(--s7-red); }
  .s7trk .d.rej { background:var(--s7-rej); border-color:var(--s7-rej); }
  .s7chip { display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; border-radius:9px; padding:3px 8px; border:1px solid var(--border); color:var(--text-2); background:var(--chip); }
  .s7chip.rev { color:var(--s7-amber); background:var(--s7-amber-t); border-color:var(--s7-amber-l); }
  .s7chip.res { color:var(--brand-ink); background:var(--brand-tint); border-color:var(--brand-line); }
  .s7chip.stale { color:var(--s7-red); background:var(--s7-red-t); border-color:var(--s7-red-l); }
  .s7chip.rej { color:var(--s7-rej); background:var(--s7-rej-t); border-color:var(--s7-rej-l); }
  .s7stale { font-size:10px; font-weight:700; color:var(--text-3); margin-top:6px; }
  .s7stale.hot { color:var(--s7-red); }
  .s7route { display:flex; align-items:flex-start; gap:7px; font-size:11.5px; font-weight:600; color:var(--text-2); line-height:1.45; margin-top:7px; }
  .s7route svg { width:13px; height:13px; color:var(--brand-ink); flex-shrink:0; margin-top:1px; }
  .s7route b { color:var(--text); font-weight:700; }
  .s7clb { display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:7px; padding:1px 6px; white-space:nowrap; }
  .s7clb svg { width:8px; height:8px; }
  /* rejection reason inline + "Dispute this" (B7) */
  .s7rej { margin-top:7px; font-size:11px; line-height:1.5; color:var(--text-2); }
  .s7rej b { color:var(--text); }
  .s7rej .dl { color:var(--brand-ink); font-weight:800; white-space:nowrap; }
  /* resolver line + proof thumb (B5/B9) */
  .s7res { display:flex; gap:9px; align-items:center; margin-top:8px; }
  .s7res .pf { width:46px; height:46px; border-radius:10px; flex-shrink:0; border:1px solid var(--brand-line); display:flex; align-items:flex-end; padding:3px; }
  .s7res .pf span { font-size:7px; font-weight:800; color:#fff; background:rgba(8,14,12,.6); border-radius:5px; padding:1px 4px; }
  .s7res .rm { font-size:11px; font-weight:600; color:var(--text-2); line-height:1.45; min-width:0; }
  .s7res .rm b { color:var(--text); font-weight:700; }
  /* tier excerpts (S7·B) + spec annotation tags */
  .s7tier { margin:9px 16px 0; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px 12px; box-shadow:var(--card-shadow); }
  .s7tag { display:inline-flex; align-items:center; gap:5px; font-size:8.5px; font-weight:800; letter-spacing:.7px; color:var(--text-3); border:1px dashed var(--border); border-radius:7px; padding:2px 7px; text-transform:uppercase; white-space:nowrap; }
  .s7chips { display:flex; flex-wrap:wrap; gap:7px; padding:9px 16px 0; }
  /* push mock + sheet rows (B6 reporter-confirm · C12 day-30 choice) */
  .s7push { margin:10px 16px 0; display:flex; gap:9px; padding:11px 12px; border-radius:16px; background:var(--nav-bg); backdrop-filter:blur(12px); border:1px solid var(--border); box-shadow:var(--card-shadow); }
  .s7push .ai { width:30px; height:30px; border-radius:8px; background:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .s7push .ai svg { width:15px; height:15px; color:var(--on-brand); }
  .s7push .pm2 { min-width:0; }
  .s7push .pt2 { font-size:11.5px; font-weight:800; }
  .s7push .pb2 { font-size:11px; font-weight:600; color:var(--text-2); line-height:1.45; margin-top:1px; }
  .s7opt { display:flex; align-items:center; gap:10px; margin-top:8px; padding:11px 12px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); }
  .s7opt .oi { width:32px; height:32px; border-radius:10px; background:var(--brand-tint); border:1px solid var(--brand-line); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .s7opt .oi svg { width:15px; height:15px; color:var(--brand-ink); }
  .s7opt .om2 { min-width:0; }
  .s7opt .ot { font-size:12.5px; font-weight:800; }
  .s7opt .os { font-size:10.5px; font-weight:600; color:var(--text-3); margin-top:1px; line-height:1.4; }
  .s7yn { display:flex; gap:8px; margin-top:12px; }
  .s7yn .y { flex:1.5; padding:12px; border-radius:20px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:13.5px; font-weight:800; }
  .s7yn .n { flex:1; padding:12px; border-radius:20px; background:transparent; border:1px solid var(--border); color:var(--text-2); font-family:inherit; font-size:13px; font-weight:700; }
  .s7note { display:flex; gap:7px; margin-top:10px; font-size:10.5px; font-weight:600; color:var(--text-3); line-height:1.5; }
  .s7note svg { width:12px; height:12px; flex-shrink:0; margin-top:1px; }
  .s7note b { color:var(--text-2); }
  /* anonymous-filing toggle (F23) + MCC briefing banner (G26) */
  .s7tgr { display:flex; align-items:center; gap:10px; margin-top:9px; padding:11px 12px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border); }
  .s7tgr .tm2 { flex:1; min-width:0; }
  .s7tgr .tt2 { font-size:12.5px; font-weight:800; }
  .s7tgr .ts2 { font-size:10.5px; font-weight:600; color:var(--text-3); margin-top:1px; line-height:1.4; }
  .s7tg { width:36px; height:21px; border-radius:12px; background:var(--brand); position:relative; flex-shrink:0; }
  .s7tg::after { content:''; position:absolute; top:2.5px; right:2.5px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); }
  .s7mcc { margin:10px 16px 0; display:flex; gap:9px; padding:10px 11px; border-radius:13px; background:var(--s7-amber-t); border:1px solid var(--s7-amber-l); font-size:11px; font-weight:600; color:var(--text-2); line-height:1.5; }
  .s7mcc svg { width:14px; height:14px; flex-shrink:0; margin-top:1px; color:var(--s7-amber); }
  .s7mcc b { color:var(--text); }

  /* ---- S7·G issue detail + J31 support button + reporter self-resolve (2026-06-14) ---- */
  /* J31: support = full-width labelled button, raised hand, count beside; .on = tapped */
  .s7-supbtn { display:flex; align-items:center; gap:8px; width:calc(100% - 0px); margin-top:10px; padding:11px 13px; border-radius:14px; background:var(--brand-tint); border:1px solid var(--brand-line); color:var(--brand-ink); font-family:inherit; font-size:12.5px; font-weight:800; }
  .s7-supbtn svg { width:16px; height:16px; flex-shrink:0; }
  .s7-supbtn .ct { margin-left:auto; font-weight:800; }
  .s7-supbtn.on { background:var(--brand); color:var(--on-brand); border-color:transparent; }
  /* vertical status timeline — the detail-view civic header */
  .s7vt { margin:10px 16px 0; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--card-shadow); padding:13px 14px; }
  .s7vt .vr { display:flex; gap:11px; }
  .s7vt .vc { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
  .s7vt .nd { width:14px; height:14px; border-radius:50%; background:var(--chip); border:2px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .s7vt .nd svg { width:8px; height:8px; color:var(--on-brand); }
  .s7vt .nd.done { background:var(--brand); border-color:var(--brand); }
  .s7vt .nd.amb { background:var(--s7-amber); border-color:var(--s7-amber); }
  .s7vt .vl { width:2px; flex:1; min-height:16px; background:var(--border); margin:2px 0; }
  .s7vt .vl.done { background:var(--brand); }
  .s7vt .vb { padding-bottom:13px; min-width:0; }
  .s7vt .vr:last-child .vb { padding-bottom:0; }
  .s7vt .vt2 { font-size:12.5px; font-weight:800; }
  .s7vt .vm { font-size:10.5px; font-weight:600; color:var(--text-3); margin-top:1px; line-height:1.4; }
  .s7vt .vm b { color:var(--text-2); font-weight:700; }
  .s7vt .fut .vt2 { color:var(--text-3); }
  /* reporter self-resolve action (their own open issue) */
  .s7-self { display:flex; align-items:center; gap:10px; margin:9px 16px 0; padding:11px 12px; border-radius:14px; background:var(--surface-2); border:1px dashed var(--brand-line); }
  .s7-self .si { width:31px; height:31px; border-radius:9px; background:var(--brand-tint); border:1px solid var(--brand-line); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .s7-self .si svg { width:15px; height:15px; color:var(--brand-ink); }
  .s7-self .sm { flex:1; min-width:0; }
  .s7-self .st { font-size:12.5px; font-weight:800; }
  .s7-self .ss { font-size:10.5px; font-weight:600; color:var(--text-3); margin-top:1px; line-height:1.4; }
  .s7-self .sgo { flex-shrink:0; font-size:11px; font-weight:800; color:var(--brand-ink); white-space:nowrap; }
  /* updates / comments thread (reused post comments) */
  .s7cmt { margin:6px 16px 0; }
  .s7cmt .clbl { font-size:9.5px; font-weight:800; letter-spacing:.6px; color:var(--text-3); text-transform:uppercase; padding:8px 0 2px; }
  .s7cmt .cm { display:flex; gap:9px; padding:9px 0; border-top:1px solid var(--border); }
  .s7cmt .ca { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:800; }
  .s7cmt .ca.sys { background:var(--brand-tint); border:1px solid var(--brand-line); }
  .s7cmt .ca.sys svg { width:15px; height:15px; color:var(--brand-ink); }
  .s7cmt .cc { min-width:0; flex:1; }
  .s7cmt .cn { font-size:12px; font-weight:800; }
  .s7cmt .cn .tag { font-size:8.5px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:6px; padding:0.5px 5px; margin-left:5px; text-transform:uppercase; letter-spacing:.3px; }
  .s7cmt .cx { font-size:11.5px; color:var(--text-2); line-height:1.45; margin-top:2px; }
  .s7cmt .cmeta { font-size:10px; color:var(--text-3); margin-top:3px; }

  /* ===================================================================== */
  /* S8 — COMMUNITIES TAB (S8-decision-sheet.md, ✅ rulings only).         */
  /* Circles + channels of a place: joined-first rows w/ last-activity    */
  /* (C11), whole-row tap on JOINED (C12), member/non-member activity     */
  /* gating ON the card (B9); labeled NEARBY section (A1); WhatsApp-      */
  /* permanence banner + server-seeded chips + ONE primary CTA (A2-A4);   */
  /* "New" chip, never "0 members" (A6); Circle-preselected picker w/     */
  /* localized comprehension subtitles (D17); founder beat = "+20 Seva"   */
  /* (DECISIONS #10 — never karma). Circle posts NEVER in place feed (B7).*/
  /* ===================================================================== */
  .s8-tabs .pltab { padding:9px 7px; font-size:11px; }
  .s8-grp { margin:9px 16px 0; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--card-shadow); overflow:hidden; }
  .s8-row { display:flex; align-items:center; gap:11px; padding:11px 13px; border-bottom:1px solid var(--border); }
  .s8-row:last-child { border-bottom:none; }
  .s8-row.joined { background:linear-gradient(90deg, var(--brand-tint), transparent 72%); }
  .s8-av { width:42px; height:42px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13.5px; font-weight:800; }
  .s8-av.icon { background:var(--chip); border:1px solid var(--border); }
  .s8-av.icon svg { width:19px; height:19px; color:var(--brand-ink); }
  .s8-m { flex:1; min-width:0; }
  .s8-nm { display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; letter-spacing:-0.2px; min-width:0; }
  .s8-nm .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .s8-badge { flex-shrink:0; font-size:10.5px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:8px; padding:1px 7px; }
  .s8-badge.ch { color:var(--text-2); background:var(--chip); border-color:var(--border); }
  .s8-badge.gold { color:var(--gold); background:color-mix(in srgb, var(--gold) 13%, transparent); border-color:color-mix(in srgb, var(--gold) 40%, transparent); }
  .s8-sub { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--text-2); margin-top:2.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .s8-sub svg { width:11px; height:11px; color:var(--text-3); flex-shrink:0; }
  .s8-new { display:inline-flex; font-size:9.5px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:7px; padding:0.5px 6px; }
  .s8-tease { font-size:11px; font-weight:600; color:var(--text); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .s8-tease b { color:var(--text-2); font-weight:700; }
  .s8-act { display:flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:var(--brand-ink); margin-top:3px; }
  .s8-act.dim { color:var(--text-3); font-weight:600; }
  .s8-act svg { width:10px; height:10px; flex-shrink:0; }
  .s8-join { flex-shrink:0; font-family:inherit; font-size:12px; font-weight:800; color:var(--on-brand); background:var(--brand); border:none; border-radius:16px; padding:7px 14px; }
  .s8-join.did { display:inline-flex; align-items:center; gap:5px; background:var(--brand-tint); color:var(--brand-ink); border:1px solid var(--brand-line); }
  .s8-join.did svg { width:12px; height:12px; }
  .s8-chev { width:28px; height:28px; border-radius:50%; background:var(--chip); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text-2); }
  .s8-chev svg { width:14px; height:14px; }
  /* cold start (A2-A4/A6) */
  .s8-bann { margin:10px 16px 0; padding:12px 13px; border-radius:16px; background:var(--brand-tint); border:1px solid var(--brand-line); }
  .s8-bann .bh { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; }
  .s8-bann .bh svg { width:14px; height:14px; color:var(--brand); flex-shrink:0; }
  .s8-bann .bw { font-size:11px; font-weight:600; color:var(--text-2); line-height:1.5; margin-top:4px; }
  .s8-bann .bw b { color:var(--brand-ink); font-weight:700; }
  .s8-chips { display:flex; flex-wrap:wrap; gap:7px; padding:10px 16px 0; }
  .s8-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:13px; border:1px dashed var(--dash); background:var(--surface); color:var(--text); font-size:12px; font-weight:700; }
  .s8-chip svg { width:12px; height:12px; color:var(--brand); flex-shrink:0; }
  .s8-cta { display:flex; align-items:center; justify-content:center; gap:8px; margin:12px 16px 0; padding:12px; border-radius:22px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:13.5px; font-weight:800; width:calc(100% - 32px); }
  .s8-cta svg { width:16px; height:16px; }
  .s8-2nd { display:block; width:100%; text-align:center; margin-top:5px; padding:6px; background:transparent; border:none; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--text-2); }
  /* 2-button create CTA (owner 2026-06-14): Circle filled + Channel outlined,
     equal half-width — the faint single "or start a channel" link was invisible. */
  .s8-cta2 { display:flex; gap:9px; margin:12px 16px 0; }
  .s8-cta2 button { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:12px; border-radius:20px; font-family:inherit; font-size:13px; font-weight:800; border:none; }
  .s8-cta2 button svg { width:16px; height:16px; }
  .s8-cta2 .c1 { background:var(--brand); color:var(--on-brand); }
  .s8-cta2 .c2 { background:var(--brand-tint); color:var(--brand-ink); border:1px solid var(--brand-line); }
  .s8-cta2hint { font-size:11px; font-weight:600; color:var(--text-3); margin:6px 18px 0; line-height:1.35; }
  .s8-create { display:flex; align-items:center; gap:9px; margin:11px 16px 0; padding:11px 13px; border-radius:14px; border:1.4px dashed var(--dash); background:var(--brand-tint); font-size:12.5px; font-weight:800; color:var(--brand-ink); }
  .s8-create svg { width:15px; height:15px; flex-shrink:0; }
  /* create picker + pre-fill (D17/D18) */
  .s8-sheet { margin:8px 16px 0; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--card-shadow); padding:10px 13px 13px; }
  .s8-sheet .grab { width:38px; height:4px; border-radius:3px; background:var(--text-3); opacity:.4; margin:0 auto 10px; }
  .s8-sheet h5 { font-size:15px; font-weight:800; letter-spacing:-0.2px; }
  .s8-opt { display:flex; align-items:flex-start; gap:10px; margin-top:9px; padding:11px 12px; border-radius:14px; border:1px solid var(--border); background:var(--surface-2); }
  .s8-opt.on { border-color:var(--brand); background:var(--brand-tint); }
  .s8-opt .oi { width:34px; height:34px; border-radius:11px; background:var(--chip); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .s8-opt .oi svg { width:16px; height:16px; color:var(--text-2); }
  .s8-opt.on .oi { background:var(--brand); border-color:transparent; }
  .s8-opt.on .oi svg { color:var(--on-brand); }
  .s8-opt .om { flex:1; min-width:0; }
  .s8-opt .ot { font-size:13px; font-weight:800; }
  .s8-opt .os { font-size:11px; font-weight:600; color:var(--text-2); margin-top:2px; line-height:1.45; }
  .s8-opt .rad { width:18px; height:18px; border-radius:50%; border:2px solid var(--text-3); flex-shrink:0; margin-top:1px; }
  .s8-opt.on .rad { border-color:var(--brand); background:radial-gradient(circle, var(--brand) 0 4.5px, transparent 5px); }
  .s8-f { margin:9px 16px 0; }
  .s8-f .fl { font-size:9.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--text-3); }
  .s8-f .fv { margin-top:5px; padding:11px 12px; border-radius:13px; background:var(--surface); border:1px solid var(--border); font-size:13px; font-weight:700; box-shadow:var(--card-shadow); line-height:1.45; }
  .s8-f .fv.desc { font-weight:600; color:var(--text-2); font-size:12px; }

  /* ---- S8 trending rail + avatar-stack richness + premium founder card (owner 2026-06-14) ---- */
  .s8-trend .th { display:flex; align-items:center; gap:6px; padding:12px 16px 8px; }
  .s8-trend .th svg { width:15px; height:15px; color:var(--s7-amber); flex-shrink:0; }
  .s8-trend .th .tt { font-size:13px; font-weight:800; letter-spacing:-.2px; }
  .s8-trend .th .more { margin-left:auto; font-size:11px; font-weight:700; color:var(--brand-ink); }
  .s8-trow { display:flex; gap:11px; padding:0 16px 4px; overflow-x:auto; }
  .s8-tcard { flex-shrink:0; width:168px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--card-shadow); padding:12px; display:flex; flex-direction:column; gap:7px; }
  .s8-tcard .tt2 { display:flex; align-items:center; justify-content:space-between; gap:6px; }
  .s8-stk { display:inline-flex; }
  .s8-stk .av { width:23px; height:23px; border-radius:50%; border:2px solid var(--surface); margin-left:-8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:8.5px; font-weight:800; flex-shrink:0; }
  .s8-stk .av:first-child { margin-left:0; }
  .s8-stk .av.more { background:var(--chip); border-color:var(--surface); color:var(--text-2); }
  .s8-pulse { display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:800; color:var(--s7-amber); background:var(--s7-amber-t); border:1px solid var(--s7-amber-l); border-radius:8px; padding:2px 7px; white-space:nowrap; flex-shrink:0; }
  .s8-pulse svg { width:9px; height:9px; }
  .s8-pulse.grow { color:var(--brand-ink); background:var(--brand-tint); border-color:var(--brand-line); }
  .s8-tcard .tcn { font-size:13px; font-weight:800; letter-spacing:-.2px; line-height:1.22; }
  .s8-tcard .tcm { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:700; color:var(--text-3); flex-wrap:wrap; }
  .s8-lvl { font-size:8.5px; font-weight:800; color:var(--text-2); background:var(--chip); border:1px solid var(--border); border-radius:6px; padding:1px 6px; white-space:nowrap; }
  .s8-tcard .tcj { margin-top:1px; padding:7px; border-radius:12px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:11.5px; font-weight:800; text-align:center; }
  .s8-tcard .tcj.in { background:var(--brand-tint); color:var(--brand-ink); border:1px solid var(--brand-line); }
  /* list-row mini avatar stack — faces = life + social proof, cheap (no covers) */
  .s8-mstk { display:inline-flex; vertical-align:middle; margin-right:6px; }
  .s8-mstk .av { width:17px; height:17px; border-radius:50%; border:1.5px solid var(--surface); margin-left:-6px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:7px; font-weight:800; flex-shrink:0; }
  .s8-mstk .av:first-child { margin-left:0; }
  /* premium founder card — the pride moment (replaces the plain toast) */
  .s8-fdr { margin:8px 26px 0; background:var(--surface); border:1px solid var(--brand-line); border-radius:18px; box-shadow:var(--card-shadow); padding:16px 15px 13px; text-align:center; }
  .s8-fdr .ic { width:48px; height:48px; border-radius:50%; background:var(--brand-tint); border:1px solid var(--brand-line); display:flex; align-items:center; justify-content:center; margin:0 auto 9px; }
  .s8-fdr .ic svg { width:24px; height:24px; color:var(--gold); }
  .s8-fdr h5 { font-size:15px; font-weight:800; letter-spacing:-.2px; }
  .s8-fdr p { font-size:11.5px; color:var(--text-2); line-height:1.45; margin-top:5px; }
  .s8-fdr p b { color:var(--text); font-weight:700; }
  .s8-fdr .sv { display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-size:12px; font-weight:800; color:var(--brand-ink); background:var(--brand-tint); border:1px solid var(--brand-line); border-radius:20px; padding:5px 13px; }
  .s8-fdr .cta { width:100%; margin-top:11px; padding:11px; border-radius:18px; background:var(--brand); color:var(--on-brand); border:none; font-family:inherit; font-size:13px; font-weight:800; }
  /* 2G + states (F20) — shimmer reuses the global sp-sk keyframes */
  .s8-sk { background:linear-gradient(90deg, var(--chip) 25%, var(--surface-2) 50%, var(--chip) 75%); background-size:200% 100%; animation:sp-sk 1.2s linear infinite; border-radius:8px; }
  .s8-err { margin:10px 16px 0; padding:16px 14px; border-radius:16px; border:1px solid var(--border); background:var(--surface-2); text-align:center; }
  .s8-err .et { font-size:12.5px; font-weight:700; color:var(--text-2); line-height:1.45; }
  .s8-err .retry { display:inline-flex; align-items:center; gap:6px; margin-top:9px; padding:8px 16px; border-radius:16px; background:var(--chip); border:1px solid var(--border); font-family:inherit; font-size:12px; font-weight:800; color:var(--text); }
  .s8-err .retry svg { width:13px; height:13px; }

  .foot { text-align:center; color:var(--text-3); font-size:12px; margin: 46px auto 0; max-width:680px; line-height:1.6; }
  .foot b { color:var(--brand-ink); }