/* Comprise Connect and the public site: the Field Guide look (comprise-dev, direction C "Field Guide" on direction B's
   grey, decision Q52), so both read as the same product as the app.
   - Libre Franklin, vendored in fonts/ (SIL OFL); nothing loads from another origin, which is all the CSP allows.
   - A neutral grey ground with white cards (B's neutrals), C's components and colours.
   - Colour carries meaning, never decoration: the eight module hues mark the modules (an isotype's parts are drawn from
     Products, Markets and Corporation, as its building is); amber is something waiting for someone, red a problem,
     green done; the chrome (links, buttons, the logo's way home) uses the logo's blues and greys, which no module owns.
   - Plain words first; the model's term is in the ? help (field.js); ids, fingerprints and keys sit behind Details.
   No inline style anywhere: a colour that varies is a class (.m-C …), never a style attribute. */

@font-face { font-family: 'Libre Franklin'; src: url('/static/fonts/LibreFranklin-VariableFont_wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/static/fonts/LibreFranklin-Italic-VariableFont_wght.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }

/* The tokens mirror comprise-dev's app/static/field.css :root, the source of truth (MANIFESTO.md section 6): if a value
   here disagrees with field.css, field.css wins. Below the line, a few tints Connect and the site add for their own
   components (a blue and a slate ground, the lines of the state colours). */
:root {
  --fg-sans: 'Libre Franklin', 'Franklin Gothic Medium', 'Franklin Gothic', 'Helvetica Neue', Arial, sans-serif;
  --fg-mono: ui-monospace, Menlo, Consolas, monospace;
  /* ground and ink: B's neutral greys */
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f9fafb; --line-1: #e2e5ea; --line-2: #eef0f3;
  --paper: var(--bg); --card: var(--surface-2); --sheet: var(--surface); --ink: #1a1f2b; --ink2: #4c5566; --ink3: #606878;
  --line: var(--line-1); --line2: var(--line-2); --muted: var(--ink3);
  /* the chrome: the logo's blues and greys */
  --navy: #000053; --blue: #264b8a; --blue2: #1a376e; --slate: #67789e; --grey: #8c8ea3; --link: #264b8a;
  /* meanings */
  --q: #9a5a0c; --q-line: #D9822B; --q-bg: #fbeed9;          /* an open question; here, anything waiting for someone */
  --bad: #a33a2a; --bad-bg: #f8e3df; --ok: #2b6e3f; --ok-bg: #e2f0e6; --warn: #8a5a0c;
  /* the eight modules: the hue (graphics), its ink (text on white or tint, 4.5:1 or better), its tint (grounds) */
  --m-C: #D2433F; --m-C-ink: #a8302c; --m-C-tint: #fae8e8;
  --m-O: #1F6F8B; --m-O-ink: #1a5f77; --m-O-tint: #e4eef1;
  --m-M: #D9822B; --m-M-ink: #8f5419; --m-M-tint: #faf0e6;
  --m-P: #8A4FD8; --m-P-ink: #6f3dbf; --m-P-tint: #f1eafa;
  --m-R: #E0559F; --m-R-ink: #a33b74; --m-R-tint: #fbebf3;
  --m-I: #3D63DD; --m-I-ink: #3052c0; --m-I-tint: #e8ecfb;
  --m-S: #5FAE3A; --m-S-ink: #3d7025; --m-S-tint: #ecf5e7;
  --m-E: #8E9AA6; --m-E-ink: #5d666f; --m-E-tint: #f1f3f4;
  /* type scale (px): 12 · 13.5 · 15 · 17 · 20 · 26 · 34 · 44 */
  --t-xs: 12px; --t-s: 13.5px; --t-m: 15px; --t-l: 17px; --t-xl: 20px; --t-2: 26px; --t-3: 34px; --t-4: 44px;
  /* spacing: 4 · 8 · 12 · 16 · 24 · 32 · 48 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r1: 4px; --r2: 8px; --r3: 14px;
  --shadow: 0 1px 2px rgba(26, 31, 43, .06), 0 4px 14px rgba(26, 31, 43, .06);
  /* ---- Connect's and the site's additions ---- */
  --blue-bg: #ebf0f8; --blue-line: #cbd7ec; --slate-bg: #eceef4; --slate-line: #d3d7e3; --slate-ink: #4f5d80;
  --bad-line: #d2433f; --ok-line: #5fae3a; --field-line: #cfd4dc;
}
.m-C { --m: var(--m-C); --mk: var(--m-C-ink); --mt: var(--m-C-tint); }
.m-O { --m: var(--m-O); --mk: var(--m-O-ink); --mt: var(--m-O-tint); }
.m-M { --m: var(--m-M); --mk: var(--m-M-ink); --mt: var(--m-M-tint); }
.m-P { --m: var(--m-P); --mk: var(--m-P-ink); --mt: var(--m-P-tint); }
.m-R { --m: var(--m-R); --mk: var(--m-R-ink); --mt: var(--m-R-tint); }
.m-I { --m: var(--m-I); --mk: var(--m-I-ink); --mt: var(--m-I-tint); }
.m-S { --m: var(--m-S); --mk: var(--m-S-ink); --mt: var(--m-S-tint); }
.m-E { --m: var(--m-E); --mk: var(--m-E-ink); --mt: var(--m-E-tint); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 400 var(--t-m)/1.55 var(--fg-sans); color: var(--ink);
  background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--blue2); }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: var(--t-3); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: var(--t-xl); font-weight: 700; }
h3 { font-size: var(--t-l); font-weight: 700; }
h4 { font-size: var(--t-m); font-weight: 700; }
code, kbd { font-family: var(--fg-mono); font-size: .88em; overflow-wrap: anywhere; }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.muted { color: var(--ink2); }
.hint { color: var(--ink2); font-size: var(--t-s); }
.fg-skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: #fff !important; padding: 8px 12px; }
.fg-skip:focus { left: 8px; top: 8px; }

/* ---- the header: the logo (the way home), where you are, and who is signed in ---- */
header.fg-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: 10px 24px; min-height: 60px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.fg-logo { display: inline-flex; align-items: center; padding: 6px 8px; margin-left: -8px; border-radius: var(--r2); flex: none; transition: background .12s; }
.fg-logo:hover { background: var(--line-2); box-shadow: inset 0 0 0 1px var(--line-1); }
.fg-logo-full { display: block; height: 26px; width: auto; }
.fg-logo-mark { display: none; height: 32px; width: 32px; }
.fg-crumbs { flex: 1 1 240px; min-width: 0; }                        /* below this the actions wrap, so words never squeeze to a letter a line */
.fg-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; font-size: var(--t-m); }
.fg-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.fg-crumbs li + li::before { content: '›'; color: var(--ink3); margin: 0 10px 0 8px; font-size: 18px; line-height: 1; }
.fg-crumbs li:first-child::before { content: ''; width: 1px; height: 22px; background: var(--line); margin: 0 14px 0 2px; }
.fg-crumbs a { color: var(--ink2); text-decoration: none; }
.fg-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.fg-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.fg-actions { display: flex; align-items: center; gap: var(--s2) var(--s3); flex: none; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.fg-nav { color: var(--ink2) !important; text-decoration: none; font-size: var(--t-s); font-weight: 600; padding: 6px 8px; border-radius: var(--r2); }
.fg-nav:hover { background: var(--line-2); color: var(--ink) !important; }
.fg-nav[aria-current] { color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--blue); border-radius: var(--r2) var(--r2) 0 0; }
.fg-who { color: var(--ink2); font-size: var(--t-s); max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-staff { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--slate); background: var(--slate-bg);
  border: 1px solid var(--slate-line); border-radius: 999px; padding: 1px 8px; }

/* ---- the page ---- */
main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s7); }
footer.fg-foot { border-top: 1px solid var(--line); background: var(--surface); color: var(--ink2); font-size: var(--t-s); }
footer.fg-foot > div { max-width: 1120px; margin: 0 auto; padding: var(--s4) var(--s5); display: flex; gap: var(--s3) var(--s4); flex-wrap: wrap; align-items: flex-start; }
footer.fg-foot p { margin: 0; max-width: 84ch; }
footer.fg-foot img { height: 22px; width: 22px; flex: none; }

.fg-notice, .fg-error { display: flex; gap: 10px; align-items: baseline; margin: 0 0 var(--s4); padding: 10px 14px; border-radius: var(--r2); border: 1px solid; font-weight: 500; }
.fg-notice { background: var(--ok-bg); border-color: #b9dcc4; color: #1d4d2c; }
.fg-notice::before { content: '✓'; font-weight: 800; color: var(--ok); }
.fg-error { background: var(--bad-bg); border-color: #efc3bb; color: #6e2318; }
.fg-error::before { content: '!'; font-weight: 800; color: var(--bad); }

/* the opening card: the person's question, then the answer */
.fg-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s5) var(--s6); box-shadow: var(--shadow); margin: 0 0 var(--s5); }
.fg-hero h1 { margin: 2px 0 var(--s2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fg-hero > :last-child { margin-bottom: 0; }
.fg-kicker { margin: 0 0 4px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink2); font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fg-answer { font-size: var(--t-l); line-height: 1.55; margin: 8px 0; max-width: 72ch; }
.fg-lede { color: var(--ink2); font-size: var(--t-l); margin: 6px 0 var(--s4); max-width: 68ch; }
.fg-work { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: var(--s4) 0 0; }

/* figures with their meaning */
.fg-tiles { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1px solid var(--line);
  border-radius: var(--r2); background: var(--surface); }
.fg-tiles li { padding: var(--s3) var(--s4); border-left: 1px solid var(--line-2); margin-left: -1px; min-width: 0; }
.fg-tiles .k { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); font-weight: 600; }
.fg-tiles .v { display: block; font-size: var(--t-xl); font-weight: 700; margin: 2px 0; }
.fg-tiles .n { display: block; font-size: var(--t-s); color: var(--ink2); }
.fg-tiles .v.ok { color: var(--ok); } .fg-tiles .v.q { color: var(--q); } .fg-tiles .v.bad { color: var(--bad); }

/* sections and cards */
.fg-sec { margin: var(--s6) 0; }
.fg-sec > h2, .fg-h2 { font-size: var(--t-xl); margin: 0 0 var(--s2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fg-sec > .fg-lede { font-size: var(--t-m); margin: 0 0 var(--s3); }
.fg-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s4) var(--s5); margin: 0 0 var(--s4); }
.fg-card > :last-child { margin-bottom: 0; }
.fg-card h2, .fg-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fg-narrow { max-width: 580px; margin-left: auto; margin-right: auto; }
.fg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
.fg-small { font-size: var(--t-s); color: var(--ink2); }
.fg-none { color: var(--ink2); font-style: italic; }
.fg-center { text-align: center; }
.fg-mark-big { display: block; width: 64px; height: 64px; margin: 0 auto var(--s3); }

/* what needs doing, in order */
.fg-att { list-style: none; counter-reset: att; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.fg-att > li { counter-increment: att; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); background: var(--surface);
  border: 1px solid var(--line); border-left: 6px solid var(--slate); border-radius: var(--r2); padding: var(--s3) var(--s4) var(--s3) var(--s3); }
.fg-att > li::before { content: counter(att); font: 800 var(--t-2)/1 var(--fg-sans); color: var(--ink3); text-align: center; }
.fg-att p { margin: 0; font-size: var(--t-m); }
.fg-att p small { display: block; color: var(--ink2); font-size: var(--t-s); }
.fg-att .q { border-left-color: var(--q-line); } .fg-att .bad { border-left-color: var(--bad-line); } .fg-att .ok { border-left-color: var(--ok-line); }
.fg-att .info { border-left-color: var(--blue); }
.fg-att > li.ok::before { content: '✓'; color: var(--ok); }
.fg-go { font-weight: 600; white-space: nowrap; }
.fg-go::after { content: ' →'; }

/* status words, with a tint */
.fg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink2); line-height: 1.6; vertical-align: middle; letter-spacing: 0; text-transform: none; }
.fg-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.fg-badge.ok { background: var(--ok-bg); border-color: #b9dcc4; color: var(--ok); }
.fg-badge.q { background: var(--q-bg); border-color: #efcf9f; color: var(--q); }
.fg-badge.bad { background: var(--bad-bg); border-color: #efc3bb; color: var(--bad); }
.fg-badge.info { background: var(--blue-bg); border-color: var(--blue-line); color: var(--blue); }
.fg-sample-label { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; color: var(--slate-ink);
  background: var(--slate-bg); border: 1px solid var(--slate-line); line-height: 1.6; }
.fg-sample { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--slate-ink); background: var(--slate-bg); border: 1px solid var(--slate-line); vertical-align: middle; line-height: 1.6; white-space: nowrap; }
.fg-handle { display: inline-block; padding: 0 8px; border-radius: var(--r1); font: 700 12px/1.6 var(--fg-sans); letter-spacing: .1em; color: var(--blue2);
  background: var(--blue-bg); border: 1px solid var(--blue-line); vertical-align: middle; white-space: nowrap; }
h1 .fg-handle { font-size: 18px; padding: 1px 10px; }
h2 .fg-handle, h3 .fg-handle { font-size: 13px; }
.fg-tiles .fg-handle { font-size: 11px; }
.fg-person { display: inline; padding: 1px 7px; border-radius: var(--r1); font-weight: 600; color: var(--slate-ink); background: var(--slate-bg);
  border: 1px solid var(--slate-line); white-space: nowrap; }
h1 .fg-person { display: inline-block; white-space: normal; overflow-wrap: anywhere; }      /* a long one, in large type on a phone */
.fg-offer { font-size: var(--t-xl); margin: 0 0 var(--s3); }
.fg-words { font-size: var(--t-s); line-height: 1.7; color: var(--ink2); max-height: 320px; overflow-y: auto; margin: 0; }
.fg-ok { color: var(--ok); font-weight: 600; } .fg-q { color: var(--q); font-weight: 600; } .fg-bad { color: var(--bad); font-weight: 600; }

/* verification: three steps */
.fg-steps { list-style: none; margin: var(--s3) 0 var(--s4); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); counter-reset: step; }
.fg-steps > li { counter-increment: step; position: relative; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: var(--r2);
  padding: var(--s3) var(--s4) var(--s3) 52px; min-width: 0; }
.fg-steps > li::before { content: counter(step); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 800 var(--t-s)/1 var(--fg-sans); background: var(--line-2); color: var(--ink2); }
.fg-steps > li.done { border-top-color: var(--ok-line); } .fg-steps > li.done::before { content: '✓'; background: var(--ok); color: #fff; }
.fg-steps > li.wait { border-top-color: var(--q-line); } .fg-steps > li.wait::before { background: var(--q-bg); color: var(--q); }
.fg-steps h3 { margin: 0 0 2px; font-size: var(--t-m); display: flex; align-items: center; gap: 6px; }
.fg-steps p { margin: 0; font-size: var(--t-s); color: var(--ink2); }
.fg-steps p.state { color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* lists of things: Holotypes, domains, organizations */
.fg-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s3); }
.fg-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3) var(--s4); min-width: 0; position: relative; }
.fg-item h3 { margin: 0 0 4px; font-size: var(--t-l); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fg-item h3 a { color: var(--ink); text-decoration: none; } .fg-item h3 a:hover { text-decoration: underline; }
.fg-item p { margin: 4px 0; font-size: var(--t-s); color: var(--ink2); }
.fg-item p.fg-state { color: var(--ink); font-size: var(--t-m); font-weight: 600; }
.fg-item .fg-work { margin-top: var(--s3); }
.fg-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; padding: var(--s3) 0; border-top: 1px solid var(--line-2); }
.fg-row:first-child { border-top: 0; padding-top: 0; }
.fg-row h3 { margin: 0; font-size: var(--t-l); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fg-row > p, .fg-row > details { margin: 0; font-size: var(--t-s); color: var(--ink2); flex-basis: 100%; }

/* key and value */
dl.fg-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: var(--s2) 0; font-size: var(--t-s); }
dl.fg-fields dt { color: var(--ink2); font-weight: 600; }
dl.fg-fields dd { margin: 0; min-width: 0; }

/* tables: white, rounded, quiet heads */
.fg-table { overflow-x: auto; margin: var(--s2) 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-s); }
th, td { text-align: left; padding: 9px 12px; border-top: 1px solid var(--line-2); vertical-align: top; }
thead th { border-top: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); font-weight: 600; background: var(--surface-2); white-space: nowrap; }
tfoot th { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num, td code, td time, td.actions { white-space: nowrap; }
td.actions { text-align: right; }
td.actions a + a, td.actions a + form { margin-left: 12px; }
tbody tr:hover td { background: #fbfbfc; }
td small { display: block; color: var(--ink2); }

/* Details: ids, fingerprints and keys, there when asked for */
details.fg-details { margin: var(--s4) 0 0; border-top: 1px solid var(--line); padding-top: var(--s3); }
details.fg-details > summary, details.fg-how > summary { cursor: pointer; font-size: var(--t-s); color: var(--ink2); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.fg-details > summary::-webkit-details-marker, details.fg-how > summary::-webkit-details-marker { display: none; }
details.fg-details > summary::before, details.fg-how > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .12s; margin-right: 2px; }
details[open].fg-details > summary::before, details[open].fg-how > summary::before { transform: rotate(45deg); }
details.fg-details > summary:hover, details.fg-how > summary:hover { color: var(--ink); }
details[open].fg-details > summary { margin-bottom: var(--s3); }
details.fg-details code, details.fg-how code { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r1); padding: 1px 5px; }
details.fg-details table code { background: none; border: 0; padding: 0; }
details.fg-how { margin: var(--s2) 0; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r2); padding: var(--s2) var(--s3); }
details.fg-how > summary { color: var(--blue); }
details[open].fg-how > summary { margin-bottom: var(--s2); }
details.fg-how ol { margin: 0; padding-left: 1.3em; font-size: var(--t-s); color: var(--ink); }
details.fg-how li { margin: 0 0 8px; }

/* forms */
form { margin: 0; }
form.inline { display: inline; }
form.row, .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: var(--s3); }
label { display: block; margin: 0 0 var(--s3); font-weight: 600; font-size: var(--t-s); color: var(--ink); }
label .hint { font-weight: 400; }
form.row label { margin: 0; }
input[type=text], input[type=email], select, textarea { display: block; width: 100%; max-width: 440px; margin-top: 4px; padding: 9px 11px;
  font: 400 var(--t-m)/1.3 var(--fg-sans); color: var(--ink); background: #fff; border: 1px solid var(--field-line); border-radius: var(--r2); }
input:hover, select:hover, textarea:hover { border-color: var(--ink3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
input.code { font-family: var(--fg-mono); letter-spacing: .08em; text-transform: uppercase; }
textarea { max-width: 100%; }
fieldset { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
legend { font-weight: 700; padding: 0 4px; }
.fg-choices { border: 0; padding: 0; margin: 0 0 var(--s4); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); }
.fg-choices legend { padding: 0; margin-bottom: var(--s2); font-size: var(--t-s); display: flex; align-items: center; gap: 6px; }
.fg-choices label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 10px; align-items: start; margin: 0; padding: var(--s3) var(--s4); border: 1px solid var(--line);
  border-radius: var(--r2); background: var(--surface); cursor: pointer; font-weight: 400; }
.fg-choices label:hover { border-color: var(--ink3); }
.fg-choices label:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--blue-bg); }
.fg-choices input { margin: 3px 0 0; accent-color: var(--blue); }
.fg-choices b { display: block; font-size: var(--t-m); }
.fg-choices span { color: var(--ink2); font-size: var(--t-s); }
.status { min-height: 1.5em; color: var(--ink2); font-size: var(--t-s); margin: var(--s2) 0 0; }

/* buttons: blue does, white is the quiet choice, a link-button is the least */
button, .fg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 var(--t-m)/1.2 var(--fg-sans); padding: 9px 16px; border-radius: var(--r2);
  border: 1px solid var(--blue); background: var(--blue); color: #fff; cursor: pointer; text-decoration: none; }
button:hover, .fg-btn:hover { background: var(--blue2); border-color: var(--blue2); color: #fff; }
button.quiet, .fg-btn.quiet { background: var(--surface); color: var(--ink); border-color: var(--field-line); }
button.quiet:hover, .fg-btn.quiet:hover { background: var(--surface-2); border-color: var(--ink3); color: var(--ink); }
button.link { border: 0; background: none; padding: 0; color: var(--blue); font-weight: 500; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
button.link:hover { color: var(--blue2); background: none; }
button.link.danger { color: var(--bad); }
button.small, .fg-btn.small { padding: 6px 12px; font-size: var(--t-s); }
button.big, .fg-btn.big { padding: 12px 22px; font-size: var(--t-l); }
button[disabled] { opacity: .6; cursor: progress; }

/* a value to copy: an invitation link, a share link, a DNS record */
.fg-copy { display: flex; align-items: stretch; max-width: 100%; margin: var(--s2) 0; }
.fg-copy code { flex: 1; min-width: 0; display: block; padding: 9px 12px; background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--r2);
  font-size: var(--t-s); overflow-wrap: anywhere; }
.fg-copy.can code { border-right: 0; border-radius: var(--r2) 0 0 var(--r2); }
.fg-copy button { border-radius: 0 var(--r2) var(--r2) 0; flex: none; }

/* the ? help (field.js): a click or keyboard focus opens it, Escape or a click elsewhere closes it */
.fg-tip { position: relative; display: inline-block; vertical-align: middle; line-height: 1; text-transform: none; letter-spacing: 0; font-weight: 400; }
.fg-help { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ink3); background: var(--surface); color: var(--ink2);
  font: 700 12px/1 var(--fg-sans); cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; }
.fg-help:hover, .fg-help[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fg-pop { position: absolute; left: -10px; top: calc(100% + 8px); width: 300px; z-index: 60; background: var(--ink); color: #f3f4f7; border-radius: var(--r2);
  padding: 12px 14px; font: 400 var(--t-s)/1.5 var(--fg-sans); text-align: left; white-space: normal; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.fg-pop::before { content: ''; position: absolute; top: -6px; left: 14px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.fg-pop b { display: block; font-size: var(--t-m); margin-bottom: 4px; color: #fff; }
.fg-pop.fg-left { left: auto; right: -10px; } .fg-pop.fg-left::before { left: auto; right: 14px; }

/* ---- the isotype, wherever it shows (the site's page, the share page, Connect's own isotype page) ---- */
.iso-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.iso-head > div { min-width: 0; }
.iso-head h1, .iso-head h2, .iso-head h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.iso-head h1 { font-size: var(--t-4); line-height: 1.05; }
.iso-head h2 { font-size: var(--t-2); }
.iso-head h3 { font-size: var(--t-xl); }
.iso-head .fg-lede { margin: 0; }
.iso-checks { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.iso-checks li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink2); }
.iso-checks li::before { content: '○'; font-weight: 800; }
.iso-checks li.done { background: var(--ok-bg); border-color: #b9dcc4; color: var(--ok); }
.iso-checks li.done::before { content: '✓'; }
.iso-checks li.label { border: 0; background: none; padding-left: 0; color: var(--ink); }
.iso-checks li.label::before { content: none; }
.iso-sample { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--s4); padding: 10px 14px; border-radius: var(--r2);
  background: var(--slate-bg); border: 1px solid var(--slate-line); border-left: 6px solid var(--slate); color: var(--ink); font-weight: 600; }
.iso-sample .fg-small { font-weight: 400; flex-basis: 100%; }
dl.iso-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; margin: var(--s4) 0 0; border: 1px solid var(--line); border-radius: var(--r2);
  overflow: hidden; background: var(--surface); }
dl.iso-facts > div { padding: 10px 14px; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); margin: -1px 0 0 -1px; min-width: 0; }
dl.iso-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); font-weight: 600; }
dl.iso-facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: break-word; }
dl.iso-facts > div.wide { grid-column: span 2; }
.iso-parts { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s4); align-items: start; margin-top: var(--s4); }
.iso-col { display: grid; gap: var(--s4); min-width: 0; }
.iso-part { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); min-width: 0; }
.iso-part-h { border-radius: calc(var(--r2) - 1px) calc(var(--r2) - 1px) 0 0; }
.iso-part-h .fg-l { border-radius: calc(var(--r2) - 1px) 0 0 0; }
.iso-part-h { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: var(--s3); align-items: center; background: var(--mt); }
.iso-part-h .fg-l { grid-row: 1 / 3; align-self: stretch; display: grid; place-items: center; min-height: 58px; background: var(--m); color: #fff; font: 800 24px/1 var(--fg-sans); }
.iso-part-h h2, .iso-part-h h3, .iso-part-h h4 { margin: 8px 0 0; font-size: var(--t-xl); color: var(--mk); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.iso-part-h p { margin: 0 0 8px; font-size: var(--t-xs); color: var(--ink2); }
.iso-part ul { list-style: none; margin: 0; padding: var(--s1) var(--s4) var(--s3); }
.iso-part li { padding: 9px 0; border-top: 1px solid var(--line-2); }
.iso-part li:first-child { border-top: 0; }
.iso-part li b { display: block; font-size: var(--t-m); }
.iso-part li span { color: var(--ink2); font-size: var(--t-s); }
.iso-part li .kind { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--mk); margin: 0 0 2px; }
.iso-part .fg-none { padding: var(--s3) var(--s4); margin: 0; font-size: var(--t-s); }
.iso-part details { padding: 0 var(--s4) var(--s3); }
.iso-part details > summary { cursor: pointer; color: var(--blue); font-size: var(--t-s); font-weight: 600; }
.iso-part details ul { padding: var(--s1) 0 0; }
ul.iso-markets { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s3) var(--s4) var(--s4); }
ul.iso-markets li { border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: var(--t-s); background: var(--surface); }
ul.iso-markets li:first-child { border-top: 1px solid var(--line); }
ul.iso-tiers { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 6px 0 0; }
ul.iso-tiers li { border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: var(--t-xs); color: var(--ink2); background: var(--surface); }
ul.iso-tiers li:first-child { border-top: 1px solid var(--line); }
.iso-part li .iso-when { display: block; margin-top: 2px; }
.basis { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1.7 var(--fg-sans); text-transform: uppercase; letter-spacing: .07em; padding: 0 8px; border-radius: 999px;
  vertical-align: middle; border: 1px solid; }
.basis-verified { background: var(--ok-bg); color: var(--ok); border-color: #b9dcc4; }
.basis-verified::before { content: '✓'; }
.basis-stated { background: var(--surface); color: var(--ink2); border-color: var(--field-line); }
.basis-sample { background: var(--slate-bg); color: var(--slate); border-color: var(--slate-line); }

/* ---- an outside chart, wherever it shows (the site's pages, the owner's page, a report, the staff queue): Outside View, never a basis ---- */
.fg-badge.oc-view { background: var(--slate-bg); border-color: var(--slate-line); color: var(--slate-ink); }
.oc-card { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--slate); border-radius: var(--r2); padding: var(--s3) var(--s4) var(--s4); min-width: 0; overflow-wrap: anywhere; }
.oc-head > * { margin: 0 0 4px; }
.oc-who { font-size: var(--t-l); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oc-who .fg-person { text-decoration: none; }
.oc-who a.fg-person:hover { text-decoration: underline; }
.oc-meta, .oc-level, .oc-agrees { font-size: var(--t-s); color: var(--ink2); }
.oc-card dl.iso-facts { margin-top: var(--s3); }
.oc-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s3); align-items: start; margin-top: var(--s3); }
.oc-report { margin: var(--s3) 0 0; font-size: var(--t-s); }
ul.oc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
ul.oc-cards > li { min-width: 0; }
.oc-domain { min-width: 0; overflow-wrap: anywhere; }
.fg-crumbs li { min-width: 0; overflow-wrap: anywhere; }             /* a long domain, on a phone */
.fg-row h3, .fg-row > p, .fg-steps p { min-width: 0; overflow-wrap: anywhere; }
dl.oc-tally { margin: 0 0 var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); }
dl.oc-tally > div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 4px var(--s4); padding: 10px 14px; border-top: 1px solid var(--line-2); }
dl.oc-tally > div:first-child { border-top: 0; }
dl.oc-tally dt { font-weight: 600; }
dl.oc-tally dd { margin: 0; display: flex; flex-wrap: wrap; gap: 2px var(--s4); }
.oc-line { margin-top: var(--s5); }
.oc-line summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-l); }
.oc-line details[open] > summary { margin-bottom: var(--s3); }
.oc-line-lede { color: var(--ink2); margin: 0 0 var(--s3); }
.oc-find { margin: var(--s5) 0 0; color: var(--ink2); }
.oc-ask { border-color: var(--q-line); border-top: 4px solid var(--q-line); }
.oc-question { margin: 0 0 var(--s3); font-size: var(--t-l); }
.oc-held { margin: 0 0 var(--s3); padding: 10px 14px; background: var(--q-bg); border: 1px solid #efcf9f; border-left: 6px solid var(--q-line); border-radius: var(--r2); overflow-wrap: anywhere; }
button.oc-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
button.oc-danger:hover { background: #8a2f22; border-color: #8a2f22; }
.oc-owner-count { margin: var(--s5) 0 var(--s3); font-size: var(--t-l); }
.oc-state { margin: 0 0 var(--s2); }
.oc-state .fg-badge { white-space: normal; }
.oc-actions { margin-top: var(--s3); align-items: flex-start; }
.oc-delete, .oc-withdraw { min-width: 0; }
.fg-details.oc-delete { margin: 0; padding: 0; border: 0; }
.oc-card .iso-part-h h5 { margin: 8px 0 0; font-size: var(--t-xl); color: var(--mk); }
.oc-delete > summary, .oc-withdraw > summary { cursor: pointer; color: var(--bad); font-size: var(--t-s); font-weight: 600; }
.oc-delete p, .oc-withdraw p { max-width: 62ch; font-size: var(--t-s); margin: var(--s2) 0; }
.oc-own li { justify-content: space-between; padding: 10px 0; }
.oc-own-what { flex: 1 1 220px; min-width: 0; }
.oc-own-state { flex: 0 1 180px; color: var(--ink); }
.oc-withdraw[open] { flex-basis: 100%; }
.oc-one-col { grid-template-columns: minmax(0, 1fr); }
.oc-words { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border-left: 3px solid var(--line); background: var(--surface-2); overflow-wrap: anywhere; }
.oc-by .fg-badge { flex: none; }
.oc-subject h3 a { min-width: 0; overflow-wrap: anywhere; }

/* ---- sealed packages, finding them and asking their owners ---- */
.pk-steps { margin: 0; padding-left: 1.4em; }
.pk-steps > li { margin: 0 0 var(--s4); max-width: 68ch; }
.pk-steps > li:last-child { margin-bottom: 0; }
.pk-status { margin: var(--s2) 0 0; font-size: var(--t-s); color: var(--ink2); }
.pk-status:empty { margin: 0; }
.pk-parts { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-s); }
.pk-says { margin: var(--s2) 0 0; padding: 0; list-style: none; font-size: var(--t-s); }
.pk-says li { padding: 2px 0; }
.pk-says b { font-weight: 600; }
.pk-one { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3) var(--s5); }
.pk-one > * { min-width: 0; }
.pk-found { list-style: none; margin: 0; padding: 0; }
.pk-found li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line-2); }
.pk-found li:first-child { border-top: 0; padding-top: 0; }
.pk-found .pk-q { flex: 1 1 240px; min-width: 0; }
.pk-words-label { margin: var(--s3) 0 0; font-size: var(--t-s); font-weight: 600; color: var(--ink2); }
ul.fg-list.pk-answered li { display: block; padding: var(--s3) 0; }
ul.fg-list.pk-answered .oc-words { display: block; margin: 0 0 var(--s2); }
.fg-item .oc-withdraw { margin-top: var(--s3); }

/* ---- narrower windows ---- */
@media (max-width: 900px) {
  .iso-parts, .fg-split { grid-template-columns: minmax(0, 1fr); }
  .fg-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  header.fg-head { flex-wrap: wrap; padding: 8px 16px; gap: 6px 10px; }
  .fg-logo-full { display: none; } .fg-logo-mark { display: block; }
  .fg-crumbs { order: 3; flex-basis: 100%; } .fg-crumbs ol { font-size: var(--t-s); }
  .fg-crumbs li:first-child::before { display: none; }
  .fg-actions { margin-left: auto; }
  .fg-who { display: none; }
  .fg-actions { flex: 0 1 auto; min-width: 0; }
  dl.oc-tally > div { grid-template-columns: minmax(0, 1fr); }
  main { padding: var(--s4) var(--s4) var(--s6); }
  h1 { font-size: var(--t-2); }
  .iso-head h1 { font-size: var(--t-3); }
  .fg-hero { padding: var(--s4); }
  .fg-att > li { grid-template-columns: 28px minmax(0, 1fr); } .fg-att > li > :last-child:not(p) { grid-column: 2; }
  .fg-pop { width: min(300px, calc(100vw - 40px)); }
  dl.fg-fields { grid-template-columns: minmax(0, 1fr); gap: 0; } dl.fg-fields dd { margin-bottom: 8px; }
  footer.fg-foot > div { padding: var(--s4); }
}
@media print { .fg-actions, .fg-skip, .fg-help { display: none !important; } body { background: #fff; } }
.fg-offscreen { position: fixed; left: -9999px; top: 0; }
/* staff */
.fg-decide { border: 1px solid var(--line); border-top: 4px solid var(--q-line); border-radius: var(--r2); padding: var(--s3) var(--s4); background: var(--surface-2); }
.fg-decide.done { border-top-color: var(--ok-line); }
.fg-decide.later { border-top-color: var(--line); }
.fg-decide details.fg-details { margin-top: var(--s2); padding-top: var(--s2); }
.fg-decide h3 { margin: 0 0 6px; font-size: var(--t-l); }
.fg-decide p { font-size: var(--t-s); }
.fg-queue .fg-row h2 { margin: 0; font-size: var(--t-xl); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fg-queue .fg-row h2 a { color: var(--ink); text-decoration: none; } .fg-queue .fg-row h2 a:hover { text-decoration: underline; }
.fg-queue .fg-row { margin-bottom: var(--s3); }
ul.fg-list { list-style: none; margin: 0 0 var(--s3); padding: 0; font-size: var(--t-s); }
ul.fg-list li { padding: 6px 0; border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
ul.fg-list li:first-child { border-top: 0; }
.fg-card.holotype h3 code { font-size: var(--t-s); }
.fg-card .fg-tiles { margin-top: var(--s2); }
/* the doors: sign in, sign up, an invitation */
.fg-door { text-align: left; }
.fg-door .fg-mark-big { margin: 0 0 var(--s3); width: 56px; height: 56px; }
.fg-door form { margin-top: var(--s4); }
.fg-door form input { max-width: none; }
.fg-door button.big { width: 100%; margin-top: var(--s2); }
.fg-what { margin-top: var(--s5); padding: 0 var(--s2); }
.fg-what h2 { font-size: var(--t-l); }
.fg-what ul { margin: 0; padding-left: 1.2em; color: var(--ink2); }
.fg-what li { margin: 0 0 8px; }
.fg-what b { color: var(--ink); }
/* the device approval */
.fg-asker { font-size: var(--t-m); padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r2); }
input.fg-bigcode { font-size: 28px; letter-spacing: .18em; padding: 12px 14px; max-width: 320px; text-align: center; }
.new-invite { border-color: #b9dcc4; background: var(--ok-bg); }
.fg-pop a { color: #a9c6ff; display: inline-block; margin-top: 4px; }
.fg-pop a:hover { color: #fff; }