/* lab: chalk drawings with a soft glow, on the page's own charcoal or chalk */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
html.locked { overflow: hidden }
:root { --glow: color-mix(in srgb, var(--ink) 55%, transparent); --glow2: color-mix(in srgb, var(--ink) 30%, transparent); --hl: var(--ink) }
/* on chalk a glow reads as a smudge, so keep it faint */
:root[data-theme="light"] { --glow: color-mix(in srgb, var(--ink) 18%, transparent); --glow2: transparent; --hl: color-mix(in srgb, var(--ink) 35%, transparent) }

.sect { max-width: 1240px; margin: 0 auto; padding: 22px 24px 88px; box-sizing: border-box }
.sect .kick, .kick { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft) }
.sect h1 { margin: 0 0 14px; font-size: clamp(42px, 6vw, 68px); font-weight: 800; line-height: .95; letter-spacing: -.04em }
.sect .sub { margin: 0; font-size: 17px; line-height: 1.5; color: var(--soft); text-wrap: pretty }
/* the title row, as Earth's: the name, then what's here beside it */
.intro { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 22px }
.intro h1 { margin: 0; font-size: 22px; line-height: 1.1; letter-spacing: -.02em }
.intro .sub { flex: 1 1 420px; max-width: 860px; font-size: 15px; line-height: 1.4 }

/* ---------- the molecule drawing ---------- */
.mol { display: block; width: 100%; height: 100%; overflow: visible; color: var(--ink) }
.mol .b line { stroke: currentColor; stroke-width: .07; stroke-linecap: round }
.mol .t text { fill: currentColor; font: 600 .52px var(--sans); dominant-baseline: central }
.mol .t text:not(.h) { text-anchor: middle }
.mol .t text.h { font-size: .44px }
.mol .t text.ch { font-size: .34px }
.mol { filter: drop-shadow(0 0 .9px var(--glow)) drop-shadow(0 0 3px var(--glow2)) }
.mol.with-hl .hl, .mol.with-hl line.hl { stroke-width: .11 }
.mol.with-hl .hl text { font-weight: 800 }
.mol.with-hl g.hl, .mol.with-hl line.hl { filter: drop-shadow(0 0 .12px var(--hl)) drop-shadow(0 0 .3px var(--hl)) }
.mol.dim .b line:not(.hl), .mol.dim .t g:not(.hl) { opacity: .5 }

/* ---------- how well studied: a small table behind a key, a row opens a drawer ---------- */
.glance { flex: 1 0 100%; max-width: 560px }
.sum { width: 100%; border-collapse: collapse; align-self: start }
.sum caption { padding: 0 0 8px; text-align: left; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft) }
.sum tr { border-top: 1px solid var(--line); cursor: pointer; transition: background .15s }
.sum tr:last-child { border-bottom: 1px solid var(--line) }
.sum tr:hover, .sum tr.on { background: var(--wash) }
.sum th, .sum td { padding: 0; vertical-align: middle }
.sum th { text-align: left; font-weight: inherit; width: 50% }
:where(.sum th button) { appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left }
.sum th button { display: flex; align-items: center; width: 100%; min-height: 46px; padding: 6px 8px; box-sizing: border-box; cursor: pointer }
.sum th button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 6px }
.sum .share { padding: 0 14px }
.sum .share span { display: block; height: 4px; border-radius: 2px; background: var(--wash2); overflow: hidden }
.sum .share i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--ink) }
.sum .n { width: 4ch; text-align: right; font: 500 13px var(--mono); color: var(--ink) }
.sum .more { width: 34px; text-align: right; padding-right: 6px }
.sum .more svg { width: 16px; height: 16px; fill: none; stroke: var(--soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle }
.sum tr:hover .more svg, .sum tr.on .more svg { stroke: var(--ink) }

/* the drawer: up from the bottom, over a dimmed page */
.drawer { position: fixed; inset: auto 0 0; width: min(620px, 100%); max-width: none; max-height: 85dvh; margin: 0 auto; padding: 18px 20px max(22px, env(safe-area-inset-bottom)); box-sizing: border-box; border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--bg); color: var(--ink); overflow-y: auto; overscroll-behavior: contain }
.drawer::backdrop { background: rgb(0 0 0 / .6) }
.drawer[open] { display: flex; flex-direction: column; gap: 14px; animation: rise var(--duration-slow) var(--ease-smooth-out) }
@keyframes rise { from { transform: translateY(100%) } }
.ab-top { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.drawer h2 { margin: 0; font-size: 0 }
.drawer h2:focus { outline: none }
.ab-about { margin: 0; font-size: 16px; line-height: 1.5; color: var(--soft); text-wrap: pretty }
.ab-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none }
:where(.ab-list button, .ab-show) { appearance: none; margin: 0; font: inherit; color: inherit; background: none }
.ab-list button { min-height: 28px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .02em; cursor: pointer }
.ab-list button:hover { border-color: var(--ink); background: var(--wash2) }
.ab-list button:focus-visible, .ab-show:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.ab-show { align-self: flex-start; min-height: 28px; padding: 0 13px; border: 1px solid var(--ink); border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer }
.ab-show:hover { background: var(--ink); color: var(--bg) }


/* form badges: solid for nature, half for semi, outline for lab-only, so they read without colour */
.form { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; color: var(--ink) }
.form svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.form-natural { background: var(--ink); color: var(--bg) }
.form-semi { padding-left: 3px; background: transparent }
.form-semi svg { box-sizing: border-box; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--ink); color: var(--bg) }
.form-synthetic { border-style: dashed; background: transparent }

/* the study meter: three dots */
.meter { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; white-space: nowrap }
.meter i { width: 8px; height: 8px; border: 1.5px solid var(--ink); border-radius: 50%; box-sizing: border-box }
.meter span { margin-left: 5px }
.m3 i, .m2 i:nth-child(-n+2), .m1 i:first-child { background: var(--ink) }
.book { display: inline-block; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; font: 500 12px/1.3 var(--mono); white-space: nowrap }
.book b { font-weight: 500 }
.book.none { border-color: transparent; color: var(--soft) }

/* ---------- tools ---------- */
.tools { position: sticky; top: var(--bar); z-index: 31; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 -24px; padding: 12px 24px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
.search { position: relative; flex: 1 1 260px; display: flex }
.search svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--soft); stroke-width: 1.8; stroke-linecap: round; pointer-events: none }
.search input { width: 100%; height: 40px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 15px var(--sans); box-sizing: border-box }
.search input:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: transparent }
.search input::placeholder { color: var(--soft) }
.pick { display: flex; flex-wrap: wrap; gap: 6px }
.pick select { height: 40px; padding: 0 30px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; color: var(--ink); font: 600 13.5px var(--sans); appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 100% }
.pick select.on { border-color: var(--ink); background-color: var(--wash2) }
.pick select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px }
.count { flex: 1 0 100%; margin: 0; font: 500 12px var(--mono); color: var(--soft); display: flex; gap: 12px; align-items: center }
#reset { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 600 12px var(--sans); cursor: pointer }
#reset:hover { background: var(--wash2) }
:where(#key) { appearance: none; margin: 0; font: inherit }
#key { margin-left: auto; height: 26px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--soft); font: 500 11px var(--mono); letter-spacing: .04em; cursor: pointer }
#key:hover, #key[aria-expanded="true"] { border-color: var(--ink); color: var(--ink) }
#key:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px }

/* ---------- the table ---------- */
.rows { margin-top: 8px }
.tbl { width: 100%; border-collapse: collapse }
.tbl thead th { padding: 14px 10px 10px; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); text-align: left; border-bottom: 1px solid var(--line) }
.tbl .grp th { padding: 34px 10px 12px; text-align: left; font-weight: inherit; border-bottom: 1px dotted var(--ink) }
.tbl .grp h3 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.025em }
.tbl .grp h3 span { font: 500 13px var(--mono); color: var(--soft); letter-spacing: 0; vertical-align: 3px; margin-left: 4px }
.tbl .grp p { margin: 0; max-width: 760px; font-size: 14.5px; line-height: 1.5; color: var(--soft) }
.tbl tr[data-id] { cursor: pointer; transition: background .12s }
.tbl tr[data-id]:hover { background: var(--wash) }
.tbl tr[data-id]:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; background: var(--wash) }
.tbl td { padding: 10px; vertical-align: middle; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.35 }
.tbl .c-mol { width: 132px; padding: 6px 10px }
.tbl td.c-mol { height: 92px }
.tbl td.c-mol .mol { width: 132px; height: 92px }
.c-name a { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-decoration: none }
.c-name .sub { display: block; margin-top: 3px; font: 500 12px var(--mono); color: var(--soft) }
.c-route { color: var(--soft); max-width: 180px }
.c-made .yr { display: block; font: 500 14px var(--mono) }
.c-made .by { display: block; margin-top: 2px; font-size: 12.5px; color: var(--soft); max-width: 220px }
.empty { padding: 40px 0; color: var(--soft); font-size: 16px }

.notes { margin-top: 48px; max-width: 760px; font-size: 14px; line-height: 1.55; color: var(--soft) }
.notes p { margin: 0 0 10px }
.notes b { color: var(--ink) }

/* ---------- detail ---------- */
.detail { width: min(1180px, calc(100vw - 32px)); max-width: none; height: min(900px, calc(100dvh - 32px)); max-height: none; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55); overflow: hidden }
.detail[open] { display: flex; flex-direction: column }
.detail::backdrop { background: color-mix(in srgb, var(--charcoal) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px) }
.d-top { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px dotted var(--ink) }
.d-top .kick { flex: 1; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ic { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; flex: none }
.ic:hover { background: var(--wash2) }
.ic:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.d-body { flex: 1; overflow: auto; padding: 22px 26px 32px; overscroll-behavior: contain }
.d-head h2 { margin: 0; font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1 }
.d-head .aka { margin: 8px 0 0; font-size: 14px; color: var(--soft) }
.d-head .aka:empty { display: none }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0 }
.d-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 22px }
.d-3d { margin: 0; position: sticky; top: calc(var(--bar) * 2); align-self: start }
.v3d { position: relative; aspect-ratio: 1; width: 100%; border-radius: 20px; overflow: hidden; background: var(--charcoal); cursor: grab; touch-action: none }
.v3d:active { cursor: grabbing }
.v3d canvas { display: block; width: 100% !important; height: 100% !important }
:root[data-theme="light"] .v3d { background: var(--chalk) }
:root[data-theme="light"] .v3d canvas { filter: url(#chalk) }
.v3d.none::after { content: 'No 3D model for this one yet'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--chalk); font-size: 14px; background: var(--charcoal) }
.nogl { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--chalk); font-size: 14px }
.v-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.v-tools .seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px }
.v-tools button { height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font: 600 13px var(--sans); cursor: pointer }
.v-tools .tog { border: 1px solid var(--line); height: 40px }
.v-tools button[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.v-tools .tog[aria-pressed="true"] { border-color: var(--ink) }
.v-tools button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.d-3d .note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--soft) }
.d-2d { margin: 0 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 20px }
#d-2d { height: 240px }
.d-2d figcaption { margin-top: 8px; font-size: 13px; color: var(--soft); line-height: 1.45 }
.formula { font: 500 13px var(--mono); color: var(--ink) }
.about { margin: 0 0 18px; font-size: 17px; line-height: 1.55; text-wrap: pretty }
.d-text section, .d-links { margin: 0 0 18px; padding-top: 14px; border-top: 1px solid var(--line) }
.d-body h3 { margin: 0 0 8px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft) }
.d-text p { margin: 0 0 6px; font-size: 15px; line-height: 1.5 }
.d-text .big { font-size: 16px }
.d-text .big b { font: 600 18px var(--mono) }
.d-text .flag { font-size: 13px; color: var(--soft) }
.routes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px !important }
.routes span { padding: 4px 10px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 600 }
.refs { display: flex; flex-wrap: wrap; gap: 4px 12px }
.refs a, .links a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--soft); text-decoration: none; overflow-wrap: anywhere }
.refs a:hover { color: var(--ink); text-decoration: underline }
.refs svg, .links svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { display: inline-flex; gap: 6px; padding: 7px 13px; border: 1px solid var(--ink); border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none }
.chip:hover { background: var(--ink); color: var(--bg) }
.links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 }
.links a { flex-direction: column; align-items: flex-start; position: relative; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink) }
.links a b { font-size: 15px }
.links a span { font-size: 12.5px; color: var(--soft) }
.links a svg { position: absolute; right: 12px; top: 13px }
.links a:hover { border-color: var(--ink); background: var(--wash) }

/* the 2c strip */
.strip { margin: 10px 0 22px; padding-top: 14px; border-top: 1px solid var(--line) }
.strip .hint { margin: 0 0 10px; font-size: 13.5px; color: var(--soft) }
.strip ol { position: relative; display: flex; gap: 8px; margin: 0 -26px; padding: 4px 26px 12px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin }
.strip li { flex: none; scroll-snap-align: center }
.strip button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 116px; padding: 8px 6px 10px; border: 1px solid var(--line); border-radius: 16px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, background .15s }
.strip button .mol { width: 100px; height: 84px }
.strip button b { font-size: 13px }
.strip button span { font: 500 11px var(--mono); color: var(--soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.strip button:hover { background: var(--wash) }
.strip button[aria-pressed="true"] { border-color: var(--ink); background: var(--wash2) }
.strip button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }

@media (max-width: 1000px) {
  .tbl .c-route { display: none }
}
@media (max-width: 860px) {
  .d-grid { grid-template-columns: 1fr }
  .d-3d { position: static }
  .v3d { aspect-ratio: 4 / 3 }
  .links { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
/* phone: rows become cards */
@media (max-width: 720px) {
  .sect { padding: 16px 16px 56px }
  .intro { margin-bottom: 16px }
  .glance { max-width: none }
  .sum th button { min-height: 44px; padding: 6px 2px }
  .sum .share { padding: 0 10px }
  .tools { position: static; margin: 0 -16px; padding: 10px 16px; backdrop-filter: none; -webkit-backdrop-filter: none }
  .search { flex-basis: 100% }
  .pick { display: grid; grid-template-columns: 1fr 1fr; width: 100% }
  .pick label:last-child { grid-column: span 2 }
  .pick select { width: 100% }
  .tbl, .tbl tbody { display: block }
  .tbl thead { display: none }
  .tbl .grp { display: block }
  .tbl .grp th { display: block; padding: 28px 0 10px }
  .tbl tr[data-id] { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: 'mol name' 'mol form' 'mol made' 'mol meta'; column-gap: 12px; row-gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line) }
  .tbl td { display: block; padding: 0; border: 0 }
  .tbl td.c-mol { grid-area: mol; width: 96px; height: auto; padding: 0; align-self: center }
  .tbl td.c-mol .mol { width: 96px; height: 80px }
  .c-name { grid-area: name }
  .c-form { grid-area: form }
  .c-made { grid-area: made; display: flex !important; gap: 8px; align-items: baseline }
  .c-made .by { margin: 0 }
  .c-book { grid-area: meta; display: none !important }
  .c-studied { grid-area: meta }
  .c-name a { font-size: 16px }
  .detail { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0 }
  .d-body { padding: 16px 16px 28px }
  .strip ol { margin: 0 -16px; padding: 4px 16px 12px }
  #d-2d { height: 200px }
}
@media (prefers-reduced-motion: reduce) { .sum tr, .strip button, .tbl tr[data-id] { transition: none } .drawer[open] { animation: none } }

/* ---------- the law ---------- */
.d-law { margin: 0 0 22px; padding-top: 14px; border-top: 1px solid var(--line) }
.d-law p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; max-width: 760px }
.d-law h4 { margin: 22px 0 4px; font-size: 16px; font-weight: 700 }
.law-defs { position: absolute; width: 0; height: 0; overflow: hidden; color: var(--ink) }
.law-note, .law-nomap, .law-wait, .law-hint, .law-nd, .law-tab-about { color: var(--soft) }
.law-wait, .law-hint, .law-nd { font-size: 13.5px !important }
.law-map { margin: 14px 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: 20px }
.law-tabs { display: inline-flex; flex-wrap: wrap; gap: 0; padding: 3px; border: 1px solid var(--line); border-radius: 999px }
.law-tabs button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); font: 600 14px var(--sans); cursor: pointer }
.law-tabs button b { font: 500 12px var(--mono); margin-left: 3px }
.law-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg) }
.law-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.law-svg { margin: 12px 0 6px; color: var(--ink) }
.law-svg svg { display: block; width: 100%; height: auto }
.law-svg path { stroke: currentColor; stroke-width: .5; stroke-opacity: .35; opacity: .28; transition: opacity .2s }
.law-svg path.nd { fill: none; stroke-dasharray: 2 2; stroke-opacity: .3; opacity: 1 }
.law-svg path.on { opacity: 1; stroke-opacity: .9; stroke-width: .7 }
.law-svg a:hover path { stroke-opacity: 1; stroke-width: 1.2 }
.law-svg circle { display: none; fill: var(--bg); stroke: currentColor; stroke-width: 1.4 }
.law-svg circle.on { display: inline }
.law-svg circle[data-st="legal"], .law-svg circle[data-st="medical"] { fill: currentColor }
.law-tab-about { font-size: 13.5px !important; margin-bottom: 10px !important }
.law-list ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; margin: 0; padding: 0; list-style: none }
.law-list ul.many { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); max-height: 260px; overflow: auto; scrollbar-width: thin }
.law-list a { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 6px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px }
.law-list a:hover { background: var(--wash) }
.law-list .sw { width: 14px; height: 14px; flex: none; color: var(--ink) }
.law-list .sw rect { stroke: currentColor; stroke-opacity: .5 }
.law-list .n { flex: 1; min-width: 0; line-height: 1.2 }
.law-list .n small { display: block; font-size: 12px; color: var(--soft) }
.law-list .s { font: 500 11.5px var(--mono); color: var(--soft); white-space: nowrap }
.law-empty { font-size: 14px; color: var(--soft) }
.law-nd { margin: 10px 0 0 !important }
.law-access { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-top: 10px }
.law-access a { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 34px 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none }
.law-access a:hover { border-color: var(--ink); background: var(--wash) }
.law-access .k { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft) }
.law-access .k em { display: inline-block; white-space: nowrap; margin-left: 8px; padding: 1px 6px; border: 1px dashed currentColor; border-radius: 6px; font-style: normal }
.law-access b { font-size: 15px; line-height: 1.25 }
.law-access .a { font-size: 13.5px; line-height: 1.4; color: var(--soft) }
.law-access .h { margin-top: 2px; font: 500 11.5px var(--mono); color: var(--soft); overflow-wrap: anywhere }
.law-access svg { position: absolute; right: 12px; top: 13px; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.law-small { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--wash) }
.law-small p { font-size: 13px !important; color: var(--soft); margin: 0 0 6px !important }
.law-small p:last-child { margin: 0 !important }
.law-small b { color: var(--ink) }
@media (max-width: 720px) {
  .law-map { margin: 12px -6px; padding: 10px }
  .law-tabs { display: flex; width: 100%; box-sizing: border-box }
  .law-tabs button { flex: 1; padding: 0 8px }
}
@media (prefers-reduced-motion: reduce) { .law-svg path { transition: none } }