/* 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:'';inherits:true;initial-value:0deg} /* the marks are children: must inherit */ @property --ry{syntax:'';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:13px;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:13px}} /* 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} /* The product's mark stands where the master's orbit stood, before the name, and mark and name are one link home (SIGNATURE.md, "Each product's own identity": the mark stands on the header's line where the orbit stood; everything else in "The product header" holds). The name's box is trimmed to cap and baseline, so its bottom IS the baseline: the mark's own base sits there too (bottom:0, not hanging below it), scaled to read at the name's cap height or a little above, so it stands ON the line instead of floating over it. */ .mast .brand{padding-left:1.63em;color:var(--ink)} .nav .short{display:none} .nav .ic.short{width:15px;height:15px;vertical-align:-3px} .nav .badge{display:inline-block;min-width:16px;height:16px;margin:-5px 0 -5px 5px;padding:0 5px;box-sizing:border-box;border-radius:8px;background:var(--human);color:#fff;font-size:13px;font-weight:700;line-height:16px;text-align:center;vertical-align:1px;letter-spacing:0} @media (max-width:560px){ /* A phone: the name alone on the first row, the pages spread across the line under it. The name is Home. */ .mast .nav{flex:1 0 100%;margin-left:0;justify-content:space-between;gap:0} .nav .n-home{display:none} .nav .long{display:none} .nav .short{display:inline-block} } .sprite{display:none} .ic{width:1em;height:1em;fill:currentColor;flex:0 0 auto} .ic.flip{transform:scaleX(-1)} 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 13px/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:13px;color:var(--quiet)} .legend .ic{color:var(--machine);font-size:15px} .legend abbr{font-weight:700;color:var(--ink);font-size:13px;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:13px;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) 85%,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:13px;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:13px;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:13px;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:13px;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:13px} .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:13px;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 13px/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{break-inside:avoid} .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:13px;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} svg.bar{display:block;width:100%;height:4px} svg.bar rect{fill:var(--between)} svg.bar .track{fill:var(--soft)} svg.bar.near rect:not(.track){fill:var(--human)} .mailline{margin:0;font-size:13.5px} .mailline a{text-decoration:none} .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:13px;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} /* 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:13px;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} .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} /* 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);width:auto;flex:0 0 auto} /* a tick box sizes to itself; the full-width rule above is for text fields */ input::placeholder{color:color-mix(in srgb,var(--quiet) 85%,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} button.small,.button.small{padding:.5rem .8rem;font-size:13px} .pagehead .add{padding:.55rem 1.05rem;font-size:14px} .pagehead.with-add{justify-content:flex-start} .with-add .add{order:2;margin-left:auto;align-self:center} @media (max-width:560px){.with-add .add{order:1}.with-add .count{order:2;flex-basis:100%}} .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} .note .copy{overflow-wrap:anywhere} /* ============================================================================================ */ /* Settings, Apple style: grouped inset lists, the label left, the value or control right, one short line under a group at most. Each group saves itself (public/js/app.js); without script a Save shows. */ .settings{max-width:40rem} .group{margin:1.9rem 0 0} .group h2{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 .45rem;padding:0 1rem;font:700 13px/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--quiet)} .list{list-style:none;margin:0;padding:0;background:var(--soft);border-radius:12px;overflow:hidden} .row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;padding:0 1rem;box-sizing:border-box} .row + .row::before{content:"";position:absolute;top:0;left:1rem;right:0;border-top:1px solid var(--rule)} .row .lbl{flex:none;margin:0;color:var(--ink);font-size:15.5px;line-height:1.3;white-space:nowrap} .row.token .lbl,.card-row .lbl{flex:1 1 auto;white-space:normal} .row .lbl small{display:block;font-size:13px;color:var(--quiet)} .row .val{min-width:0;color:var(--quiet);font-size:15.5px;text-align:right;overflow-wrap:anywhere} .row input.val,.row select.val,.row textarea.val{flex:1 1 auto;width:auto;border:0;border-radius:0;background:none;padding:.8rem 0;color:var(--quiet);text-align:right;font-size:15.5px} .row select.val{text-align-last:right;appearance:none;-webkit-appearance:none;padding-right:1.1rem;background:linear-gradient(45deg,transparent 50%,var(--quiet) 50%) calc(100% - 5px) 55%/5px 5px no-repeat,linear-gradient(-45deg,transparent 50%,var(--quiet) 50%) 100% 55%/5px 5px no-repeat;cursor:pointer} .row input.val:focus,.row select.val:focus,.row textarea.val:focus{outline:none;color:var(--ink)} .row.field:focus-within{box-shadow:inset 0 0 0 2px var(--between);border-radius:12px} .row.tall{align-items:flex-start} .row.tall .lbl{padding-top:.8rem} .row textarea.val{resize:vertical;line-height:1.4} .row.stack .val{display:grid;justify-items:end;gap:.15rem;padding:.7rem 0;font-size:14px} .rowlink{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex:1;min-height:48px;margin:0 -1rem;padding:0 .75rem 0 1rem;color:var(--ink);text-decoration:none} .rowlink:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)} .rowlink .val{margin-left:auto;display:flex;align-items:center} .ic.chev{width:16px;height:16px;color:var(--quiet);opacity:.75} .foot{margin:.5rem 1rem 0;font-size:13px;color:var(--quiet)} .group .err,.err{margin:.2rem 1rem .6rem;color:var(--human);font-size:14px} .saved{display:inline-flex;align-items:center;gap:.25rem;font-size:13px;letter-spacing:0;text-transform:none;color:var(--between);opacity:0;transition:opacity .25s} .saved.on{opacity:1} .saved .ic{width:13px;height:13px} .group .save{margin:.6rem 0 0;padding:0 1rem} .js .group .save{display:none} .addr{font-feature-settings:"ss02";user-select:all} @media (max-width:560px){.addr{font-size:14px}.row .val{font-size:15px}.fwdrow{flex-wrap:wrap;row-gap:0;padding-top:.65rem;padding-bottom:.3rem}.fwdrow .copyable{flex:1 1 100%;justify-content:space-between;text-align:left}} .copyable{display:flex;align-items:center;gap:.25rem;min-width:0} button.icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:none;color:var(--quiet);cursor:pointer} button.icon:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);opacity:1} button.icon .ic{width:18px;height:18px} button.copy.done{color:var(--between)} .sigthumb{display:inline-block;height:30px;width:auto;max-width:130px;padding:2px 8px;border-radius:5px;background:#fff;vertical-align:middle;object-fit:contain} .rowbutton{width:100%;padding:.85rem 0;border:0;background:none;color:var(--human);font:400 15.5px/1.3 var(--ui);text-align:left;cursor:pointer} .rowbutton:hover{opacity:.8} .row form.wide{flex:1} /* After each email: a segmented control across its row */ .seg-row{padding:.5rem} .seg{display:grid;grid-template-columns:1fr 1.55fr .7fr;width:100%;margin:0;padding:2px;border:0;border-radius:9px;background:color-mix(in srgb,var(--ink) 8%,transparent)} .seg label{position:relative;display:flex;margin:0;color:var(--ink)} .seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .seg span{flex:1;display:flex;align-items:center;justify-content:center;min-height:36px;padding:.3rem .55rem;border-radius:7px;font-size:13.5px;line-height:1.2;text-align:center} .seg input:checked + span{background:light-dark(var(--paper),color-mix(in srgb,var(--ink) 16%,var(--soft)));box-shadow:0 1px 3px rgba(0,0,0,.14);font-weight:700} .seg input:focus-visible + span{outline:2px solid var(--between);outline-offset:1px} /* Switches */ input.switch{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;width:46px;height:28px;margin:0;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink) 20%,transparent);cursor:pointer;transition:background .2s var(--ease)} input.switch::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .2s var(--ease)} input.switch:checked{background:var(--between)} input.switch:checked::after{transform:translateX(18px)} input.switch:focus-visible{outline:2px solid var(--between);outline-offset:2px} /* Home cards: grip, name, arrows, switch */ .card-row{gap:.5rem;padding-left:.5rem} .card-row .lbl{flex:1} .card-row.off .lbl{color:var(--quiet)} .card-row .moves{display:flex;gap:0} .card-row.dragging{z-index:2;background:var(--paper);box-shadow:0 8px 22px rgba(0,0,0,.16)} .grip{display:flex;padding:.4rem .15rem;color:var(--quiet);cursor:grab;touch-action:none} .grip .ic{width:18px;height:18px} .no-js .grip,html:not(.js) .grip{display:none} /* Access for agents */ .row.token{padding-top:.55rem;padding-bottom:.55rem} .row.token.off{opacity:.55} .row.token form.val{flex:0 0 auto} .newkey form{display:flex;flex-wrap:wrap;gap:.5rem;width:100%;padding:.6rem 0} .newkey input{flex:1 1 12rem;min-width:0} .newkey select{width:auto;flex:0 0 auto} .keynote{margin:0 0 .6rem} /* A page a row opens */ .back{margin:1.4rem 0 0} .back a{display:inline-flex;align-items:center;gap:.1rem;font-size:15px;text-decoration:none} .back .ic{width:18px;height:18px} /* The signature pad (public/js/signature-pad.js lays out nothing itself) */ signature-pad{display:block;max-width:40rem} .sig-pad-container{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0 0} .sig-canvas-wrap{position:relative;overflow:hidden;background:#fff;border:1px solid var(--rule);border-radius:12px} .sig-canvas-wrap::after{content:"";position:absolute;left:7%;right:7%;bottom:27%;border-bottom:1px solid #DDD8CC;pointer-events:none} .sig-canvas{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:8/3;touch-action:none;cursor:crosshair} .sig-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8B867D;font:500 22px var(--hand);pointer-events:none} .sig-actions{display:flex;flex-wrap:wrap;gap:.5rem} .upload-btn{display:inline-flex;align-items:center;margin:0;cursor:pointer} .upload-btn input{display:none} .sigform .savebar a{font-size:15px} /* ============================================================================================ */ /* Needs a look: one card per question, grouped under its flight. On each card an annunciator like the flight deck's (a lit lamp on a dark panel), one sentence, two big buttons named by their outcome. */ .looks{max-width:40rem} .lookgroup{margin:1.7rem 0 0} .lookhead a,.lookhead > .t{display:flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none} .lookhead .t{display:block;min-width:0} .lookhead .when{margin:0;font-size:13.5px;color:var(--quiet)} .lookhead .when b{color:var(--machine)} .lookhead h2{margin:.1rem 0 0;padding:0;border:0;font:700 21px/1.25 var(--ui);letter-spacing:-.015em;text-transform:none;color:var(--ink)} .lookhead .go{margin-left:auto;width:20px;height:20px;color:var(--quiet)} .lookhead a:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px} .asks{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.6rem} .ask{padding:1rem;border-radius:14px;background:var(--soft);transition:opacity .2s var(--ease),transform .2s var(--ease)} .ask.busy{opacity:.6} .ask.gone{opacity:0;transform:translateX(28px)} .annun{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .6rem;padding:.34rem .6rem .32rem .5rem;border-radius:6px;background:light-dark(var(--ink),var(--paper));color:light-dark(var(--paper),var(--ink));font:700 13px/1 var(--ui);letter-spacing:.11em;font-feature-settings:"ss02"} .annun::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:2px;background:var(--human);box-shadow:0 0 7px 1px color-mix(in srgb,var(--human) 65%,transparent)} .said{margin:0;font-size:16px;line-height:1.45} .decide{display:grid;gap:.5rem;margin:.9rem 0 0} .decide.two{grid-template-columns:1fr 1fr} .answer{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.2rem;min-height:58px;padding:.7rem .9rem;border-radius:11px;font-size:16px;line-height:1.2;text-align:left} .answer small{font-size:13px;font-weight:400;opacity:.78} .answer.secondary{background:var(--paper)} .allclear[hidden]{display:none} .lost{display:grid;justify-items:center;padding:2.4rem 0 1rem;text-align:center} .lost h1{margin:1.2rem 0 .3rem} /* ============================================================================================ */ /* Stats: one big number for the whole log, then cards, each led by its own number */ .stathero{margin:.6rem 0 .4rem;padding:.4rem 0 1.4rem;border-bottom:1.5px solid var(--ink)} .stathero .lbl{margin:0;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--quiet)} .stathero .big{margin:.35rem 0 .45rem;font:700 clamp(58px,15vw,100px)/1 var(--ui);letter-spacing:-.045em} .stathero > .quiet{margin:0;font-size:14.5px} .facts{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;margin:1rem 0 0;font-size:14.5px;color:var(--quiet)} .facts b{margin-right:.3rem;font-size:21px;letter-spacing:-.01em;color:var(--ink)} .card.stat .lead{display:flex;flex-direction:column;margin:.85rem 0 .15rem} .card.stat .lead .lbl{font-size:13.5px;color:var(--quiet)} .card.stat .lead b{font-size:34px;line-height:1.1;letter-spacing:-.025em} .unit{margin-left:.2em;font-size:max(13px,.55em);font-weight:400;color:var(--quiet)} .lr dd .unit{font-size:13px} .card.stat .touch{margin:.15rem 0 .7rem;font-size:13.5px} .card.stat .lines{margin-top:.3rem} .years-chart{list-style:none;display:grid;gap:7px;margin:.9rem 0 0;padding:0} .years-chart li{display:grid;grid-template-columns:2.9rem 1fr;align-items:center;gap:.6rem} .yr{font-size:13.5px;color:var(--quiet)} .hbar{display:block;width:100%;height:16px;overflow:visible} .hbar rect{fill:var(--machine)} .hbar text{fill:var(--ink);font:700 13px var(--ui)} /* ============================================================================================ */ /* Print: pick a format, sign or not, Print */ .printform{max-width:40rem} .fmts{display:grid;gap:.5rem;margin:1rem 0 0} .fmt{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:.8rem;margin:0;padding:.9rem 1rem;border:1.5px solid transparent;border-radius:12px;background:var(--soft);color:var(--ink);font-size:15.5px;cursor:pointer} .fmt:has(input:checked){border-color:var(--ink)} .fmt input{width:auto;margin:.22rem 0 0} .fmt-body{display:grid;gap:.15rem} .fmt small{font-size:13.5px;line-height:1.35;color:var(--quiet)} .paper{padding-top:.15rem;font-size:13px;white-space:nowrap;color:var(--quiet)} .signlist{margin:1rem 0 0} .signrow{cursor:pointer} .signrow .lbl{display:flex;align-items:center;gap:.7rem} .signrow .lbl small{display:block} .printbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:1.2rem 0 0} @media (max-width:560px){.fmt{grid-template-columns:auto 1fr;row-gap:.25rem}.fmt .paper{grid-column:2;padding-top:0}} /* Castor theme control and cross-fade, from castor-site/src/styles/read.css. */ :root{--t-move:450ms} :root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} html.theming, html.theming body, html.theming * { transition: background-color 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease), fill 320ms var(--ease), stroke 320ms var(--ease) !important; } @media (prefers-reduced-motion: reduce) { html.theming * { transition: none !important; } } html.theming-vt * { view-transition-name: none !important; } html.theming-vt::view-transition-group(root) { animation-duration: 320ms; } html.theming-vt::view-transition-old(root) { animation: vt-theme-out 320ms var(--ease) both; mix-blend-mode: normal; } html.theming-vt::view-transition-new(root) { animation: vt-theme-in 320ms var(--ease) both; mix-blend-mode: normal; } @keyframes vt-theme-out { from { opacity: 1; } to { opacity: 0; } } @keyframes vt-theme-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html.theming-vt::view-transition-group(*), html.theming-vt::view-transition-old(*), html.theming-vt::view-transition-new(*) { animation: none !important; } } .theme-toggle { appearance: none; background: none; border: 0; padding: .35rem; cursor: pointer; color: var(--machine); line-height: 0; border-radius: 2px; } .theme-toggle svg { display: block; width: 1.15rem; height: 1.15rem; overflow: visible; } .theme-toggle .t-disc { fill: currentColor; transition: r var(--t-move) var(--ease); } .theme-toggle .t-rays { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease); transform-origin: 12px 12px; } .theme-toggle .t-bite { fill: var(--paper); transform: translateX(12px); transition: transform var(--t-move) var(--ease); } .theme-toggle .t-half { fill: var(--paper); opacity: 0; transition: opacity var(--t-move) var(--ease); } .theme-toggle .t-ring { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0; transition: opacity var(--t-move) var(--ease); } html[data-theme-choice="light"] .theme-toggle .t-rays { opacity: 1; } html[data-theme-choice="light"] .theme-toggle .t-bite { transform: translateX(14px); } html[data-theme-choice="dark"] .theme-toggle .t-rays { opacity: 0; transform: rotate(45deg) scale(.6); } html[data-theme-choice="dark"] .theme-toggle .t-bite { transform: translateX(4.4px); } html[data-theme-choice="system"] .theme-toggle .t-rays { opacity: 0; transform: rotate(45deg) scale(.6); } html[data-theme-choice="system"] .theme-toggle .t-bite { transform: translateX(14px); } html[data-theme-choice="system"] .theme-toggle .t-half, html[data-theme-choice="system"] .theme-toggle .t-ring { opacity: 1; } html[data-resolved="light"] .theme-toggle { color: var(--human); } html[data-resolved="dark"] .theme-toggle { color: var(--machine); } .theme-toggle { transition: color var(--t-move) var(--ease); } html:not([data-theme-choice]) .theme-toggle .t-rays { opacity: 0; } html:not([data-theme-choice]) .theme-toggle .t-half, html:not([data-theme-choice]) .theme-toggle .t-ring { opacity: 1; } html:not(.js) .theme-toggle { display: none; } /* v2.2 header: lens search, "on the line" masthead. Header additions stay outside the copied Castor blocks. */ /* One line, as the studio header says: the name and the tabs stand on the same baseline, 10px above the rule; the lens and the toggle after them are the website's (v2.4 brand, at the end of this file). */ .mast .brand{order:1;margin-right:1.5rem} /* never touching the tabs; when both cannot fit, the tabs wrap under */ .mast .nav{order:2;margin-left:auto} .mast .nav:empty{display:none} /* When the header is too narrow for one line (a phone, or a narrow page like Settings), the name, the lens and the toggle share the first row and the tabs spread along the line below, never a stray icon on a row alone. */ .mast{container-type:inline-size} @container (max-width:900px){ .mast .nav{order:5;flex:1 0 100%;margin-left:0} } .search-field{position:relative;display:flex;align-items:center;flex:1;min-width:0} .search-field input{width:100%;min-width:0;padding-right:1.7rem} .search-field input::placeholder{color:var(--quiet)} .search-key{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);padding:.05rem .35rem;border:1px solid var(--rule);border-radius:4px;font:13px/1.4 var(--ui);color:var(--quiet);background:var(--soft);pointer-events:none} .search-field input:not(:placeholder-shown) + .search-key{display:none} /* visible while the field is open and empty, gone once he types */ .search-popover{position:absolute;top:calc(100% + .5rem);right:0;z-index:10;width:min(32rem,calc(100vw - 2rem));max-height:65vh;overflow:auto;background:var(--paper);border:1px solid var(--rule);border-radius:9px;padding:1rem;box-sizing:border-box} .search-popover[hidden]{display:none} .search-group + .search-group{margin-top:1.5rem} .search-group h2{font-size:15px;margin:0 0 .4rem;color:var(--quiet)} .search-results{list-style:none;margin:0;padding:0} .search-results li + li{border-top:1px solid var(--rule)} .mast a.search-result,.search-result{display:block;padding:.7rem 0;color:var(--ink);text-decoration:none;overflow-wrap:anywhere} .search-result:hover,.search-result:focus-visible{background:var(--soft)} .search-result-title,.search-result-detail{display:block} .search-result-detail{color:var(--quiet);font-size:13px;margin-top:.2rem} .search-all{display:block;margin-top:1rem;font-size:14px} @media(max-width:560px){ .search-popover{width:100%;left:0;right:auto} } @media(prefers-reduced-motion:reduce){.theme-toggle,.theme-toggle *{transition:none!important}} html:not(.js) .mast .theme-toggle{display:none} .crew-sort{flex-wrap:wrap} .crew-sort label{flex:1 1 10rem;min-width:0} /* v2.2 header: page-to-page morph (ported minimally from castor-site src/styles/morph.css). Cross-document view transitions swap pages instantly, no cross-fade and no flash: the new page paints at once, and the one thing that travels is the current tab's underline, which glides to the newly active tab instead of jumping there. Scoped away from html.theming-vt so it never fights the theme toggle's own transition above. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } html:not(.theming-vt)::view-transition-group(root), html:not(.theming-vt)::view-transition-old(root), html:not(.theming-vt)::view-transition-new(root) { animation: none; mix-blend-mode: normal; } html:not(.theming-vt)::view-transition-old(root) { display: none; } .nav a[aria-current]::after { view-transition-name: mast-current; } ::view-transition-group(mast-current) { animation-duration: 320ms; animation-timing-function: var(--ease); } } html.theming-vt .nav a[aria-current]::after { view-transition-name: none; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* v2.2 people */ /* A crew row keeps one whole-row click to the person: a stretched link (a pseudo-element covering the row), not a second nested in the first, which HTML forbids. The company link sits above that overlay so it stays independently clickable. */ .person{position:relative} .p-link{color:inherit;text-decoration:none} .p-link::after{content:"";position:absolute;inset:0;z-index:1} .pn .co-link{position:relative;z-index:2} /* v2.2 stats cards: the Flighty-style hero cards (BRIEF-stats-cards.md), one big number and one comparison line each, sitting in the same .cards masonry the detailed accordion cards already use. */ .card.hero .lead{margin:.85rem 0 .2rem} .card.hero .lead .num{font:700 44px/1.05 var(--ui);letter-spacing:-.03em} .card.hero .lead .unit{margin-left:.3em;font-size:max(15px,.4em);font-weight:400;color:var(--quiet)} .card.hero[data-sun-pending] .num{opacity:.35} .carbon-more{margin-top:.6rem} .carbon-more summary{cursor:pointer;font-size:13.5px;color:var(--machine)} .carbon-more p{margin:.5rem 0 0} /* v2.2 print options (the Print page, above the format picker and the Print button) */ .printopts{margin-top:1rem} /* .row .lbl is flex:none + white-space:nowrap by default (fine for a short label), which let a long explanation (e.g. "Add simulator time to the grand total"'s AMC1 FCL.050 line) push the switch or field past the card's clipped right edge instead of wrapping. .row.token .lbl and .card-row .lbl already carry this same override for the same reason; these rows need it too. */ .printopts .row .lbl{flex:1 1 auto;min-width:0;white-space:normal} .seg2{grid-template-columns:1fr 1fr} .printbar .secondary{margin-left:-.3rem} /* v2.2 sign: countersigning PICUS on a captain's page, and the same sector list on the standalone link page (src/worker/sign.ts, no session, so it loads this same stylesheet). */ .cosign-sectors{margin:.6rem 0} .cosector label{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .6rem;width:100%;padding:.2rem 0;cursor:pointer} li.cosector{padding-top:.4rem;padding-bottom:.4rem} .csd{flex:0 0 5.2rem;color:var(--quiet);font-size:13.5px} .csf{flex:0 0 4.5rem;font-variant-numeric:tabular-nums} .csr{flex:1 1 auto;min-width:0} .csp{flex:0 0 auto;color:var(--quiet);font-size:13.5px} /* Its own wrapper (crew.ts's cosignSection), never a bare "label"/"input" selector scoped only to .cosign-form: that shape also matched the sector checkboxes' bare