/* ============================================================================
   Loop — "Rail" design system  (v2 proposal, prototype only)

   What changed from today, and why:
   - One continuous indigo band at the top instead of a purple card floating on
     gray. The band IS the header; status lives inside it. Fewer edges.
   - Lists are rows with hairlines, not stacks of bordered cards. Cards are
     reserved for things that are genuinely objects: a flight, a trip, a link.
   - A rail: the trip drawn as a line you can read your position on. Horizontal
     across the top, vertical down the timeline. Same idea both times.
   - Semantic color is unchanged — air blue, ground amber, home green, late
     red — because it already works and the family have learned it.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* surfaces */
  --bg:#F3F4F8; --surface:#FFF; --surface-2:#FAFAFB; --line:#E5E7F0; --line-2:#EFF0F6;
  /* text */
  --ink:#12141C; --ink-2:#585E70; --ink-3:#8C93A6;
  /* brand */
  --brand:#2E3070; --brand-2:#474AA0; --brand-soft:#EDEDF8; --brand-ink:#3A3D86;
  --band-deep:#232451;
  /* semantics — unchanged meanings */
  --air:#1F5FCC;    --air-soft:#E9F0FF;
  --ground:#A85C05; --ground-soft:#FDF2E1;
  --home:#0A7350;   --home-soft:#E4F5EE;
  --late:#B3261E;   --late-soft:#FCEAE9;
  --gold:#9A7B12;   --gold-soft:#FBF3D9;
  --sby:#B3261E;    --sby-soft:#FCEAE9;
  --rsv:#E07B10;    --rsv-soft:#FBEEDD;
  --neutral:#4B5563;--neutral-soft:#EEF0F4;
  /* a sit between two flights: a quiet blue-grey, never the ground amber */
  --sit:#5B6B88;    --sit-soft:#E8ECF3;
  /* on the band */
  --on-band:#fff; --on-band-2:rgba(255,255,255,.74); --on-band-3:rgba(255,255,255,.45);
  --band-line:rgba(255,255,255,.18); --band-fill:rgba(255,255,255,.12);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(18,20,28,.05);
  --shadow-lift:0 6px 24px -8px rgba(18,20,28,.22);
  color-scheme:light;
}

.dark{
  --bg:#0A0C11; --surface:#141821; --surface-2:#191D27; --line:#232838; --line-2:#1E2331;
  --ink:#E9EBF2; --ink-2:#98A0B4; --ink-3:#6E7688;
  --brand:#2B2E63; --brand-2:#3C3F86; --brand-soft:#20233D; --brand-ink:#9DA0E8;
  --band-deep:#1D1F44;
  --air:#77A6F7;    --air-soft:#16203A;
  --ground:#E0A25C; --ground-soft:#2E2317;
  --home:#4FC591;   --home-soft:#0F2C22;
  --late:#F0847A;   --late-soft:#331A1A;
  --gold:#D9BC5A;   --gold-soft:#2C2614;
  --sby:#F08076;    --sby-soft:#331A1A;
  --rsv:#EFA35C;    --rsv-soft:#33250F;
  --neutral:#9AA2B1;--neutral-soft:#212633;
  --sit:#9AA8C2;    --sit-soft:#1C2230;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-lift:0 8px 28px -10px rgba(0,0,0,.7);
  color-scheme:dark;
}

html{-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;min-height:100vh;
  font-size:15px;line-height:1.45;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
a{color:inherit}
button{font-family:inherit}
::selection{background:var(--brand-soft);color:var(--brand-ink)}

/* The app is a phone-width column wherever it is opened. */
.app{max-width:480px;margin:0 auto;position:relative}
.pad{padding:0 16px}

/* --------------------------------------------------------------------------
   THE BAND — header and status in one continuous surface
   -------------------------------------------------------------------------- */
.band{
  background:linear-gradient(160deg,var(--brand) 0%,var(--band-deep,#232451) 72%);
  color:var(--on-band);
  padding:calc(10px + env(safe-area-inset-top)) 16px 0;
  border-radius:0 0 24px 24px;
  position:relative;overflow:hidden;
}
.band::after{ /* option B from the lab: the corners sink deeper — depth, not light */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%,transparent 55%,rgba(10,10,30,.35) 100%);
}
.band > *{position:relative;z-index:1}
.bandtop{display:flex;align-items:center;gap:10px;min-height:38px}
.bandtop .spacer{margin-left:auto}
.iconbtn{
  background:var(--band-fill);border:none;color:var(--on-band);width:34px;height:34px;
  border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;line-height:1;padding:0;
}
.iconbtn:active{opacity:.8}
.iconbtn svg{width:17px;height:17px;display:block}

/* Segmented control — used for Crew/Family and for Month/List */
.seg{display:inline-flex;background:var(--band-fill);border-radius:999px;padding:3px;gap:2px}
.seg button{
  border:none;background:none;color:var(--on-band-2);font-size:12.5px;font-weight:700;
  padding:6px 13px;border-radius:999px;cursor:pointer;letter-spacing:-.1px;
}
.seg button.on{background:#fff;color:var(--brand)}
.dark .seg button.on{background:var(--brand-soft);color:var(--on-band)}
/* light variant, on page background */
.seg.plain{background:var(--neutral-soft)}
.seg.plain button{color:var(--ink-2)}
.seg.plain button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* --------------------------------------------------------------------------
   STATUS — the one thing the app exists to say
   -------------------------------------------------------------------------- */
.status{padding:16px 0 4px}
.statuspills{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:13px}
.spill{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:#fff;color:var(--brand);
}
.dark .spill{background:var(--brand-soft);color:var(--on-band)}
.spill.air{background:var(--air-soft);color:var(--air)}
.spill.ground{background:var(--ground-soft);color:var(--ground)}
.spill.sit{background:var(--sit-soft);color:var(--sit)}
.spill.home{background:var(--home-soft);color:var(--home)}
.spill.late{background:var(--late-soft);color:var(--late)}
/* Delay is amber, not red: late is not broken, and the red is spoken for by
   cancelled and by standby. */
.spill.delay{background:var(--rsv-soft);color:var(--rsv)}
.spill.ghost{background:var(--band-fill);color:var(--on-band-2)}
.dot{width:7px;height:7px;border-radius:999px;flex:0 0 auto;background:currentColor}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.livedot{animation:pulse 2s ease-in-out infinite}

.statusgrid{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end}
.whereL .city{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.05}
/* Airport codes are not a word: the tight tracking that suits "Uniontown"
   crushes "MEM -> ORD", and the pair is wider, so it takes a little less. */
.whereL .city.pair{font-size:26px;letter-spacing:-.2px}
/* A Today row that opens a flight is a real button, and has to shed the
   browser's opinions about buttons before it can look like the row beside it. */
button.tline{width:100%;background:none;border:0;font:inherit;color:inherit;
  text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
button.tline .chev3{margin-left:auto;align-self:center;color:var(--ink-3);
  font-size:17px;font-weight:700;line-height:1}
button.tline:active{background:var(--surface-2)}
/* The way through to the map for the flight the band is reporting. It sits on
   the dark band, so it borrows the band's own fill rather than the live
   card's solid blue, which would shout louder than the delay does. */
.status .bandtrack{display:block;text-align:center;background:var(--band-fill);
  color:var(--on-band);border-radius:12px;padding:10px 12px;margin-top:14px;
  font-size:13.5px;font-weight:700;text-decoration:none;
  border:1px solid var(--band-line)}
.whereL .clock b{font-size:21px;font-weight:800;color:rgba(255,255,255,.95);
  letter-spacing:-.4px;margin-right:7px}
.whereL .clock span{font-size:13px;font-weight:600;color:var(--on-band-2)}
.whereL .clock{font-size:15px;font-weight:600;color:var(--on-band-2);margin-top:5px;
  font-variant-numeric:tabular-nums}
.whereL .note{font-size:13.5px;font-weight:600;color:var(--on-band-2);margin-top:5px}
/* Home time for crew (§18): the house, sized to the text beside it, and the
   clock line's second line, the time and the date at home. */
.hico{display:inline-block;width:1em;height:1em;vertical-align:-.12em;margin-right:.32em;flex:none}
.whereL .clock .hline{display:block;margin-top:4px;font-size:13px;font-weight:600;color:var(--on-band-2)}
.homeR{text-align:right}
.homeR .lab{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--on-band-2)}
.homeR .big{font-size:36px;font-weight:800;letter-spacing:-1.6px;line-height:1;margin-top:4px;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.homeR .big small{font-size:17px;font-weight:700;opacity:.5;margin-left:1px;letter-spacing:0}
.homeR .when{font-size:12.5px;font-weight:600;color:var(--on-band-2);margin-top:5px;
  font-variant-numeric:tabular-nums}

/* THE RAIL — the trip as a line, with your position on it.
   Airport codes are the ticks; the filled part is what is already flown. */
.rail{margin:20px 0 0;padding:0 0 18px}
.railline{position:relative;height:3px;border-radius:999px;background:rgba(255,255,255,.22)}
.railfill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:#fff}
.railstops{display:flex;justify-content:space-between;position:relative}
.stop{position:relative;display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.stop i{
  width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.42);
  margin-top:-6px;
}
.stop.done i{background:#fff}
.stop.here i{width:11px;height:11px;margin-top:-7px;background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.stop b{font-size:11px;font-weight:800;letter-spacing:.4px;margin-top:6px;color:var(--on-band-3)}
.stop.done b{color:var(--on-band-2)}
.stop.here b{color:#fff}

/* --------------------------------------------------------------------------
   PAGE STRUCTURE
   -------------------------------------------------------------------------- */
main{padding-top:18px}
.sec{margin-bottom:26px}
.sechead{display:flex;align-items:center;gap:10px;padding:0 4px;margin-bottom:10px}
.sechead h2{
  font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-3);
}
.sechead .act{margin-left:auto;font-size:13px;font-weight:700;color:var(--air);
  text-decoration:none;cursor:pointer;background:none;border:none;padding:0}
.sechead .cnt{font-size:11px;font-weight:800;color:var(--ink-3);background:var(--neutral-soft);
  border-radius:999px;padding:2px 7px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;box-shadow:var(--shadow)}
.card + .card{margin-top:10px}
.card.tight{padding:14px 16px}
.card.flat{box-shadow:none;background:var(--surface-2)}

/* Row lists — settings, people, trips. Hairlines, not eight little boxes. */
.rows{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:13px;padding:14px 16px;width:100%;
  background:none;border:none;text-align:left;cursor:pointer;color:inherit;font-family:inherit}
.row + .row{border-top:1px solid var(--line-2)}
.row:active{background:var(--surface-2)}
.row.static{cursor:default}
.row .rt{flex:1;min-width:0}
.row .rt b{display:block;font-size:15px;font-weight:650;letter-spacing:-.1px}
.row .rt span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.4}
.row .chev{color:var(--ink-3);font-size:17px;flex:0 0 auto;line-height:1}
.row .val{font-size:13.5px;color:var(--ink-2);font-weight:600;flex:0 0 auto}
.row .ico{flex:0 0 30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;background:var(--neutral-soft);color:var(--ink-2)}
.row .ico svg{width:16px;height:16px}
.row .ico.air{background:var(--air-soft);color:var(--air)}
.row .ico.home{background:var(--home-soft);color:var(--home)}
.row .ico.ground{background:var(--ground-soft);color:var(--ground)}
.row .ico.brand{background:var(--brand-soft);color:var(--brand-ink)}
.row .ico.late{background:var(--late-soft);color:var(--late)}
.row.danger .rt b{color:var(--late)}

/* --------------------------------------------------------------------------
   CHIPS, BADGES, BUTTONS
   -------------------------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:999px;
  background:var(--neutral-soft);color:var(--neutral)}
.chip.air{background:var(--air-soft);color:var(--air)}
.chip.ground{background:var(--ground-soft);color:var(--ground)}
.chip.home{background:var(--home-soft);color:var(--home)}
.chip.late{background:var(--late-soft);color:var(--late)}
.chip.gold{background:var(--gold-soft);color:var(--gold)}
.chip.brand{background:var(--brand-soft);color:var(--brand-ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 18px;border-radius:12px;border:none;cursor:pointer;
  font-size:14.5px;font-weight:700;background:var(--brand);color:#fff;letter-spacing:-.1px}
.dark .btn{background:var(--brand-2)}
.btn:active{opacity:.85}
.btn.sec{background:var(--brand-soft);color:var(--brand-ink)}
.btn.line{background:transparent;border:1px solid var(--line);color:var(--ink);padding:11px 17px}
.btn.ghost{background:transparent;color:var(--air);padding:8px 0}
.btn.wide{width:100%}
.btn.danger{background:var(--late)}
.btn svg{width:16px;height:16px}

/* --------------------------------------------------------------------------
   FLIGHT CARD — the next departure
   -------------------------------------------------------------------------- */
.next{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow)}
.next .nhead{display:flex;align-items:center;gap:9px;padding:14px 16px 0}
/* The countdown on the next card: what he is working to before this push. */
.next .nlead{display:flex;align-items:baseline;gap:8px;padding:12px 16px 0}
.next .nlead .lab{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;opacity:.55}
.next .nlead .big{font-size:22px;font-weight:800;letter-spacing:-.8px;line-height:1;font-variant-numeric:tabular-nums}
.next .nlead .when{margin-left:auto;font-size:12.5px;font-weight:600;opacity:.7;font-variant-numeric:tabular-nums;white-space:nowrap}
.next .flno{font-size:12px;font-weight:800;color:var(--air);background:var(--air-soft);
  border-radius:6px;padding:3px 8px;letter-spacing:.3px}
.next .into{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.next .nroute{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:10px;padding:14px 16px 16px}
.next .end{min-width:0}
.next .end.r{text-align:right}
.next .end .apt{font-size:26px;font-weight:800;letter-spacing:-.9px;line-height:1}
/* City first, so the code is named before a time is attached to it. */
.next .end .dt{font-size:12px;color:var(--ink-3);margin-top:4px;font-weight:650}
.next .end .tm{font-size:19px;font-weight:750;margin-top:9px;font-variant-numeric:tabular-nums;
  letter-spacing:-.3px}
.next .end .zn{font-size:11.5px;color:var(--ink-3);margin-top:3px;font-weight:600;
  font-variant-numeric:tabular-nums}
.next .mid{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink-3)}
.next .mid .dur{font-size:11px;font-weight:800;letter-spacing:.4px;white-space:nowrap}
.next .arc{width:108px;height:27px;color:var(--air);overflow:visible}
.next .nfoot{border-top:1px solid var(--line-2);padding:11px 16px;display:flex;
  align-items:center;gap:8px;background:var(--surface-2)}
.next .nfoot a{font-size:13px;font-weight:700;color:var(--air);text-decoration:none}
.next .nfoot .tz{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:600}

/* --------------------------------------------------------------------------
   TIMELINE — one spine, dots for stations, layovers as labelled gaps
   -------------------------------------------------------------------------- */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;
  background:var(--line);border-radius:2px}
.tl .node{position:relative;margin-bottom:10px}
.tl .node::before{content:"";position:absolute;left:-26px;top:17px;width:12px;height:12px;
  border-radius:999px;background:var(--surface);border:2px solid var(--line)}
.tl .node.leg::before{border-color:var(--air)}
.tl .node.cmt::before{border-color:var(--home)}
.tl .node.dh::before{border-color:var(--neutral)}
.tl .node.now::before{border-color:var(--air);background:var(--air);
  box-shadow:0 0 0 4px var(--air-soft)}
.tl .node.done::before{background:var(--line);border-color:var(--line)}
.tl .node.done .leaf{opacity:.55}

.leaf{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;box-shadow:var(--shadow)}
.leaf .lhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.leaf .rt2{font-size:16px;font-weight:800;letter-spacing:-.3px}
.leaf .fl{font-size:11.5px;font-weight:800;color:var(--air);background:var(--air-soft);
  border-radius:5px;padding:2px 6px}
.leaf .fl.dh{color:var(--neutral);background:var(--neutral-soft)}
.leaf .fl.cmt{color:#fff;background:var(--home)}
/* The dark-theme green is a light green: white on it is unreadable. */
.dark .leaf .fl.cmt{color:#08201A}
.leaf .dur{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.leaf .times{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.leaf .times div span{display:block;font-size:10px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink-3)}
.leaf .times div b{display:block;font-size:16px;font-weight:750;margin-top:2px;
  font-variant-numeric:tabular-nums}
.leaf .times div em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);
  margin-top:2px;font-weight:600;font-variant-numeric:tabular-nums}
.leaf .track{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:12px;
  font-weight:700;color:var(--air);text-decoration:none}
/* The card's bottom line with a sit after it: the link left, the sit right. */
.leaf .lfoot{display:flex;align-items:center;gap:10px;margin-top:10px}
.leaf .lfoot .track{margin-top:0}
.leaf .lfoot .sitlen{margin-left:auto;font-size:12px;font-weight:700;color:var(--sit);
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* A layover is a gap in the rail, not another box. */
.tl .gap{position:relative;padding:4px 0 14px;margin-top:-4px}
.tl .gap::before{content:"";position:absolute;left:-21px;top:0;bottom:8px;width:2px;
  background:repeating-linear-gradient(var(--ground) 0 4px,transparent 4px 8px)}
.tl .gap .g{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tl .gap .g b{font-size:13.5px;font-weight:750;color:var(--ground)}
.tl .gap .g span{font-size:12.5px;color:var(--ink-3);font-weight:600;
  font-variant-numeric:tabular-nums}
/* A layover behind him: dimmed like a flown leg. */
.tl .gap.done .g{opacity:.55}
.tl .gap.done::before{opacity:.45}

/* --------------------------------------------------------------------------
   TODAY strip — the crew's next few hours, in one glance
   -------------------------------------------------------------------------- */
.today{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow)}
.tline{display:flex;align-items:center;gap:12px;padding:12px 16px}
.tline + .tline{border-top:1px solid var(--line-2)}
/* Wide enough for "11:00 AM" on one line: a wrapped clock reads as a bug. */
.tline .clk{flex:0 0 68px;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.3px}
.tline .bar2{flex:0 0 3px;align-self:stretch;border-radius:999px;background:var(--line)}
.tline.air .bar2{background:var(--air)} .tline.ground .bar2{background:var(--ground)}
.tline.home .bar2{background:var(--home)} .tline.brandb .bar2{background:var(--brand-2)}
/* A sit in the Today list wears the sit's quiet tone, not the ground amber (§15). */
.tline.sit .bar2{background:var(--sit)}
.tline .tx{flex:1;min-width:0}
.tline .tx b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.1px}
.tline .tx span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:1px}
.tline.past{opacity:.45}
.tline .nowtag{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--air);background:var(--air-soft);border-radius:999px;padding:2px 7px}

/* --------------------------------------------------------------------------
   CALENDAR
   -------------------------------------------------------------------------- */
.cal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--shadow)}
.calhead{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.calhead b{font-size:17px;font-weight:800;letter-spacing:-.3px}
.calnav{margin-left:auto;display:flex;gap:6px}
.calnav button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);cursor:pointer;font-size:13px;line-height:1}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.dow span{text-align:center;font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--ink-3)}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.day{aspect-ratio:1/0.92;border-radius:9px;padding:5px 3px 4px;display:flex;flex-direction:column;
  align-items:center;gap:4px;background:var(--surface-2);cursor:pointer;border:1px solid transparent}
.day.out{background:transparent}
.day.out .n{color:var(--ink-3);opacity:.5}
.day .n{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.day.today{border-color:var(--air);background:var(--air-soft)}
.day.today .n{color:var(--air);font-weight:800}
.day .marks{display:flex;flex-direction:column;gap:2px;width:100%;padding:0 2px;align-items:center}
.day .mk{height:3px;border-radius:999px;background:var(--line);width:100%}
/* Home events are a different SHAPE, not another color: at 3px high, one more
   blue-ish bar is indistinguishable from a flight. */
.day .ev{width:5px;height:5px;border-radius:999px;background:var(--brand-2);margin-top:1px}
.mk.air{background:var(--air)} .mk.ground{background:var(--ground)}
.mk.home{background:var(--home)} .mk.late{background:var(--late)}
.mk.gold{background:var(--gold)} .mk.brandb{background:var(--brand-2)}
.callegend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--line-2)}
.callegend span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--ink-2);font-weight:600}
.callegend i{width:12px;height:3px;border-radius:999px;display:block}
.callegend i.dotmark{width:6px;height:6px;margin:0 3px}

/* --------------------------------------------------------------------------
   PEOPLE
   -------------------------------------------------------------------------- */
.person{display:flex;align-items:center;gap:12px;padding:14px 16px}
.person + .person{border-top:1px solid var(--line-2)}
.avatar{flex:0 0 38px;height:38px;border-radius:999px;background:var(--brand-soft);
  color:var(--brand-ink);display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;letter-spacing:-.2px}
.avatar.gold{background:var(--gold-soft);color:var(--gold)}
.person .pt{flex:1;min-width:0}
.person .pt b{display:block;font-size:15px;font-weight:700;letter-spacing:-.1px}
.person .pt span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.more{background:none;border:none;color:var(--ink-3);font-size:18px;cursor:pointer;
  padding:4px 6px;line-height:1;flex:0 0 auto;border-radius:8px}
.more:active{background:var(--surface-2)}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
label{display:block;font-size:11.5px;font-weight:750;color:var(--ink-2);margin-bottom:5px;
  letter-spacing:.1px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],select,textarea{
  width:100%;font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);color:var(--ink);font-family:inherit}
.dark input,.dark select,.dark textarea{background:var(--surface-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-2);
  box-shadow:0 0 0 3px var(--brand-soft)}
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;min-height:43px}
/* A menu still showing its gray example ("e.g., FedEx"); the list itself stays ink. */
select.ph{color:var(--ink-3)}
select.ph option{color:var(--ink)}
.field{margin-bottom:13px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.hint{font-size:12px;color:var(--ink-3);line-height:1.5;margin-top:6px}
.inrow{display:flex;align-items:center;gap:10px}
.inrow select{width:auto;flex:0 1 180px}
.inrow span{font-size:13.5px;color:var(--ink-2)}
/* Days / hours / minutes side by side (custom reminders); min-width:0 lets
   three menus share a phone's width without pushing the page sideways. */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* The reserve form's hours and minutes: side by side on a phone, and greyed
   out while All day is ticked. */
#rsvFor{grid-template-columns:repeat(2,minmax(0,1fr))}
#rsvFor select:disabled{opacity:.45;cursor:default}
/* The crew map's Month menu (ui2.js mapMonthMount): a button dressed as the
   page's menus, and a list over the globe whose rows tick on and off. */
#mapMonthBox{position:relative}
.mmenu{width:100%;display:flex;align-items:center;gap:8px;font-size:16px;padding:11px 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);
  font-family:inherit;text-align:left;cursor:pointer}
.dark .mmenu{background:var(--surface-2)}
.mmenu .mmname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mmenu .mmcaret{color:var(--ink-2);font-size:16px;line-height:1}
.mmlist{position:absolute;left:0;right:0;z-index:20;margin-top:6px;max-height:min(60vh,430px);
  overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lift);padding:4px 0}
.mmlist[hidden]{display:none}
.mmrow{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:none;
  border:0;color:var(--ink);font-family:inherit;font-size:15px;text-align:left;cursor:pointer}
.mmrow:active{background:var(--surface-2)}
.mmrow .mmtick{width:14px;flex:0 0 14px;color:var(--brand-ink);font-weight:800;visibility:hidden}
.mmrow.on .mmtick{visibility:visible}
.mmsep{height:1px;background:var(--line-2);margin:4px 0}
#cRemList .act{margin-left:auto;flex:0 0 auto;font-size:13px;font-weight:700;cursor:pointer;
  background:none;border:none;padding:0;color:var(--late);font-family:inherit}
/* Four is the most: Add stays in place, visibly off. */
#crewRemCard .btn:disabled{opacity:.5;cursor:default}
.tripsmore{display:flex;justify-content:center;padding:4px 0 2px;border-top:1px solid var(--line-2)}
.switch{position:relative;display:inline-block;width:48px;height:29px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.switch i{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:background .18s}
.dark .switch i{background:var(--neutral-soft)}
.switch i::before{content:"";position:absolute;width:25px;height:25px;left:2px;top:2px;
  background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.switch input:checked + i{background:var(--home)}
.switch input:checked + i::before{transform:translateX(19px)}

/* --------------------------------------------------------------------------
   TAB BAR
   -------------------------------------------------------------------------- */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--surface);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
@supports (backdrop-filter:blur(1px)){
  .tabs{background:color-mix(in srgb,var(--surface) 84%,transparent);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
}
.tabsin{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.tabsin.n3{grid-template-columns:repeat(3,1fr)}
.tab{background:none;border:none;cursor:pointer;padding:8px 0 7px;display:flex;
  flex-direction:column;align-items:center;gap:3px;color:var(--ink-3);font-family:inherit}
.tab svg{width:22px;height:22px;display:block}
.tab span{font-size:10px;font-weight:700;letter-spacing:.1px}
.tab.on{color:var(--brand-ink)}

/* --------------------------------------------------------------------------
   MISC
   -------------------------------------------------------------------------- */
.page{display:none}
.page.on{display:block}
.note{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.note b{color:var(--ink);font-weight:700}
.callout{background:var(--brand-soft);border-radius:var(--r-md);padding:13px 15px;
  font-size:13px;line-height:1.55;color:var(--brand-ink)}
.dark .callout{color:var(--ink)}
.callout b{font-weight:800}
.empty{padding:26px 16px;text-align:center;color:var(--ink-3);font-size:13.5px}
.foot{padding:24px 16px 8px;text-align:center;font-size:12px;color:var(--ink-3);line-height:1.8}
.foot a{color:var(--ink-3);text-decoration:none;margin:0 7px}
.sheet-scrim{position:fixed;inset:0;background:rgba(10,12,18,.45);z-index:50;display:none}
.sheet-scrim.on{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;background:var(--surface);
  border-radius:22px 22px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  max-width:480px;margin:0 auto;transform:translateY(100%);transition:transform .24s ease}
.sheet.on{transform:none}
.sheet .grab{width:38px;height:4px;border-radius:999px;background:var(--line);margin:6px auto 14px}
.sheet h3{font-size:17px;font-weight:800;letter-spacing:-.3px;margin-bottom:4px;padding:0 2px}
.sheet .sub{font-size:13px;color:var(--ink-2);margin-bottom:14px;padding:0 2px}

/* ==========================================================================
   v2.1 — the live calendar, sheets and small interactions.
   The calendar adopts the real app grammar: bars positioned by time of day,
   running continuously into the next day, lanes stacked flight / layover /
   commute, home events as a dot. Continuing edges are square and bleed 2px
   into the cell gap so a multi-day span reads as ONE line across the week.
   ========================================================================== */
.day{aspect-ratio:auto;min-height:56px;justify-content:flex-start;gap:2px}
.day .n{margin-top:1px}
.day .marks{position:relative;display:block;height:22px;width:calc(100% + 6px);
  margin:1px -3px 0;padding:0}
.day .sbar{position:absolute;height:3.5px;border-radius:0;min-width:3px}
.sbar.rs{border-top-left-radius:99px;border-bottom-left-radius:99px}
.sbar.re{border-top-right-radius:99px;border-bottom-right-radius:99px}
.sbar.air{background:var(--air)}
.sbar.ground{background:var(--ground)}
.sbar.late{background:var(--late)}
.sbar.home{background:var(--home)}
.sbar.neutral{background:var(--neutral)}
.sbar.brandb{background:var(--brand-2)}
.dark .sbar.brandb{background:var(--brand-ink)}
.day .evd{position:absolute;left:50%;bottom:0;width:5px;height:5px;border-radius:99px;
  background:var(--brand-2);transform:translateX(-50%)}
.dark .day .evd{background:var(--brand-ink)}

/* review card inside the upload flow */
.rv{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin-top:12px;
  background:var(--surface)}
.rv .rvh{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.rv .rvh b{font-size:15.5px;font-weight:800;letter-spacing:-.3px}
.rv .rvh span{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rv .rvh .tn{font-size:11px;font-weight:800;color:var(--brand-ink);background:var(--brand-soft);
  border-radius:5px;padding:2px 7px}
.rvleg{display:flex;gap:8px;align-items:baseline;font-size:12.5px;padding:3px 0;
  font-variant-numeric:tabular-nums;flex-wrap:wrap}
.rvleg b{min-width:92px;font-weight:750}
.rvleg .fl2{color:var(--air);font-weight:700;min-width:56px}
.rvleg span{color:var(--ink-2)}
.rvlay{font-size:12px;color:var(--ground);font-weight:600;padding:1px 0 3px 12px}
/* item 7: a deadhead he is not on, struck through, and the line under it */
.rvleg.struck, .rvleg.struck span, .rvleg.struck .fl2 {color:var(--ink-3);text-decoration:line-through}
.rvsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rvnot{font-size:12.5px;color:var(--ink-2);padding:0 0 4px 12px;line-height:1.6}
.rvhint{font-size:12px;color:var(--ink-3);padding:0 0 6px 12px}
.rvleg.rvride{padding-left:12px}
.rvask{padding:4px 0 8px 12px}
.rvask .rvq{font-size:13px;font-weight:600;color:var(--ink)}
.rvask .rvbtns{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.rvask .rvbtns .btn{flex:1;margin:0;min-width:84px}
.lnk{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--air);cursor:pointer}
/* his trip page: the reminder under a struck deadhead, and the lines after the timeline */
.node.struck .rt2, .node.struck .fl{color:var(--ink-3);text-decoration:line-through}
.strk{font-size:12.5px;color:var(--ink-2);margin-top:4px}
.strklines{margin-top:10px;font-size:12.5px;color:var(--ink-2);line-height:1.7}

/* sheets can hold whole flows now */
.sheet{max-height:86vh;overflow:auto}

/* two-tap confirmation */
.more.armed{color:var(--late);font-weight:800;font-size:12px}
.row.armed .rt b{color:var(--late)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom));z-index:70;
  transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--bg);
  padding:9px 15px;border-radius:999px;font-size:12.5px;font-weight:700;opacity:0;
  pointer-events:none;transition:opacity .18s,transform .18s;white-space:nowrap;max-width:92vw;
  overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ==========================================================================
   v2.2 — the Add button is THE way in, raised out of the tab bar.
   Upload-first hierarchy in the add sheet; list-view day headers.
   ========================================================================== */
body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.tabsin.n5{grid-template-columns:1fr 1fr 76px 1fr 1fr}
.tabsin.n4f{grid-template-columns:1fr 1fr 76px 1fr}
.fabslot{position:relative;display:flex;align-items:flex-start;justify-content:center}
.fab{position:relative;margin-top:-20px;width:58px;height:58px;border-radius:999px;border:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(160deg,var(--brand-2),var(--brand));
  box-shadow:0 8px 20px -6px rgba(46,48,112,.55),0 0 0 5px var(--bg);
  transition:transform .12s ease}
.dark .fab{box-shadow:0 8px 20px -6px rgba(0,0,0,.7),0 0 0 5px var(--bg)}
.fab svg{width:26px;height:26px}
.fab:active{transform:scale(.92)}

/* The hero row in the add sheet: uploading is the front door, everything else
   is a side door. */
.sheethero{display:flex;gap:13px;align-items:center;width:100%;text-align:left;cursor:pointer;
  border:none;border-radius:var(--r-md);padding:16px;margin-bottom:10px;color:#fff;
  background:linear-gradient(160deg,var(--brand-2),var(--brand));font-family:inherit;
  box-shadow:var(--shadow-lift)}
.sheethero .hico{flex:0 0 42px;height:42px;border-radius:13px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center}
.sheethero .hico svg{width:21px;height:21px}
.sheethero .ht{flex:1;min-width:0}
.sheethero .ht b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.2px}
.sheethero .ht span{display:block;font-size:12.5px;color:rgba(255,255,255,.82);margin-top:3px;line-height:1.45}
.sheethero .chev{color:rgba(255,255,255,.6);font-size:17px}

/* list view: a day header, then that day rows */
.lday{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-3);padding:14px 4px 6px}
.lday:first-child{padding-top:2px}

/* ==========================================================================
   v2.3 — commuter + wingman: gold mutual days, Sam under you on the
   calendar, commute-finder candidate rows, the wingman strip.
   ========================================================================== */
.day.gold{background:var(--gold-soft)}
.day.gold .n{color:var(--gold);font-weight:800}
.day.today.gold{border-color:var(--gold)}
/* hairline between your half of a day and his: my four rows above it, his
   gold under it (laneTop in ui2.js) */
.marks.wm::after{content:"";position:absolute;top:24px;left:8%;right:8%;height:1px;
  background:var(--line-2)}
.wmtog{display:flex;gap:14px;flex-wrap:wrap;margin:0 2px 12px}
.wmtog .wt{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:650;
  color:var(--ink-2);cursor:pointer}
.wmtog .wt input{width:16px;height:16px;accent-color:var(--gold)}

/* commute-finder candidates: route + flight, times, and the slack — the one
   number a commuter actually reads */
.cand2{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;margin-bottom:7px;font-family:inherit;color:var(--ink)}
.cand2:hover{border-color:var(--brand-2)}
.cand2.on{border-color:var(--brand-2);box-shadow:0 0 0 1px var(--brand-2);background:var(--brand-soft)}
.cand2 .c1{display:flex;align-items:baseline;gap:8px}
.cand2 .c1 b{font-size:14.5px;font-weight:800;letter-spacing:-.2px}
.cand2 .c1 i{font-style:normal;font-size:12px;font-weight:800;color:var(--air)}
.cand2 .c2{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cand2 .c3{font-size:11.5px;font-weight:800;color:var(--home)}
/* The commute card's extras (item 17): the seat label at the right of the
   first line, a tight ride's slack in the late colour, the facts under it,
   and a heading per day going out. */
.cand2 .c1 .cmseat{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:800;color:var(--ink-2);white-space:nowrap}
.cand2 .c3.tight{color:var(--late)}
.cand2 .c4{font-size:12px;color:var(--ink-3);line-height:1.35}
.cmday{margin:12px 0 4px;font-size:12px;font-weight:800;color:var(--ink-2);letter-spacing:.2px}

/* The wingman section on Now (DJ, 2026-09-25): one navy card that changes
   roles, drawn by the family page's own pieces (rWm, wmScope) — his live
   card while he flies, his pills and his next flight between things, the
   band's status block otherwise — then his overview and his trips. The
   band's classes (.status, .homeR, .livec, .statuspills) already assume
   white on navy, so the card only has to be navy; the next-flight card,
   which is white on the page, is recoloured here to sit on it. */
.wmfoldhead h2{min-width:0}
.wmfoldhead .wmfold{display:flex;align-items:center;gap:8px;background:none;border:none;
  padding:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;min-width:0}
.wmfoldhead .wmfold .cnt{text-transform:none;letter-spacing:0}
.wmfoldhead .fchev{color:var(--ink-3);font-size:14px;display:inline-block;
  transition:transform .18s ease}
.wmfoldhead .wmfold[aria-expanded="true"] .fchev{transform:rotate(90deg)}
.wmband{background:linear-gradient(160deg,var(--brand) 0%,var(--band-deep,#232451) 72%);
  color:var(--on-band);border-radius:var(--r-lg);padding:14px 16px 12px;box-shadow:var(--shadow)}
.wmband .wmwho{display:flex;align-items:center;gap:12px}
.wmband .wmwho .avatar{flex:0 0 36px;height:36px}
.wmband .wmwho .pt{min-width:0}
.wmband .wmwho .pt b{display:block;font-size:15px;font-weight:700;letter-spacing:-.1px}
.wmband .wmwho .pt span{display:block;font-size:12.5px;font-weight:600;color:var(--on-band-2);
  margin-top:2px;font-variant-numeric:tabular-nums}
.wmband .livec{margin:12px 0 0}
.wmband .chip.gold{text-transform:none;letter-spacing:0;font-size:11.5px}
.wmband .wmpillrow{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:14px}
.wmband .wmpillrow .statuspills{margin:0}
.wmband .wmland{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:12px 0 2px}
.wmband .wmland .homeR .big{font-size:30px}
/* the next-flight card on navy: the phone's WingmanNextBlock */
.wmband .sec{margin:12px 0 0}
.wmband .sechead{padding:0;margin-bottom:8px}
.wmband .sechead h2{color:var(--on-band-2)}
.wmband .sechead .cnt{background:var(--band-fill);color:var(--on-band)}
.wmband .next{background:var(--band-fill);border-color:var(--band-line);box-shadow:none}
.wmband .next .flno{background:rgba(35,60,110,.5);color:#9DB9F5}
.wmband .next .into,.wmband .next .end .dt,.wmband .next .end .zn,
.wmband .next .mid,.wmband .next .nfoot .tz{color:var(--on-band-2)}
.wmband .next .arc{color:#77A6F7}
.wmband .next .nfoot{background:transparent;border-top-color:var(--band-line)}
.wmband .next .nfoot a{color:#9DB9F5}
/* the next card's chips in the band's colours, as the phone draws them */
.wmband .next .chip[class="chip"]{background:var(--band-fill);color:var(--on-band)}
.wmband .next .chip.air{background:rgba(35,60,110,.5);color:#9DB9F5}
/* standing: the both-home chip sits close over the band's own pills */
.wmband .wmpillrow + .status{padding-top:10px}
/* under the card: his overview, all of his trips, and whose clock this is */
.wmsec .wmov{margin-top:22px}
.wmsec .wmtrips{margin-top:18px}
.wmcard .row{border-top:1px solid var(--line-2)}
.wmcard .empty{padding:18px 16px}
/* under his spine, on one of his trips, and under the section */
.wmcap{font-size:12px;color:var(--ink-3);line-height:1.5;margin:8px 0 0;padding:0 2px}
/* the way back from one of his trips to his schedule */
.sheet .wmback{display:block;background:none;border:none;padding:0 2px;margin:0 0 8px;
  font-size:13px;font-weight:700;color:var(--air);cursor:pointer;font-family:inherit}
/* the Wingman header inside the alert rows */
.alist li.alist-head{padding:12px 16px 2px;font-size:11px;font-weight:800;letter-spacing:.9px;
  text-transform:uppercase;color:var(--ink-3)}

/* home-town typeahead (v2.4) — select-only, like the live app */
.townlist{position:absolute;left:0;right:0;top:100%;z-index:60;margin-top:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;overflow:hidden;
  box-shadow:var(--shadow-lift);max-height:264px;overflow-y:auto}
.townrow{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:14px;color:var(--ink);padding:10px 12px}
.townrow + .townrow{border-top:1px solid var(--line-2)}
.townrow:hover{background:var(--surface-2)}
.townnone{padding:10px 12px;font-size:13px;color:var(--ink-3)}

/* home airports (build 15): up to three slots, the first the main one, and a
   search under them that reuses the town list's rows */
.aptslots{display:flex;flex-wrap:wrap;gap:8px}
.aptslot{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);min-height:42px;font-family:inherit;font-size:14px;color:var(--ink)}
.dark .aptslot{background:var(--surface-2)}
.aptslot.on{border-color:var(--brand-2);box-shadow:0 0 0 3px var(--brand-soft)}
.aptslot.add{align-items:center;padding:0 14px;border-style:dashed;color:var(--ink-2);cursor:pointer;
  font-weight:700}
.aptpick{display:inline-flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);padding:0 4px 0 12px}
.aptpick i{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  color:var(--brand-ink);background:var(--brand-soft);border-radius:6px;padding:2px 6px}
.aptx{background:none;border:none;cursor:pointer;font-family:inherit;font-size:17px;line-height:1;
  color:var(--ink-3);padding:0 11px 0 6px}
.aptx:hover{color:var(--late)}
.aptfind{position:relative;margin-top:8px}
.aptfindin{display:flex;align-items:center;gap:10px}
.aptfindin input{flex:1;min-width:0}
.aptrow b{font-weight:800}
.aptrow span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ==========================================================================
   v2.5 — hotel standby is its own thing on the calendar: a yellow bar, not a
   blue flight and not an amber gap. Layover BARS are gone entirely (they
   drowned the standby periods in amber); layovers still speak in the day
   sheets, the list view and the timelines, where there is room for words.
   ========================================================================== */
.sbar.sby{background:var(--sby)}
.spill.sby{background:var(--sby-soft);color:var(--sby)}
.tline.sby .bar2{background:var(--sby)}
.tl .node.sby::before{border-color:var(--sby)}
.tl .node.sby.now::before{border-color:var(--sby);background:var(--sby);
  box-shadow:0 0 0 4px var(--sby-soft)}
.leaf .fl.sby{color:var(--sby);background:var(--sby-soft)}

/* v2.6 — reserve wears orange; red now means standby. */
.sbar.rsv{background:var(--rsv)}
.spill.rsv{background:var(--rsv-soft);color:var(--rsv)}
.tline.rsv .bar2{background:var(--rsv)}
/* Flights are what the calendar is FOR — they get the boldest mark. */
.sbar.air,.sbar.neutral{height:5px}

/* ==========================================================================
   v2.7 — the Schedule tab folds: calendar on top, then Home (open by
   default), Trips and Commutes closed until asked. Reminders became real
   checkboxes: ticked strikes through and sinks, unticking floats it back.
   ========================================================================== */
.fold2{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow)}
.fold2>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:15px 16px}
.fold2>summary::-webkit-details-marker{display:none}
.fold2>summary .ftitle{font-size:15px;font-weight:800;letter-spacing:-.2px}
.fold2>summary .fchev{margin-left:auto;color:var(--ink-3);font-size:14px;
  transition:transform .18s ease;flex:0 0 auto}
.fold2[open]>summary .fchev{transform:rotate(90deg)}
.fold2[open]>summary{border-bottom:1px solid var(--line-2)}
.fold2 .fbody{padding:12px 14px 14px}
.fold2 .fbody .rows{box-shadow:none}
.fold2>summary .cnt{font-size:11px;font-weight:800;color:var(--ink-3);
  background:var(--neutral-soft);border-radius:999px;padding:2px 7px;margin-right:auto}
.fold2>summary .act{font-size:13px;font-weight:700;color:var(--air);cursor:pointer;
  background:none;border:none;padding:0;flex:0 0 auto}

/* reminder checkboxes */
.tkrow{gap:11px}
.tkchk{position:relative;flex:0 0 24px;height:24px;cursor:pointer}
.tkchk input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.tkchk i{position:absolute;inset:0;border:2px solid var(--ink-3);border-radius:8px;
  background:var(--surface);transition:background .15s,border-color .15s}
.tkchk input:checked + i{background:var(--home);border-color:var(--home)}
.tkchk input:checked + i::after{content:"";position:absolute;left:7px;top:3px;width:5px;
  height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.tkchk input:disabled + i{opacity:.45}
.tkrow.tkdone{opacity:.6}
.tkrow.tkdone .rt b{text-decoration:line-through;color:var(--ink-3)}

/* the alert checkbox rows — used by both the family page and the crew
   You tab, so they live here, not in one page's head */
.alist{list-style:none}
.alist li + li{border-top:1px solid var(--line-2)}
.alist label{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;cursor:pointer}
.alist input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--brand-2)}
.alist b{display:block;font-size:14.5px;font-weight:650}
.alist span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}

/* buttons that ride inside the upload editor rows */
#upeLegs .act{font-size:13px;font-weight:700;cursor:pointer;background:none;border:none;padding:0}


/* ==========================================================================
   v2.8 — the family Now thread, promoted from /design/story2. The spine
   speaks home time first, the crew member's clock second by name. The
   flight card appears only when a flight is the story.
   ========================================================================== */
.fcard{background:linear-gradient(160deg,var(--brand) 0%,var(--band-deep,#232451) 72%);
  border-radius:20px;padding:16px 18px 15px;position:relative;overflow:hidden;color:#fff;
  margin:0 0 14px}
.fcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%,transparent 55%,rgba(10,10,30,.35) 100%)}
.fcard > *{position:relative;z-index:1}
.fcard .r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fcard .chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  padding:5px 11px;font-size:10.5px;font-weight:800;letter-spacing:.8px}
.fcard .chip.inf{background:rgba(20,70,50,.55);color:#4FC591}
.fcard .chip.air2{background:rgba(35,60,110,.5);color:#9DB9F5}
.fcard .chip i{width:6px;height:6px;border-radius:99px;background:currentColor}
.fcard .flno2{margin-left:auto;font-size:13px;font-weight:800;color:rgba(255,255,255,.85)}
.fcard .flno2 em{font-style:normal;color:#9DB9F5}
.fcard .route2{font-size:25px;font-weight:800;letter-spacing:-.6px;margin-top:12px;
  text-align:center}
.fcard .pbar{height:7px;border-radius:99px;background:rgba(255,255,255,.16);
  margin:14px 0 15px;overflow:hidden}
.fcard .pbar i{display:block;height:100%;border-radius:99px;background:#77A6F7}
.fcard .cols{display:flex;gap:10px}
.fcard .col{flex:1}
.fcard .col .ck{font-size:10.5px;font-weight:800;letter-spacing:1px;
  color:rgba(255,255,255,.55);text-transform:uppercase}
.fcard .col .cv{font-size:17.5px;font-weight:800;letter-spacing:-.3px;margin-top:4px}
.fcard .col .cv small{display:block;font-size:11px;font-weight:600;color:rgba(255,255,255,.55)}
.fcard .mapbtn{display:block;text-align:center;background:#77A6F7;color:#101736;
  border-radius:13px;padding:12px;font-size:14.5px;font-weight:800;text-decoration:none;
  margin-top:15px}
.fcard .cfoot{font-size:11px;color:rgba(255,255,255,.5);text-align:center;margin-top:9px;
  font-weight:600}

.spine{position:relative;padding-left:22px;margin:4px 2px}
.spine::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;
  background:var(--line)}
.snode{position:relative;padding:0 0 22px}
.snode:last-child{padding-bottom:4px}
.snode::before{content:"";position:absolute;left:-21px;top:5px;width:12px;height:12px;
  border-radius:99px;background:var(--bg);border:2.5px solid var(--ink-3)}
.snode.rsv::before{border-color:var(--rsv)}
.snode.air::before{border-color:var(--air)}
.snode.gold::before{border-color:var(--gold)}
.snode.home::before{border-color:var(--home);background:var(--home)}
.snode.late::before{border-color:var(--late)}
.snode .k{font-size:11px;font-weight:800;letter-spacing:.9px;color:var(--ink-3);
  text-transform:uppercase;display:flex;gap:8px;align-items:center}
.snode .k .in{margin-left:auto;font-size:11px;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;
  padding:3px 9px;letter-spacing:.3px;font-weight:800;white-space:nowrap}
.snode .k .in.soon{background:var(--home-soft);color:var(--home);border-color:transparent}
.snode .v{font-size:18.5px;font-weight:800;letter-spacing:-.4px;margin-top:5px;color:var(--ink)}
.snode .v small{font-size:13px;font-weight:600;color:var(--ink-3);margin-left:7px}
.snode .s{font-size:13px;color:var(--ink-2);margin-top:3px}
.snode.home .v{font-size:22px}

/* ==========================================================================
   v2.9 — the /design/overview promotion. The live flight card wears the big
   arc; the Overview is the spine folded into chapters, each with its
   countdown chip. CARDS2 in ui2.js is the parachute.
   ========================================================================== */
.livec{background:linear-gradient(160deg,var(--brand) 0%,var(--band-deep,#232451) 72%);
  border-radius:22px;padding:16px 18px 15px;position:relative;overflow:hidden;color:#fff;
  margin-bottom:12px}
.livec::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%,transparent 55%,rgba(10,10,30,.35) 100%)}
.livec > *{position:relative;z-index:1}
.livec .lc-r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.livec .chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  padding:5px 11px;font-size:10.5px;font-weight:800;letter-spacing:.8px}
.livec .chip.inf2{background:rgba(20,70,50,.55);color:#4FC591}
.livec .chip.fl2{background:rgba(35,60,110,.5);color:#9DB9F5}
.livec .chip i{width:6px;height:6px;border-radius:99px;background:currentColor}
.livec .lc-fl{margin-left:auto;font-size:13px;font-weight:800;color:rgba(255,255,255,.85)}
.livec .lc-fl em{font-style:normal;color:#9DB9F5}
.livec .lc-route{font-size:22px;font-weight:800;letter-spacing:-.5px;text-align:center;
  margin:6px 0 14px}
.livec .lc-k{font-size:10.5px;font-weight:800;letter-spacing:1px;
  color:rgba(255,255,255,.55);text-transform:uppercase}
.livec .lc-t{font-size:18px;font-weight:800;margin-top:4px;letter-spacing:-.3px}
.livec .lc-d{font-size:11px;font-weight:600;color:rgba(255,255,255,.55)}
.livec .lc-c{font-size:11px;font-weight:700;color:rgba(255,255,255,.7);margin-top:2px}
.livec .lc-map{display:block;text-align:center;background:#77A6F7;color:#101736;
  border-radius:13px;padding:12px;font-size:14.5px;font-weight:800;text-decoration:none;
  margin-top:15px}
.livec .lc-foot{font-size:11px;color:rgba(255,255,255,.5);text-align:center;margin-top:9px;
  font-weight:600}
/* What time it is at home now, over the foot, on his own card (§18). */
.livec .lc-home{font-size:12px;font-weight:700;color:rgba(255,255,255,.85);text-align:center;
  margin-top:12px;font-variant-numeric:tabular-nums}
.livec .lc-home + .lc-foot{margin-top:4px}
.band .livec{margin:6px 0 14px}
.statuspills .chip.gold2{display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  padding:6px 12px;font-size:11px;font-weight:800;letter-spacing:.8px;
  background:rgba(110,88,20,.4);color:var(--gold)}
.statuspills .chip.gold2 i{width:6px;height:6px;border-radius:99px;background:currentColor}
.whereL .lab2{font-size:11px;font-weight:800;letter-spacing:1.1px;color:var(--on-band-2)}

.ovh2{font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-3);margin:18px 6px 10px}
.ov2{position:relative;padding-left:22px;margin:0 2px}
.ov2::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;
  background:var(--line)}
.ovnode{position:relative;padding:0 0 14px}
.ovnode:last-child{padding-bottom:2px}
.ovnode::before{content:"";position:absolute;left:-21px;top:9px;width:12px;height:12px;
  border-radius:99px;background:var(--bg);border:2.5px solid var(--ink-3);z-index:1}
.ovnode.rsv::before{border-color:var(--rsv)} .ovnode.air::before{border-color:var(--air)}
.ovnode.gold::before{border-color:var(--gold)}
.ovnode.home::before{border-color:var(--home);background:var(--home)}
.ovnode.dim::before{border-color:var(--line)}
.ovnode.dim{opacity:.75}
.ovnode details,.ovnode .card3{background:var(--surface);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.ovnode .card3{padding:13px 15px}
.ovnode summary{list-style:none;cursor:pointer;padding:13px 15px;position:relative}
.ovnode summary::-webkit-details-marker{display:none}
.ovnode .k3{font-size:10.5px;font-weight:800;letter-spacing:.9px;color:var(--ink-3);
  text-transform:uppercase;display:flex;gap:8px;align-items:center;padding-right:20px}
.ovnode .k3 .in3{margin-left:auto;font-size:13px;font-weight:800;letter-spacing:-.2px;
  color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:999px;padding:5px 12px;white-space:nowrap;text-transform:none}
.ovnode .k3 .in3.hot{background:var(--home-soft);color:var(--home);border-color:transparent}
.ovnode .k3 .in3.amber{background:var(--rsv-soft);color:var(--rsv);border-color:transparent}
.ovnode .v3{font-size:17.5px;font-weight:800;letter-spacing:-.4px;margin-top:6px;color:var(--ink)}
.ovnode .v3 small{font-size:12.5px;font-weight:600;color:var(--ink-3);margin-left:7px}
.ovnode .s3{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.ovnode .chev3{position:absolute;right:14px;top:15px;color:var(--ink-3);font-size:14px;
  transition:transform .15s}
.ovnode details[open] > summary .chev3{transform:rotate(90deg)}
.ovnode .body3{border-top:1px solid var(--line-2);padding:4px 15px 12px}
.ovnode.home .v3{font-size:20px}
.ovleg{display:flex;align-items:baseline;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line-2);font-size:13.5px}
.ovleg:last-child{border-bottom:none}
.ovleg .fl3{flex:0 0 74px;font-weight:800;color:var(--air);font-size:12.5px}
.ovleg .rr3{font-weight:800;color:var(--ink)}
.ovleg .tm3{margin-left:auto;color:var(--ink-2);font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right}
.ovleg{flex-wrap:wrap}
.ovleg .dt3{flex:0 0 100%;padding-left:84px;font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;margin-top:-2px;display:flex;gap:10px}
/* A sit rides on the right of the bottom line of the flight into it. */
.ovleg .dt3 .sit3{margin-left:auto;color:var(--sit);font-weight:700;white-space:nowrap}
.ovleg.done{opacity:.45}
.ovleg.lay,.ovleg.lay .fl3{color:var(--gold)}
.ovleg.lay .rr3{color:var(--gold)}
.ovleg.now .tm3{color:var(--air);font-weight:700}
.ovleg.cmt .fl3{color:var(--home)}
/* A finished layover's "Layover" label dims with its row, in the row's own
   ink, never the flight-number blue of a flown leg (cleanup e). */
.ovleg.layd .fl3{color:inherit}

/* ---- the guided tour, v2: the page dimmed with its lights cut out (one SVG
   mask), and one card docked above the + (ui2.js sets its bottom from the +
   itself; the value here is only the fallback). The dimming is the top layer
   over the page and takes every click, tap and wheel. ---- */
.tourdim{position:fixed;inset:0;z-index:200;pointer-events:auto;touch-action:none;
  cursor:default;animation:tourin .2s ease;transition:opacity .2s ease}
.tourdim svg{display:block;width:100%;height:100%}
.tourcard{position:fixed;z-index:201;left:0;right:0;margin:0 auto;
  width:calc(100% - 32px);max-width:480px;max-height:45vh;
  bottom:calc(96px + env(safe-area-inset-bottom));display:flex;flex-direction:column;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;
  padding:16px 16px 12px;box-shadow:var(--shadow-lift);
  touch-action:none;user-select:none;-webkit-user-select:none;
  animation:tourin .2s ease;transition:opacity .2s ease}
.tourdim.out,.tourcard.out{opacity:0;pointer-events:none}
@keyframes tourin{from{opacity:0}}
.tourwords{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;transition:opacity .15s ease}
.tourhead{display:flex;align-items:baseline;gap:10px}
.tourcard h3{flex:1;margin:0;font-size:17px;font-weight:850;letter-spacing:-.2px;line-height:1.25;
  color:var(--ink);outline:none}
.tourcount{font-size:12px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.tourtext{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--ink-2);
  overflow-y:auto;min-height:0;overscroll-behavior:contain;touch-action:pan-y}
.tourbtns{display:flex;align-items:center;gap:10px;margin-top:14px;flex:0 0 auto}
.tourbtns .btn{flex:1 1 0;min-height:44px}
.tourbtns .btn[data-tour="next"]{flex-grow:1.25}
.tourbtns [hidden]{display:none}
.tourskip{flex:0 0 auto;min-height:44px;min-width:44px;padding:0 14px 0 2px;background:none;border:0;
  font:inherit;font-size:14.5px;font-weight:650;color:var(--ink-2);cursor:pointer}
@media (prefers-reduced-motion: reduce){
  .tourdim,.tourcard{animation:none;transition:none}
  .tourwords{transition:none}
}
.tourlink{background:none;border:0;padding:0;color:var(--ink-2);font:inherit;
  font-size:inherit;text-decoration:underline;cursor:pointer}

/* ==========================================================================
   v2.8 — the trip as one line, and the commute Loop is only guessing at.

   TRIP. A trip used to be scattered bars on the days he happened to fly, so
   a month read as confetti and never as "he is away from the 12th to the
   17th". The trip line is that stretch, drawn once, on a row of its own
   UNDER the four the calendar already had — reserve, standby, flights,
   events keep their pixels to the pixel. It is deliberately the palest thing
   on the cell: it is the ground the flights stand on, not another bar
   competing with them for the eye.

   PLACEHOLDER COMMUTE. Dashed, in commute green, on the flight row where a
   real commute would sit. Dashes are the whole point — the family see these
   too, and a solid green bar would be a promise Loop has no right to make.
   No booked flight exists behind one.
   ========================================================================== */
:root{ --trip:#232451; }
.dark{ --trip:#9DA0E8; }

.sbar.trip{background:var(--trip);height:4px}

/* The dashes are painted, not a border, so they survive the 2px bleed a
   continuing span takes into the cell gap. Rounded ends would fake a start
   the estimate has not earned, so a placeholder stays square at both ends. */
.sbar.est{height:3.5px;border-radius:0;
  background:repeating-linear-gradient(90deg,var(--home) 0 5px,rgba(0,0,0,0) 5px 9px)}

/* His half is his (DJ, 2026-09-24): with his lane on the marks box is 40
   tall, the hairline sits at 24, my same-day event dots stay on my event
   row above it, and everything under it is his, in gold — the trip wash,
   his reserve and standby, his flights and deadheads. */
.marks.wm .evd{bottom:auto;top:17px}
.sbar.wmtrip{background:var(--gold);opacity:.18;height:13px;border-radius:2px}
.sbar.wmtrip.rs,.sbar.wmtrip.re{border-radius:2px}
.sbar.wmrsv,.sbar.wmsby{background:var(--gold);opacity:.8}
.sbar.wmair{background:var(--gold);height:5px}
.sbar.wmdh{background:var(--gold);opacity:.55;height:5px}

/* Legend key for a dashed estimate. */
.callegend i.dashmark{
  background:repeating-linear-gradient(90deg,var(--home) 0 4px,rgba(0,0,0,0) 4px 7px);
  border-radius:0}

/* Day sheet and list view: the same dashed idea, turned on its side. The
   trip rule is here for laneCls's sake — the trip line is a calendar-grid
   thing and deliberately does not add a row to every day sheet of a trip —
   so that if one is ever listed it wears the same color as its bar. */
.tline.est .bar2{border-radius:0;
  background:repeating-linear-gradient(180deg,var(--home) 0 4px,rgba(0,0,0,0) 4px 7px)}
.tline.trip .bar2{background:var(--trip)}

/* A pill that can be asked where its time came from. The dotted underline is
   the only hint it needs: the band is read at a glance and an info icon on
   every caveat would shout. */
.spill.askable { cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.spill.askable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* The sheet itself: one row per tier, the mark and then what it means. */
.ev-row { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--band-line); }
.ev-row:first-of-type { border-top: 0; }
.ev-row p { margin: 0; font-size: 14px; line-height: 1.5; opacity: .88; }
.ev-k { font-size: 12px; font-weight: 600; letter-spacing: .02em; padding-top: 2px; }
.ev-k .dot { margin-right: 5px; }
.ev-rep { color: var(--air); }
.ev-exp { color: var(--air); }
.ev-est { color: var(--gold); }
.ev-sch, .ev-wait { color: var(--neutral); }

/* A live card drawn off the printed schedule, with no wheels-up under it. The
   chip keeps its shape so the card does not jump, and loses its color so it
   cannot be mistaken for the tracked one. */
.chip.inf.sched, .chip.inf2.sched { background: var(--neutral-soft); color: var(--ink-2); }
.chip.inf.sched i, .chip.inf2.sched i { background: var(--ink-3); animation: none; }
/* "LANDED (EST)": Loop's estimate has come and gone with no landing reported
   (docs/flight-tracking.md §7). Not the tracker's word and not the sheet's,
   so neither of their colors, and no pulse: nothing live is being said. */
.chip.inf.est, .chip.inf2.est { background: var(--gold-soft); color: var(--gold); }
.chip.inf.est i, .chip.inf2.est i { background: var(--gold); animation: none; }

/* Apple's "Download on the App Store" badge (DJ, 2026-09-26). Apple's
   artwork, unchanged: 48px tall (40px, Apple's floor, inside a note), a
   quarter of its height clear all round, never recoloured. The black badge
   on the light theme, the white one on the dark; both images are in the
   page and display:none also hides the other one from a screen reader. On
   the band, which is dark in both themes, only the white one is used. */
.asb{display:inline-block;line-height:0;margin-top:12px;border-radius:8px}
.asb img{display:block;height:48px;width:auto}
.asb.sm{margin-top:10px}
.asb.sm img{height:40px}
.asb .asb-wht{display:none}
.dark .asb .asb-blk{display:none}
.dark .asb .asb-wht{display:block}
.asb:focus-visible{outline:2px solid var(--air);outline-offset:4px}
/* The family page's app card, first under the band. */
.appcard .card p{font-size:14px;font-weight:600;line-height:1.45;color:var(--ink)}

/* The crew's family-link panel: what the person at the other end will see.
   .btn.sec also matches .sec's section margin; not here, where it pushed the
   Copy button up and stretched Share beside it. */
.lkbtns .btn{margin:0}
.nexth{font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-3);margin-top:14px}
.nextl{list-style:none;display:grid;gap:6px;margin-top:8px}
.nextl li{position:relative;padding-left:14px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.nextl li::before{content:"";position:absolute;left:2px;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--ink-3)}
/* A family link's name opens its panel again. */
.person button.pt{background:none;border:none;padding:0;margin:0;text-align:left;
  color:inherit;font:inherit;cursor:pointer}