/* Logbook: the one stylesheet. Tokens and faces the Castor header and footer ask a product to supply,
   then the two copied blocks (between the CASTOR markers, written by scripts/castor-sync.ts), then the
   app's own rules. Calm, phone first, no script. The colours are the signature's; the reading face is
   Inter (4.001, SIL Open Font License 1.1, rsms.me/inter; Latin subset, 400 and 700) for text and
   figures, with tabular figures everywhere so columns of hours line up like a paper logbook. Literata
   stays where the signature puts it: the product's name in the header and "Castor" in the footer. */
@font-face{font-family:Word;font-weight:200 900;src:url(/fonts/literata.woff2) format('woff2');font-display:swap}
@font-face{font-family:Hand;font-weight:500;src:url(/fonts/randosans-500-sharpie.woff2) format('woff2');font-display:swap}
@font-face{font-family:Inter;font-weight:400;src:url(/fonts/inter-regular.woff2) format('woff2');font-display:swap}
@font-face{font-family:Inter;font-weight:700;src:url(/fonts/inter-bold.woff2) format('woff2');font-display:swap}
:root{color-scheme:light dark;
  --paper:light-dark(#FAF9F4,#141311);--ink:light-dark(#14130F,#E9E6DF);--quiet:light-dark(#5A554C,#A6A199);
  --rule:light-dark(#DDD8CC,#37342E);--machine:light-dark(#006770,#00858F);--human:#C4552A;--between:#667D2F;
  --soft:light-dark(#F1EEE5,#1E1C19);--ease:cubic-bezier(.45,0,.55,1);
  --word:Word,Georgia,"Times New Roman",serif;--hand:Hand,"Bradley Hand",cursive;
  --ui:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif}

/* CASTOR START: copied by scripts/castor-sync.ts, do not edit */
/* COPY START */
.mast a{text-decoration:none}
:focus-visible{outline:2px solid var(--between);outline-offset:2px;border-radius:3px}
@property --ang{syntax:'<angle>';inherits:true;initial-value:0deg}  /* the marks are children: must inherit */
@property --ry{syntax:'<length>';inherits:true;initial-value:16px}
/* The standard Castor product header, "on the line", as the owner chose it on 2026-09-12 (master: castor-identity
   master/header/header.html; rules: docs/SIGNATURE.md, "The product header"). The page opens the way it closes, with
   things standing on a line: the name and the navigation stand on the header's hairline, their baselines 10px above
   it, as "by Castor" stands above the footer's. The name is set like Castor in the footer (Literata 560, opsz 72,
   -0.055em, 30px). The orbit hangs inside the name's box, its centre on the cap midpoint (top:50% of a box trimmed to
   cap and baseline), so no font metric is typed in. The page you are on is a 2px terracotta bar lying on the line. */
.mast{display:flex;align-items:flex-end;flex-wrap:wrap;row-gap:14px;margin:0 -1.25rem;padding:28px 1.25rem 10px;border-bottom:1px solid var(--rule)}
.mast a{text-decoration:none}  /* the header never underlines, whatever the product's links do */
/* masthead: the orbit, the signature's settled hover (castor-identity site/final-signature.html, .hov; castor-site RULES.md s.2).
   At rest the circle and the asterisk sit at the two ends of an olive ellipse. Reached for, they
   travel ALONG it while it flattens to a line, and arrive on each other as the mark: they must arrive,
   not converge, which is why the angle and the ellipse's height move together. One transition of 0.9s
   for both, so leaving takes as long as arriving. Half the reference scale: 96 by 36, rx 31, ry 16,
   marks 20. */
.orb{position:relative;display:block;flex:0 0 auto;width:96px;height:36px;--ang:0deg;--ry:16px;transition:--ang .9s var(--ease),--ry .9s var(--ease)}
.orb:hover,.orb:focus-visible{--ang:90deg;--ry:0px}
.orail{position:absolute;inset:0;overflow:visible}
.orail ellipse{fill:none;stroke:var(--between);stroke-width:1.5;vector-effect:non-scaling-stroke;ry:16px;transition:ry .9s var(--ease)}
.orb:hover .orail ellipse,.orb:focus-visible .orail ellipse{ry:.01px}
.orb .ob{position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px}
.orb .ob.a{transform:translate(calc(cos(var(--ang)) * 31px),calc(sin(var(--ang)) * var(--ry)))}
.orb .ob.b{transform:translate(calc(cos(var(--ang) + 180deg) * 31px),calc(sin(var(--ang) + 180deg) * var(--ry)))}
.orb svg{display:block}
.orb .disc{fill:var(--machine)}
.orb .key{fill:var(--paper);stroke:var(--paper)}
.orb .star{fill:var(--human)}
@media (prefers-reduced-motion:reduce){.orb{transition:none;--ang:90deg;--ry:0px}.orail ellipse{transition:none;ry:.01px}}
.brand{position:relative;display:block;padding-left:97px;font-family:var(--word);font-weight:560;font-variation-settings:'opsz' 72;letter-spacing:-.055em;font-size:30px;line-height:1;text-box:trim-both cap alphabetic;color:var(--ink);white-space:nowrap}
.brand .orb{position:absolute;left:0;top:50%;margin-top:-18px}
.nav{margin-left:auto;display:flex;align-items:flex-end;gap:1.1rem;font-size:12.5px;font-weight:500;letter-spacing:.02em}
.nav a{position:relative;display:block;padding:14px 0 10px;margin:-14px 0 -10px;line-height:1;text-box:trim-both cap alphabetic;color:var(--quiet)}  /* padding widens the target to 33px and the negative margin gives the space back, so the baseline stays on the name's */
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:2px;background:var(--human)}  /* centred on the 1px line */
@media (max-width:560px){.mast{margin:0 -1rem;padding-left:1rem;padding-right:1rem}.brand{font-size:24px}.nav{gap:.85rem;font-size:12px}}
/* COPY END */
/* COPY START */
/* Chip stands ON the line: his drawing's ground (y 88 of 92) lands on the rule's centre. "by Castor" sits 8px
   beside him; Castor's asterisk is typed, not drawn: the Literata glyph at the word's own size and weight, in
   --human, on the word's baseline, exactly where typing "Castor*" puts it (16 September 2026). Under the line,
   bottom-left like a footnote, "we give a dam*": the words start 2px from Chip's left edge with their cap line
   10px under the rule's centre, and the drawn underline lives inside the words, 1px past each end, never under
   the asterisk. No arrow. Vertical geometry rides the browser's cap and baseline edges (text-box: trim-both
   cap alphabetic), the typed asterisk included. */
.sig{position:relative;display:flex;align-items:flex-end;margin:3rem 0 40px;padding:0;border-bottom:1px solid var(--rule)}
.water{position:relative;top:2.26px;display:block;flex:0 0 auto;width:44px;height:40.48px}
.chip{display:block;width:100%;height:auto;overflow:visible;color:var(--ink)}  /* never crop the tail: at the low end of the wag it swings 2.5px below the drawing's own frame, and a browser clips an inline svg to its frame by default */
.c-tail{transform-box:view-box;transform-origin:37px 77px}
.c-eye{transform-box:fill-box;transform-origin:50% 50%}
.sig:hover .c-tail{animation:wag .9s var(--ease) .35s 2}
.sig:hover .c-eye{animation:blink .5s var(--ease) .7s 1}
@keyframes wag{0%,100%{transform:rotate(0)}30%{transform:rotate(18deg)}70%{transform:rotate(6deg)}}
@keyframes blink{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.08)}}
.sig .words{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;padding-bottom:10px}
.sig .qt,.sig .byt,.sig .wordmark{display:block;line-height:1;text-box:trim-both cap alphabetic}
.sig .quip{position:absolute;left:2px;top:calc(100% + 10.5px);display:flex;align-items:flex-start;font-family:var(--hand);font-weight:500;font-size:17px;color:var(--ink)}
.sig .qt{position:relative}
.sig .qt .ul{position:absolute;left:-1px;width:calc(100% + 2px);top:calc(100% + 4px);height:6px;color:var(--human);overflow:visible}  /* inside the words: 1px past each end, never under the asterisk. The width is explicit because an inline svg is a replaced element: left plus right never stretched it, and its 120:8 ratio at 6px tall held it at 90px whatever the words */
.sig .by{display:flex;align-items:flex-end;gap:6px}
.sig .byt{font-size:14px;color:var(--quiet)}
.sig .lock{display:flex;align-items:baseline}
.sig a.lock{color:inherit;text-decoration:none}  /* the lockup is the way to the studio, on every product (16 September 2026) */
.sig .wordmark{font-family:var(--word);font-weight:560;font-variation-settings:'opsz' 72;letter-spacing:-.055em;font-size:30px;color:var(--ink)}
.sig .ast{display:block;flex:0 0 auto}
.sig .quip .ast{width:8.89px;height:8.89px;margin:-1.2px 0 0 .5px}  /* a typed asterisk's size in Rando Sans at 17px: a 7.04px span, its top on the ascender; six arms hold at 1x from a 6.8px span */
.sig .lock .ast{display:inline;font-family:var(--word);font-weight:560;font-variation-settings:'opsz' 72;font-size:30px;font-style:normal;line-height:1;color:var(--human);margin:0;text-box:trim-both cap alphabetic}  /* a typed asterisk, as everywhere on the site since 16 September 2026: the glyph, the word's size, on the baseline. It carries the word's own trim so both boxes are cap-to-baseline: without it the untrimmed glyph box hangs a descender below the baseline, and "by" and the line itself move with it */
.sig .ast svg{display:block;width:100%;height:100%}
.sig .ast .star{fill:var(--human)}
.sig .ast .key{fill:var(--paper);stroke:var(--paper)}
@media (prefers-reduced-motion:reduce){.sig:hover .c-tail,.sig:hover .c-eye{animation:none}}
/* COPY END */
/* CASTOR END */

/* ============================================================================================ */
/* The app */
.nav a{white-space:nowrap}
.brand .logmark{display:inline-block;height:.72em;width:auto;margin-left:.2em;vertical-align:0;overflow:visible}
.logmark .lg{fill:color-mix(in srgb,var(--human) 16%,var(--paper))}
.logmark .lr{fill:var(--human)}
.logmark .lb{fill:var(--quiet)}
.logmark .li{fill:var(--ink)}
.sprite{display:none}
.ic{width:1em;height:1em;fill:currentColor;flex:0 0 auto}

html{background:var(--paper);scrollbar-color:var(--rule) transparent}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15.5px/1.5 var(--ui);font-feature-settings:"cv05";font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;caret-color:var(--human)}
::selection{background:color-mix(in srgb,var(--machine) 24%,transparent)}
.col{max-width:52rem;margin:0 auto;padding:0 1.25rem}
.col.wide{max-width:70rem}
@media (max-width:560px){.col{padding:0 1rem}}
a{color:var(--machine);text-decoration-color:color-mix(in srgb,var(--machine) 35%,transparent);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
h1{font:700 27px/1.15 var(--ui);letter-spacing:-.022em;margin:2rem 0 .5rem;text-wrap:balance}
h2{font:700 12.5px/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin:2.4rem 0 .7rem}
p{margin:.5rem 0}
b,strong{font-weight:700}
abbr{text-decoration:none}
.quiet{color:var(--quiet)}
.warn{color:var(--human)}
.small{font-size:13px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.code{font-feature-settings:"ss02","cv05";letter-spacing:.01em}
.num{font-variant-numeric:tabular-nums lining-nums}
.empty{color:var(--quiet);padding:1.5rem 0}

.pagehead{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;margin:2rem 0 .8rem}
.pagehead h1{margin:0}
.pagehead .count{margin:0;color:var(--quiet);font-size:14px}
.pagehead .count b{color:var(--ink)}

/* Search and the year index */
.search{display:flex;gap:.5rem;align-items:center;margin:.6rem 0 .9rem}
.search input{flex:1;min-width:0}
.search .clear{font-size:14px;white-space:nowrap}
.years{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:.2rem 0 .6rem;font-size:14px;font-weight:700}
.years a{text-decoration:none;color:var(--quiet)}
.years a:hover{color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;margin:.2rem 0 1rem;font-size:12.5px;color:var(--quiet)}
.legend .ic{color:var(--machine);font-size:15px}
.legend abbr{font-weight:700;color:var(--ink);font-size:11px;margin-left:.6rem}
.legend .mk.look{margin-left:.6rem}

/* The logbook: month sections, their totals on the ruled head, one line per sector */
.month{content-visibility:auto;contain-intrinsic-size:auto 640px}
.mh{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap;margin:0;padding:1.1rem .25rem .45rem;background:var(--paper);border-bottom:1.5px solid var(--ink);font:700 16px/1.25 var(--ui);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.mh .tot{font-weight:400;font-size:13px;color:var(--quiet);letter-spacing:0}
.mh .tot b{color:var(--ink);font-weight:700;font-size:14px}
.log{list-style:none;margin:0;padding:0}
.entry{display:grid;grid-template-columns:3rem 7rem 4.4rem minmax(5rem,1fr) 4.4rem 2.4rem minmax(9rem,1.5fr) 2.2rem;grid-template-areas:"d fn dep leg arr pf cp st";align-items:center;column-gap:.9rem;padding:.55rem .35rem;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.entry:hover{background:var(--soft)}
.entry.pos{color:var(--quiet)}
.entry .d{grid-area:d;display:grid;justify-items:center;line-height:1.1}
.d small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}
.d b{font-size:21px;line-height:1.05;letter-spacing:-.02em}
.d.same b,.d.same small{color:color-mix(in srgb,var(--quiet) 60%,transparent)}
.entry .fn{grid-area:fn;display:grid;line-height:1.3;min-width:0}
.fn b{color:var(--machine);font-size:15px}
.fn small{font-size:12.5px;color:var(--quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap{display:grid;line-height:1.2}
.ap b{font-size:17px;letter-spacing:.02em}
.ap small{font-size:13.5px;color:var(--quiet)}
.entry .dep{grid-area:dep}
.arr{text-align:right}
.entry .arr{grid-area:arr}
.entry .leg{grid-area:leg}
.leg{display:grid;grid-template-rows:auto 1px auto;justify-items:center;align-items:center;row-gap:.1rem;color:var(--quiet)}
.leg .ic{font-size:17px;color:var(--machine)}
.leg i{display:block;width:100%;height:1px;background:var(--rule)}
.leg .blk{font-size:15px;font-weight:700;color:var(--ink)}
.entry .pf{grid-area:pf}
.pf{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--quiet)}
.entry .cp{grid-area:cp}
.cp{display:grid;line-height:1.3;font-size:14px;min-width:0}
.cp small{font-size:12px;color:var(--quiet)}
.entry .st{grid-area:st}
.st{display:flex;gap:.3rem;justify-content:flex-end;align-items:center}
.mk{display:inline-flex;align-items:center;gap:.25rem}
.mk.ok{color:var(--machine)}
.mk.ok .ic{font-size:16px}
.mk.look{width:9px;height:9px;border-radius:50%;background:var(--human)}
@media (max-width:720px){
  .entry{grid-template-columns:2.6rem 5rem 3.4rem minmax(3.5rem,1fr) 3.4rem;grid-template-areas:"d fn dep leg arr" "d pf cp cp st";column-gap:.55rem;row-gap:.15rem;padding:.55rem .1rem}
  .cp{display:block;font-size:13px;color:var(--quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cp small{display:inline;font-size:11.5px;margin-left:.45rem}
  .pf{align-self:baseline}
  .ap b{font-size:16px}
  .ap small{font-size:13px}
  .d b{font-size:19px}
  .mh{font-size:15px}
}
.removed-link{margin-top:1.5rem}

/* Flight detail: the route like a boarding pass, then the ledger of every value */
.flighthead{margin:1.6rem 0 1.2rem;padding-bottom:1rem;border-bottom:1.5px solid var(--ink)}
.flighthead .when{margin:0;color:var(--quiet);font-size:14px;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.flighthead h1{margin:.2rem 0 .8rem;display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.flighthead h1 .code{color:var(--machine)}
.flighthead h1 small{font-size:15px;font-weight:400;color:var(--quiet);letter-spacing:0}
.route{display:grid;grid-template-columns:auto minmax(4rem,1fr) auto;align-items:center;gap:1rem;max-width:36rem}
.route .ap b{font-size:30px;letter-spacing:.01em}
.route .ap small{font-size:14px}
.route .leg .ic{font-size:22px}
.route .leg .blk{font-size:18px}
.flighthead .who{margin:.9rem 0 0}
.flighthead .actions{margin:.9rem 0 0}
.ledger h2{padding-bottom:.4rem;border-bottom:1.5px solid var(--ink);margin-bottom:0}
.fields{display:grid;grid-template-columns:minmax(8rem,13rem) 1fr;margin:0}
.fields dt,.fields dd{padding:.5rem 0;border-bottom:1px solid var(--rule)}
.fields dt{color:var(--quiet);font-size:14px}
.fields dd{margin:0;overflow-wrap:anywhere;padding-left:1rem}
.fields dd small{display:block;color:var(--quiet);font-size:12.5px}
.fields.stats dd b{font-size:18px}
@media (max-width:560px){.fields{grid-template-columns:7.8rem 1fr}.fields dt{font-size:13px}.fields dd{padding-left:.7rem}.route .ap b{font-size:25px}}
.src{display:inline-block;margin-left:.45rem;padding:0 .45rem;border:1px solid var(--rule);border-radius:999px;font-size:11px;line-height:1.55;color:var(--quiet);white-space:nowrap;vertical-align:1px}
.src.correction{border-color:var(--human);color:var(--human)}
.src.verified_email{border-color:color-mix(in srgb,var(--machine) 45%,transparent);color:var(--machine)}
.history{list-style:none;margin:0;padding:0}
.history li{padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:14px}
.history .when{color:var(--quiet);margin-right:.3rem}
.history .why{display:block;color:var(--ink);font-style:italic;margin-top:.15rem}
.history code{font-size:13px;font-family:inherit;background:var(--soft);padding:0 .25rem;border-radius:4px;overflow-wrap:anywhere}
details.danger{margin:2.4rem 0 0;border-top:1px solid var(--rule);padding-top:.8rem}
details.danger summary{cursor:pointer;color:var(--human);font-size:14px}
details.danger form{max-width:30rem}

/* Edit */
form.edit fieldset{margin:1.6rem 0 0;padding:0;border:0}
form.edit legend{font:700 12.5px/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase;padding:0 0 .4rem;width:100%;border-bottom:1.5px solid var(--ink)}
form.edit .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:0 1rem}
.crewrow{display:grid;grid-template-columns:6rem 7rem 1fr;gap:.5rem;margin:.5rem 0}
@media (max-width:560px){.crewrow{grid-template-columns:5.2rem 6rem 1fr}}
.savebar{position:sticky;bottom:0;display:flex;gap:1rem;align-items:center;padding:.8rem 0;margin-top:1.4rem;background:var(--paper);border-top:1px solid var(--rule)}

/* Home: the cards he chose, each a small ledger */
/* Columns, not a grid: each card keeps its own height, so a long ledger never leaves a hole beside a short one.
   Order runs down, then across; a wide card spans every column. */
.cards{columns:3 19rem;column-gap:2.6rem}
.card{break-inside:avoid;padding-top:1.8rem}
.card.wide{column-span:all}
.card h2{padding-bottom:.4rem;border-bottom:1.5px solid var(--ink);margin:0}
.card .big{font:700 clamp(52px,14vw,84px)/1 var(--ui);letter-spacing:-.04em;margin:.8rem 0 .4rem}
.card > p{margin:.6rem 0}
.lines{margin:0}
.lr{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--rule)}
.lr dt{font-size:14.5px}
.lr dt small,.lr dd small{display:block;font-size:12.5px;color:var(--quiet)}
.lr dd small{display:inline}
.lr dd{margin:0;font-weight:700;font-size:18px;text-align:right;white-space:nowrap}
.lr dd .zero{color:var(--quiet);font-weight:400}
.limit .lr{border-bottom:0;padding-bottom:.25rem}
.limit{border-bottom:1px solid var(--rule);padding-bottom:.55rem}
.bar{display:block;height:4px;border-radius:2px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--between)}
.bar.near i{background:var(--human)}
.lookcard{display:flex;align-items:baseline;gap:.6rem;margin-top:.9rem;padding:.9rem 1rem;border-radius:10px;background:var(--soft);text-decoration:none;color:var(--ink)}
.lookcard .num{font-size:28px;font-weight:700}
.lookcard.none{background:none;border:1px solid var(--rule)}
.card .log .entry{border-bottom:0}
.tally{width:100%;border-collapse:collapse;font-size:14px}
.tally th{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--quiet);text-align:right;padding:.5rem 0 .3rem .6rem;border-bottom:1px solid var(--rule)}
.tally td{text-align:right;padding:.45rem 0 .45rem .6rem;border-bottom:1px solid var(--rule);white-space:nowrap}
.tally th:first-child,.tally td:first-child{text-align:left;padding-left:0;white-space:normal}
.tally td:first-child a{color:var(--ink);text-decoration:none}
.tally td:first-child a:hover{text-decoration:underline}
.picks{list-style:none;margin:1rem 0;padding:0;border-top:1.5px solid var(--ink)}
.pick{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--rule)}
.pick label{display:flex;gap:.7rem;align-items:flex-start;margin:0;color:var(--ink);font-size:15px}
.pick label input{width:auto;margin:.25rem 0 0}
.pick label small{display:block;color:var(--quiet);font-size:13px}
.pick.off label b{color:var(--quiet)}
.moves{display:flex;gap:.35rem}
.moves button{padding:.45rem .7rem;font-size:13px}

/* Crew */
.people{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.person{display:grid;grid-template-columns:minmax(0,1fr) 6rem 6.5rem 7.5rem;grid-template-areas:"pn pc pt pl";align-items:center;gap:.2rem 1rem;padding:.6rem .35rem;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.person:hover{background:var(--soft)}
.pn{grid-area:pn;display:grid;min-width:0}
.pn small,.pt small,.pl small{font-size:12.5px;color:var(--quiet)}
.pc{grid-area:pc;color:var(--machine);font-weight:700;font-size:14px}
.pt{grid-area:pt;display:grid;text-align:right}
.pl{grid-area:pl;display:grid;text-align:right;font-size:14px}
@media (max-width:560px){.person{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pn pt" "pc pl"}.pl{font-size:13px}.pl small{display:none}}
.personhead h1{margin-bottom:.2rem}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:0 2.6rem}
h2.section{padding-bottom:.4rem;margin-bottom:0}

/* Needs a look */
.item{padding:1rem 0;border-bottom:1px solid var(--rule)}
.item:first-of-type{border-top:1.5px solid var(--ink)}
.item .why{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--human)}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}

/* Settings: Gmail's confirmation stands out until he says it is done */
.notice{margin:1.4rem 0;padding:1.1rem 1.2rem;border:1.5px solid var(--human);border-radius:12px}
.notice h2{margin:0 0 .4rem;color:var(--human)}
.notice .big{font:700 34px/1.1 var(--ui);letter-spacing:.04em;margin:.6rem 0 .2rem;user-select:all}
form.inline .row{display:flex;gap:.5rem}
form.inline .row input{flex:1;min-width:0}

/* Forms */
.narrow{max-width:34rem}
label{display:block;font-size:13px;color:var(--quiet);margin:1rem 0 .3rem}
input,select,textarea{box-sizing:border-box;width:100%;font:16px/1.3 var(--ui);font-variant-numeric:tabular-nums;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:9px;padding:.6rem .7rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--between);outline-offset:1px}
input[type=checkbox],input[type=radio]{accent-color:var(--machine)}
input::placeholder{color:color-mix(in srgb,var(--quiet) 75%,transparent)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}
.choice{display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0}
.choice label{margin:0;display:flex;align-items:center;gap:.35rem;padding:.5rem .8rem;border:1px solid var(--rule);border-radius:999px;color:var(--ink);font-size:14px}
.choice input{width:auto;margin:0}
fieldset{border:0;padding:0;margin:0}
fieldset.sim,fieldset.ga{display:none}
form:has(#kind-sim:checked) fieldset.sim,form:has(#kind-ga:checked) fieldset.ga{display:block}
button,.button{display:inline-block;font:700 15px/1 var(--ui);padding:.78rem 1.1rem;border-radius:9px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none}
button.secondary,.button.secondary{background:none;color:var(--ink);border-color:var(--rule)}
button.warn{background:var(--human);border-color:var(--human);color:#fff}
button:hover,.button:hover{opacity:.88}
button:disabled{opacity:.35;cursor:default}
.note{padding:.8rem 1rem;border-radius:10px;background:var(--soft);margin:1rem 0}
.note p{margin:.2rem 0}
.note ul{margin:.3rem 0 0;padding-left:1.2rem}
.note.bad{background:none;border:1px solid var(--human)}
.note.bad form{margin-top:.6rem}
.copy{font-feature-settings:"ss02";font-size:17px;font-weight:700;user-select:all}