@font-face { font-family: 'Host Grotesk'; font-style: normal; font-display: swap; font-weight: 300 800;
  src: url('/assets/fonts/host-grotesk-latin.woff2') format('woff2-variations'); 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: 'Host Grotesk'; font-style: normal; font-display: swap; font-weight: 300 800;
  src: url('/assets/fonts/host-grotesk-latin-ext.woff2') format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-display: swap; font-weight: 400;
  src: url('/assets/fonts/dm-mono-latin.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: 'DM Mono'; font-style: normal; font-display: swap; font-weight: 400;
  src: url('/assets/fonts/dm-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
  color-scheme: light;
  --ground: #FCFAF7; --surface: rgba(255, 255, 255, 0.8); --raised: #FFFFFF; --field: #FFFFFF;
  --ink: #201E1A; --body: #45423C; --caption: #6F6A61; --dim: #8A857C;
  --line: rgba(32, 30, 26, 0.12); --line-strong: #D8D3C8;
  --accent: #0F83BD; --accent-text: #0C6693; --accent-wash: #E2F0F7;
  --signal: #0F83BD; --signal-soft: rgba(15, 131, 189, 0.3); --glow: rgba(15, 131, 189, 0.13);
  --wire-off: rgba(32, 30, 26, 0.2); --dot: rgba(138, 133, 124, 0.32);
  --positive: #2B7457; --positive-wash: #E3F0E9; --caution: #8A6116; --caution-wash: #F6EDDA;
  --negative: #B2452F; --negative-wash: #F9E8E3;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 22px 60px -30px rgba(32, 30, 26, 0.35);
  --mesh: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221000%22%20height%3D%22600%22%20viewBox%3D%220%200%201000%20600%22%3E%3Cpath%20d%3D%22M96%2074L248%2038M248%2038L404%20112M404%20112L552%2056M552%2056L700%20132M700%20132L856%2084M856%2084L948%20196M248%2038L212%20186M212%20186L338%20242M404%20112L338%20242M338%20242L496%20258M552%2056L496%20258M496%20258L642%20300M700%20132L642%20300M642%20300L800%20252M856%2084L800%20252M800%20252L930%20338M948%20196L930%20338M642%20300L580%20436M496%20258L420%20392M420%20392L580%20436M580%20436L752%20452M800%20252L752%20452M752%20452L900%20536M930%20338L900%20536M338%20242L270%20360M270%20360L420%20392%22%20fill%3D%22none%22%20stroke%3D%22%230F83BD%22%20stroke-opacity%3D%220.16%22%2F%3E%3Cg%20fill%3D%22%230F83BD%22%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%2274%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22248%22%20cy%3D%2238%22%20r%3D%222.6%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22404%22%20cy%3D%22112%22%20r%3D%222%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22552%22%20cy%3D%2256%22%20r%3D%223.4%22%20fill-opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%22700%22%20cy%3D%22132%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22856%22%20cy%3D%2284%22%20r%3D%222.6%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22948%22%20cy%3D%22196%22%20r%3D%222%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22212%22%20cy%3D%22186%22%20r%3D%222%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22242%22%20r%3D%223.4%22%20fill-opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%22496%22%20cy%3D%22258%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22642%22%20cy%3D%22300%22%20r%3D%222.6%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22252%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22930%22%20cy%3D%22338%22%20r%3D%222.6%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22420%22%20cy%3D%22392%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22580%22%20cy%3D%22436%22%20r%3D%223.4%22%20fill-opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%22752%22%20cy%3D%22452%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22900%22%20cy%3D%22536%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22270%22%20cy%3D%22360%22%20r%3D%222%22%20fill-opacity%3D%220.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --sans: 'Host Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #1B1813; --surface: rgba(38, 34, 25, 0.72); --raised: #262219; --field: rgba(17, 15, 11, 0.55);
    --ink: #F4F1EB; --body: #C9C4B9; --caption: #A6A095; --dim: #736D62;
    --line: rgba(240, 238, 233, 0.11); --line-strong: #474235;
    --accent-text: #4FB3E8; --accent-wash: #14303F;
    --signal: #4FB3E8; --signal-soft: rgba(79, 179, 232, 0.38); --glow: rgba(79, 179, 232, 0.12);
    --wire-off: rgba(240, 238, 233, 0.16); --dot: rgba(166, 160, 149, 0.2);
    --positive: #7FC8A9; --positive-wash: #1E2F28; --caution: #D2A24F; --caution-wash: #332A18;
    --negative: #E08D76; --negative-wash: #3A2620;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 70px -34px rgba(0, 0, 0, 0.75);
    --mesh: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221000%22%20height%3D%22600%22%20viewBox%3D%220%200%201000%20600%22%3E%3Cpath%20d%3D%22M96%2074L248%2038M248%2038L404%20112M404%20112L552%2056M552%2056L700%20132M700%20132L856%2084M856%2084L948%20196M248%2038L212%20186M212%20186L338%20242M404%20112L338%20242M338%20242L496%20258M552%2056L496%20258M496%20258L642%20300M700%20132L642%20300M642%20300L800%20252M856%2084L800%20252M800%20252L930%20338M948%20196L930%20338M642%20300L580%20436M496%20258L420%20392M420%20392L580%20436M580%20436L752%20452M800%20252L752%20452M752%20452L900%20536M930%20338L900%20536M338%20242L270%20360M270%20360L420%20392%22%20fill%3D%22none%22%20stroke%3D%22%234FB3E8%22%20stroke-opacity%3D%220.14%22%2F%3E%3Cg%20fill%3D%22%234FB3E8%22%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%2274%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22248%22%20cy%3D%2238%22%20r%3D%222.6%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22404%22%20cy%3D%22112%22%20r%3D%222%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22552%22%20cy%3D%2256%22%20r%3D%223.4%22%20fill-opacity%3D%220.8%22%2F%3E%3Ccircle%20cx%3D%22700%22%20cy%3D%22132%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22856%22%20cy%3D%2284%22%20r%3D%222.6%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22948%22%20cy%3D%22196%22%20r%3D%222%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22212%22%20cy%3D%22186%22%20r%3D%222%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22242%22%20r%3D%223.4%22%20fill-opacity%3D%220.8%22%2F%3E%3Ccircle%20cx%3D%22496%22%20cy%3D%22258%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22642%22%20cy%3D%22300%22%20r%3D%222.6%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22252%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22930%22%20cy%3D%22338%22%20r%3D%222.6%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22420%22%20cy%3D%22392%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22580%22%20cy%3D%22436%22%20r%3D%223.4%22%20fill-opacity%3D%220.8%22%2F%3E%3Ccircle%20cx%3D%22752%22%20cy%3D%22452%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22900%22%20cy%3D%22536%22%20r%3D%222.2%22%20fill-opacity%3D%220.3%22%2F%3E%3Ccircle%20cx%3D%22270%22%20cy%3D%22360%22%20r%3D%222%22%20fill-opacity%3D%220.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  }
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* The ground: a marine wash from the top corners and a dot grid fading downwards, with
   the neural mesh above it in the top right. Fixed, so the pages scroll over it;
   surfaces stay solid enough to read on, and nothing is drawn on a surface. */
body { margin: 0; min-height: 100vh; background: var(--ground); color: var(--body); font: 400 16px/1.55 var(--sans); }
body::before, body::after { content: ''; position: fixed; z-index: -1; pointer-events: none; }
body::before {
  inset: 0;
  background-image:
    radial-gradient(64rem 40rem at -8% -18%, var(--glow), transparent 70%),
    radial-gradient(44rem 30rem at 108% -10%, var(--glow), transparent 70%),
    radial-gradient(circle at center, var(--dot) 1px, transparent 1.6px);
  background-size: auto, auto, 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
body::after {
  top: 0; right: 0; width: min(1000px, 100vw); height: 600px;
  background: var(--mesh) right top / 100% auto no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 85% 95% at 88% 0%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 85% 95% at 88% 0%, #000 35%, transparent 80%);
}

h1, h2, h3 { color: var(--ink); margin: 0; }
h1 { font-size: clamp(26px, 3.2vw, 32px); line-height: 1.12; letter-spacing: -0.028em; font-weight: 750; margin-bottom: 10px; }
h2 { font-size: 19px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; margin: 44px 0 14px; }
h3 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 650; margin-bottom: 12px; }
p { margin: 0 0 14px; }
a { color: var(--accent-text); text-underline-offset: 3px; }
strong { color: var(--ink); font-weight: 650; }
.caption { color: var(--caption); font-size: 14px; }
.lead { color: var(--caption); margin-bottom: 28px; max-width: 64ch; }
.mono, code, pre { font-family: var(--mono); }
code { font-size: 0.86em; background: var(--accent-wash); color: var(--ink); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* The lockup: generated art, never redrawn. */
.lockup { display: inline-flex; }
.lockup img { display: block; width: auto; }

/* Pages outside the admin pages: one card in the middle, with a lit top edge. */
body.entry { display: grid; place-items: center; padding: 40px 16px; }
.card {
  position: relative; width: 100%; max-width: 460px; padding: 34px 32px 32px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.card::before, .map::before {
  content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent); opacity: 0.75;
}
.card .lockup { margin-bottom: 30px; }
.card .lockup img { height: 52px; }
.card h1 { font-size: 26px; }

/* Facts: who is asking, as what, and where the answer goes. */
dl.facts { margin: 20px 0; display: grid; grid-template-columns: max-content 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
dl.facts dt, dl.facts dd { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); }
dl.facts dt:first-of-type, dl.facts dt:first-of-type + dd { border-top: none; }
dl.facts dt { color: var(--caption); font-size: 14px; background: color-mix(in srgb, var(--field) 60%, transparent); }
dl.facts dd { color: var(--ink); overflow-wrap: anywhere; }

/* The two ends of a connection, joined by a lit wire: on the consent page. */
.link { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
.link .end { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--field); color: var(--ink); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.link .end img { height: 16px; width: auto; display: block; }
.link .wire { flex: 1; min-width: 24px; }

.notice { border-radius: 12px; padding: 12px 14px; margin: 0 0 18px; }
.notice.error { background: var(--negative-wash); color: var(--negative); }
.notice.warning { background: var(--caution-wash); color: var(--caution); }
.notice.done { background: var(--accent-wash); color: var(--ink); }

form { margin: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.actions.stretch button { flex: 1; }
button, a.button-link {
  font: inherit; font-weight: 600; font-size: 15.5px; line-height: 1.2; border-radius: 12px; padding: 12px 18px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #FFFFFF; text-decoration: none; display: inline-block;
  box-shadow: 0 8px 22px -10px rgba(15, 131, 189, 0.75);
  transition: background-color 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}
/* The design system's button: bright marine in both themes, deeper on hover. */
button:hover { background: #0C6693; border-color: #0C6693; }
button.secondary, a.button-link { background: transparent; color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
button.secondary:hover, a.button-link:hover { background: transparent; border-color: var(--caption); }
button.small, a.button-link.small { padding: 7px 12px; font-size: 14px; border-radius: 10px; }
/* The same deep red in both themes, so white text reads on it (as the marine button). */
button.danger { background: #B2452F; border-color: #B2452F; color: #FFFFFF; box-shadow: none; }
button.danger:hover { background: #963A27; border-color: #963A27; }
/* A routine switch in a list of them: outlined until pointed at, so a page of them stays calm. */
button.danger.quiet { background: transparent; color: var(--negative); border-color: color-mix(in srgb, var(--negative) 55%, transparent); }
button.danger.quiet:hover { background: #B2452F; border-color: #B2452F; color: #FFFFFF; }

label { display: block; font-size: 14px; color: var(--caption); margin: 18px 0 6px; }
input[type=email], input[type=text], select {
  width: 100%; font: inherit; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--field); color: var(--ink);
}
input:focus-visible, select:focus-visible { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.dev { margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--line-strong); }
.dev label { margin-top: 12px; }

/* The admin pages: a glass bar over a wide sheet. */
.bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap;
  padding: 12px clamp(16px, 3.2vw, 40px);
  background: color-mix(in srgb, var(--ground) 76%, transparent); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bar .home { display: flex; border-radius: 8px; }
.bar .lockup img { height: 40px; }
.bar nav { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow-x: auto; }
.bar nav a { padding: 6px 14px; border-radius: 999px; color: var(--caption); text-decoration: none; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.bar nav a:hover { color: var(--ink); }
.bar nav a[aria-current=page] { background: var(--accent-wash); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--signal-soft); }
.account { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent-text); font-weight: 700; font-size: 14px; box-shadow: inset 0 0 0 1px var(--signal-soft);
}
.who { display: grid; line-height: 1.25; min-width: 0; }
.who .email { color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.who .role { color: var(--caption); font-size: 12.5px; }
.sheet { max-width: 1120px; margin: 0 auto; padding: 40px clamp(16px, 3.2vw, 40px) 72px; }

/* A raised surface on the sheet: a panel of text, or a table. */
.panel, .table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.panel { padding: 22px 24px; }
.panel > :last-child { margin-bottom: 0; }
.panel + .table-wrap { margin-top: 18px; }
.table-wrap { overflow-x: auto; }
.table-wrap + p, .table-wrap + .actions, .table-wrap + .pager { margin-top: 18px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th { color: var(--caption); font-weight: 600; font-size: 13px; white-space: nowrap; }
tbody th { color: var(--ink); font-weight: 600; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
tbody tr:hover { background: color-mix(in srgb, var(--accent-wash) 35%, transparent); }
td.num { font-family: var(--mono); font-size: 13.5px; text-align: right; white-space: nowrap; }
.time { font-family: var(--mono); font-size: 13px; color: var(--caption); white-space: nowrap; }
td a .time, a.time { color: var(--accent-text); }

/* A person: the initial in a ring, then the address. */
.person { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.person .avatar { width: 28px; height: 28px; font-size: 12.5px; }

.badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--ink); white-space: nowrap; }
.badge.off { background: var(--negative-wash); color: var(--negative); }
.badge.muted { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--caption); }
.badge.warn { background: var(--caution-wash); color: var(--caution); }
/* A state with a light: lit marine when on, red when off. */
.badge.lit::before, .badge.off.lamp::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.badge.lit::before { background: var(--signal); box-shadow: 0 0 8px 1px var(--signal-soft); }
.badge.off.lamp::before { background: var(--negative); }

.inline { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.inline select { width: auto; min-width: 210px; padding: 7px 10px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.add { display: grid; grid-template-columns: 1fr 260px auto; gap: 12px; align-items: end; }
.add label, .filters label { margin: 0 0 6px; }
.filters { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 18px; }
pre { background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.pager { display: flex; justify-content: flex-end; margin-top: 14px; }

details > summary { cursor: pointer; color: var(--accent-text); font-size: 14px; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 130ms ease; }
details[open] > summary::before { transform: rotate(45deg); }
details > p { margin: 10px 0 0; font-size: 14px; color: var(--caption); }
details.panel > summary { color: var(--ink); font-weight: 650; font-size: 16px; }
form + details.panel { margin-top: 36px; }

/* Home: what Claude reaches through you, drawn as the wires it travels. Claude on the
   left, the brain in the middle, each data source on a branch. A lit wire carries a
   slow pulse; a source you cannot use, or one an admin switched off, hangs on a dim,
   dashed wire. */
.map {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(150px, 0.8fr) minmax(28px, 72px) minmax(200px, 1fr) minmax(28px, 56px) minmax(260px, 1.5fr);
  padding: 30px 28px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.node { position: relative; display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }
.node .title { color: var(--ink); font-weight: 650; letter-spacing: -0.01em; }
.node .sub { color: var(--caption); font-size: 13.5px; }
.node.core { border-color: var(--signal-soft); box-shadow: 0 0 0 4px var(--glow), 0 0 40px -8px var(--signal-soft); text-align: center; justify-items: center; padding: 18px 16px; }
.node.core img { height: 30px; width: auto; display: block; margin-bottom: 8px; }
.node .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.node details { margin-top: 4px; }
.wire { position: relative; height: 2px; background: var(--signal); box-shadow: 0 0 10px var(--signal-soft); overflow: hidden; }
/* The pulse: a short bright stretch sliding along a lit wire, then a rest. */
.wire::after { content: ''; position: absolute; inset: 0; }
.wire::after, .reach li.on::before {
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  background-repeat: no-repeat; background-size: 28px 100%; background-position: -28px 0;
  animation: pulse 3.6s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}
.wire.second::after { animation-delay: 0.45s; }
@keyframes pulse { 0% { background-position: -28px 0; } 55%, 100% { background-position: calc(100% + 28px) 0; } }
.reach { list-style: none; margin: 0; padding: 0; position: relative; }
.reach li { position: relative; padding: 8px 0 8px 36px; }
/* The branch into each source, and the bus it hangs from. */
.reach li::before { content: ''; position: absolute; left: 0; top: 50%; width: 36px; height: 2px; margin-top: -1px; overflow: hidden; }
.reach li.on::before { background-color: var(--signal); box-shadow: 0 0 10px var(--signal-soft); animation-delay: 0.9s; }
.reach li.on:nth-child(2)::before { animation-delay: 1.05s; }
.reach li.dim::before { background: repeating-linear-gradient(90deg, var(--wire-off) 0 5px, transparent 5px 9px); }
.reach li::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--signal); }
/* Nothing to reach (every source off or out of the role): the trunk and the bus go dark too. */
.map.quiet .wire, .map.quiet .reach li::after { background: var(--wire-off); box-shadow: none; }
.map.quiet .wire::after { animation: none; background-image: none; }
.map.quiet .node.core { box-shadow: none; border-color: var(--line); }
.reach li:first-child::after { top: 50%; }
.reach li:last-child::after { bottom: 50%; }
.reach li:only-child::after { display: none; }
.reach li.dim .node { border-style: dashed; background: transparent; }
.reach li.dim .title { color: var(--caption); }

.connect { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
ol.steps { padding-left: 22px; margin: 0 0 16px; }
ol.steps li { margin-bottom: 6px; padding-left: 4px; }
ol.steps li::marker { color: var(--accent-text); font-weight: 650; }
/* An address or a command: one click selects all of it, ready to copy. */
.copy { display: block; font-family: var(--mono); font-size: 13.5px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.copy .value { -webkit-user-select: all; user-select: all; }
.copy .prompt { color: var(--signal); -webkit-user-select: none; user-select: none; margin-right: 8px; }
.hint { margin-top: 18px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 860px) {
  .map { grid-template-columns: 1fr; padding: 22px 18px; }
  .map > .wire { width: 2px; height: 26px; margin-left: 28px; }
  .map > .wire::after { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95), transparent) no-repeat; background-size: 100% 22px; animation-name: pulse-down; }
  .reach { margin-left: 28px; }
  .reach li:first-child::after { top: 0; }
  .node.core { justify-items: start; text-align: left; }
  .connect { grid-template-columns: 1fr; }
}
@keyframes pulse-down { 0% { background-position: 0 -22px; } 55%, 100% { background-position: 0 calc(100% + 22px); } }
@media (max-width: 720px) {
  .add, .filters { grid-template-columns: 1fr; }
  .inline { flex-wrap: wrap; }
  .inline select { min-width: 0; width: 100%; }
  /* On a phone the bar scrolls away with the page, and the five links share one row. */
  .bar { position: static; gap: 12px; }
  .bar nav { order: 3; flex: 1 1 100%; justify-content: space-between; scrollbar-width: none; }
  .bar nav::-webkit-scrollbar { display: none; }
  .bar nav a { padding: 6px 10px; font-size: 14px; }
  /* The address leaves the screen but stays for a screen reader: it is the only place it is said. */
  .who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .card { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .wire::after, .map > .wire::after, .reach li.on::before { animation: none; background-image: none; }
  button, details > summary::before { transition: none; }
}