:root{
    /* PUCAR design system - shape + type (theme-independent) */
    font-synthesis:none;
    /* ---------- SHAPE SCALE ----------
       One card recipe, three radii, one padding scale. Before this there were five
       card radii in use (8, 9, 10, 11 and 12px), the border-and-panel recipe was
       written out 39 times, and --radius had three uses in the whole sheet - so every
       view that arrived after the first invented its own instead of inheriting one.
       Components take these; they do not restate them. */
    --radius:11px;        /* a card, a panel, an accordion - the common case */
    --radius-inner:8px;   /* something nested inside a card */
    --radius-chip:7px;    /* a chip, a small control */
    --radius-pill:999px;  /* deliberately round: a count bubble, a filter pill */
    --pad-card:16px 18px; /* a card's own padding */
    --pad-tight:13px 15px;/* a dense row inside a group */
    --gap-card:10px;      /* between cards in a list */
    --measure-prose:820px;/* a line of prose, as against the width of its container */
    --font-sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
    --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    /* ---------- LIGHT (Radix scales, PUCAR mapping) ---------- */
    --bg:#fcfcfd; --sidebar-bg:#f9f9fb; --panel:#ffffff; --panel-2:#f4f4f7; --line:#e8e8ec; --line-2:#cdced6;
    --ink:#1c2024; --ink-2:#60646c; --ink-3:#8b8d98;
    --brand:#007e7e; --brand-accent:#12a594; --brand-hi:#008573; --brand-dim:#e0f8f3; --brand-border:#a1ded2; --link:#007e7e;
    --blue:#0d74ce; --blue-txt:#0d74ce; --blue-dim:#e6f4fe; --blue-border:#acd8fc;
    --green:#217a3a; --green-txt:#2a7e3b; --green-dim:#e9f6e9; --green-border:#b2ddb5;
    --amber:#e2a336; --amber-txt:#ab6400; --amber-dim:#fff7c2; --amber-border:#e9c162;
    --purple:#6e56cf; --purple-txt:#6e56cf; --purple-dim:#f1eefe; --purple-border:#d3c9f5;
    --teal:#007e7e; --teal-dim:#e0f8f3;
    --red:#c1232a; --red-dim:#feebec; --red-border:#f4a9aa;
    --shadow-raised:0 1px 2px 0 rgb(0 0 0/.04),0 1px 3px 0 rgb(0 0 0/.07);
    --shadow-modal:0 24px 60px -12px rgb(0 0 0/.25),0 8px 20px -8px rgb(0 0 0/.14);
  }
  html.dark{
    /* ---------- DARK (Radix scales, PUCAR mapping) ---------- */
    --bg:#111113; --sidebar-bg:#18191b; --panel:#18191b; --panel-2:#1d1e21; --line:#282b2f; --line-2:#43484e;
    --ink:#edeef0; --ink-2:#b0b4ba; --ink-3:#777b84;
    --brand:#0eb39e; --brand-accent:#12a594; --brand-hi:#0bd8b6; --brand-dim:#0d2d2a; --brand-border:#1c6961; --link:#0bd8b6;
    --blue:#3b9eff; --blue-txt:#70b8ff; --blue-dim:#0d2847; --blue-border:#205d9e;
    --green:#46a758; --green-txt:#71d083; --green-dim:#1b2a1e; --green-border:#2d5736;
    --amber:#ffc53d; --amber-txt:#ffca16; --amber-dim:#302008; --amber-border:#5c3d05;
    --purple:#9e8cff; --purple-txt:#c4b8ff; --purple-dim:#231d3d; --purple-border:#4a3d7a;
    --teal:#0bd8b6; --teal-dim:#0d2d2a;
    --red:#ec5d5e; --red-dim:#3b1219; --red-border:#72232d;
    --shadow-raised:0 1px 2px 0 rgb(0 0 0/.25),0 1px 3px 0 rgb(0 0 0/.4);
    --shadow-modal:0 24px 70px -10px rgb(0 0 0/.7),0 8px 24px -8px rgb(0 0 0/.5);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--bg); color:var(--ink); font-family:var(--font-sans);
    font-size:15px; line-height:1.55; letter-spacing:.01em; -webkit-font-smoothing:antialiased;}
  a{color:var(--link); text-decoration:none} a:hover{text-decoration:underline}
  .theme-toggle{display:inline-flex; gap:1px; background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:2px; flex:none}
  .tt-opt{display:inline-flex; align-items:center; justify-content:center; width:22px; height:17px; border-radius:11px; cursor:pointer; color:var(--ink-3); user-select:none}
  .tt-opt svg.lu{width:11px; height:11px}
  .tt-opt.on{background:var(--brand-dim); color:var(--brand-hi)}

  .app{display:grid; grid-template-columns:280px 1fr; min-height:100vh}
  .sidebar{background:var(--sidebar-bg); border-right:1px solid var(--line); padding:16px 16px; position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column}
  #nav{display:flex; flex-direction:column; flex:1 1 auto; min-height:0}
  #nav > *{flex:none}
  #nav > .nav-scroll{flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden; margin-right:-6px; padding-right:6px;
    scrollbar-width:thin; scrollbar-color:transparent transparent}
  #nav > .nav-scroll:hover{scrollbar-color:var(--line-2) transparent}
  .nav-scroll::-webkit-scrollbar{width:6px}
  .nav-scroll::-webkit-scrollbar-track{background:transparent}
  .nav-scroll::-webkit-scrollbar-thumb{background:transparent; border-radius:6px}
  .nav-scroll:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--line-2) 70%,transparent)}
  .nav-scroll::-webkit-scrollbar-thumb:hover{background:var(--line-2)}
  .nav-divider{height:1px; background:var(--line); margin:9px 6px 5px}
  .nav-scoped{margin-top:3px}
  .main{padding:40px 48px 120px; max-width:1180px}

  /* mobile: off-canvas drawer behind a hamburger; active case type stays in the top bar */
  .topbar{display:none}
  .backdrop{display:none}
  .hamburger{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line); border-radius:var(--radius-inner); background:var(--panel); color:var(--ink); cursor:pointer; flex:none; padding:0}
  .hamburger svg.lu{width:20px; height:20px}
  @media(max-width:880px){
    .topbar{display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:50; background:var(--sidebar-bg); border-bottom:1px solid var(--line); padding:10px 14px}
    .tb-brand{font-weight:700; font-size:15px; letter-spacing:-.01em}
    .tb-case{margin-left:auto; font-size:12.5px; color:var(--ink-2); background:color-mix(in srgb,var(--brand) 10%,var(--panel)); border:1px solid var(--brand-border); border-radius:20px; padding:5px 12px; max-width:52vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .app{grid-template-columns:1fr}
    .sidebar{position:fixed; top:0; left:0; height:100dvh; width:280px; max-width:86vw; transform:translateX(-100%); transition:transform .25s ease; z-index:70; border-right:1px solid var(--line); box-shadow:var(--shadow-modal)}
    .sidebar.open{transform:none}
    .backdrop.show{display:block; position:fixed; inset:0; background:rgb(0 0 0/.5); z-index:65}
    .main{padding:24px 18px 90px}
  }

  .brand{display:flex; gap:8px; align-items:center; margin:0 0 7px; padding:0 6px; cursor:pointer}
  .brand .mark{width:24px; height:24px; border-radius:6px; flex:none;
    background:linear-gradient(135deg,var(--brand),var(--blue)); display:grid; place-items:center; font-weight:800; color:#fff; font-size:11.5px}
  .brand h1{font-size:13px; margin:0; letter-spacing:.2px; line-height:1.05}
  .brand .brand-txt{min-width:0}
  .brand .brand-sub{display:block; font-size:9.5px; line-height:1; margin-top:0; color:var(--ink-3); letter-spacing:.01em}

  .nav-group{margin:12px 0 4px; padding:0 8px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
  .nav-group:first-child{margin-top:2px}
  .casedd + .nav-group{margin-top:8px}
  .nav-group.scoped{color:var(--brand)}
  /* Overview: subtle footer disclosure, de-emphasised vs the main nav */
  /* Overview: a popover menu that floats above its trigger (not an accordion) */
  .ov-foot-wrap{margin:0; flex:1 1 auto; min-width:0}
  .ov-menu{position:relative}
  .ov-trigger{display:flex; align-items:center; gap:9px; width:100%; padding:7px 10px; border-radius:8px; background:transparent; border:none; cursor:pointer; color:var(--ink-3); font-family:inherit; font-size:12.5px; text-align:left}
  .ov-trigger .ico{width:16px; display:inline-flex; align-items:center; justify-content:center; opacity:.7}
  .ov-trigger .ico svg.lu{width:15px; height:15px}
  .ov-trigger .nav-chev{margin-left:auto; color:var(--ink-3); transition:transform .18s}
  .ov-trigger .nav-chev svg.lu{width:12px; height:12px}
  .ov-menu.open .ov-trigger,.ov-trigger:hover{color:var(--ink); background:var(--panel)}
  .ov-menu.open .ov-trigger .nav-chev{transform:rotate(180deg)}
  .ov-pop{position:absolute; left:0; right:0; bottom:calc(100% + 6px); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-modal); padding:5px; display:none; z-index:40}
  .ov-menu.open .ov-pop{display:block}
  .ov-pop-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; font-size:13px; color:var(--ink-2); cursor:pointer}
  .ov-pop-item .ico{width:16px; display:inline-flex; align-items:center; justify-content:center; opacity:.7}
  .ov-pop-item .ico svg.lu{width:14px; height:14px}
  .ov-pop-item:hover{background:var(--panel-2); color:var(--ink); text-decoration:none}
  .ov-pop-item.active{color:var(--brand-hi)}
  .ov-pop-sep{height:1px; background:var(--line); margin:5px 6px}
  .nav a{display:flex; align-items:center; gap:11px; padding:5px 10px; border-radius:8px; color:var(--ink-2); font-size:14px; margin:0; cursor:pointer}
  .nav a .ico{width:18px; display:inline-flex; align-items:center; justify-content:center; opacity:.85}
  svg.lu{width:1em; height:1em; vertical-align:-.14em; flex:none}
  .nav a .ico svg.lu{width:16px; height:16px}
  .nav .nav-sub a.subnav .ico svg.lu{width:14.5px; height:14.5px}
  .nav a.ov-toggle .nav-chev svg.lu{width:13px; height:13px; vertical-align:0}
  .casedd-chev svg.lu{width:12px; height:12px; vertical-align:0}
  .nav a .count{margin-left:auto; font-size:11.5px; color:var(--ink-3); background:var(--panel-2); padding:1px 7px; border-radius:20px}
  .nav a .count.soon{background:transparent; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.65}
  .nav a.active .count.soon{color:var(--brand-hi); background:transparent}
  .nav a:hover{background:var(--panel); color:var(--ink); text-decoration:none}
  .nav a.active{background:var(--brand-dim); color:var(--brand-hi)}
  .nav a.active .count{background:var(--brand-border); color:#fff}
  .nav .scoped-wrap{margin:2px 0 0}
  .nav a.ov-toggle .nav-chev{margin-left:auto; font-size:10px; color:var(--ink-3); transition:transform .28s ease}
  .nav .scoped-wrap:not(.ov-collapsed) a.ov-toggle .nav-chev{transform:rotate(180deg)}
  .nav .nav-sub{margin:1px 0 3px 19px; display:grid; grid-template-rows:1fr; opacity:1; transition:grid-template-rows .28s ease, opacity .22s ease, margin .28s ease}
  .nav .scoped-wrap.ov-collapsed .nav-sub{grid-template-rows:0fr; opacity:0; margin-top:0; margin-bottom:0}
  .nav .nav-sub-inner{min-height:0; overflow:hidden; padding-left:2px; display:flex; flex-direction:column}
  .nav .nav-sub a.subnav{font-size:13px; color:var(--ink-3); padding:4px 9px}
  .nav .nav-sub a.subnav .ico{font-size:12.5px; opacity:.7}
  .nav .nav-sub a.subnav:hover{color:var(--ink)}
  .nav .nav-sub a.subnav.active{color:var(--brand-hi)}
  /* a sub-nav section that owns its own children (The roles -> Police / Courts):
     same disclosure behaviour as The story, one indent level further in */
  .nav .subnav-wrap{display:flex; flex-direction:column}
  .nav a.subnav-toggle .nav-chev{margin-left:auto; display:inline-flex; color:var(--ink-3); transition:transform .28s ease}
  .nav a.subnav-toggle .nav-chev svg.lu{width:12px; height:12px; vertical-align:0}
  .nav a.subnav-toggle:hover .nav-chev{color:var(--ink-2)}
  .nav .subnav-wrap:not(.ov-collapsed) a.subnav-toggle .nav-chev{transform:rotate(180deg)}
  /* the parent of the page you are on: marked, but quieter than the active page itself */
  .nav .nav-sub a.subnav.parent-active{color:var(--brand-hi); background:transparent}
  .nav .nav-sub2{margin:0 0 2px 15px; display:grid; grid-template-rows:1fr; opacity:1; transition:grid-template-rows .28s ease, opacity .22s ease, margin .28s ease}
  .nav .subnav-wrap.ov-collapsed .nav-sub2{grid-template-rows:0fr; opacity:0; margin-top:0; margin-bottom:0}
  .nav .nav-sub2 a.subnav{font-size:12.5px}
  .nav .nav-sub2 a.subnav .ico{opacity:.55}
  /* active case type: one compact row - small inline label, name, chevron */
  .casedd{position:relative; margin:0 4px 5px}
  .casedd-btn{display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:color-mix(in srgb,var(--brand) 10%,var(--panel)); border:1px solid var(--brand-border); border-radius:8px; padding:5px 26px 5px 10px; cursor:pointer; color:inherit; font-family:inherit; position:relative; transition:border-color .12s}
  .casedd-btn:hover{border-color:var(--brand)}
  .casedd-chev{position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--brand-hi); font-size:10px; transition:transform .15s; display:inline-flex}
  .casedd.open .casedd-chev{transform:translateY(-50%) rotate(180deg)}
  .ac-label{flex:none; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--brand-hi); opacity:.85}
  .ac-name{min-width:0; flex:1 1 auto; font-size:13px; font-weight:600; color:var(--ink); line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .ac-name span{color:var(--ink-3); font-weight:400; font-size:12px}
  /* the state layer: state selector + everything scoped to it, bracketed together */
  .state-layer{position:relative; margin:2px 0 2px; padding:0 0 6px}
  /* sidebar state picker reads as a group heading (like NATIONAL OBJECTS), with a dropdown arrow */
  .statedd-wrap .state-inline-wrap{background:transparent; border:none; border-radius:0; padding:0; gap:0}
  .statedd-wrap .state-inline-wrap svg.lu{display:none}
  .statedd-wrap .state-inline{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding:0 15px 0 0; background-position:right 4px center,right 0 center}
  .statedd-wrap .state-inline-wrap:hover .state-inline{color:var(--ink-2)}
  .state-layer .nav-group{margin-top:9px}
  .state-layer .nav-group:first-of-type{margin-top:4px}
  .state-layer-note{font-size:10.5px; color:var(--ink-3); padding:1px 9px 3px; line-height:1.35}
  /* state selector - neutral styling to sit below (and distinct from) the case type */
  .statedd{margin-top:-2px}
  .statedd .casedd-btn{background:var(--panel); border-color:var(--line-2)}
  .statedd .casedd-btn:hover{border-color:var(--ink-3)}
  .statedd .casedd-chev{color:var(--ink-3)}
  .casedd-menu{display:none; position:absolute; left:0; right:0; top:calc(100% + 5px); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-inner); box-shadow:var(--shadow-modal); padding:5px; z-index:30}
  .casedd.open .casedd-menu{display:block}
  .casedd-item{padding:9px 11px; border-radius:7px; cursor:pointer; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:8px}
  .casedd-item:hover{background:var(--panel-2)}
  .casedd-item.on{color:var(--brand-hi)}
  .casedd-item .ci-sub{color:var(--ink-3); font-size:12px}
  .casedd-item .ci-check{margin-left:auto; color:var(--brand); font-size:12px}
  .casedd-item.planned{color:var(--ink-3); cursor:default}
  .casedd-item.planned:hover{background:none}

  .side-foot{margin-top:auto; padding:10px 10px 0; border-top:1px solid var(--line); font-size:12px; color:var(--ink-3); line-height:1.5; display:flex; align-items:center; gap:8px}
  .side-foot b{color:var(--ink-2); font-weight:600}

  .page-title{font-size:32px; font-weight:700; margin:0 0 6px; letter-spacing:-.02em; line-height:1.15}
  .page-title.state-title{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  .state-inline-wrap{display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line-2); border-radius:20px; padding:4px 8px 4px 12px}
  .state-inline-wrap svg.lu{width:13px; height:13px; color:var(--ink-3)}
  .state-inline-wrap:hover{border-color:var(--ink-3)}
  .state-inline{appearance:none; -webkit-appearance:none; background:transparent; border:none; color:var(--ink); font-family:inherit; font-size:14px; font-weight:600; letter-spacing:normal; cursor:pointer; padding:2px 20px 2px 2px; outline:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:right 7px center,right 3px center; background-size:4px 4px,4px 4px; background-repeat:no-repeat}
  .state-inline option{background:var(--panel); color:var(--ink); font-size:14px}
  .lede{color:var(--ink-2); font-size:16px; max-width:770px; margin:0 0 30px}
  .lede strong{color:var(--ink)}
  h2.sec{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:36px 0 14px; font-weight:700}
  /* prominent act-group header inside lists */
  .grouphead{font-size:19px; font-weight:700; color:var(--ink); letter-spacing:-.01em; margin:30px 0 12px; padding-bottom:9px; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:10px}
  .grouphead .gh-status{font-size:11.5px; font-weight:500; color:var(--ink-3); letter-spacing:0}

  .scopebar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 20px; padding:9px 14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-inner); font-size:13px}
  .scopebar .lab{color:var(--ink-3); font-size:12px; letter-spacing:.03em; text-transform:uppercase}
  .scopebar .ct{color:var(--ink); font-weight:600}
  .scopebar .sw{margin-left:auto; color:var(--brand); cursor:pointer; font-size:12.5px}
  .scopebar .sb-state{margin-left:auto; position:relative; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--brand-hi); background:var(--brand-dim); border:1px solid var(--brand-border); border-radius:20px; padding:3px 10px 3px 12px; cursor:pointer}
  .scopebar .sb-state:hover{border-color:var(--brand)}
  .scopebar .sb-state svg.lu{width:13px; height:13px}
  .scopebar .sb-state-chev{display:inline-flex; margin-left:-1px; opacity:.75; transition:opacity .15s}
  .scopebar .sb-state:hover .sb-state-chev{opacity:1}
  .scopebar .sb-state-chev svg.lu{width:12px; height:12px}
  .scopebar .sb-state-sel{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:none; appearance:none; -webkit-appearance:none; font-size:16px}
  .scopebar .sb-state-sel option{background:var(--panel); color:var(--ink); font-size:14px; font-weight:500}

  /* THE card. Everything with a panel fill and an edge is this, or extends this.
     .card-flat drops the edge for a group that sits on the page rather than in it;
     .card-inset is the nested case, on --panel-2 so it reads as inside something. */
  .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:var(--pad-card); margin-bottom:var(--gap-card)}
  .card-flat{background:var(--panel); border:0; border-radius:var(--radius);
    margin-bottom:var(--gap-card); overflow:hidden}
  .card-inset{background:var(--panel-2); border:1px solid var(--line);
    border-radius:var(--radius-inner); padding:var(--pad-tight)}
  .muted{color:var(--ink-2)} .tiny{font-size:12.5px; color:var(--ink-3)}

  .badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:20px; border:1px solid transparent; white-space:nowrap}
  .b-shared{color:var(--blue-txt); background:var(--blue-dim); border-color:var(--blue-border)}
  .b-state{color:var(--green-txt); background:var(--green-dim); border-color:var(--green-border)}
  .b-always{color:var(--ink-2); background:var(--panel-2); border-color:var(--line-2)}
  .b-pre{color:var(--ink-2); background:var(--panel-2); border-color:var(--line-2)}
  .b-post{color:var(--amber-txt); background:var(--amber-dim); border-color:var(--amber-border)}
  .b-tier{color:var(--purple-txt); background:var(--purple-dim); border-color:var(--purple-border)}
  .b-active{color:var(--green-txt); background:var(--green-dim); border-color:var(--green-border)}
  .b-planned{color:var(--ink-3); background:var(--panel-2); border-color:var(--line)}
  .b-crosscase{color:var(--brand-hi); background:var(--brand-dim); border-color:var(--brand-border)}
  .dot{width:8px; height:8px; border-radius:50%; display:inline-block}

  .lenses{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:6px 0 8px}
  @media(max-width:760px){.lenses{grid-template-columns:1fr}}
  .lens{--acc:var(--blue); --acctx:var(--blue-txt); border-radius:var(--radius); padding:18px; border:1px solid color-mix(in srgb,var(--acc) 22%,var(--line)); background:color-mix(in srgb,var(--acc) 5%,var(--panel))}
  .lens.what{--acc:var(--blue); --acctx:var(--blue-txt)} .lens.where{--acc:var(--green); --acctx:var(--green-txt)} .lens.when{--acc:var(--amber); --acctx:var(--amber-txt)}
  .lens .k{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--acctx); font-weight:700; display:flex; align-items:center; gap:7px}
  .lens .k::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--acc)}
  .lens h3{margin:6px 0 7px; font-size:18px} .lens p{margin:0; font-size:13.5px; color:var(--ink-2)}

  .ctgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
  .ctcard{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:var(--pad-card); position:relative}
  .ctcard.active{border-color:var(--green-border); cursor:pointer; transition:transform .12s, border-color .12s}
  .ctcard.active:hover{transform:translateY(-2px); border-color:var(--green)}
  .ctcard.planned{opacity:.72}
  .ctcard .cth{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .ctcard h3{margin:0; font-size:18px}
  .ctcard .act{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3); margin:3px 0 10px}
  .ctcard p{margin:0 0 12px; font-size:13.5px; color:var(--ink-2)}
  .ctcard .stat{display:flex; gap:16px; font-size:12px; color:var(--ink-3); border-top:1px solid var(--line); padding-top:11px}
  .ctcard .stat b{color:var(--ink); font-weight:650; font-size:15px; display:block}
  .ctcard .enter{margin-top:12px; font-size:13px; color:var(--green)}

  .struct-wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:22px; margin-top:8px}
  @media(max-width:860px){.struct-wrap{grid-template-columns:1fr}}
  .stack{display:flex; flex-direction:column; gap:8px}
  .col-h{font-size:13px; font-weight:700; letter-spacing:.04em; margin:0 0 4px}
  .col-h.rules{color:var(--blue)} .col-h.sys{color:var(--amber)}
  .layer{border-radius:var(--radius-inner); padding:12px 14px; border:1px solid var(--line); background:var(--panel)}
  .layer .lt{font-size:14.5px; font-weight:600} .layer .ld{font-size:12.5px; color:var(--ink-3); margin-top:2px}
  .layer.core{background:color-mix(in srgb,var(--blue) 9%,var(--panel)); border-color:var(--blue-border)}
  .layer.state{background:color-mix(in srgb,var(--green) 9%,var(--panel)); border-color:var(--green-border)}
  .layer.sysrow{background:color-mix(in srgb,var(--amber) 9%,var(--panel)); border-color:var(--amber-border)}
  .layer.you{outline:1.5px solid var(--brand); outline-offset:-1px}
  .divider{display:flex; align-items:center; gap:10px; margin:6px 2px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
  .divider.blue{color:var(--blue)} .divider.green{color:var(--green)} .divider .rule{flex:1; height:1px; background:var(--line)}
  .ctx{margin-top:14px; border:1px solid var(--red-border); background:color-mix(in srgb,var(--red) 7%,var(--panel)); border-radius:10px; padding:14px 16px}
  .ctx .ct{color:var(--red); font-weight:700; font-size:13px; letter-spacing:.03em; margin-bottom:6px}
  .ctx p{margin:3px 0; font-size:13px; color:var(--ink-2)}

  .timeline{margin-top:20px; padding:18px 20px 30px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel)}
  .tl-track{position:relative; height:2px; background:var(--line); margin:34px 8px 72px}
  .tl-node{position:absolute; top:-6px; transform:translateX(-50%); text-align:center}
  .tl-node .pt{width:11px; height:11px; border-radius:50%; background:var(--amber); margin:0 auto; border:2px solid var(--bg)}
  .tl-node .yr{font-size:12px; font-weight:700; margin-top:8px; color:var(--ink)}
  .tl-node .lb{font-size:11px; color:var(--ink-3); white-space:nowrap; max-width:130px}
  .tl-node.hot .pt{background:var(--red); box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 25%,transparent)}

  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
  .part{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:var(--pad-card); cursor:pointer; transition:border-color .12s, transform .12s}
  .part:hover{border-color:var(--brand-border); transform:translateY(-1px)}
  .part .pt{font-size:15px; font-weight:650; display:flex; align-items:center; gap:8px}
  .part .role{font-size:12.5px; color:var(--ink-3); margin:3px 0 10px}
  .part .meta{display:flex; flex-wrap:wrap; gap:6px}
  .part.repealed{opacity:.62} .part.repealed .pt{text-decoration:line-through; text-decoration-color:var(--ink-3)}

  .controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px}
  .search{flex:1; min-width:220px; position:relative}
  .search input{width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink); padding:11px 14px 11px 38px; border-radius:var(--radius-inner); font-size:14px; outline:none}
  .search input:focus{border-color:var(--brand)} .search .mag{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-3); display:inline-flex}
  .search .mag svg.lu{width:16px; height:16px}
  .chips{display:flex; flex-wrap:wrap; gap:7px}
  .chip{font-size:12.5px; padding:6px 12px; border-radius:20px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); cursor:pointer; user-select:none}
  .chip:hover{border-color:var(--line-2); color:var(--ink)} .chip.on{background:var(--brand-dim); border-color:var(--brand-border); color:var(--brand-hi)}
  .chip .c{opacity:.7; margin-left:4px}
  /* vocabulary facet bar: scope / part-of-speech / role */
  .vfacets{margin:2px 0 4px}
  .vfacet-row{display:flex; align-items:flex-start; gap:12px; margin-bottom:8px}
  .vfacet-lbl{flex:none; width:46px; padding-top:7px; font-size:10px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:var(--ink-3)}
  /* per-word classification tags: small, inline with the word, all one shape+height */
  .wtag{display:inline-flex; align-items:center; height:18px; padding:0 7px; border-radius:5px; border:1px solid var(--line); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; line-height:1; white-space:nowrap}
  .wtag-national{background:var(--blue-dim); color:var(--blue-txt); border-color:var(--blue-border)}
  .wtag-state{background:var(--purple-dim); color:var(--purple-txt); border-color:var(--purple-border)}
  .wtag-pos{background:var(--panel-2); color:var(--ink-3); border-color:var(--line)}
  .wtag-role{background:var(--brand-dim); color:var(--brand-hi); border-color:var(--brand-border)}

  .prov{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); margin-bottom:var(--gap-card); overflow:hidden}
  .prov-head{display:flex; align-items:center; gap:13px; padding:14px 16px; cursor:pointer}
  .prov-head:hover{background:var(--panel-2)}
  .prov .ref{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-2); background:var(--panel-2); padding:3px 8px; border-radius:6px; white-space:nowrap; flex:none; min-width:104px; text-align:center}
  .prov .rt{font-weight:700; font-size:16.5px; flex:1; color:var(--ink); letter-spacing:-.01em}
  .prov .rt .act{color:var(--ink-3); font-weight:400; font-size:13px; letter-spacing:0}
  .prov .hbadges{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
  .caret svg.lu{width:17px; height:17px; display:block}
  .prov .caret{color:var(--ink-2); transition:transform .15s; flex:none; display:inline-flex} .prov.open .caret{transform:rotate(90deg)}
  .prov-body{display:none; padding:2px 16px 18px 133px; border-top:1px solid var(--line)}
  .prov.open .prov-body{display:block}
  .brief{color:var(--ink-2); font-size:13.5px; margin:13px 0 4px; padding:11px 14px; background:color-mix(in srgb,var(--purple) 6%,var(--panel-2)); border:1px solid color-mix(in srgb,var(--purple) 18%,var(--line)); border-radius:var(--radius-inner)}
  .brief .bl{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--purple-txt); font-weight:700; display:block; margin-bottom:4px}
  .rel-lbl{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:5px}
  .stedge{color:var(--brand); cursor:pointer; text-decoration:none}
  .stedge:hover{text-decoration:underline}
  .vsub{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin:15px 0 7px 2px}
  .prov-body .kv{font-size:12.5px; color:var(--ink-3); margin:4px 0} .prov-body .kv b{color:var(--ink-2); font-weight:600}
  .rels{margin-top:12px; display:flex; flex-direction:column; gap:6px}
  .rel{font-size:12.5px; color:var(--ink-2); display:flex; gap:8px; align-items:baseline}
  .rel .r{color:var(--purple-txt); font-family:var(--font-mono); font-size:11.5px} .rel .to{font-family:var(--font-mono); color:var(--ink)}
  @media(max-width:760px){.prov-head{flex-wrap:wrap} .prov-body{padding-left:16px} .prov .hbadges{width:100%; justify-content:flex-start}}
  /* Acts & provisions - collapsible Act group holding its provision rows.
     No enclosing border. A page of these is a list of Acts, not a stack of framed
     cards, and boxing each one drew four hard edges around content that is already
     separated by its own fill and by the space between groups. The panel fill and
     the radius do the bounding; the hairlines that remain inside (head to body, and
     row to row) are the ones that carry meaning, so they stay. */
  .actgrp{border-radius:var(--radius); background:var(--panel); margin:0 0 var(--gap-card); overflow:hidden}
  .actgrp-head{display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; user-select:none}
  .actgrp-head:hover{background:var(--panel-2)}
  .ag-chev{display:inline-flex; color:var(--ink-3); transition:transform .18s; flex:none}
  .ag-chev svg.lu{width:15px; height:15px}
  .actgrp.open .ag-chev{transform:rotate(180deg)}
  .actgrp-head .dot{flex:none}
  .ag-title{font-size:15.5px; font-weight:650; color:var(--ink); letter-spacing:-.01em}
  .ag-year{color:var(--ink-3); font-weight:400; font-size:12.5px; margin-left:3px}
  .ag-status{font-size:12px; color:var(--ink-3)}
  .ag-count{margin-left:auto; font-size:11.5px; color:var(--ink-3); background:var(--panel-2); padding:1px 8px; border-radius:20px; flex:none}
  .actgrp-body{display:none; padding:6px 14px 12px; border-top:1px solid var(--line)}
  .actgrp.open .actgrp-body{display:block}
  .ag-openfull{margin:8px 0 10px}
  /* Provision rows sit flat inside the Act group, not as nested cards. A standalone
     .prov is a raised card and picks up --shadow-raised from the shared card rule
     below; once it is flattened here that shadow has no card to lift, so it painted a
     black hairline along the bottom and sides of every row - a border in all but name,
     and the one thing in dark that actually reads as black. The border-top is the
     separator between rows and is deliberate; the shadow is not. */
  .actgrp-body .prov{border:none; border-radius:0; background:transparent; box-shadow:none; margin:0; border-top:1px solid var(--line-2)}
  .actgrp-body .prov:first-of-type{border-top:none}
  .actgrp-body .prov-head{padding:12px 6px}
  .actgrp-body .prov-body{padding-left:6px; padding-right:6px}
  @media(min-width:761px){.actgrp-body .prov-body{padding-left:120px}}

  /* statute text (loaded live from the .akn.xml file) */
  .statute{margin-top:14px; border:1px solid var(--line); border-radius:var(--radius-inner); background:var(--panel-2); padding:var(--pad-tight)}
  .statute .st-src{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; display:flex; align-items:center; gap:7px; flex-wrap:wrap}
  .statute .st-h{font-size:14px; font-weight:650; color:var(--ink); margin-bottom:9px; line-height:1.4}
  .statute .st-h .st-num{color:var(--brand); font-family:var(--font-mono); margin-right:6px}
  .statute .st-p{margin:7px 0; font-size:13px; color:var(--ink-2); line-height:1.6}
  .statute-mini .st-p{font-size:12.5px}
  /* nested clause lists - one continuous rail per level, hanging markers */
  .lgroup{margin:2px 0; padding-left:22px}
  .litem{display:flex; gap:12px; margin:7px 0; font-size:13px; line-height:1.6; color:var(--ink-2)}
  .lmark{flex:none; min-width:26px; color:var(--ink-3); font-variant-numeric:tabular-nums}
  .ltext{flex:1; min-width:0}
  .statute-mini .litem{font-size:12.5px}
  /* statutory annotations - Explanation / Proviso / Illustration, set apart from enacting text */
  .legnote{margin:9px 0; padding:9px 13px; border-radius:8px; background:color-mix(in srgb,var(--ink-3) 8%,var(--panel-2)); border:1px solid var(--line)}
  .legnote .lnl{display:block; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--ink-3); margin-bottom:3px}
  .legnote .lnt{display:block; font-size:12.5px; color:var(--ink-2); line-height:1.6; font-style:italic}
  /* case law */
  .case{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:var(--pad-card); margin-bottom:10px; box-shadow:var(--shadow-raised)}
  .case .cn{font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
  .case .cmeta{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:6px 0 10px}
  /* every case-meta tag shares one size and shape; only the status tag carries colour */
  .case .cmeta > .cite, .case .cmeta > .badge{height:22px; padding:0 9px; border-radius:6px; border-width:1px; border-style:solid; font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; box-sizing:border-box; white-space:nowrap; gap:5px}
  .case .cite{font-family:var(--font-mono); color:var(--ink-2); background:var(--panel-2); border-color:var(--line-2); cursor:default}
  .case .hold{font-size:13.5px; color:var(--ink-2); line-height:1.55}
  .case .construes{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
  .case .clabel{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-right:2px; align-self:center}
  .cchip{font-size:11.5px; font-family:var(--font-mono); padding:3px 9px; border-radius:7px; border:1px solid var(--line-2); background:var(--panel-2); color:var(--link); cursor:pointer}
  .cchip:hover{border-color:var(--brand); color:var(--brand-hi)}
  /* hover-preview popover: peek a construed section in place, no navigation */
  .provpop{position:fixed; z-index:80; max-width:430px; max-height:min(60vh,420px); overflow:auto; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-modal); padding:13px 15px; opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .12s ease, transform .12s ease; pointer-events:none}
  .provpop.show{opacity:1; visibility:visible; transform:none; pointer-events:auto}
  .provpop .statute{margin:0}
  .provpop .view-full{margin-top:10px}
  /* vocabulary auto-links in prose */
  .vocab-term{border-bottom:1px dotted var(--ink-3); cursor:pointer; transition:color .12s, border-color .12s}
  .vocab-term:hover{color:var(--brand-hi); border-bottom-color:var(--brand-hi)}
  .vocabpop{position:fixed; z-index:82; max-width:300px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-inner); box-shadow:var(--shadow-modal); padding:11px 13px; opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .12s ease, transform .12s ease; pointer-events:none; cursor:pointer}
  .vocabpop.show{opacity:1; visibility:visible; transform:none; pointer-events:auto}
  .vocabpop .vp-word{font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px; display:flex; align-items:center; gap:7px; letter-spacing:-.01em}
  .vocabpop .vp-scope{font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--purple-txt); background:var(--purple-dim); border:1px solid var(--purple-border); border-radius:5px; padding:1px 6px}
  .vocabpop .vp-scope.vp-nat{color:var(--blue-txt); background:var(--blue-dim); border-color:var(--blue-border)}
  .vocabpop .vp-gloss{font-size:12.5px; color:var(--ink-2); line-height:1.5}
  .vocabpop .vp-go{font-size:11px; color:var(--brand-hi); margin-top:9px; font-weight:600; display:flex; align-items:center; gap:5px}
  .vocabpop .vp-go svg.lu{width:12px; height:12px}
  .word-flash{outline:2px solid var(--brand); outline-offset:2px}
  .case .rels-c{margin-top:9px; font-size:12px; color:var(--ink-3)}
  .case .cite.neutral{color:var(--ink-2)}
  .case .cactions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; padding-top:11px; border-top:1px solid var(--line)}
  .readjmt{font-size:12.5px; font-weight:600; color:var(--brand-hi); cursor:pointer; display:inline-flex; align-items:center; gap:5px}
  .readjmt:before{content:"§"; font-family:var(--font-mono); opacity:.7}
  .readjmt:hover{text-decoration:underline}
  .jdec{font-size:11.5px; color:var(--ink-3); font-family:var(--font-mono)}
  .jwarn{font-size:12px; color:var(--amber-txt)}
  /* judgment modal */
  .jcap{padding:2px 0 14px; margin-bottom:8px; border-bottom:1px solid var(--line)}
  .jcap .jrow{font-size:12.5px; color:var(--ink-2); font-family:var(--font-mono); line-height:1.7}
  .jcap .jrow.strong{color:var(--ink); font-weight:600}
  .jpara{margin:12px 0}
  .jpara .jp{font-size:14px; line-height:1.68; color:var(--ink-2)}
  .jpara .jnum{display:inline-block; min-width:26px; color:var(--brand-hi); font-family:var(--font-mono); font-weight:600; font-size:12.5px; vertical-align:top}
  .b-bench{color:var(--ink-2); background:var(--panel-2); border-color:var(--line-2)}
  .b-good{color:var(--green-txt); background:var(--green-dim); border-color:var(--green-border)}
  .b-partly{color:var(--amber-txt); background:var(--amber-dim); border-color:var(--amber-border)}
  .b-overruled{color:#ff9592; background:var(--red-dim); border-color:var(--red-border)}
  .b-super{color:var(--ink-2); background:var(--panel-2); border-color:var(--line-2)}
  .b-topic{color:var(--ink-2); background:var(--panel-2); border-color:var(--line-2)}
  /* interpreted-by block on a provision */
  .interp{margin-top:14px; padding:11px 14px; background:color-mix(in srgb,var(--brand) 5%,var(--panel-2)); border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line)); border-radius:var(--radius-inner)}
  .interp .il{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-hi); font-weight:700; margin-bottom:6px}
  .interp .ic{font-size:13px; color:var(--ink-2); margin:5px 0; cursor:pointer; display:flex; gap:8px; align-items:baseline}
  .interp .ic:hover .icn{color:var(--brand-hi)}
  .interp .icn{font-weight:600; color:var(--ink)}
  .interp .icy{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); flex:none}
  .view-full{margin-top:12px; display:inline-flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--line-2); color:var(--link); border-radius:8px; height:34px; padding:0 13px; line-height:1; font-size:12.5px; font-weight:600; cursor:pointer; font-family:var(--font-sans)}
  .view-full:hover{border-color:var(--brand); background:var(--brand-dim); color:var(--brand-hi)}

  .word{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:var(--pad-card); margin-bottom:9px}
  .word .wt{font-size:17px; font-weight:700; color:var(--ink); display:flex; align-items:center; flex-wrap:wrap; gap:7px; cursor:pointer; letter-spacing:-.01em}
  .word .wname{margin-right:1px}
  .word .caret{color:var(--ink-2); margin-left:auto; transition:transform .15s; display:inline-flex} .word.open .caret{transform:rotate(90deg)}
  .word .def{color:var(--ink-2); font-size:13.5px; margin:6px 0 8px}
  .word .waka{display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:0 0 9px}
  .word .waka-lbl{font-size:10px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:var(--ink-3)}
  .word .waka-t{font-size:11.5px; color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:1px 7px; white-space:nowrap}
  .word .src{font-size:12px; color:var(--ink-3); line-height:1.6}
  /* the whole citation is one quiet reference - section, separator and instrument together */
  .src-ref{color:var(--ink-2); cursor:pointer; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--ink-3) 40%,transparent); text-underline-offset:2px; transition:color .12s, text-decoration-color .12s}
  .src-ref:hover{color:var(--brand-hi); text-decoration-color:var(--brand)}
  .src-ref .sr-sec, .word .src .sr-sec{font-family:var(--font-mono)}
  .src-note{cursor:pointer; color:var(--ink-3); text-decoration:underline; text-underline-offset:2px; white-space:nowrap} .src-note:hover{color:var(--brand-hi)} .src-note svg.lu{width:12px; height:12px; vertical-align:-2px; margin-right:2px}
  .word .wfull{display:none; margin-top:10px} .word.open .wfull{display:block}

  .split{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  @media(max-width:820px){.split{grid-template-columns:1fr}}
  .split .col{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
  .split .col.core{border-color:var(--blue-border)} .split .col.state{border-color:var(--green-border)}
  .split .col-top{padding:14px 18px; border-bottom:1px solid var(--line)}
  .split .col.core .col-top{background:color-mix(in srgb,var(--blue) 8%,var(--panel))} .split .col.state .col-top{background:color-mix(in srgb,var(--green) 8%,var(--panel))}
  .split .col-top h3{margin:0; font-size:16px} .split .col-top p{margin:4px 0 0; font-size:12.5px; color:var(--ink-2)}
  .split .row{padding:12px 18px; border-bottom:1px solid var(--line); font-size:13.5px} .split .row:last-child{border-bottom:none}
  .split .row b{display:block; font-size:13.5px; margin-bottom:2px} .split .row span{color:var(--ink-3); font-size:12.5px}

  .statecards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-top:6px}
  .sc{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:15px 16px}
  .sc h4{margin:0 0 2px; font-size:15px; display:flex; align-items:center; gap:8px}
  .sc .st{font-size:12px; color:var(--ink-3); margin-bottom:8px} .sc p{font-size:13px; color:var(--ink-2); margin:0}

  .callout{--acc:var(--blue); background:color-mix(in srgb,var(--acc) 6%,var(--panel)); border:1px solid color-mix(in srgb,var(--acc) 26%,var(--line)); padding:13px 16px; border-radius:10px; margin:14px 0; font-size:13.5px; color:var(--ink-2)}
  .callout b{color:var(--ink)}
  .callout.amber{--acc:var(--amber)} .callout.green{--acc:var(--green)} .callout.teal{--acc:var(--brand)}
  .empty{color:var(--ink-3); font-size:14px; padding:40px 30px; text-align:center; border:1px dashed var(--line); border-radius:var(--radius)}
  /* local practice - conversation snippets */
  .pnotes{display:flex; flex-direction:column; gap:12px}
  .pnote{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:var(--pad-card); transition:border-color .15s}
  .pnote:hover{border-color:var(--line-2)}
  .pn-top{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 9px}
  .pn-serial{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.03em; color:var(--ink-3); background:var(--panel-2); border:1px solid var(--line-2); border-radius:5px; padding:1px 7px; flex:none}
  .pn-tags{display:flex; flex-wrap:wrap; gap:6px}
  .pn-tag{font-size:10px; letter-spacing:.03em; text-transform:uppercase; font-weight:700; color:var(--ink-3); background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:1px 8px}
  .pn-q{display:flex; gap:11px; margin:0; font-size:15.5px; line-height:1.5; color:var(--ink); font-style:italic}
  .pn-q .pn-q-ico{flex:none; display:inline-flex; margin-top:3px} .pn-q svg.lu{width:18px; height:18px; color:var(--brand); opacity:.85}
  .pn-q-t.is-clamped{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .pn-more{margin:6px 0 0 29px; padding:0; border:0; background:none; font:inherit; font-size:12px; color:var(--brand-hi); cursor:pointer; font-style:normal} .pn-more:hover{text-decoration:underline}
  .pn-who{font-size:12.5px; color:var(--ink-3); margin:10px 0 0; padding-left:29px}
  .pn-2nd{font-size:10.5px; color:var(--amber); background:color-mix(in srgb,var(--amber) 12%,transparent); border:1px solid color-mix(in srgb,var(--amber) 30%,transparent); border-radius:20px; padding:1px 8px; margin-left:6px; white-space:nowrap}
  /* accordion: Verification / What it changed / Across states */
  .pn-acc{margin-top:13px; border-top:1px solid var(--line-2)}
  .pn-acc-head{display:flex; align-items:baseline; gap:12px; width:100%; padding:12px 0 0; border:0; background:none; font:inherit; text-align:left; cursor:pointer; color:var(--ink-2)}
  .pn-acc-head:hover .pn-acc-title{color:var(--ink)}
  .pn-acc-title{flex:none; font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--ink-3)}
  .pn-acc-n{margin-left:5px; color:var(--ink-2)}
  .pn-acc-peek{flex:1 1 auto; min-width:0; font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .pn-acc-chev{flex:none; margin-left:auto; color:var(--ink-3); display:inline-flex; transition:transform .18s} .pn-acc-chev svg.lu{width:15px; height:15px}
  .pn-acc.open .pn-acc-chev{transform:rotate(180deg)}
  .pn-acc.open .pn-acc-peek{display:none}
  .pn-acc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .22s ease}
  .pn-acc.open .pn-acc-body{grid-template-rows:1fr}
  .pn-acc-inner{overflow:hidden; min-height:0} .pn-acc.open .pn-acc-inner{padding-top:11px}
  /* the at-a-glance verification tally (shown collapsed) */
  .pn-tally{flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:12px}
  .pn-tstat{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); white-space:nowrap}
  .pn-dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--ink-3)}
  .pn-tstat-corroborated .pn-dot{background:var(--brand)}
  .pn-tstat-contradicted .pn-dot{background:var(--red)}
  .pn-tstat-reported-allegation .pn-dot,.pn-tstat-needs-check .pn-dot,.pn-tstat-unverified .pn-dot{background:var(--amber)}
  .pn-tstat-contradicted{color:var(--red); font-weight:600}
  /* expanded detail - clean bullet lists, no pills, minimal colour */
  .pn-claims{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
  .pn-claim{display:flex; gap:10px; margin:0}
  .pn-claim>.pn-dot{margin-top:6px}
  .pn-st-corroborated>.pn-dot,.pn-st-verified>.pn-dot,.pn-st-similar>.pn-dot{background:var(--brand)}
  .pn-st-contradicted>.pn-dot{background:var(--red)}
  .pn-st-reported-allegation>.pn-dot,.pn-st-needs-check>.pn-dot,.pn-st-unverified>.pn-dot,.pn-st-diverges>.pn-dot{background:var(--amber)}
  .pn-claim-body{flex:1 1 auto; min-width:0}
  .pn-claim-hd{font-size:13px; color:var(--ink); line-height:1.5}
  .pn-claim-st{font-size:10px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:var(--ink-3); margin-right:7px}
  .pn-st-contradicted .pn-claim-st{color:var(--red)}
  .pn-claim-sub{font-size:12px; color:var(--ink-3); line-height:1.55; margin:4px 0 0}
  .pn-bullets{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
  .pn-bullets li{position:relative; padding-left:15px; font-size:13px; line-height:1.5}
  .pn-bullets li::before{content:""; position:absolute; left:2px; top:8px; width:4px; height:4px; border-radius:50%; background:var(--ink-3)}
  /* plain, un-pilled citations + change links inside the detail */
  .pn-acc-inner .cite{font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--brand); background:none; border:0; border-radius:0; padding:0; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--brand) 35%,transparent); text-underline-offset:2px}
  .pn-acc-inner .cite:hover{background:none; text-decoration-color:var(--brand)}
  .pn-change{color:var(--ink-2); font-size:13px; background:none; border:0; padding:0}
  a.pn-change{cursor:pointer; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--ink-3) 55%,transparent); text-underline-offset:2px} a.pn-change:hover{color:var(--brand-hi); text-decoration-color:var(--brand)}
  @media (prefers-reduced-motion:reduce){ .pn-acc-body,.pn-acc-chev{transition:none} }
  .legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--ink-2); margin:10px 0 4px}
  .legend span{display:flex; align-items:center; gap:6px}
  .backlink{cursor:pointer; font-size:12.5px; color:var(--ink-3)}
  .card,.prov,.ctcard,.part,.word,.sc,.lens,.scopebar,.timeline,.split .col{box-shadow:var(--shadow-raised)}

  /* load / error panel */
  .loadbox{max-width:640px; margin:60px auto; text-align:center; color:var(--ink-2)}
  .loadbox h2{color:var(--ink); font-size:20px; margin:0 0 10px}
  .loadbox code{font-family:var(--font-mono); background:var(--panel-2); border:1px solid var(--line); padding:2px 7px; border-radius:6px; color:var(--brand)}
  .loadbox .cmd{margin:16px auto; text-align:left; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-inner); padding:var(--pad-card); font-family:var(--font-mono); font-size:13px; color:var(--ink)}
  .spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* full-act modal */
  .modal{position:fixed; inset:0; z-index:100; display:none}
  .modal.show{display:block}
  .modal-back{position:absolute; inset:0; background:rgba(0,0,0,.55)}
  .modal-panel{position:absolute; top:4vh; bottom:4vh; left:50%; transform:translateX(-50%); width:min(1080px,94vw); background:var(--panel); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--shadow-modal); display:flex; flex-direction:column; overflow:hidden}
  .modal-tools{position:absolute; top:14px; right:16px; z-index:3; display:flex; align-items:center; gap:8px}
  .modal-x{display:inline-flex; align-items:center; height:32px; padding:0 12px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink-2); border-radius:8px; cursor:pointer; font-size:12.5px; font-family:var(--font-sans)}
  .modal-x:hover{color:var(--ink)}
  #modal-pdf{margin:0; height:32px; padding:0 12px; color:var(--ink-2)}    /* match Close exactly */
  #modal-pdf svg.lu{width:14px; height:14px; opacity:.85}
  #modal-pdf[hidden]{display:none}
  .modal-body{overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--ink-3) 40%,transparent) transparent}
  .modal-body::-webkit-scrollbar{width:10px}
  .modal-body::-webkit-scrollbar-track{background:transparent}
  .modal-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-3) 26%,transparent); border-radius:20px; border:3px solid transparent; background-clip:padding-box}
  .modal-body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink-3) 50%,transparent); background-clip:padding-box}
  /* subtle "Original PDF" button in Act / judgment modals */
  .pdf-orig{margin-top:11px; display:inline-flex; align-items:center; gap:7px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink-2); border-radius:8px; height:34px; padding:0 13px; line-height:1; cursor:pointer; font-family:var(--font-sans); font-size:12.5px}
  .pdf-orig:hover{border-color:var(--brand-border); color:var(--ink)}
  .pdf-orig svg.lu{width:14px; height:14px; opacity:.85}
  /* state-layer instruments (State rules / amendments / notifications) */
  .instruments{display:flex; flex-direction:column; gap:12px; margin-top:6px}
  .instrument{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:15px 18px}
  .inst-title{font-size:15.5px; font-weight:650; color:var(--ink); letter-spacing:-.01em}
  .inst-cite{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}
  .inst-note{font-size:13.5px; color:var(--ink-2); line-height:1.55; margin:10px 0 0}
  .inst-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:13px}
  .stdoc{display:inline-flex; align-items:center; gap:7px; background:var(--brand-dim); border:1px solid var(--brand-border); color:var(--brand-hi); border-radius:8px; height:34px; padding:0 14px; line-height:1; cursor:pointer; font-family:var(--font-sans); font-size:12.5px; font-weight:600}
  .stdoc:hover{border-color:var(--brand)}
  .stdoc svg.lu{width:14px; height:14px}
  .st-inpar{margin-top:12px}
  .inst-actions .pdf-orig{margin-top:0}
  .ad-loading{padding:80px 30px; text-align:center; color:var(--ink-3)}
  .actdoc-h{position:sticky; top:0; background:var(--panel); border-bottom:1px solid var(--line); padding:20px 30px 15px; z-index:2}
  .ad-title{font-size:21px; font-weight:700; color:var(--ink); letter-spacing:-.01em; padding-right:150px}
  .ad-sub{font-size:12.5px; color:var(--ink-3); margin-top:4px}
  .actdoc-body{padding:8px 30px 50px}
  .ad-chap{font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--brand); font-weight:700; margin:26px 0 10px; padding-bottom:7px; border-bottom:1px solid var(--line)}
  .ad-sec{padding:12px 14px; margin:6px -14px; border-radius:var(--radius-inner); scroll-margin-top:16px}
  .ad-sec.focus{background:var(--brand-dim); outline:1px solid var(--brand-border)}
  .ad-sec-h{font-size:14.5px; font-weight:650; color:var(--ink); margin-bottom:5px; line-height:1.4}
  .ad-num{color:var(--brand); font-family:var(--font-mono); margin-right:6px}
  .ad-p{font-size:13px; color:var(--ink-2); line-height:1.6; margin:6px 0}
  .ad-li{font-size:13px; color:var(--ink-2); line-height:1.55; margin:4px 0; padding-left:16px}
  .ad-focus-tag{font-size:10.5px; font-weight:600; color:var(--brand-hi); background:var(--brand-dim); border:1px solid var(--brand-border); border-radius:5px; padding:1px 6px; margin-left:8px; vertical-align:middle}
  .hide{display:none!important}

/* ============================================================ STATE STORY */
.story-sec-h{margin:36px 0 16px; padding-bottom:10px; border-bottom:1px solid var(--line); scroll-margin-top:24px; border-radius:6px; transition:background .3s ease}
.story-sec-h.sec-flash{background:color-mix(in srgb,var(--brand) 12%,transparent)}
@media(max-width:880px){ .story-sec-h{scroll-margin-top:64px} }
/* the roles: who does what, and the provision each is drawn from */
.role-block{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.role-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:var(--pad-card); display:flex; flex-direction:column}
.role-top{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.role-ico{flex:none; width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink-2)}
.role-ico svg.lu{width:16px; height:16px}
.role-id{min-width:0}
.role-cat{font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-top:2px}
.role-name{font-size:14.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
/* per-category colour on the icon badge + label */
.role-litigant .role-ico{color:var(--blue-txt); background:var(--blue-dim); border-color:var(--blue-border)} .role-litigant .role-cat{color:var(--blue-txt)}
.role-advocate .role-ico, .role-advclerk .role-ico{color:var(--brand-hi); background:var(--brand-dim); border-color:var(--brand-border)} .role-advocate .role-cat, .role-advclerk .role-cat{color:var(--brand-hi)}
.role-judge .role-ico{color:var(--amber-txt); background:var(--amber-dim); border-color:var(--amber-border)} .role-judge .role-cat{color:var(--amber-txt)}
.role-staff .role-ico{color:var(--purple-txt); background:var(--purple-dim); border-color:var(--purple-border)} .role-staff .role-cat{color:var(--purple-txt)}
.role-police .role-ico{color:var(--red); background:var(--red-dim); border-color:var(--red-border)} .role-police .role-cat{color:var(--red)}
.role-bank .role-ico{color:var(--green-txt); background:var(--green-dim); border-color:var(--green-border)} .role-bank .role-cat{color:var(--green-txt)}
.role-who{font-size:13px; color:var(--ink-2); line-height:1.55; margin-bottom:14px}
.role-src{display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:auto}
.role-src-l{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--ink-3)}
.role-basis{font-size:12px; font-style:italic; color:var(--ink-3); line-height:1.5}
/* institutions: police & courts - hierarchy ladders + role rows, each grounded in a provision */
.inst{display:flex; flex-direction:column; gap:16px; margin-top:6px}
.inst-block{border:1px solid var(--line); border-radius:13px; background:var(--panel); padding:16px 18px}
.inst-eyebrow{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--ink)}
.inst-eyebrow svg.lu{width:17px; height:17px; color:var(--brand-hi)}
.inst-summary{font-size:13px; color:var(--ink-2); line-height:1.55; margin:8px 0 4px}
.inst-group{margin-top:16px}
.inst-sub-label{font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--ink-3); margin-bottom:10px}
.inst-ladder{display:flex; flex-direction:column; gap:2px}
.inst-row{display:flex; gap:12px; padding:10px 4px; border-top:1px solid var(--line-2)}
.inst-row:first-child{border-top:0}
.inst-idx{flex:none; width:22px; height:22px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line); color:var(--ink-3); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px}
.inst-dot{flex:none; width:6px; height:6px; border-radius:50%; background:var(--brand-dim); margin:9px 8px 0 8px}
.inst-body{flex:1; min-width:0}
.inst-hd{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.inst-name{font-size:14px; font-weight:650; color:var(--ink)}
.inst-svc{font-size:9.5px; letter-spacing:.05em; font-weight:700; color:var(--brand-hi); text-transform:uppercase}
.inst-aka{font-size:11.5px; color:var(--ink-3)}
.inst-who{font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-top:3px}
.inst-line{font-size:12px; color:var(--ink-2); line-height:1.5; margin-top:3px}
.inst-line .inst-l{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--ink-3); margin-right:5px}
.inst-cite{margin-top:7px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* Police / Courts pages */
.backlink{display:inline-block; font-size:12.5px; color:var(--ink-3); cursor:pointer; margin-bottom:8px; text-decoration:none}
.backlink:hover{color:var(--brand-hi)}
/* roles accordion + police/courts link cards on the story page */
.story-acc{cursor:pointer; user-select:none; display:flex; align-items:center}
.story-acc .story-acc-chev{margin-left:auto; color:var(--ink-3); transition:transform .2s}
.story-acc.open .story-acc-chev{transform:rotate(180deg)}
.story-acc-chev svg.lu{width:15px; height:15px}
.story-acc-n{font-size:11px; font-weight:600; color:var(--ink-3); background:var(--panel-2); border-radius:20px; padding:1px 8px; margin-left:4px}
.story-acc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease}
.story-acc-body>.role-block{overflow:hidden; min-height:0}
.story-acc-body.open{grid-template-rows:1fr; margin-top:14px}
.inst-links{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px}
.inst-link{display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:13px 15px; cursor:pointer; text-decoration:none; transition:border-color .15s}
/* the whole card is an <a>, so the global a:hover underline would strike through
   the title and the summary - the border colour is the hover signal instead */
.inst-link:hover,.inst-link:hover *{text-decoration:none}
.inst-link:hover{border-color:var(--brand-border); background:var(--panel-2)}
.inst-link-hd{display:flex; align-items:center; gap:9px}
.inst-link-ico svg.lu{width:16px; height:16px; color:var(--brand-hi)}
.inst-link-t{font-size:14px; font-weight:650; color:var(--ink)}
.inst-link-arrow{margin-left:auto; color:var(--ink-3)} .inst-link-arrow svg.lu{width:15px; height:15px}
.inst-link-sub{font-size:11.5px; color:var(--ink-3); line-height:1.45; margin-top:6px}
@media (max-width:640px){ .inst-links{grid-template-columns:1fr} }
.role-flag{font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; font-weight:700; color:var(--amber); background:color-mix(in srgb,var(--amber) 12%,transparent); border:1px solid color-mix(in srgb,var(--amber) 30%,transparent); border-radius:5px; padding:1px 7px}
.role-prov{font-size:11px; color:var(--ink-3); cursor:pointer; display:inline-flex; align-items:center; gap:4px} .role-prov:hover{color:var(--brand-hi)} .role-prov svg.lu{width:12px; height:12px}
.story-sec-h>span:first-child{display:block; font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink)}
.story-sec-h .ssh-sub{display:block; margin-top:5px; font-size:13px; color:var(--ink-2); font-weight:400; max-width:760px; line-height:1.55}
/* process timeline: a numbered spine, each stage carrying prescribed vs actual timings */
.timeline{position:relative; margin:8px 0 2px}
.tl-item{position:relative; display:grid; grid-template-columns:38px 1fr; gap:16px; padding-bottom:26px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:18px; top:40px; bottom:-2px; width:2px; background:var(--line-2)}
.tl-item:last-child::before{display:none}
.tl-marker{width:38px; height:38px; border-radius:50%; background:var(--brand-dim); color:var(--brand-hi); border:1px solid var(--brand-border); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; z-index:1}
.tl-content{min-width:0; padding-top:6px}
.tl-stage-title{font-size:15.5px; font-weight:700; color:var(--ink); letter-spacing:-.01em; margin-bottom:3px}
/* process lens tabs */
.proc-section{position:relative}
.proc-sentinel{height:0}
/* the lens tabs pin to the top while scrolling the process, dock to the right when stuck, and release at the section end */
.proc-tabs{display:flex; width:fit-content; gap:2px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); padding:3px; margin:2px 0 18px; max-width:100%; position:sticky; top:14px; z-index:6; transition:transform .25s ease, box-shadow .2s ease}
.proc-tabs.is-stuck{box-shadow:var(--shadow-modal)}
.proc-tab{display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; padding:6px 15px; border:none; background:transparent; border-radius:8px; color:var(--ink-2); font-family:inherit; cursor:pointer; text-align:left}
.proc-tab .pt-main{font-size:13px; font-weight:600; line-height:1.25}
.proc-tab .pt-sub{font-size:9.5px; font-weight:500; color:var(--ink-3); letter-spacing:.02em}
.proc-tab:hover{color:var(--ink)}
.proc-tab.on{background:var(--panel); box-shadow:var(--shadow-raised)}
.proc-tab.on.tab-prescribed .pt-main{color:var(--blue-txt)}
.proc-tab.on.tab-regular .pt-main{color:var(--amber-txt)}
.proc-tab.on.tab-oncourt .pt-main{color:var(--brand-hi)}
/* per-stage timing: only the active lens is shown, coloured to match its tab */
.tl-timing{display:flex; align-items:center; margin:0 0 9px; font-size:13px}
.tl-t{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.timeline.lens-prescribed .tl-t:not(.tl-presc){display:none}
.timeline.lens-regular .tl-t:not(.tl-reg){display:none}
.timeline.lens-oncourt .tl-t:not(.tl-on){display:none}
.tl-tclock{display:inline-flex; align-items:center; color:var(--ink-3)}
.tl-tclock svg.lu{width:13px; height:13px}
.tl-tval{color:var(--ink-2); font-weight:500}
.timeline.lens-prescribed .tl-tclock{color:var(--blue-txt)}
.timeline.lens-regular .tl-tclock{color:var(--amber-txt)}
.timeline.lens-oncourt .tl-tclock{color:var(--brand-hi)}
.tl-steps{border-top:1px dashed var(--line)}
@media(max-width:880px){ .proc-tabs{top:64px} }
@media(max-width:560px){ .proc-tabs{display:flex; width:100%} .proc-tab{flex:1; padding:6px 8px} }
.pstep{padding:12px 0; border-bottom:1px dashed var(--line)}
.tl-steps .pstep:last-child{padding-bottom:0}
.pstep:last-child{border-bottom:0}
.pstep-t{font-size:14px; color:var(--ink); line-height:1.5; margin-bottom:8px}
.cites{display:flex; flex-wrap:wrap; gap:7px}
.cite{display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,transparent); border:1px solid var(--brand-border); border-radius:6px; padding:2px 8px; cursor:pointer; text-decoration:none; transition:background .12s}
.cite:hover{background:color-mix(in srgb,var(--brand) 18%,transparent)}
.cite-plain,.cite-none{color:var(--ink-3); background:transparent; border-color:var(--line); cursor:default; font-weight:500}
.cite-none{font-family:inherit; font-style:italic; font-size:12.5px}
.fee-block{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel)}
.fee-cite{font-size:12px; color:var(--ink-2); padding:10px 16px; background:var(--panel-2); border-bottom:1px solid var(--line)}
.fee-row{display:flex; justify-content:space-between; gap:18px; padding:12px 16px; border-bottom:1px dashed var(--line); font-size:14px}
.fee-row:last-child{border-bottom:0}
.fee-stage{color:var(--ink); font-weight:600; flex:0 0 auto}
.fee-amt{color:var(--ink-2); text-align:right}
.story-note{font-size:12.5px; color:var(--ink-3); font-style:italic; line-height:1.5}
.story-note-loose{margin:14px 0 0}
/* note that sits inside the bordered fee block: give it real padding + a divider */
.fee-block .story-note{margin:0; padding:11px 16px; border-top:1px solid var(--line)}
.caseload-wrap + .story-note{margin:12px 0 0}
.court-block{display:flex; flex-wrap:wrap; gap:12px}
.court-card{border:1px solid var(--brand-border); border-radius:var(--radius); background:color-mix(in srgb,var(--brand) 5%,var(--panel)); padding:14px 16px; min-width:260px; flex:1 1 300px}
.court-name{font-size:15px; font-weight:700; color:var(--ink); margin-bottom:6px}
.court-loc{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); margin-bottom:8px}
.court-loc svg{width:14px; height:14px}
.court-basis{font-size:13px; color:var(--ink-2); line-height:1.5; margin-bottom:10px}
.caseload-wrap{overflow-x:auto}
table.caseload{width:100%; border-collapse:collapse; font-size:13.5px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
table.caseload th{text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding:11px 14px; background:var(--panel-2); border-bottom:1px solid var(--line)}
table.caseload td{padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink)}
table.caseload tr:last-child td{border-bottom:0}
table.caseload td.ph{color:var(--ink-3); font-family:var(--font-mono); text-align:center; background:color-mix(in srgb,var(--amber) 5%,transparent)}

  /* ============================ The 138 map (React Flow) ============================ */
  .nav-map-wrap{margin-top:8px; margin-bottom:2px}
  .nav-map{background:color-mix(in srgb,var(--brand) 11%,var(--panel)); border:1px solid var(--brand-border); color:var(--brand-hi)}
  .nav-map:hover{border-color:var(--brand); background:color-mix(in srgb,var(--brand) 17%,var(--panel)); color:var(--brand-hi)}
  .nav-map .ico{opacity:1}
  .nav-map.active{background:var(--brand-dim); color:var(--brand-hi)}

  /* the map view fills its part of the frame; only a slim bar sits above it */
  .main:has(.view-graph){padding:22px 24px 20px; max-width:none}
  .view-graph{display:flex; flex-direction:column; height:calc(100vh - 44px)}
  .flow-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 2px 12px}
  .flow-bar-l{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
  .flow-bar-hint{font-size:11.5px; color:var(--ink-3)}
  .flow-legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--ink-2)}
  .flow-legend .fl-item{display:inline-flex; align-items:center; gap:6px}
  .flow-legend .fl-dot{width:10px; height:10px; border-radius:3px; flex:none}
  .fl-case{background:#ec5d5e} .fl-national{background:#3b9eff} .fl-law{background:#ffc53d} .fl-rule{background:#0bd8b6} .fl-notification{background:#9e8cff}

  .flow-host{flex:1; min-height:420px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg); position:relative}
  .flow-host:fullscreen{border:none; border-radius:0}
  .flow-loading{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--ink-3)}
  .flow-host .empty{position:absolute; inset:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:none; text-align:center}

  /* boxed nodes: category chip + title, no border accents */
  .rf-node{width:100%; height:100%; box-sizing:border-box; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius); padding:8px 13px; box-shadow:0 2px 6px rgb(0 0 0/.16),0 1px 2px rgb(0 0 0/.22); cursor:pointer; font-family:var(--font-sans); display:flex; flex-direction:column; justify-content:center; gap:4px; overflow:hidden; transition:border-color .12s, box-shadow .12s, transform .12s}
  .rf-node:hover{border-color:var(--ink-3); transform:translateY(-1px); box-shadow:0 8px 20px rgb(0 0 0/.3)}
  .react-flow__node.selected .rf-node{border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 45%,transparent),0 8px 20px rgb(0 0 0/.28)}
  .rf-node-cat{display:flex; align-items:center; gap:6px; font-size:9px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--ink-3)}
  .rf-node-dot{width:8px; height:8px; border-radius:50%; flex:none; background:var(--ink-3); box-shadow:0 0 0 3px color-mix(in srgb,var(--ink-3) 16%,transparent)}
  .rf-node-title{font-size:12.5px; font-weight:650; color:var(--ink); line-height:1.22; letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .rf-case .rf-node-dot{background:#ec5d5e; box-shadow:0 0 0 3px rgb(236 93 94/.2)}
  .rf-national .rf-node-dot{background:#3b9eff; box-shadow:0 0 0 3px rgb(59 158 255/.2)}
  .rf-rule .rf-node-dot{background:#0bd8b6; box-shadow:0 0 0 3px rgb(11 216 182/.2)}
  .rf-law .rf-node-dot{background:#ffc53d; box-shadow:0 0 0 3px rgb(255 197 61/.2)}
  .rf-notification .rf-node-dot{background:#9e8cff; box-shadow:0 0 0 3px rgb(158 140 255/.2)}
  .rf-case{background:color-mix(in srgb,#ec5d5e 9%,var(--panel)); border-color:color-mix(in srgb,#ec5d5e 42%,var(--line-2))}
  .rf-case .rf-node-cat{color:#e06364}
  /* custom edges: subtle line + dots flowing along it + pill labels */
  .rf-edge-line{fill:none; stroke:#727888; stroke-opacity:.30; stroke-width:1.4}
  .rf-flow-dot{fill:var(--brand); filter:drop-shadow(0 0 2px color-mix(in srgb,var(--brand) 60%,transparent))}
  .rf-flow-dot-2{opacity:.85}
  .react-flow__edge:hover .rf-edge-line{stroke-opacity:.6}
  /* edge labels sit above the line work, on an opaque pill, and are readable */
  .react-flow__edgelabel-renderer{z-index:6}
  .rf-elabel{position:absolute; font-size:10.5px; font-weight:600; color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:7px; padding:3px 9px; white-space:nowrap; box-shadow:0 2px 6px rgb(0 0 0/.35); letter-spacing:.01em}
  .rf-elabel-click{cursor:pointer; transition:border-color .12s, color .12s, background .12s}
  .rf-elabel-click:hover{border-color:var(--brand); color:var(--brand-hi); background:color-mix(in srgb,var(--brand) 12%,var(--panel))}

  /* React Flow chrome, themed for the app */
  .react-flow__handle{opacity:0; width:6px; height:6px; border:none}
  .react-flow__attribution{display:none}
  .react-flow__controls{box-shadow:var(--shadow-raised); border-radius:8px; overflow:hidden; border:1px solid var(--line)}
  .react-flow__controls-button{background:var(--panel); border-bottom:1px solid var(--line)}
  .react-flow__controls-button:hover{background:var(--panel-2)}
  .react-flow__controls-button svg{fill:var(--ink-2)}
  .react-flow__minimap{background:var(--panel)!important; border:1px solid var(--line); border-radius:8px}
  @media(max-width:880px){ .view-graph{height:calc(100dvh - 118px)} .flow-bar-hint{display:none} }

  /* ---------- REQUIREMENTS (the normative layer) ----------
     One card, one left edge, one measure. Every line - eyebrow, statement, failure
     mode, binding, footer, and every block behind either disclosure - starts at the
     same x and wraps at the same width, so the card reads as a single column rather
     than three. The id leads, because it is what a reader scans for and cites out
     loud. Colour carries one signal only - status - and a dot carries it, never an
     edge or a fill. */
  /* one measure for the whole card, in px not ch - a ch resolves against each element's
     own font size, which is exactly how the statement, the why and the meta ended up
     wrapping at three different right edges.
     The measure also sets the width of the view. A card wider than the text it holds
     is a card with a hole in it, so the card is exactly the measure plus its own
     padding, and the scope bar, the lede, the search, the facets and the group heads
     are capped at the same number. One column, one right edge, at every width - and
     nothing to re-open the hole when a disclosure grows the card downwards. */
  /* ---- one page, one column ----
     A view is a column of the same width whatever is in it. Requirements used to cap
     itself at a 620px measure while Standards, the tab directly under it in the same
     section, ran to the full column - a 246px difference between two pages a reader
     moves between, which read as two different applications rather than two tabs.
     The cards take the column; prose inside them keeps a reading measure of its own. */
  .view{max-width:none}
  .view .lede{max-width:820px}
  .view-req{--rq-measure:1180px; --rq-pad:18px;
    max-width:calc(var(--rq-measure) + var(--rq-pad)*2 + 2px)}
  .view-req .lede{max-width:var(--measure-prose)}
  .req{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:14px var(--rq-pad) 13px; margin-bottom:var(--gap-card)}
  .req .rq-h{cursor:pointer}
  .rq-eyebrow{display:flex; align-items:center; gap:13px; margin-bottom:6px}
  .rq-id{font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink-2); letter-spacing:.01em}
  .rq-lvl{flex:none; font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--ink-3); white-space:nowrap}
  .rq-stmt{font-size:15.5px; font-weight:650; color:var(--ink); letter-spacing:-.01em; line-height:1.45; max-width:var(--measure-prose)}
  .req .caret{color:var(--ink-3); margin-left:auto; transition:transform .15s; display:inline-flex; flex:none}
  .req .rq-h:hover .caret{color:var(--ink-2)}
  .req.open .caret{transform:rotate(90deg)}
  .rq-why{color:var(--ink-2); font-size:13.5px; line-height:1.6; margin:8px 0 0; max-width:var(--measure-prose)}
  .rq-meta{font-size:12px; color:var(--ink-3); margin-top:9px; max-width:var(--measure-prose)}

  /* the layering, in the open: a statement narrowed somewhere, or narrowing something,
     does not mean what it appears to mean read alone, so it says so without being
     opened. Same block, same left edge, same measure as everything else. */
  .rq-ties{margin-top:13px}
  .rq-ties-row{display:flex; flex-wrap:wrap; gap:5px 20px}
  .rq-tie-g{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px}
  .rq-tie-st{font-weight:600; color:var(--ink-2)}

  /* the two disclosures. The caret opens the build detail; the status line opens the
     grounds. Both stack their label above their value, so nothing indents. */
  .rq-full{display:none; margin-top:14px; padding-top:13px; border-top:1px solid var(--line)}
  .req.open .rq-full{display:block}
  .rq-block{margin-bottom:12px; max-width:var(--measure-prose)}
  .rq-block:last-child{margin-bottom:0}
  .rq-l{display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--ink-3); margin-bottom:4px}
  .rq-v{font-size:13.5px; line-height:1.6; color:var(--ink-2)}
  .rq-v.rq-open{color:var(--ink-3); font-style:italic}
  .rq-rel{display:flex; flex-direction:column; gap:5px}

  /* the status footer: the word, what the word means, and the way in to the grounds */
  .rq-basis-bar{display:flex; align-items:center; flex-wrap:wrap; gap:4px 9px; margin-top:14px; padding-top:11px;
    border-top:1px solid var(--line); font-size:12px; line-height:1.5}
  .rq-basis-bar.has{cursor:pointer}
  .rq-status{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); font-weight:600}
  .rq-dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--line-2)}
  .rq-status.s-inferred .rq-dot{background:var(--amber)}
  .rq-status.s-contested{color:var(--red)}
  .rq-status.s-contested .rq-dot{background:var(--red)}
  .rq-status-gloss{color:var(--ink-3)}
  .rq-more{margin-left:auto; display:inline-flex; align-items:center; gap:5px; color:var(--ink-3); white-space:nowrap; transition:color .12s}
  .rq-more svg{width:13px; height:13px; transition:transform .15s}
  .rq-basis-bar.has:hover .rq-more{color:var(--brand-hi)}
  .rq-basis-bar.open .rq-more{color:var(--ink-2)}
  .rq-basis-bar.has:hover .rq-status-gloss{color:var(--ink-2)}
  .rq-basis-bar.open .rq-more svg{transform:rotate(180deg)}
  .rq-basis{display:none; padding-top:12px}
  .rq-basis.open{display:block}
  /* the grounds read as a list of sources, so the citations are plain underlined
     links here rather than the boxed chips the law views use */
  .rq-basis .cites{flex-direction:column; align-items:flex-start; gap:6px}
  .rq-basis .cite{font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--brand);
    background:none; border:0; border-radius:0; padding:0; text-decoration:underline;
    text-decoration-color:color-mix(in srgb,var(--brand) 35%,transparent); text-underline-offset:3px}
  .rq-basis .cite:hover{color:var(--brand-hi); text-decoration-color:var(--brand)}
  .rq-basis .cite-plain{color:var(--ink-3); text-decoration:none; cursor:default}
  .rq-reason{font-size:13.5px; line-height:1.65; color:var(--ink-2); max-width:var(--measure-prose); margin:0 0 13px}
  .rq-reason:last-child{margin-bottom:0}
  .rq-srcs{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
  .rq-src{cursor:pointer; color:var(--ink-2); transition:color .12s}
  .rq-src .rq-src-n{text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--ink-3) 40%,transparent); text-underline-offset:2px; transition:text-decoration-color .12s}
  .rq-src:hover{color:var(--brand-hi)}
  .rq-src:hover .rq-src-n{text-decoration-color:var(--brand)}
  .rq-src-sub{color:var(--ink-3); font-size:12px; margin-left:7px}

  .rq-jump{color:var(--ink-2); cursor:pointer; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--ink-3) 40%,transparent); text-underline-offset:2px; transition:color .12s, text-decoration-color .12s}
  .rq-jump:hover{color:var(--brand-hi); text-decoration-color:var(--brand)}
  .rq-jid{font-family:var(--font-mono); font-size:11.5px}
  .rq-plain{color:var(--ink-3)}
  @media(max-width:640px){
    .view-req{--rq-pad:15px}
    .req{padding:13px var(--rq-pad) 12px}
    .rq-more{margin-left:0}
  }

  /* ===================== STANDARDS ADHERENCE =====================
     The same card and the same single disclosure as Requirements, because a reader
     moves between the two and the two are the same kind of thing read from different
     ends. What differs is that a standard has no id to cite, no authority to open and
     no state to belong to - so the card is the name, what it means, and behind the
     caret the test and the threshold. Nothing is coloured: the only signal is the caret.

     The measure differs too. Requirements holds a 620px column because its cards carry
     a citation apparatus - chips, tie rows, grounds - that only reads as one column.
     These carry prose, so that column buys nothing and only strands the right half of
     the page. The card takes the width the rest of the app takes, and the disclosure
     splits into two: the method beside the threshold that decides it, each landing at a
     readable measure of its own. That is what the width is for. */
  .view-std{--rq-measure:1180px}
  /* the width is for the cards. The prose above them is still prose, and keeps the
     reading measure the rest of the app gives a lede. */
  .view-std .lede{max-width:770px}
  /* The disclosure splits into two - the method beside the threshold that decides it -
     on Requirements and on Standards alike. They are the same card in the same column
     and a reader moves between them, so the rule belongs to both rather than to
     whichever one happened to be built second. */
  .view-req .rq-full{grid-template-columns:1fr 1fr; gap:2px 40px; align-items:start}
  .view-req .req.open .rq-full{display:grid}
  .view-aip .req.aip.open .rq-full{display:block}   /* its blocks are prose, not a pair */
  /* the sidebar takes ~310px before the column starts, so the split only pays once the
     window is wide enough to leave two columns of about 400px. Below that it stacks. */
  @media(max-width:1240px){ .view-req .rq-full{grid-template-columns:1fr; gap:0} }
  .view-std .std-bar{display:flex; align-items:baseline; gap:12px; margin:14px 0 2px;
    font-size:12px; color:var(--ink-3); max-width:var(--measure-prose)}
  .view-std .std-toggle{margin-left:auto; cursor:pointer; color:var(--ink-3); white-space:nowrap;
    text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--ink-3) 35%,transparent);
    text-underline-offset:3px; transition:color .12s, text-decoration-color .12s}
  .view-std .std-toggle:hover{color:var(--brand-hi); text-decoration-color:var(--brand)}
  /* the group's own sentence, under its head and above its cards */
  .view-std .std-gloss{font-size:13.5px; line-height:1.6; color:var(--ink-2);
    max-width:770px; margin:-4px 0 13px}
  /* The opened body lines up under the regulation's title, not under the law view's
     120px - that indent is sized for its 104px ref chip and this one is 74px, so it
     overshot the title by 27px and the gutter read as an accident. Derived from the
     chip width plus the row padding and the header gap, so it cannot drift apart from
     the header again. */
  .pol-reg{--pol-ref:74px}
  .pol-reg .prov-head .ref{min-width:var(--pol-ref)}
  @media(min-width:761px){
    .actgrp-body .pol-reg .prov-body{padding-left:calc(var(--pol-ref) + 19px)}
  }

  .req.std .rq-h{padding-right:2px}
  .req.std .std-name{display:flex; align-items:flex-start; gap:13px}
  .req.std .std-name .caret{margin-top:3px}

  /* The citation lines, above the caret because they say what the standard IS rather
     than how you meet it: the published spec it comes from, and where Indian law that
     this corpus already holds gives it force. Both are quiet run-in lines with an
     inline label, not blocks - a card with four headed sections stops being a card. */
  .std-spec, .std-anchor, .std-note{font-size:12.5px; line-height:1.65; margin-top:9px;
    color:var(--ink-3); max-width:900px}
  .std-spec{color:var(--ink-2)}
  .std-l{font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
    color:var(--ink-3); margin-right:7px}
  .std-anchor{display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px}
  .std-anchor .cites{display:inline-flex; flex-wrap:wrap; gap:4px 16px}
  .std-anc-act{color:var(--ink-3); font-family:var(--font-sans); font-weight:500; font-size:12.5px}

  /* links out are plain and underlined, never boxed - and the corpus citations here
     take the same treatment, so an internal cite and an external spec read alike */
  .view-std .std-link, .view-std .cite{font-family:inherit; font-size:inherit; font-weight:600;
    color:var(--ink-2); background:none; border:0; border-radius:0; padding:0;
    text-decoration:underline; text-underline-offset:3px;
    text-decoration-color:color-mix(in srgb,var(--ink-3) 45%,transparent); transition:color .12s, text-decoration-color .12s}
  /* .cite is an inline-flex box, so the space between the section number and the Act
     name is a whitespace text node the flex layout drops. The gap puts it back. */
  .view-std .cite{font-family:var(--font-mono); font-size:12px; gap:7px}
  .view-std .std-link:hover, .view-std .cite:hover{color:var(--brand-hi); text-decoration-color:var(--brand)}

  /* the hosted checkers: a list, one per line, because each is a name plus what it
     wants from you and that does not read as a run of chips */
  .std-checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
  .std-checks li{position:relative; padding-left:15px}
  .std-checks li::before{content:""; position:absolute; left:3px; top:8px; width:4px; height:4px;
    border-radius:50%; background:var(--line-2)}
  /* the checkers run the full card, under the two columns that pair method and threshold */
  .view-std .rq-block.std-wide{grid-column:1/-1; margin-top:2px}

  /* ===================== SUB-TABS =====================
     A page that holds more than one tab says so under its title: quiet text, an
     underline on the one you are reading, and nothing else. Not buttons, not pills -
     the strip has to read as a continuation of the heading, not as a control panel. */
  /* the title's own 6px is app-wide and stays; the room between it and the tab strip
     belongs to the strip, so it is set here rather than by changing every page's title */
  .subtabs{display:flex; align-items:center; gap:22px; margin:20px 0 24px;
    border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
  .subtabs::-webkit-scrollbar{display:none}
  .subtab{appearance:none; background:none; border:0; padding:0 0 10px; cursor:pointer;
    font-family:var(--font-sans); font-size:13.5px; font-weight:600; white-space:nowrap;
    color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px;
    transition:color .12s, border-color .12s}
  .subtab:hover{color:var(--ink-2)}
  .subtab.on{color:var(--ink); border-bottom-color:var(--brand)}
  .subtab-n{margin-left:6px; font-family:var(--font-mono); font-size:11px; font-weight:500;
    color:var(--ink-3)}
  .subtab:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:3px}

  /* ===================== AI POLICY COMPLIANCE =====================
     The standards card, with one thing added: a visible seam between what the
     instrument says and what we suggest doing about it. The seam is a label and a
     hairline, never a colour - the point is that a reader can see the two halves are
     different in kind, not that one of them is flagged. */
  /* the bands own the columns here, not the card - so this overrides the two-column
     disclosure the standards cards use, and only when the card is open */
  .view-aip .req.aip.open .rq-full{display:block}
  .aip-sec{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:2px 40px; align-items:start; margin-bottom:14px}
  .aip-sec .rq-block{max-width:620px}
  .aip-band{font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
    color:var(--ink-3); margin:0 0 10px; padding-top:2px}
  .aip-band.aip-ours{margin-top:4px; padding-top:12px; border-top:1px solid var(--line)}
  .aip-band span{text-transform:none; letter-spacing:0; font-weight:500; font-size:11.5px;
    color:var(--ink-3); margin-left:8px}
  .aip-note{max-width:820px; padding-top:12px; border-top:1px solid var(--line)}
  /* the scan lines: who it binds and when, said once, above the caret */
  .aip-facts{display:flex; flex-wrap:wrap; gap:4px 26px; margin-top:9px}
  .aip-f{font-size:12.5px; line-height:1.6; color:var(--ink-2); max-width:640px}
  .aip-cites{display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px; margin-top:7px}
  .aip-cites .cites{display:inline-flex; flex-wrap:wrap; gap:4px 14px}
  /* a citation is a plain underlined link, like every other citation on this page */
  .pcite{font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink-2);
    cursor:pointer; text-decoration:underline; text-underline-offset:3px;
    text-decoration-color:color-mix(in srgb,var(--ink-3) 45%,transparent);
    transition:color .12s, text-decoration-color .12s}
  .pcite:hover{color:var(--brand-hi); text-decoration-color:var(--brand)}
  /* the artifact kind, run into the line it describes rather than boxed beside it */
  .aip-art{font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
    color:var(--ink-3); margin-right:8px}

  /* ===================== MODEL RULES =====================
     A draft, read as a draft. It borrows the standards card whole - .req.std gives it
     the panel, the radius, the padding and the caret - and adds only what a rule
     needs that a standard does not: a hanging number, an indent per level of nesting,
     and a table. No new card, no new colour, one measure for the prose. */
  /* rules and notes are both prose, so neither takes the two-column disclosure the
     requirement and standard cards use */
  .view-mr .req.open .rq-full{display:block}
  /* the document above the rules: its own title, its status line, its opening words */
  .mr-doc{margin:2px 0 18px; max-width:var(--measure-prose)}
  .mr-doc-t{font-size:17px; font-weight:650; letter-spacing:-.01em; color:var(--ink); line-height:1.35}
  .mr-doc-m{font-size:12.5px; color:var(--ink-3); margin-top:5px}
  .mr-doc .mr-p{color:var(--ink-2); font-size:13.5px; margin:12px 0 0}
  /* ours, and marked as ours by being the one thing on the page that is folded away */
  .mr-about{margin-bottom:22px}
  .mr-about .rq-stmt{font-size:13.5px; font-weight:600; color:var(--ink-2)}
  .mr-note{font-size:13.5px; line-height:1.65; color:var(--ink-2); max-width:var(--measure-prose); margin:0 0 11px}
  .mr-note:last-child{margin-bottom:0}
  /* the group's label sits in its own column so twenty-seven titles line up */
  .req.mr .mr-l{flex:none; min-width:44px; font-family:var(--font-mono); font-size:12.5px;
    font-weight:600; color:var(--ink-3); padding-top:1px}
  .req.mr .mr-n{flex:1 1 auto; min-width:0}
  /* a rule: its printed number hanging in the gutter, its text on the measure, and
     one indent step for each level the source nested it at */
  .mr-i{display:flex; gap:10px; align-items:baseline; margin:0 0 9px;
    padding-left:calc(var(--l,0) * 26px); max-width:var(--measure-prose)}
  .mr-i:last-child{margin-bottom:0}
  .mr-m{flex:none; min-width:34px; font-family:var(--font-mono); font-size:12px;
    font-weight:600; color:var(--ink-3); text-align:right}
  .mr-x{flex:1 1 auto; min-width:0; font-size:13.5px; line-height:1.65; color:var(--ink-2)}
  .mr-p{padding-left:calc(var(--l,0) * 26px); font-size:13.5px; line-height:1.65;
    color:var(--ink-2); max-width:var(--measure-prose); margin:0 0 9px}
  .mr-partpre{margin:-4px 0 13px; max-width:var(--measure-prose)}
  /* a table is the one thing here wider than the measure, so it scrolls in its own
     box rather than pushing the page sideways. contain:inline-size is what makes that
     true: the main column is a grid item, so without it the widest table in the draft
     sets the width of every page, and 375px scrolls horizontally. */
  .mr-tw{overflow-x:auto; contain:inline-size; margin:4px 0 12px; border:1px solid var(--line);
    border-radius:var(--radius-inner); background:var(--panel)}
  .mr-t{border-collapse:collapse; width:100%; min-width:520px; font-size:13px}
  .mr-t th{text-align:left; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
    font-weight:700; color:var(--ink-3); padding:10px 13px; background:var(--panel-2);
    border-bottom:1px solid var(--line); vertical-align:top}
  .mr-t td{padding:10px 13px; border-bottom:1px solid var(--line); color:var(--ink-2);
    line-height:1.6; vertical-align:top}
  .mr-t tr:last-child td{border-bottom:0}
  @media(max-width:640px){
    .mr-i{padding-left:calc(var(--l,0) * 16px)}
    .mr-p{padding-left:calc(var(--l,0) * 16px)}
    .req.mr .mr-l{min-width:36px}
  }

  /* ===================== POLICY =====================
     A document, read as a document. The measure is a reading measure, the numbering is
     the document's own, and the clause indents carry the structure - no rules, no
     boxes, nothing that would make a regulation look like a dashboard. */
  .view-pol .lede{max-width:900px}
  .pol-doc-h{margin-bottom:12px}
  .pol-doc-t{font-size:22px; font-weight:700; letter-spacing:-.01em; line-height:1.25}
  .pol-doc-m{font-size:12.5px; color:var(--ink-3); margin-top:6px}
  /* the one place colour is spent on this page: whether the thing is in force. A dot,
     not a chip, and the word beside it stays in the ink scale. */
  .pol-status{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-top:9px;
    font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--ink-2)}
  .pol-dot{width:6px; height:6px; border-radius:50%; background:var(--ink-3); display:inline-block;
    transform:translateY(-1px)}
  .pol-dot.s-draft{background:var(--amber)}
  .pol-status-n{text-transform:none; letter-spacing:0; font-weight:400; font-size:12.5px;
    color:var(--ink-3); max-width:720px; line-height:1.6}
  .pol-sum{font-size:14.5px; line-height:1.7; color:var(--ink-2); max-width:900px; margin:16px 0 0}
  .pol-why{font-size:13.5px; line-height:1.7; color:var(--ink-3); max-width:900px; margin:10px 0 0}
  /* both buttons carry their own margin-top for the contexts they normally sit in - 12px
     on .view-full, 11px on .pdf-orig - which put them on two different baselines here.
     The row owns the spacing; the buttons bring none of their own. */
  .pol-acts{display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:20px}
  .pol-acts .view-full, .pol-acts .pdf-orig{margin-top:0}
  .pol-src{font-size:12.5px; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px;
    text-decoration-color:color-mix(in srgb,var(--ink-3) 40%,transparent)}
  .pol-src:hover{color:var(--brand-hi); text-decoration-color:var(--brand)}
  /* The document reads as the Acts read: chapters are the accordions the law view
     already uses (.actgrp), and a regulation is a .prov row that opens to its own
     text. Nothing here restyles either - they are the same components, so a reader
     who has opened an Act knows how to open this. What is added is only what a
     policy has and an Act does not. */
  .pol-pref{margin:24px 0 6px; padding:16px 0 4px; border-top:1px solid var(--line); max-width:820px}
  .pol-pref .std-l{display:block; margin:0 0 8px}
  .pol-pref-p{font-size:13.5px; line-height:1.75; color:var(--ink-2); margin:0 0 10px}
  /* The document is the top thing on the page and, collapsed, it is a single row -
     so it gets the room a heading gets rather than the room a list row gets. Scoped to
     .pol-doc: the Act accordions on the law page are a long list where the tighter
     head is right, and they are left alone. */
  .pol-list{margin-top:24px}
  .pol-doc > .actgrp-head{padding:20px 18px}
  .pol-doc > .actgrp-head .ag-title{font-size:15px}
  .pol-doc + .pol-doc{margin-top:14px}
  /* inside an open document, the first chapter clears the document's own title block */
  .pol-doc > .actgrp-body{padding-top:14px}
  .pol-chp{margin-top:12px}
  /* a regulation carries a heading, not a role and a pair of badges, so the row gives
     the heading the room the law view spends on its chips */
  .pol-reg .prov-head .rt{font-weight:600; color:var(--ink)}
  /* An Act's statute box carries a source line and a numbered heading, and those give it
     its air. A regulation needs neither - the row above already says which regulation
     this is - so with both gone the clauses sat flush against the top padding and the
     box read as packed next to the same component on the law page. The room they were
     providing is put back as spacing instead of as chrome. */
  .pol-statute{margin-top:14px; padding:20px 22px; border-radius:var(--radius-inner)}
  .pol-statute .st-p, .pol-statute .litem{font-size:13.5px; line-height:1.8; margin:11px 0}
  /* The Vision Document's Sources list cites a 475-character URL. An unbreakable token
     that long sets the min-content width of everything above it, so the column widened
     past the window and the whole page scrolled sideways. "anywhere" rather than
     "break-word" because only the former is taken into account when min-content width
     is computed, which is the thing actually forcing the layout here. */
  .pol-statute .ltext, .pol-statute .st-p{overflow-wrap:anywhere}
  /* renderBody wraps even top-level clauses in a .lgroup, so the first row is never a
     direct child of the box - the reset has to reach through it or the top inset is the
     padding plus two margins */
  .pol-statute > :first-child, .pol-statute > :first-child > .litem:first-child{margin-top:0}
  .pol-statute .st-inpar ~ *{margin-bottom:0}
  .pol-statute .lgroup{padding-left:26px; margin:7px 0}
  .pol-statute .st-inpar{margin-top:20px}
  /* the rows themselves, so a chapter of 14 regulations is a list and not a stack */
  .actgrp-body .pol-reg .prov-head{padding-top:15px; padding-bottom:15px}
  .actgrp-body .pol-reg .prov-body{padding-bottom:22px}
  /* landing from a citation: the clause is tinted for a moment so the eye finds it in
     a wall of numbered text. Same brand tint the story sections use when jumped to. */
  .pol-statute .litem.sec-flash, .pol-statute .st-p.sec-flash, .prov.sec-flash,
  .ad-sec .litem.sec-flash{
    background:color-mix(in srgb,var(--brand) 13%,transparent); border-radius:7px;
    box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 13%,transparent)}
  .pol-statute .litem, .pol-statute .st-p{scroll-margin-top:90px}
  @media(prefers-reduced-motion:no-preference){
    .pol-statute .litem, .pol-statute .st-p{transition:background .5s ease, box-shadow .5s ease}
  }
  .ad-pref{font-size:13px; line-height:1.75; color:var(--ink-3); margin:0 0 10px; max-width:70ch}
  .ad-sub{font-size:12px; color:var(--ink-3); margin-top:5px}
  /* our own words inside someone else's document, and they have to look like it */
  .pol-note{margin:18px 0; padding:13px 16px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:var(--radius); font-size:13px; line-height:1.7; color:var(--ink-3)}
  .pol-note .std-l{display:block; margin:0 0 4px}
  @media(max-width:700px){ .pol-doc-t{font-size:19px} .pol-reg .prov-head .ref{min-width:0}
    .pol-statute{padding:15px 14px} .pol-statute .lgroup{padding-left:16px} }

  /* ===================== UNIVERSAL SEARCH =====================
     A centred panel over a dimmed app. Type and spacing carry the structure;
     the type label and state badge are quiet text, never chips. */
  /* the trigger carries its own shortcut. It is height-locked to 24px - the brand row
     is 24px and that compaction is load-bearing - and takes the width it needs from
     the slack the row already had to the right of the wordmark. */
  .gs-trigger{margin-left:auto; flex:none; height:24px; padding:0 6px; display:inline-flex;
    align-items:center; justify-content:center; gap:5px; border:1px solid var(--line); border-radius:6px;
    background:var(--panel); color:var(--ink-3); cursor:pointer; transition:color .12s, border-color .12s}
  .gs-trigger svg.lu{width:13px; height:13px; flex:none}
  .gs-kbd{font-family:var(--font-mono); font-size:10px; line-height:1; letter-spacing:.02em;
    color:var(--ink-3); white-space:nowrap; transition:color .12s;
    display:inline-flex; align-items:center; gap:1px}
  /* the drawn command glyph, sized to sit level with the K rather than to the 13px
     the magnifier uses - a more specific selector than .gs-trigger svg.lu above */
  .gs-kbd svg.lu{width:11px; height:11px; stroke-width:2.1}
  .gs-kbd-k{font-size:11px; font-weight:600}
  .gs-trigger:hover{color:var(--ink); border-color:var(--line-2)}
  .gs-trigger:hover .gs-kbd{color:var(--ink-2)}
  .gs-trigger:focus-visible{outline:2px solid var(--brand); outline-offset:1px}

  .gs{position:fixed; inset:0; z-index:200; display:none}
  .gs.show{display:block}
  .gs-scrim{position:absolute; inset:0; background:color-mix(in srgb,var(--bg) 68%,transparent); backdrop-filter:blur(2px)}
  .gs-panel{position:absolute; top:11vh; left:50%; transform:translateX(-50%); width:min(660px,94vw);
    max-height:74vh; display:flex; flex-direction:column; background:var(--panel);
    border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--shadow-modal); overflow:hidden;
    animation:gsIn .13s ease-out}
  @keyframes gsIn{from{opacity:0; transform:translateX(-50%) translateY(-6px)} to{opacity:1; transform:translateX(-50%) translateY(0)}}
  @media (prefers-reduced-motion:reduce){ .gs-panel{animation:none} }

  .gs-in{display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--line); flex:none}
  .gs-mag{display:inline-flex; color:var(--ink-3); flex:none}
  .gs-mag svg.lu{width:16px; height:16px}
  .gs-input{flex:1 1 auto; min-width:0; border:none; background:transparent; outline:none;
    font-family:inherit; font-size:16px; color:var(--ink); letter-spacing:.01em}
  .gs-input::placeholder{color:var(--ink-3)}
  .gs-x{flex:none; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-3);
    font-family:var(--font-mono); font-size:10.5px; padding:3px 7px; border-radius:5px; cursor:pointer}
  .gs-x:hover{color:var(--ink-2); border-color:var(--line-2)}

  .gs-list{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:6px 0 8px}
  .gs-grp + .gs-grp{border-top:1px solid var(--line); margin-top:5px; padding-top:5px}
  .gs-grp-h{display:flex; align-items:baseline; gap:8px; padding:8px 16px 4px;
    font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--ink-3)}
  .gs-grp-n{font-size:10px; font-weight:600; letter-spacing:0; color:var(--ink-3); opacity:.75}
  .gs-row{padding:7px 16px; cursor:pointer; scroll-margin:8px}
  /* The active row is what Enter opens, so it has to read as chosen at a glance.
     --panel-2 was a 2% shift against the panel and did not. This is the same
     selected surface the nav and the theme toggle already use. */
  .gs-row.on{background:var(--brand-dim)}
  .gs-row.on .gs-r-t{color:var(--brand-hi)}
  .gs-r-t{font-size:14px; color:var(--ink); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .gs-r-m{font-size:11.5px; color:var(--ink-3); line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .gs-st{color:var(--ink-2)}
  .gs-st::before{content:"·"; color:var(--ink-3); margin:0 6px}
  .gs-r-s{font-size:12.5px; color:var(--ink-2); line-height:1.45; margin-top:1px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .gs-list mark{background:transparent; color:var(--ink); font-weight:700}
  .gs-more{padding:3px 16px 7px; font-size:11.5px; color:var(--ink-3)}
  .gs-none{padding:34px 20px; text-align:center; color:var(--ink-3); font-size:14px}
  .gs-idle{padding:22px 20px 24px; color:var(--ink-3); font-size:13px; line-height:1.6}
  .gs-idle p{margin:0}
  .gs-idle b{color:var(--ink-2); font-weight:600}
  .gs-idle-eg{margin-top:9px !important; color:var(--ink-3)}

  /* ---- scope tokens: "kerala:", "pages:" ----------------------------------
     The token is a box in the field, ahead of the caret, so a filter never
     reads as query text. It is a flex sibling of the input, not an overlay,
     so a long scope name cannot end up underneath what is being typed.
     Borders and ink only: the one colour in this panel stays the active row. */
  /* the tokens give up width far more slowly than the text field does, so a narrow
     panel eats into the query before it starts abbreviating a filter */
  .gsc-toks{display:flex; align-items:center; gap:5px; flex:0 0 auto; min-width:0; max-width:66%; overflow:hidden}
  .gsc-toks[hidden]{display:none}
  .gsc-tok{display:inline-flex; align-items:center; gap:6px; max-width:100%; flex:0 1 auto;
    border:1px solid var(--line-2); border-radius:4px; background:var(--panel-2); color:var(--ink-2);
    font-family:inherit; font-size:13px; line-height:1.5; padding:2px 6px; cursor:pointer;
    white-space:nowrap; overflow:hidden; transition:color .12s, border-color .12s}
  .gsc-tok:hover{color:var(--ink)}
  .gsc-tok:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
  /* the name gives way first: the × has to stay reachable at any width */
  .gsc-tl{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .gsc-tx{flex:none; color:var(--ink-3); font-size:13px; line-height:1}
  .gsc-tok:hover .gsc-tx{color:var(--ink-2)}

  .gsc-bar{flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    padding:7px 15px; border-bottom:1px solid var(--line); background:var(--panel-2);
    font-size:11.5px; color:var(--ink-3)}
  .gsc-bar[hidden]{display:none}
  .gsc-lab{font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--ink-3)}
  .gsc-sug,.gsc-eg{border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
    font-family:inherit; font-size:11.5px; padding:2px 6px; border-radius:4px; cursor:pointer;
    transition:color .12s, border-color .12s}
  .gsc-sug:hover,.gsc-eg:hover{color:var(--ink); border-color:var(--line-2)}
  .gsc-sug:focus-visible,.gsc-eg:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
  .gsc-tab kbd{font-family:var(--font-mono); font-size:10px; border:1px solid var(--line-2);
    border-radius:4px; padding:0 4px; color:var(--ink-3)}
  .gsc-note{color:var(--ink-3)}
  .gsc-alt{margin-top:13px}
  .gsc-eg{font-size:12px; margin-left:2px}

  .gs-foot{flex:none; display:flex; align-items:center; gap:12px; justify-content:space-between;
    padding:8px 15px; border-top:1px solid var(--line); background:var(--panel-2);
    font-size:11px; color:var(--ink-3)}
  .gs-foot kbd{font-family:var(--font-mono); font-size:10px; border:1px solid var(--line-2);
    border-radius:4px; padding:0 4px; margin-right:2px; color:var(--ink-3)}
  .gs-tally{white-space:nowrap}

  @media(max-width:880px){
    .gs-panel{top:8px; width:calc(100vw - 16px); max-height:calc(100dvh - 16px)}
    .gs-keys{display:none}
    .gs-foot{justify-content:flex-end}
  }