/* Dolphwin: the Record look. One stylesheet for every page. */
@font-face { font-family:"Instrument Sans"; font-weight:400; font-style:normal; font-display:swap; src:url(/fonts/instrument-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-weight:500; font-style:normal; font-display:swap; src:url(/fonts/instrument-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-weight:600; font-style:normal; font-display:swap; src:url(/fonts/instrument-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-weight:700; font-style:normal; font-display:swap; src:url(/fonts/instrument-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:400; font-style:normal; font-display:swap; src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }

:root {
  /* Ocean palette (2026-10-02): abyss navy for the brand, a livelier dolphin blue for actions, sonar aqua for the ping. */
  --bg:#FFFFFF; --panel:#F2F6FA; --card:#FFFFFF; --ink:#071A2C; --ink2:#1A2C40; --muted:#526273; --line:#E1E8EF; --line2:#CFD9E3;
  --brand:#06223A; --signal:#1263F1; --signal-ink:#FFFFFF; --link:#0F55D6;
  --sonar:#11B5AA; --sonar-ink:#087A73; --shallows:#E3F3F6;
  --ok:#0F7A4A; --okbg:#E7F4EC; --warn:#9A5B06; --warnbg:#FDF3E3; --bad:#A3261B; --badbg:#FCEBE9; --none:#5A6474; --nonebg:#EEF1F5;
  --shadow:0 2px 8px rgba(11,18,32,.08); --shadow-lg:0 18px 40px rgba(11,18,32,.08);
  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:var(--sans);   /* one family across the product */
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r:12px; --r-lg:16px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#04131F; --panel:#0A1E30; --card:#081A2A; --ink:#EAF2F8; --ink2:#D0DDE8; --muted:#93A6B8; --line:#14304A; --line2:#1D3D5C;
  --brand:#EAF2F8; --signal:#4B8DFF; --signal-ink:#03101C; --link:#8DBBFF;
  --sonar:#2ED3C6; --sonar-ink:#5EE3D8; --shallows:#08263A;
  --ok:#5CCB93; --okbg:#10291D; --warn:#F0B35A; --warnbg:#2E2210; --bad:#FF8C80; --badbg:#321612; --none:#9AA4B2; --nonebg:#182231;
  --shadow:0 2px 10px rgba(0,0,0,.4); --shadow-lg:0 18px 40px rgba(0,0,0,.45);
} }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 var(--sans); -webkit-font-smoothing:antialiased;
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
/* The footer sits at the bottom of short pages instead of floating mid-screen (live 2026-10-04: the signed-in page). */
body > main, body > .wrap { flex:1 0 auto; width:100%; box-sizing:border-box; }
.sitefoot { margin-top:auto; }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
h1, h2, h3 { color:var(--ink); }
.mono { font-family:var(--mono); font-size:.85em; }
.muted { color:var(--muted); font-size:14px; }
.small { font-size:13px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible { outline:3px solid var(--signal); outline-offset:2px; border-radius:6px; }
/* Buttons and fields get a soft ring that follows their shape, never a square box (live 2026-10-04). */
button:focus-visible, .btn:focus-visible, select:focus-visible, input:not([type=checkbox]):focus-visible, textarea:focus-visible {
  outline:none; box-shadow:0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--signal) 70%, transparent); }

/* Brand */
.brand { display:inline-flex; align-items:baseline; gap:10px; color:var(--brand); font-weight:700; letter-spacing:-.6px; text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand svg { flex:none; }
/* The wordmark: the logo is the D of Dolphwin */
.wm { display:inline-flex; align-items:baseline; font-weight:700; letter-spacing:-.045em; line-height:1; white-space:nowrap; gap:0; }
.wm .wm-d { height:.74em; width:auto; flex:none; margin-right:.035em; align-self:baseline; overflow:visible; }
.mark-d { fill:var(--brand); } .mark-p { fill:var(--signal); } .mark-a { stroke:var(--sonar); }
.beta { font:600 11px/1 var(--sans); letter-spacing:.6px; text-transform:uppercase; color:var(--muted); border:1px solid var(--line2);
  border-radius:999px; padding:4px 7px; }

/* Page shell for content pages */
.shell { max-width:1080px; margin:0 auto; padding:0 24px; }
.topbar { border-bottom:1px solid var(--line); background:var(--bg); }
.topbar .shell { display:flex; align-items:center; gap:22px; min-height:68px; flex-wrap:wrap; }
.nav { display:flex; align-items:center; gap:20px; margin-left:auto; flex-wrap:wrap; font-size:15px; }
.nav a { color:var(--muted); } .nav a:hover { color:var(--ink); text-decoration:none; }
.nav a.strong { color:var(--ink); font-weight:600; }
.nav a.btn, .nav a.btn:hover { color:var(--signal-ink); }
.page { padding:48px 0 72px; }
.page h1 { font-weight:700; font-size:clamp(32px, 4.4vw, 44px); line-height:1.1; letter-spacing:-.03em; margin:0 0 12px; }
.page h2 { font-size:20px; margin:32px 0 10px; }
.lede { font-size:19px; color:var(--muted); max-width:680px; margin:0 0 28px; }

/* Controls */
button, .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border:0;
  border-radius:10px; background:var(--signal); color:var(--signal-ink); font:600 15px/1 var(--sans); cursor:pointer; text-decoration:none; }
button:hover, .btn:hover { filter:brightness(1.06); text-decoration:none; }
button:disabled { opacity:.6; cursor:default; }
.ghost, .btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line2); font-weight:500; }
.ghost:hover { border-color:var(--ink); filter:none; }
.quiet { background:var(--panel); color:var(--ink); border:1px solid var(--panel); font-weight:500; }
.quiet:hover { border-color:var(--line2); filter:none; }
.pillbtn { border-radius:999px; }
/* The open list of a select is drawn by the browser: give its options the page's own colours, so they never inherit a
   faded placeholder grey on a white popup (live 2026-10-03, dark mode). */
select option, select optgroup { color:var(--ink); background:var(--card); }
input, select, textarea { font:16px/1.4 var(--sans); color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:10px;
  min-height:44px; padding:10px 14px; }
input::placeholder, textarea::placeholder { color:var(--muted); }
label { font-size:14px; color:var(--muted); }

/* Surfaces */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; margin-top:16px; }
.panel { background:var(--panel); border-radius:var(--r); padding:18px 20px; }
.label { font:700 12px/1.2 var(--sans); letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.stamp { display:inline-block; border:1.5px solid var(--ok); color:var(--ok); border-radius:6px; padding:3px 8px; font:700 12px/1.2 var(--sans);
  letter-spacing:.6px; text-transform:uppercase; }
.stamp.teal, .stamp.p-teal, .stamp.p-ok { border-color:var(--ok); color:var(--ok); }
.stamp.p-warn { border-color:var(--warn); color:var(--warn); }
.stamp.p-none { border-color:var(--line2); color:var(--muted); }
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font:600 12.5px/1.3 var(--sans); vertical-align:middle; }
.p-ok { background:var(--okbg); color:var(--ok); } .p-teal { background:var(--okbg); color:var(--ok); }
.p-warn { background:var(--warnbg); color:var(--warn); } .p-none { background:var(--nonebg); color:var(--none); }
.stop { margin-top:14px; padding:12px 14px; border-radius:10px; background:var(--warnbg); color:var(--warn); font-size:15px; }
.quote { font-size:17px; font-weight:500; line-height:1.5; color:var(--ink2); margin:10px 0 0; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:13px; }
details > summary { cursor:pointer; min-height:32px; }

/* Footer */
.foot { background:var(--panel); border-top:1px solid var(--line); font-size:14px; }
.foot .row { padding:14px 24px; display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.foot .row + .row { border-top:1px solid var(--line); }
.foot .row.fine { display:block; line-height:1.6; } .foot .row.fine a { text-decoration:underline; }
.foot a { color:var(--muted); } .foot a:hover { color:var(--ink); }
.foot .right { margin-left:auto; display:flex; gap:22px; flex-wrap:wrap; }
.fine { color:var(--muted); font-size:13px; }

/* Toast */
#toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); max-width:min(560px, calc(100% - 32px)); background:var(--ink);
  color:var(--bg); padding:12px 16px; border-radius:12px; font-size:15px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  box-shadow:var(--shadow-lg); z-index:20; }
#toast.on { opacity:1; transform:translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* Older page names for the same tokens (pages written before the Record look). */
:root { --navy:var(--brand); --soft:var(--panel); --teal:var(--ok); --tealbg:var(--okbg); --danger:var(--bad); }

/* Page header used by every secondary page */
.pagehead { display:flex; align-items:center; gap:14px; padding:6px 0 18px; margin-bottom:22px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.pagehead .brand { font-size:21px !important; }
.pagehead .what { color:var(--muted); font-size:15px; padding-left:14px; border-left:1px solid var(--line2); }
main h1 { font-weight:700; letter-spacing:-.03em; }
main > h1 { font-size:clamp(28px, 3.6vw, 38px) !important; line-height:1.15 !important; margin:0 0 12px !important; }

/* Tap targets on phones (QA 2026-10-01) */
@media (max-width:600px) {
  .foot .row:not(.fine) a { display:inline-flex; align-items:center; min-height:44px; }
  .foot .row:not(.fine) { row-gap:0; padding-top:6px; padding-bottom:6px; }
  .foot .right { row-gap:0; column-gap:18px; margin-left:0; width:100%; }
  .nav a { display:inline-flex; align-items:center; min-height:44px; }
  details > summary { min-height:44px; display:flex; align-items:center; }
  input[type=checkbox] { width:22px; height:22px; }
  .beta { font-size:12px; }
}
h1, h2, .h2 { text-wrap:balance; }
/* one checkbox look, both themes */
input[type=checkbox] { width:20px; height:20px; min-height:0; padding:0; -webkit-appearance:none; appearance:none; flex:none; margin:2px 0 0; border:2px solid var(--line2); border-radius:6px;
  background:var(--card) center/16px no-repeat; cursor:pointer; transition:background-color .15s, border-color .15s; }
input[type=checkbox]:hover { border-color:var(--signal); }
input[type=checkbox]:checked { background-color:var(--signal); border-color:var(--signal);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
input[type=checkbox]:focus-visible { outline:3px solid color-mix(in srgb, var(--signal) 45%, transparent); outline-offset:2px; }
pre.code { white-space:pre; overflow-x:auto; }
.card .scroll { display:block; overflow-x:auto; }
.card:has(> table) { overflow-x:auto; }   /* a wide table scrolls inside its card; the table itself stays full width (QA 2026-10-04) */

/* Shared site header (every page but the app home): one look everywhere (QA 2026-10-01) */
.site-top .brand { font-size:22px; }
.site-top .shell { padding-top:4px; padding-bottom:4px; flex-wrap:nowrap; }
.nav .menu { display:none; position:relative; }
.nav .menu summary { list-style:none; cursor:pointer; min-height:44px; display:flex; align-items:center; padding:0 12px; border:1px solid var(--line2);
  border-radius:999px; color:var(--ink); font-weight:600; font-size:15px; }
.nav .menu summary::-webkit-details-marker { display:none; }
.nav .menu-list { position:absolute; right:0; top:52px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg);
  padding:8px; display:grid; min-width:220px; z-index:30; }
.nav .menu-list a { padding:12px 14px; border-radius:10px; color:var(--ink); min-height:44px; display:flex; align-items:center; }
.nav .menu-list a:hover { background:var(--panel); text-decoration:none; }
@media (max-width:760px) { .nav a.full { display:none; } .nav .menu { display:block; } .nav { gap:10px; } }
.site-top .nav a.here { color:var(--ink); font-weight:600; }
.site-top .nav a.strong { color:var(--ink); font-weight:600; }
.foot .fine { color:var(--muted); }

/* Footer: one quiet line, like a search page. The details live on their own pages. */
.sitefoot { border-top:1px solid var(--line); background:var(--panel); font-size:14px; }
.sitefoot .sf-bar { display:flex; justify-content:space-between; align-items:center; gap:8px 24px; flex-wrap:wrap; padding:10px 24px; }
.sitefoot .sf-l, .sitefoot .sf-r { display:flex; align-items:center; flex-wrap:wrap; gap:0 22px; }
.sitefoot a { color:var(--muted); display:inline-flex; align-items:center; min-height:40px; }
.sitefoot a:hover { color:var(--ink); text-decoration:none; }
.sitefoot .beta { cursor:default; }
.sitefoot .sf-m { flex:1 1 320px; text-align:center; font-size:12.5px; color:var(--muted); max-width:620px; line-height:1.5; }
.sitefoot .sf-m a { display:inline; min-height:0; color:inherit; text-decoration:underline; text-underline-offset:2px; }
.sitefoot .sf-tag { display:block; color:var(--ink2); font-weight:600; font-size:13.5px; letter-spacing:-.01em; }
.sitefoot .sf-fine { display:block; }
@media (max-width:600px) {
  .sitefoot .sf-bar { justify-content:center; padding:6px 16px 10px; }
  .sitefoot .sf-m { order:3; flex-basis:100%; }
  .sitefoot .sf-l, .sitefoot .sf-r { justify-content:center; gap:0 18px; }
  .sitefoot a { min-height:44px; }
}

/* One header on every page: the same height, logo position and size as the search app. */
.site-top .hdr-in { display:flex; align-items:center; gap:22px; min-height:68px; padding:14px 24px; }
.site-top .brand { font-size:22px; }
@media (max-width:720px) { .site-top .hdr-in { padding:12px 16px; gap:12px; } }
.card, .answer, .panel { overflow-wrap:break-word; }   /* a 200-character name echoed back never pushes the page sideways */