/*
 * Styles for the generated /laws and /blogs pages.
 *
 * These pages are plain HTML, not React, so they cannot use the app's Tailwind
 * build. The tokens below are copied from src/styles/globals.css so the two
 * surfaces look like one product — same Ink + Copper palette, same radius.
 * Keep them in step: a token changed there must be changed here.
 */

:root {
  --background: 220 14% 97%;
  --foreground: 220 25% 12%;
  --card: 0 0% 100%;
  --primary: 22 58% 40%;
  --primary-foreground: 0 0% 100%;
  --muted: 220 10% 94%;
  --muted-foreground: 220 10% 42%;
  --accent: 25 30% 92%;
  --accent-foreground: 22 58% 32%;
  --border: 220 12% 88%;
  --warning: 38 92% 50%;
  --warning-foreground: 26 80% 22%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 25% 12%;
  --shadow-color: 220 25% 8%;
  --radius: 0.5rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 220 20% 9%;
    --foreground: 220 10% 92%;
    --card: 220 18% 11%;
    --primary: 28 55% 52%;
    --primary-foreground: 220 25% 8%;
    --muted: 220 14% 16%;
    --muted-foreground: 220 8% 58%;
    --accent: 25 20% 16%;
    --accent-foreground: 28 55% 58%;
    --border: 220 14% 18%;
    --warning: 43 96% 56%;
    --warning-foreground: 48 100% 92%;
    --popover: 220 18% 11%;
    --popover-foreground: 220 10% 92%;
    --shadow-color: 220 30% 4%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --background: 220 20% 9%;
  --foreground: 220 10% 92%;
  --card: 220 18% 11%;
  --primary: 28 55% 52%;
  --primary-foreground: 220 25% 8%;
  --muted: 220 14% 16%;
  --muted-foreground: 220 8% 58%;
  --accent: 25 20% 16%;
  --accent-foreground: 28 55% 58%;
  --border: 220 14% 18%;
  --warning: 43 96% 56%;
  --warning-foreground: 48 100% 92%;
  --popover: 220 18% 11%;
  --popover-foreground: 220 10% 92%;
  --shadow-color: 220 30% 4%;
  color-scheme: dark;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jakarta-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/jakarta-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/jakarta-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jakarta-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/jakarta-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/jakarta-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: hsl(var(--primary)); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------- chrome */

/*
 * The header copies the landing page Navbar (src/pages/LandingPage.tsx). The
 * sizes are measured from the React header: 64px bar, 1280px content, 36px
 * icon buttons with 6px corners, 32px text buttons with 8px corners.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsl(var(--background) / 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid hsl(var(--border));
}
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__left { display: flex; align-items: center; gap: 24px; }
.site-header__right { display: flex; align-items: center; gap: 8px; }
.header-spacer { flex: 1; }

.site-logo { display: flex; align-items: center; line-height: 0; }
.site-logo img { display: block; width: auto; flex-shrink: 0; }
.site-logo__icon { height: 32px; }
.site-logo__word { height: 28px; display: none !important; }

.site-links { display: none; align-items: center; gap: 4px; }
.site-link--menu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.site-link__chevron { width: 16px; height: 16px; transition: transform 0.2s; }
.site-link--menu[aria-expanded="true"] { color: hsl(var(--foreground)); }
.site-link--menu[aria-expanded="true"] .site-link__chevron { transform: rotate(180deg); }
.site-link {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.site-link:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.site-link[aria-current="page"] { color: hsl(var(--foreground)); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font: inherit;
  font-weight: 500;
  border: 0;
  background: transparent;
  color: hsl(var(--foreground));
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn:focus-visible { outline: 2px solid hsl(var(--ring, var(--primary))); outline-offset: 2px; }
.btn .icon { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
.btn--icon { width: 36px; height: 36px; border-radius: 6px; }
.btn--icon:hover, .btn--lang:hover, .btn--ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn--lang { height: 36px; padding: 0 12px; border-radius: 6px; font-size: 14px; line-height: 20px; }
.btn--lang__globe { color: hsl(var(--muted-foreground)); }
.btn--lang__label { display: none; }
.btn--sm { height: 32px; border-radius: 8px; padding: 0 14px; font-size: 12px; line-height: 16px; }
.btn--primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow:
    0 1px 2px hsl(var(--shadow-color) / 0.03),
    0 2px 4px hsl(var(--shadow-color) / 0.03),
    0 4px 8px hsl(var(--shadow-color) / 0.03);
}
.btn--primary:hover { background: hsl(var(--primary) / 0.9); }
.btn:active { transform: scale(0.98); }
.btn--start { padding: 0 12px; gap: 6px; }
.site-signin { display: none; }

.theme-icon { display: none; }
[data-theme-choice="light"] .theme-icon--light,
[data-theme-choice="dark"] .theme-icon--dark,
[data-theme-choice="system"] .theme-icon--system,
html:not([data-theme-choice]) .theme-icon--system { display: block; }

.menu { position: relative; }
.menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 128px;
  /* Never wider than the screen: a long item once pushed the panel off the
     left edge of a 390px viewport. */
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 6px;
  background: hsl(var(--popover) / 0.95);
  color: hsl(var(--popover-foreground));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 0 0 1px hsl(var(--border) / 0.5),
    0 2px 4px hsl(var(--shadow-color) / 0.02),
    0 8px 24px hsl(var(--shadow-color) / 0.08),
    0 16px 48px hsl(var(--shadow-color) / 0.06);
  animation: menu-in 0.15s ease-out;
}
.menu__panel--lang { min-width: 140px; }
/* Under its trigger, not right-aligned to the header edge. */
.menu__panel--start { left: 0; right: auto; }
.menu__panel--rich { min-width: 260px; }
/* Specific enough to beat the base .menu__item display:flex below. */
.menu__item.menu__item--rich { display: block; }
.menu__item--rich > span { display: block; font-weight: 500; }
.menu__item--rich > small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}
.menu__item--rich:hover > small, .menu__item--rich:focus-visible > small { color: inherit; opacity: 0.85; }
.site-menu .menu__panel { min-width: 160px; }
.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.menu__item .icon { width: 16px; height: 16px; flex-shrink: 0; }
.menu__item:hover, .menu__item:focus-visible, .menu__item.is-active {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  outline: none;
}
.menu__item[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }
.menu__flag { font-size: 16px; line-height: 1; }
@keyframes menu-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (min-width: 640px) {
  .site-header__inner { padding: 0 24px; }
  .site-header__right { gap: 12px; }
  .site-logo__icon { display: none !important; }
  .site-logo__word { display: block !important; }
  .btn--lang__label { display: inline; }
  .site-signin { display: inline-flex; }
  .btn--start { padding: 0 16px; gap: 8px; font-size: 14px; line-height: 20px; }
}
@media (min-width: 768px) {
  .site-links { display: flex; }
  .site-menu { display: none; }
}
@media (min-width: 1024px) {
  .site-header__inner { padding: 0 32px; }
}

/* ---------------------------------------------------------------- layout */

.shell { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

.doc-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding-block: 28px 64px;
}

/* How far through a 400-article code the reader is. */
.reading-progress {
  position: fixed;
  top: 65px;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 45;
  background: transparent;
  pointer-events: none;
}
.reading-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: hsl(var(--primary));
  transition: width 0.1s linear;
}

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px hsl(var(--shadow-color) / 0.08), 0 12px 28px -18px hsl(var(--shadow-color) / 0.4);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.to-top:hover { transform: translateY(-2px); border-color: hsl(var(--primary) / 0.5); }

/* ---------------------------------------------------------------- sidebar */

.toc {
  position: sticky;
  top: 80px;
  max-height: calc(100dvh - 92px);
  display: flex;
  flex-direction: column;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}
.toc__head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid hsl(var(--border));
}
.toc__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin: 0 0 8px;
}
.toc__search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font: inherit;
  font-size: 13px;
}
.toc__search::placeholder { color: hsl(var(--muted-foreground)); }
.toc__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.toc__list a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.4;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  border-left: 2px solid transparent;
}
.toc__list a:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
/* Scroll-spy state. The single biggest usability gap against lex.uz, which
   gives no indication of where you are in a 400-article code. */
.toc__list a[aria-current="true"] {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-left-color: hsl(var(--primary));
  font-weight: 600;
}
.toc__list li.is-hidden { display: none; }
.toc__empty { padding: 10px; font-size: 13px; color: hsl(var(--muted-foreground)); }

.toc-toggle { display: none; }

/* ---------------------------------------------------------------- article */

.doc-main { min-width: 0; }

.doc-header {
  position: relative;
  background:
    radial-gradient(120% 140% at 0% 0%, hsl(var(--accent) / 0.55), transparent 60%),
    hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 28px 28px 24px;
  margin-bottom: 32px;
  overflow: hidden;
}
/* One copper hairline along the top edge, the same accent the cards use. */
.doc-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0));
}
.breadcrumb {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  margin: 0 0 10px;
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: hsl(var(--primary)); text-decoration: underline; }
.doc-title {
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 14px;
  text-wrap: balance;
}
/* The document's facts, as a grid rather than a run-on line. */
.doc-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 24px;
  font-size: 13.5px;
  color: hsl(var(--muted-foreground));
  margin: 18px 0 18px;
  padding-top: 18px;
  border-top: 1px solid hsl(var(--border));
  font-variant-numeric: tabular-nums;
}
.doc-meta span { display: flex; flex-direction: column; gap: 2px; }
.doc-meta b {
  order: -1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground) / 0.85);
}
.doc-meta span > :not(b) { color: hsl(var(--foreground)); font-weight: 500; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.badge--in-force { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.badge--repealed { background: hsl(var(--warning) / 0.18); color: hsl(var(--warning-foreground)); }

.doc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.source-link { font-size: 13.5px; color: hsl(var(--muted-foreground)); text-decoration: none; }
.source-link:hover { color: hsl(var(--primary)); text-decoration: underline; }

.notice {
  border-left: 3px solid hsl(var(--warning));
  background: hsl(var(--warning) / 0.1);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  margin: 0 0 24px;
}

/* Statute text. Long-form reading is the whole job here: a measure near 72
   characters, real line height, and clear separation between provisions. */
.doc-body { font-size: 17px; line-height: 1.75; }
.doc-body p { text-wrap: pretty; }

.doc-section {
  /* The Tax Code carries about 1 MB of text. The browser skips layout and
     paint for off-screen sections while the text stays in the DOM, so crawlers
     still see every word. contain-intrinsic-size keeps the scrollbar honest. */
  content-visibility: auto;
  /* Fallback only — the generator writes a per-section estimate inline. */
  contain-intrinsic-size: auto 900px;
  padding-block: 8px 28px;
  scroll-margin-top: 80px;
}
.doc-section > h2 {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 700;
  margin: 24px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid hsl(var(--border));
  scroll-margin-top: 80px;
  text-wrap: balance;
}
.doc-section > h3 {
  font-size: 17.5px;
  line-height: 1.45;
  font-weight: 650;
  letter-spacing: -0.008em;
  margin: 30px 0 12px;
  max-width: 68ch;
  scroll-margin-top: 80px;
  text-wrap: pretty;
}
/* "43-modda." in copper, so an article number is findable while scrolling. */
.doc-section > h3 .art-num {
  color: hsl(var(--primary));
  font-variant-numeric: tabular-nums;
}
.doc-section > h3:target, .doc-section p:target {
  animation: target-flash 1.6s ease-out;
}
@keyframes target-flash {
  0%, 35% { background: hsl(var(--primary) / 0.12); box-shadow: -8px 0 0 hsl(var(--primary) / 0.12); }
  100% { background: transparent; box-shadow: none; }
}
.doc-section > h2 .anchor,
.doc-section > h3 .anchor {
  opacity: 0;
  margin-left: 8px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: hsl(var(--muted-foreground));
}
.doc-section > h2:hover .anchor, .doc-section > h2 .anchor:focus-visible,
.doc-section > h3:hover .anchor, .doc-section > h3 .anchor:focus-visible { opacity: 1; }

.doc-section p {
  margin: 0 0 14px;
  max-width: 72ch;
  scroll-margin-top: 80px;
}
.doc-section p.indent-1 { padding-left: 22px; }
.doc-section p.indent-2 { padding-left: 44px; }
.doc-section .is-hit { background: hsl(var(--warning) / 0.22); border-radius: 3px; }

.table-wrap { overflow-x: auto; margin: 0 0 16px; }
.doc-section pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
  background: hsl(var(--muted));
  padding: 12px 14px;
  border-radius: var(--radius);
  margin: 0;
}

.cta-card {
  margin: 40px 0 0;
  padding: 26px 28px;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  background:
    radial-gradient(120% 160% at 100% 0%, hsl(var(--accent) / 0.6), transparent 62%),
    hsl(var(--card));
}
.cta-card h2 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.01em; }
.cta-card p { margin: 0 0 14px; color: hsl(var(--muted-foreground)); font-size: 14.5px; max-width: 64ch; }

/* ---------------------------------------------------------------- index pages */

/* The library front page. A page of equal cards reads as a table, so the hero
   carries the weight and the cards stay quiet until the pointer reaches one. */
.hero {
  padding-block: 56px 28px;
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 8px;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}
.hero__eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: hsl(var(--primary));
}
.hero h1 {
  font-size: clamp(32px, 5.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 700;
  margin: 0 0 16px;
  max-width: 18ch;
  text-wrap: balance;
}
.hero__lead {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.6vw, 18.5px);
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
  text-wrap: pretty;
}
/* Filter and section chips. Sticky under the header, so a reader 4,000px down
   a 102-document page can still jump. */
.toolbar {
  position: sticky;
  top: 65px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-block: 14px;
  margin-bottom: 8px;
  background: hsl(var(--background) / 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border));
}
.filter {
  flex: 1 1 260px;
  max-width: 380px;
  padding: 9px 12px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--card));
  color: inherit;
  font: inherit;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.filter:focus-visible {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 7px 13px;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.chip:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary) / 0.5); }
.chip.is-active {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.chip__count { font-variant-numeric: tabular-nums; opacity: 0.65; margin-left: 5px; }
.filter-empty { padding: 40px 0; color: hsl(var(--muted-foreground)); }

.group { padding-block: 34px 0; }
.group > h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--foreground));
  margin: 0 0 18px;
}
.group > h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: hsl(var(--border));
}
.group__count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}
.group.is-hidden, .card.is-hidden { display: none; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  padding-bottom: 12px;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 16px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* The copper rule wipes in from the left on hover, which is the only moment
   the card asserts itself. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: hsl(var(--primary));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.24s ease;
}
.card:hover, .card:focus-visible {
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / 0.45);
  box-shadow: 0 1px 2px hsl(var(--shadow-color) / 0.04), 0 12px 28px -18px hsl(var(--shadow-color) / 0.35);
  outline: none;
}
.card:hover::before, .card:focus-visible::before { transform: scaleY(1); }
.card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
  text-wrap: balance;
}
.card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .card-meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.card__tag {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 6px;
  background: hsl(var(--muted));
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
}
/* The constitutions lead the library, so they get the wider cell. */
.card--feature { grid-column: span 2; }
.card--feature h3 { font-size: 19px; }
@media (max-width: 760px) { .card--feature { grid-column: span 1; } }

/* ---------------------------------------------------------------- post */

.post-layout { max-width: 720px; margin: 0 auto; padding-block: 36px 72px; }
.post-category {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.post-title {
  font-size: clamp(26px, 4.6vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.026em;
  margin: 10px 0 12px;
  text-wrap: balance;
}
.post-byline {
  font-size: 13.5px;
  color: hsl(var(--muted-foreground));
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid hsl(var(--border));
}
/* The standalone answer AI engines retrieve. It has to read correctly with no
   surrounding page, so it is the first thing after the byline. */
/* The answer a search snippet or an AI engine quotes. It leads the page and
   reads on its own, so it gets the weight of a pull quote. */
.answer {
  position: relative;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--primary));
  border-radius: 10px;
  padding: 22px 24px;
  font-size: 18.5px;
  line-height: 1.62;
  letter-spacing: -0.004em;
  margin: 0 0 34px;
  text-wrap: pretty;
}
.answer p { margin: 0; }
.post-body { font-size: 17px; line-height: 1.72; }
.post-body h2 {
  font-size: 21px;
  letter-spacing: -0.014em;
  margin: 32px 0 12px;
  text-wrap: balance;
}
.post-body h3 { font-size: 17.5px; margin: 24px 0 10px; }
.post-body p, .post-body li { max-width: 72ch; }
.post-body ul, .post-body ol { padding-left: 22px; }
.post-body li { margin-bottom: 7px; }
.post-body blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid hsl(var(--primary));
  color: hsl(var(--muted-foreground));
}
.sources {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid hsl(var(--border));
}
.sources h2 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.citation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 8px;
  padding: 14px 16px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.citation::after {
  content: "→";
  color: hsl(var(--primary));
  transition: transform 0.2s ease;
}
.citation:hover, .citation:focus-visible {
  border-color: hsl(var(--primary) / 0.5);
  transform: translateX(2px);
  outline: none;
}
.citation:hover::after { transform: translateX(3px); }
.citation b {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--primary));
}
.disclaimer {
  margin: 36px 0 0;
  padding: 14px 16px;
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius);
  font-size: 13.5px;
  color: hsl(var(--muted-foreground));
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid hsl(var(--border));
  padding-block: 28px 40px;
  font-size: 13.5px;
  color: hsl(var(--muted-foreground));
}
.site-footer .shell { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: hsl(var(--primary)); text-decoration: underline; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 1fr; gap: 0; }
  .toc {
    position: static;
    max-height: none;
    margin-bottom: 20px;
  }
  .toc__list { max-height: 50vh; }
  /* Collapsed by default on a phone: a fixed 300px rail is unusable at 360px,
     and Android is 83.8% of this market. */
  .toc-toggle {
    display: block;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid hsl(var(--border));
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    color: hsl(var(--foreground));
    cursor: pointer;
  }
  .toc[data-collapsed="true"] .toc__head,
  .toc[data-collapsed="true"] .toc__list { display: none; }
  .doc-body, .post-body { font-size: 16.5px; }
}

@media (prefers-reduced-motion: no-preference) {
  .card { animation: card-in 0.4s ease-out both; }
  .card:nth-child(2) { animation-delay: 0.04s; }
  .card:nth-child(3) { animation-delay: 0.08s; }
  .card:nth-child(4) { animation-delay: 0.12s; }
  .card:nth-child(n + 5) { animation-delay: 0.16s; }
  @keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  * { transition: none !important; animation: none !important; }
}