/* AskBNS — design tokens follow ash1794/my-portfolio (shadcn/ui neutral, Geist).
   Monochrome by default; colour only where it carries meaning (warnings, quick exit, highlights). */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist.woff2") format("woff2-variations"), url("fonts/geist.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono.woff2") format("woff2-variations"), url("fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --background: 0 0% 98%;            /* page (gray-50, as on the portfolio) */
  --card: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --border: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --destructive: 0 72% 51%;
  --destructive-soft: 0 86% 97%;
  --destructive-border: 0 93% 90%;
  --destructive-ink: 0 63% 31%;
  --highlight: 50 98% 64%;
  --radius: 0.5rem;
  --maxw: 880px;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
/* Dark: follows the system unless the visitor picked a theme (ui.js sets data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 0 0% 3.9%;
    --card: 0 0% 6%;
    --foreground: 0 0% 98%;
    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 63.9%;
    --border: 0 0% 16%;
    --ring: 0 0% 83.1%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --destructive: 0 72% 51%;
    --destructive-soft: 0 60% 12%;
    --destructive-border: 0 50% 25%;
    --destructive-ink: 0 90% 85%;
    --highlight: 48 90% 40%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --background: 0 0% 3.9%;
  --card: 0 0% 6%;
  --foreground: 0 0% 98%;
  --muted: 0 0% 12%;
  --muted-foreground: 0 0% 63.9%;
  --border: 0 0% 16%;
  --ring: 0 0% 83.1%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --destructive: 0 72% 51%;
  --destructive-soft: 0 60% 12%;
  --destructive-border: 0 50% 25%;
  --destructive-ink: 0 90% 85%;
  --highlight: 48 90% 40%;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  margin: 0; min-height: 100dvh;
  background: hsl(var(--background)); color: hsl(var(--foreground));
  font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: underline; text-decoration-color: hsl(var(--border)); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: 4px; }
#app[aria-busy="true"] main { opacity: .5; }
[hidden] { display: none !important; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 max(16px, calc((100vw - var(--maxw)) / 2));
  background: hsl(var(--background) / .85); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid hsl(var(--border));
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.logo { width: 28px; height: 28px; border-radius: 6px; }
.brand-name { font-weight: 600; font-size: 17px; letter-spacing: -.03em; line-height: 1.1; }
.brand-name span { color: inherit; }
.brand-sub { font-size: 12px; color: hsl(var(--muted-foreground)); line-height: 1.2; }
.badges { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.status-pill, .offline-pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: hsl(var(--muted-foreground)); white-space: nowrap;
}
.status-pill::before, .offline-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--muted-foreground) / .5); }
.status-pill[data-mode="ready"]::before { background: hsl(142 71% 40%); }
.status-pill[data-mode="load"]::before { background: hsl(38 92% 50%); animation: pulse 1.4s ease-in-out infinite; }
.status-pill.err::before, .offline-pill::before { background: hsl(var(--destructive)); }
@keyframes pulse { 50% { opacity: .35; } }
.install-btn, .quick-exit, .act, .more, .clear {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: calc(var(--radius) - 2px);
  font-size: 13.5px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); text-decoration: none;
  transition: background .15s, border-color .15s;
}
.install-btn { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; }
.install-btn:hover { opacity: .9; }
.quick-exit { background: hsl(var(--destructive)); color: #fff; border-color: transparent; font-weight: 600; }
.static .quick-exit { margin-left: auto; }
.act:hover, .more:hover { background: hsl(var(--muted)); }
.act:disabled { opacity: .5; cursor: progress; }

main { max-width: var(--maxw); margin: 0 auto; padding: 56px 16px 40px; }
.static main { padding-top: 28px; }

/* ---------- hero ---------- */
.hero { text-align: center; }
.hero h1 {
  font-size: clamp(38px, 7.2vw, 68px); font-weight: 400; letter-spacing: -.045em; line-height: 1.02;
  margin: 0 auto 18px; max-width: 14ch;
}
.hero h1 em { font-style: normal; color: hsl(var(--muted-foreground)); }
.lede { color: hsl(var(--muted-foreground)); font-size: clamp(16px, 2.3vw, 19px); line-height: 1.6; letter-spacing: -.01em; max-width: 620px; margin: 0 auto; }
.lede strong { color: hsl(var(--foreground)); font-weight: 500; }

.searchbar {
  display: flex; align-items: center; gap: 10px; margin: 34px auto 14px; max-width: 680px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  padding: 0 6px 0 16px; height: 56px;
  box-shadow: 0 1px 2px hsl(0 0% 0% / .04);
  transition: border-color .15s, box-shadow .15s;
}
.searchbar:focus-within { border-color: hsl(var(--ring) / .6); box-shadow: 0 0 0 4px hsl(var(--ring) / .08); }
.search-ic { width: 18px; height: 18px; fill: hsl(var(--muted-foreground)); flex: none; }
#q { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: hsl(var(--foreground)); font: 400 16px/1 var(--sans); letter-spacing: -.01em; }
#q::placeholder { color: hsl(var(--muted-foreground) / .8); }
#q::-webkit-search-cancel-button { display: none; }
.clear { border: 0; background: transparent; color: hsl(var(--muted-foreground)); font-size: 20px; height: 40px; width: 40px; padding: 0; }
.clear:hover { background: hsl(var(--muted)); }

.examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; margin: 0 auto; }
.example {
  height: 32px; padding: 0 12px; border-radius: calc(var(--radius) - 2px); cursor: pointer;
  font-size: 13px; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); border: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.example:hover { color: hsl(var(--foreground)); border-color: hsl(var(--border)); }

/* ---------- home ---------- */
/* One line of what makes this trustworthy, under the search box. */
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 22px 0 0; padding: 0; list-style: none; font-size: 13px; color: hsl(var(--muted-foreground)); }
.trust li + li::before { content: "·"; margin: 0 9px; opacity: .6; }
@media (max-width: 560px) { .trust { gap: 2px 14px; } .trust li + li::before { content: none; } }
#app.searching .trust, #app.searching .how-panel { display: none; }
#app.searching .no-match .examples { display: flex; justify-content: center; }
.browse { margin-top: 48px; }
@media (min-width: 720px) { .browse .chapters { display: block; columns: 2; column-gap: 28px; } .browse .act-group { break-inside: avoid; } }
.act-group summary { display: flex; align-items: baseline; gap: 8px; }
.act-group summary::before { content: "›"; display: inline-block; width: 10px; color: hsl(var(--muted-foreground)); transition: transform .15s; }
.act-group[open] summary::before { transform: rotate(90deg); }
.act-group summary::-webkit-details-marker { display: none; }
.act-group summary .ag-name { flex: 1; min-width: 0; }
.act-group summary .ag-count { font: 12px var(--mono); color: hsl(var(--muted-foreground)); white-space: nowrap; }
.how-panel { margin-top: 28px; padding: 0; }
.how-panel summary { cursor: pointer; padding: 16px 20px; font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.how-panel summary:hover { color: hsl(var(--foreground)); }
.how-panel .how { padding: 0 20px 16px 38px; }
.panel { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 20px; }
.panel h2 { font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); margin: 0 0 14px; letter-spacing: -.01em; }
.how { margin: 0; padding-left: 18px; color: hsl(var(--muted-foreground)); font-size: 14.5px; }
.how li { margin-bottom: 8px; }
.how b { color: hsl(var(--foreground)); font-weight: 500; }

.chapters { display: flex; flex-direction: column; margin: 0 -8px; }
.act-group[open] { max-height: 420px; overflow: auto; }
.act-group { padding: 2px 0; }
.act-group summary { cursor: pointer; font-weight: 500; font-size: 14px; padding: 8px; border-radius: calc(var(--radius) - 2px); list-style: none; }
.act-group summary:hover { background: hsl(var(--muted)); }
.chapter {
  display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; border-radius: calc(var(--radius) - 2px); padding: 7px 8px 7px 22px; font-size: 14px; line-height: 1.4;
}
.chapter:hover { background: hsl(var(--muted)); }
.chapter .cn { flex: none; min-width: 52px; font: 500 12px var(--mono); color: hsl(var(--muted-foreground)); }
.chapter .cr { margin-left: auto; flex: none; font: 12px var(--mono); color: hsl(var(--muted-foreground)); }

.help {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 16px; padding: 14px 18px;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); font-size: 14px;
}
.help b { font-weight: 500; }
.help a { text-decoration: none; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.help a:hover { color: hsl(var(--foreground)); }
.spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; font-size: 14px; color: hsl(var(--muted-foreground)); text-align: center; }
.spread p { margin: 0 0 4px; flex-basis: 100%; }

/* ---------- results ---------- */
#app.searching .hero h1, #app.searching .lede, #app.searching .examples, #app.searching .spread { display: none; }
#app.searching main { padding-top: 20px; }
#app.searching .searchbar { margin-top: 0; }
.result-head { font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); margin: 26px 0 12px; letter-spacing: -.01em; }
.result-note { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius); font-size: 14px; background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.result-note p { margin: 3px 0; }
.results { display: flex; flex-direction: column; gap: 12px; }
.results[aria-busy="true"] { opacity: .5; }
.empty { color: hsl(var(--muted-foreground)); }
.result-disclaimer { font-size: 12.5px; color: hsl(var(--muted-foreground)); margin-top: 16px; }

.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 18px 18px 14px; }
.card-head { display: flex; gap: 14px; align-items: flex-start; }
.sec-badge {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 56px; padding: 6px 8px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
  font: 600 15px/1.1 var(--mono); letter-spacing: -.02em; background: hsl(var(--background));
}
.sec-badge small { display: block; font: 500 9.5px/1.2 var(--mono); letter-spacing: .04em; color: hsl(var(--muted-foreground)); margin-bottom: 2px; }
.sec-title-wrap { flex: 1; min-width: 0; }
.sec-title { margin: 1px 0 8px; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px;
  font-size: 12px; color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); text-decoration: none; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.ipc-chip { font-family: var(--mono); font-size: 11.5px; }
.new-chip { color: hsl(var(--foreground)); background: hsl(var(--muted)); border-color: transparent; }

.punish, .classif {
  margin: 14px 0 0; padding: 11px 13px; border-radius: calc(var(--radius) - 2px); background: hsl(var(--muted)); font-size: 14px; line-height: 1.55;
}
.classif { margin-top: 8px; }
.punish-label {
  display: block; margin-bottom: 4px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.punish-list { list-style: none; margin: 0; padding: 0; }
.punish-list li { margin: 3px 0; }
.punish-list b { font-weight: 600; }
.punish-note { margin-top: 6px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.muted { color: hsl(var(--muted-foreground)); font-size: 12.5px; }
.warn {
  margin: 12px 0 0; padding: 10px 12px; border-radius: calc(var(--radius) - 2px); font-size: 13.5px;
  background: hsl(var(--destructive-soft)); border: 1px solid hsl(var(--destructive-border)); color: hsl(var(--destructive-ink));
}

.explainer { margin: 12px 0 0; padding: 12px 14px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); font-size: 14.5px; }
.explainer summary { cursor: pointer; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.explainer p, .explainer ul { margin: 8px 0; }
.explainer .hi { font-family: "Noto Sans Devanagari", var(--sans); }
.explainer-note { font-size: 12px; color: hsl(var(--muted-foreground)); }

.sec-text { margin-top: 16px; font-size: 15.5px; line-height: 1.75; }
.verbatim-label {
  display: inline-block; margin: 0 0 6px; padding: 1px 6px; border: 1px solid hsl(var(--border)); border-radius: 4px;
  font: 500 10.5px/1.6 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.sec-text .line { display: block; margin-top: 6px; }
.sec-text mark { background: hsl(var(--highlight) / .55); color: inherit; border-radius: 3px; padding: 0 2px; }
.sec-text .line.pin, .punish-list li.pin {
  background: hsl(var(--highlight) / .22); box-shadow: inset 3px 0 0 hsl(var(--foreground)); border-radius: 3px; padding: 2px 8px; margin-left: -8px;
}
.more { margin-top: 10px; height: 30px; border: 0; background: transparent; padding: 0; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.more:hover { background: transparent; }

.actions, .share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid hsl(var(--border)); }

/* Icon buttons: card tools, theme switch */
.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; flex: none;
  border: 1px solid transparent; border-radius: calc(var(--radius) - 2px); background: transparent;
  color: hsl(var(--muted-foreground)); cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.icon-btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
.icon-btn.done { color: hsl(142 71% 40%); }
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.card-foot .more { margin-top: 0; }
.tools { display: flex; justify-content: flex-end; gap: 2px; margin: 0 -6px -6px auto; }
.static-card .tools { margin-top: 10px; }
.share.tools { padding: 0; border: 0; }
.theme-toggle .i-sun, :root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
}

.made-in { white-space: nowrap; }

/* Presence: header pill, map popover, "Reading now" */
.badges { position: relative; }
.presence-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px;
  border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--card));
  color: hsl(var(--muted-foreground)); font: 500 12.5px var(--sans); cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.presence-pill:hover, .presence-pill[aria-expanded="true"] { color: hsl(var(--foreground)); border-color: hsl(var(--muted-foreground) / .45); }
.presence-pill b { color: hsl(var(--foreground)); font: 600 12.5px var(--mono); font-variant-numeric: tabular-nums; }
.pnum.tick { animation: tick .5s ease; }
@keyframes tick { 0% { opacity: .2; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
.pdot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: hsl(142 71% 42%); flex: none; display: inline-block; }
.pdot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: breathe 2.4s ease-out infinite; }
@keyframes breathe { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
.presence-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 300px; padding: 14px 14px 12px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  box-shadow: 0 12px 32px -12px hsl(0 0% 0% / .25), 0 2px 6px -2px hsl(0 0% 0% / .08);
  animation: pop-in .16s ease-out;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
.pmap { position: relative; aspect-ratio: 278 / 316; color: hsl(var(--muted-foreground) / .38); }
.pmap-dots svg, .pmap-pings { position: absolute; inset: 0; width: 100%; height: 100%; }
.pmap-pings .core { fill: hsl(142 71% 42%); }
.pmap-pings .ring { fill: hsl(142 71% 42% / .25); transform-box: fill-box; transform-origin: center; animation: ring 2.6s ease-out infinite; }
.pmap-pings g:nth-child(3n) .ring { animation-delay: .8s; }
.pmap-pings g:nth-child(3n+1) .ring { animation-delay: 1.6s; }
@keyframes ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.pcap { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: hsl(var(--muted-foreground)); }

.reading-now { margin: 36px 0 0; }
.reading-now h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.reading-now ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid hsl(var(--border)); }
.reading-now li { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; border-bottom: 1px solid hsl(var(--border)); }
.reading-now li.fresh { animation: fresh .6s ease-out; }
@keyframes fresh { from { opacity: 0; transform: translateY(-6px); } }
.reading-now a { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: baseline; text-decoration: none; color: inherit; }
.reading-now a:hover .rn-title { text-decoration: underline; text-underline-offset: 3px; }
.rn-sec { flex: none; min-width: 64px; font: 600 12px var(--mono); }
.rn-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.rn-meta { flex: none; font-size: 12px; color: hsl(var(--muted-foreground)); }
#app.searching .reading-now { display: none; }
/* Wide screens: a quiet column to the right of the page. */
@media (min-width: 1400px) {
  .reading-now { position: fixed; top: 96px; left: calc(50vw + var(--maxw) / 2 + 28px); width: min(232px, calc(50vw - var(--maxw) / 2 - 52px)); margin: 0; }
  #app.searching .reading-now { display: block; }
  .reading-now li { flex-direction: column; align-items: stretch; gap: 1px; }
  .reading-now a { flex-direction: column; gap: 0; width: 100%; }
  .rn-title { font-size: 13.5px; max-width: 100%; }
}
@media (max-width: 560px) {
  .presence-pill { padding: 0 9px; }
  .presence-pill .plabel { display: none; }
  .presence-pop { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; }
  .rn-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pdot::after, .pmap-pings .ring, .pnum.tick, .reading-now li.fresh, .presence-pop { animation: none; }
}
.flag { display: inline-block; width: 18px; height: 12px; margin-left: 3px; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px hsl(var(--border)); }

/* AI suggestion: a different voice, always below the law */
.ai-card { margin-top: 20px; padding: 16px 18px; border: 1px dashed hsl(var(--muted-foreground) / .5); border-radius: var(--radius); background: hsl(var(--card)); }
.ai-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.ai-spark { font-size: 14px; }
.ai-tag { font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); border-radius: 4px; padding: 1px 6px; }
.ai-body { font-size: 14.5px; margin: 8px 0; }
.ai-body p { margin: 6px 0; }
.ai-quote { margin: 10px 0; padding: 6px 12px; border-left: 2px solid hsl(var(--foreground)); font-size: 14.5px; }
.ai-thinking { color: hsl(var(--muted-foreground)); animation: pulse 1.4s ease-in-out infinite; }
.ai-disclaimer { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 8px 0 0; }
.sec-text mark.ai-mark { background: transparent; box-shadow: inset 0 -2px 0 hsl(var(--foreground)); }
@media (prefers-reduced-motion: reduce) { .ai-thinking, .status-pill::before { animation: none; } }

/* ---------- footer ---------- */
.foot { max-width: var(--maxw); margin: 32px auto 0; padding: 28px 16px 56px; border-top: 1px solid hsl(var(--border)); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 14px; font-size: 14px; font-weight: 500; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-laws { gap: 4px 14px; font-weight: 400; font-size: 13px; }
.foot-laws a { color: hsl(var(--muted-foreground)); }
.toc-head { font-size: 15px; font-weight: 600; margin: 28px 0 8px; letter-spacing: -.01em; }
.toc-head a { text-decoration: none; }

/* Result previews: scan, then open the section page */
.hit { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 14px 16px 10px; transition: border-color .15s; }
.hit:hover { border-color: hsl(var(--muted-foreground) / .45); }
.hit-link { display: block; color: inherit; text-decoration: none; }
.hit-head { display: flex; gap: 12px; align-items: flex-start; }
.hit-title-wrap { min-width: 0; }
.hit-title { margin: 2px 0 2px; font-size: 16.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.hit-link:hover .hit-title { text-decoration: underline; text-underline-offset: 3px; }
.hit-meta { font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.hit-excerpt { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: hsl(var(--foreground) / .85); }
.hit-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fact { font-size: 12.5px; padding: 3px 8px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.hit-open { font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.hit .card-foot { margin-top: 8px; }

/* Section pages: back to results, the clause a search matched, cross-references */
.back-link { display: inline-block; margin-bottom: 10px; font-size: 13.5px; font-weight: 500; text-decoration: none; color: hsl(var(--foreground)); }
.back-link:hover { text-decoration: underline; }
.sec-text .line { scroll-margin-top: 130px; }
.sec-text .line.pin { background: hsl(var(--highlight) / .22); border-radius: 4px; box-shadow: 0 0 0 4px hsl(var(--highlight) / .22); }
a.xref { color: inherit; text-decoration: underline; text-decoration-color: hsl(var(--muted-foreground) / .5); text-underline-offset: 3px; }
a.xref:hover { text-decoration-color: currentColor; }
.chips .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phones: the static pages keep a search box, on its own row */
@media (max-width: 560px) {
  .static .topbar { flex-wrap: wrap; row-gap: 10px; height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
  .static .mini-search { display: block; order: 10; flex-basis: 100%; margin: 0; }
  .static .mini-search input { width: 100%; }
}

/* Continue reading (this device only) */
.recent { margin-top: 28px; }
.recent h2 { font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); margin: 0 0 8px; }
.recent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.recent a { display: inline-block; padding: 6px 12px; border: 1px solid hsl(var(--border)); border-radius: 999px; font-size: 13.5px; text-decoration: none; color: inherit; background: hsl(var(--card)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent a:hover { border-color: hsl(var(--muted-foreground) / .45); }
#app.searching .recent { display: none; }

/* No match */
.no-match { text-align: center; padding: 8px 0 4px; }
.no-match-meme { margin: 0 auto 18px; max-width: 520px; }
.no-match-meme img { display: block; width: 100%; border-radius: var(--radius); margin-bottom: 10px; }
.no-match-meme q { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.no-match-meme span { color: hsl(var(--muted-foreground)); font-size: 14px; }
.no-match-lede { color: hsl(var(--muted-foreground)); max-width: 460px; margin: 0 auto 14px; }

/* Traffic fines */
.fine-filter { width: 100%; height: 44px; margin: 18px 0 14px; padding: 0 14px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); color: hsl(var(--foreground)); font: 15px var(--sans); }
.fines { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .fines { grid-template-columns: 1fr; } }
.fine { padding: 16px; }
.fine-title { margin: 0 0 10px; font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.fine-row { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 14px; }
.fine-when { flex: none; width: 92px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--muted-foreground)); }
.fine-amt { font-weight: 600; }
.fine-law { margin-top: 10px; font-size: 13px; color: hsl(var(--muted-foreground)); }
.fine-law summary { cursor: pointer; }
.fine-law blockquote { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid hsl(var(--border)); font-size: 13.5px; color: hsl(var(--foreground)); }
.meta-line { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 6px 0; }
.disclaimer { font-size: 12.5px; color: hsl(var(--muted-foreground)); max-width: 72ch; line-height: 1.6; }
.disclaimer strong { color: hsl(var(--foreground)); font-weight: 500; }
.credit { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 14px 0 0; }
.credit a { color: hsl(var(--foreground)); font-weight: 500; }

/* ---------- static section / chapter / old-number pages ---------- */
.mini-search input {
  height: 34px; width: min(44vw, 260px); padding: 0 12px; border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); font: 14px var(--sans);
}
.static .mini-search { margin-left: auto; }
.static .topbar .theme-toggle { margin-left: 4px; }
@media (max-width: 560px) { .static .topbar .theme-toggle { margin-left: auto; } .static .quick-exit + .theme-toggle { margin-left: 4px; } }
.crumbs { font-size: 13px; color: hsl(var(--muted-foreground)); margin-bottom: 16px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.static-card .sec-title { font-size: clamp(22px, 4vw, 30px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.static-card .sec-text { font-size: 16px; }
.ipc-line, .cite { font-size: 14px; color: hsl(var(--muted-foreground)); margin: 14px 0 0; }
.cite code { font: 12.5px var(--mono); background: hsl(var(--muted)); padding: 2px 6px; border-radius: 4px; color: hsl(var(--foreground)); white-space: normal; }
.prevnext { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0; font-size: 14px; }
.prevnext a { text-decoration: none; color: hsl(var(--muted-foreground)); }
.prevnext a:hover { color: hsl(var(--foreground)); }
.prevnext .next { margin-left: auto; text-align: right; }
.related { margin-top: 20px; }
.related ul, .toc { list-style: none; padding: 0; margin: 0; }
.related li { padding: 7px 0; border-bottom: 1px solid hsl(var(--border)); font-size: 14.5px; }
.related li:last-child { border-bottom: 0; }
.related a { text-decoration: none; }
.related a:hover { text-decoration: underline; }
.toc li { border-bottom: 1px solid hsl(var(--border)); }
.toc a { display: flex; gap: 12px; align-items: center; padding: 10px 4px; text-decoration: none; font-size: 15px; }
.toc a:hover { background: hsl(var(--muted)); }
.toc .sec-badge { min-width: 48px; padding: 3px 6px; font-size: 13px; }
.old-map li { padding: 10px 0; font-size: 15px; }
.static .result-head { font-size: clamp(26px, 4.5vw, 38px); font-weight: 500; letter-spacing: -.035em; color: hsl(var(--foreground)); margin: 4px 0 10px; line-height: 1.1; }
.static .lede { text-align: left; margin: 0 0 20px; max-width: 68ch; font-size: 16px; }
.table-wrap { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
.ipc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ipc-table th, .ipc-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
.ipc-table tr:last-child td { border-bottom: 0; }
.ipc-table th { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); }
.ipc-table td:first-child { white-space: nowrap; font-family: var(--mono); font-size: 13px; }
.ipc-table a { text-decoration: none; }
.ipc-table a:hover { text-decoration: underline; }

/* ---------- phones ---------- */
@media (max-width: 560px) {
  main { padding-top: 36px; }
  .brand-sub { display: none; }
  .status-pill { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
  .ipc-table td:nth-child(4), .ipc-table th:nth-child(4) { display: none; }
  .card { padding: 16px 14px 12px; }
  .example { height: 36px; }
  .act { height: 36px; }
}

@media print {
  .topbar, .share, .actions, .prevnext, .related, .foot-links, .help, .spread, .mini-search, .more, .ai-card, .examples, .searchbar { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border: 0; padding: 0; }
}

/* the mark: a tile in the text colour, the letter in the page colour, so it follows the theme */
svg.logo rect { fill: hsl(var(--foreground)); }
svg.logo path { fill: hsl(var(--background)); transition: opacity .22s ease; }
svg.logo.swap path { opacity: 0; }
/* phones: the status keeps its dot (and its text for screen readers) */
@media (max-width: 560px) { .status-pill { font-size: 0; gap: 0; } .status-pill::before { width: 8px; height: 8px; } }