/* bapsavl.app : brand from bapsmandirparis.fr, dark ground with indigo accent
   Fonts and colour values are the site's own; the ground is darkened for on-site use. */

@font-face{font-family:"Kalista Serif";src:url(/static/fonts/KalistaSerif-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Kalista Serif";src:url(/static/fonts/KalistaSerif-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Avenir Book";src:url(/static/fonts/Avenir-Book.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Avenir Book";src:url(/static/fonts/Avenir-Heavy.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* Dark ground, indigo as the accent rather than the field.
     Their tokens: --dark-blue #1e3666 · --cream #fff6e9 · --gold #937853 · --red #ff3c4e
     The ground is a near-black biased toward the indigo (not neutral grey), so
     the accent reads as chosen rather than dropped on top. */
  --ground:#0C1119;               /* near-black, blue-biased */
  --surface:#141C2B;              /* cards and rows */
  --surface-2:#101724;            /* recessed */
  --raise:#1B263B;                /* pressed */
  --indigo:#1E3666;               /* their exact value : accent fills, active states */
  --indigo-lift:#5B87C9;          /* #1E3666 is unreadable on near-black; lift for text */
  --line:rgba(255,246,233,.15);
  --line-soft:rgba(255,246,233,.08);
  --ink:#FFF6E9;
  --ink-2:rgba(255,246,233,.72);
  --ink-3:rgba(255,246,233,.56);   /* .48 measured 4.39:1 on a lifted row, just under AA */
  --gold:#C9A87C;
  --gold-deep:#937853;            /* their exact value */
  --brown:#5F4E39;
  --live:#7FCBA4;
  --alert:#FF6070;                /* their --red #ff3c4e, lifted for contrast on dark */
  --warn:#E8B45C;
  --serif:"Kalista Serif",ui-serif,Georgia,serif;
  --sans:"Avenir Book",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --wrap:min(60rem,100% - 2rem);
  --gutter:1rem;          /* half of what --wrap subtracts; the tab strip bleeds by it */
  --tap:44px;
  /* The built-in keywords are too weak to read as deliberate. These are the
     stronger variants: ease-out for anything entering or responding to a
     press, ease-in-out for something moving across the screen. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  color-scheme:dark;
  accent-color:var(--gold);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* iOS paints a grey flash of its own over every tap, which fights the
     press states below. */
  -webkit-tap-highlight-color:transparent;
}
.wrap{width:var(--wrap);margin-inline:auto}
a{color:var(--gold);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible,label:focus-within{
  outline:2px solid var(--gold);outline-offset:2px;
  /* A pressed neighbour scales; the ring has to stay on top of it. */
  position:relative;z-index:1}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;text-wrap:balance;
  overflow-wrap:anywhere}
/* Kalista's caps reach 1.14em and descenders -0.44em, so leading must be
   generous or lines collide. 1.30 still overlaps; 1.45 is the safe floor. */
/* Tracking scales with size: letters read too far apart as type grows, so
   display sizes tighten and body stays near zero. */
h1{font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.45;letter-spacing:-.017em}
h2{font-size:clamp(1.25rem,4vw,1.6rem);line-height:1.35;letter-spacing:-.011em}
h3{font-size:1.0625rem;line-height:1.35;letter-spacing:-.005em}

/* ------------------------------------------------------------- chrome --- */
header.bar{background:var(--surface);border-bottom:1px solid var(--indigo);box-shadow:inset 0 -3px 0 var(--indigo-lift);position:sticky;top:0;z-index:20}
header.bar .wrap{display:flex;align-items:center;gap:.75rem;min-height:56px;padding:.4rem 0;
  flex-wrap:wrap}
/* The 2026 lockup is a tall vertical mark (125x139), so squeezing it into a
   56px bar makes it unreadable. Use the mandir icon beside a wordmark instead. */
.mark{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);
  min-width:0;flex-shrink:1}
.mark img{height:28px;width:auto;display:block}
.mark span{font-family:var(--serif);font-size:1.05rem;letter-spacing:.01em;
  line-height:1.45;min-width:0;white-space:nowrap}
.mark b{font-weight:400;color:var(--gold)}
header.bar .sp{flex:1}
.who{font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);text-align:right;line-height:1.35;text-decoration:none;
  display:flex;flex-direction:column;justify-content:center;min-height:var(--tap);padding-left:.5rem;
  /* Must be free to shrink and wrap. Held at nowrap it pushed the whole page
     sideways once the reader's text size went up. */
  min-width:0;overflow-wrap:anywhere}
.who b{display:block;color:var(--gold);font-weight:400;letter-spacing:.04em}


/* clear the fixed tab bar plus the home indicator */
main{padding:1.25rem 0 calc(72px + env(safe-area-inset-bottom))}

/* Clipped rather than parked at -9999px: an off-screen absolute element
   expands the scrollable area leftward, which showed up as a horizontal
   scrollbar once a reader raised their text size. */
.skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;background:var(--gold);color:#16294F;z-index:100}
.skip:focus{position:fixed;left:.5rem;top:.5rem;width:auto;height:auto;margin:0;
  padding:.6rem 1rem;overflow:visible;clip-path:none}

/* -------------------------------------------------------------- tabbar --- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;background:var(--surface-2);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;padding:.45rem .15rem;text-decoration:none;color:var(--ink-3);
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.05em;text-transform:uppercase;
  border-top:2px solid transparent;
}
.tabbar a[aria-current]{color:var(--gold);border-top-color:var(--gold);background:rgba(30,54,102,.4)}
.tabbar svg{display:block}

.back{display:flex;align-items:center;gap:.35rem;text-decoration:none;color:var(--ink);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  min-height:var(--tap);padding-right:.5rem}

/* ------------------------------------------------------------ schedule --- */
.filterbar{display:flex;flex-direction:column;gap:.5rem;padding:.85rem;margin-bottom:1.1rem;
  background:var(--surface);border:1px solid var(--line)}
.filterbar input[type=search]{width:100%}
.filterrow{display:flex;gap:.5rem}
.filterrow select{flex:1;min-width:0}
.filteract{display:flex;gap:.5rem}
.filteract button,.filteract .btn{flex:1}
.resultline{margin:0 0 .9rem}

.day{margin-bottom:1.35rem}
/* Sticky day headers keep the date on screen while a long day scrolls past.
   Offset by the header height so they do not hide under it. */
.dayhead{position:sticky;top:57px;z-index:10;display:flex;align-items:baseline;gap:.5rem;
  padding:.45rem .6rem;margin:0 0 .4rem;background:var(--surface-2);
  border:1px solid var(--line);font-family:var(--sans);font-size:1.0625rem;
  letter-spacing:.01em;color:var(--ink-2)}
.dayhead.is-today{border-color:var(--gold-deep);background:var(--indigo);color:var(--ink)}
.dayhead.is-today .count{color:var(--gold)}
.dayhead .count{margin-left:auto;color:var(--ink-3);font-family:var(--mono);font-size:.75rem}

.evs{border:1px solid var(--line);background:var(--surface)}
.today-evs{margin-bottom:1.5rem}
/* The time column is sized in rem, so it grows with the reader's text size.
   Left unwrapped it starved the title to a few characters at 150%. The row
   now wraps and the title takes the full width instead. */
.ev{display:flex;flex-wrap:wrap;gap:.75rem;padding:.7rem .85rem;
  border-bottom:1px solid var(--line-soft);align-items:flex-start}
.ev:last-child{border-bottom:0}
.ev-time{flex:none;width:4.2rem;font-family:var(--mono);font-size:.75rem;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1.45;padding-top:.1rem}
.ev-body{flex:1 1 58%;min-width:0}
.ev-body b{display:block;font-weight:400;line-height:1.35;overflow-wrap:anywhere}
.ev-meta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.2rem;
  font-family:var(--mono);font-size:.6875rem;color:var(--ink-3)}
.ev-nth{color:var(--indigo-lift)}

.more{border-top:1px solid var(--line-soft)}
.more summary{padding:.65rem .85rem;cursor:pointer;min-height:var(--tap);display:flex;align-items:center;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.more summary::marker{color:var(--gold)}
.more .ev{border-top:1px solid var(--line-soft);border-bottom:0}

.standing{border:1px solid var(--line);background:var(--surface-2);margin:1.75rem 0 0}
.standing summary{padding:.8rem .9rem;cursor:pointer;font-size:.9375rem;min-height:var(--tap);
  display:flex;align-items:center}
.standing summary::marker{color:var(--gold)}
.standing .evs{border:0;border-top:1px solid var(--line)}
.standing .ev-time{width:4.6rem;color:var(--ink-3)}

/* ---------------------------------------------------------------- hero --- */
.hero{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.15rem;margin-bottom:1.1rem;
  background:linear-gradient(135deg,var(--indigo),var(--surface));border:1px solid var(--indigo-lift)}
.hero-n{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.hero-l{font-size:.9375rem;color:var(--ink-2);line-height:1.4}
.hero-l b{color:var(--ink);font-weight:400}
.hero.live .hero-n{font-size:2rem;color:var(--live)}

/* -------------------------------------------------------------- alerts --- */
.alerts{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}
.alert{display:block;text-decoration:none;color:inherit;padding:.8rem .95rem;
  background:var(--surface);border:1px solid var(--line)}
.alert.critical{border-color:var(--alert);background:color-mix(in oklch,var(--alert) 9%,var(--surface))}
.alert.critical b{color:var(--alert)}
.alert.warn{border-color:var(--warn);background:color-mix(in oklch,var(--warn) 8%,var(--surface))}
.alert.warn b{color:var(--warn)}
.alert b{display:block;font-weight:400;font-size:.9375rem}
.alert span{display:block;color:var(--ink-3);font-size:.8125rem;margin-top:.15rem}
.alert:active{background:var(--raise)}

/* --------------------------------------------------------------- tiles --- */
h2.quiet{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border:0;padding:0;margin:0 0 .6rem}
.tiles{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.tile{display:flex;align-items:center;gap:.75rem;padding:1rem;min-height:66px;
  background:var(--surface);text-decoration:none;color:inherit}
.tile:active{background:var(--indigo)}
.tile-x{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.tile-t{font-family:var(--serif);font-size:1.2rem;line-height:1.25}
.tile-s{color:var(--ink-3);font-family:var(--mono);font-size:.75rem}
.tile-c{color:var(--gold);flex:none}
.foot-note{margin-top:1.5rem}
.spaced{margin-top:1.75rem}
h2{padding-bottom:.4rem;margin-bottom:.9rem;border-bottom:2px solid var(--indigo-lift);
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.h2-sub{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--ink-3);
  text-transform:none}
/* Kalista's ascenders are tall, so a following sub-heading needs real clearance
   or it rides up into the rule above it. */
.daygroup{margin:1.35rem 0 .5rem;font-size:1.0625rem}
.daygroup:first-of-type{margin-top:.25rem}
.note{font-size:.875rem}
.filters{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1rem}
.pill.filter{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.inline-edit{margin-top:.55rem;display:flex;gap:.4rem;flex-wrap:wrap}
.inline-edit select{width:auto;flex:1;min-width:9rem}
.search{display:flex;gap:.5rem;margin-bottom:1.25rem}
.eyebrow{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .5rem}
.lede{color:var(--ink-2);margin:.35rem 0 1.25rem;max-width:60ch}
.muted{color:var(--ink-3)}
.stack{display:flex;flex-direction:column;gap:.6rem}

/* -------------------------------------------------------------- cards --- */
.card{background:var(--surface);border:1px solid var(--line);padding:.9rem 1rem;display:block;text-decoration:none;color:inherit}
a.card:active{background:var(--indigo)}
.card-h{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.card-h h3{flex:1;min-width:0}
.card-sub{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);margin-top:.25rem;display:flex;gap:.75rem;flex-wrap:wrap}

/* --------------------------------------------------------------- pills --- */
.pill{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.18rem .45rem;border:1px solid currentColor;white-space:nowrap;line-height:1.4}
.pill.ok{color:var(--live)} .pill.warn{color:var(--warn)} .pill.bad{color:var(--alert)}
.pill.idle{color:var(--ink-3)} .pill.on{color:var(--indigo-lift);background:rgba(30,54,102,.55);border-color:var(--indigo-lift)}
.pill.solid{background:var(--gold);border-color:var(--gold);color:#16294F}

.count{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- rows --- */
.rows{border:1px solid var(--line);background:var(--surface)}
.row{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem .9rem;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit}
.row:last-child{border-bottom:0}
a.row:active{background:var(--indigo)}
.row-main{flex:1;min-width:0}
.row-main b{font-weight:400;display:block}
.row-meta{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);margin-top:.2rem;display:flex;gap:.7rem;flex-wrap:wrap}
.row-right{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;flex:none}

/* --------------------------------------------------------------- flags --- */
.flag{border:1px solid var(--alert);background:color-mix(in oklch,var(--alert) 9%,var(--surface));padding:.85rem 1rem;margin-bottom:1rem}
.flag h3{color:var(--alert);font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}
.flag p{margin:0;font-size:.9375rem;color:var(--ink-2)}

/* --------------------------------------------------------------- forms --- */
label{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=time],input[type=datetime-local],input[type=search],input[type=tel],
input[type=number],select,textarea{
  width:100%;font:inherit;font-size:16px;                 /* 16px stops iOS zoom-on-focus */
  padding:.6rem .7rem;min-height:var(--tap);
  background:var(--ground);color:var(--ink);border:1px solid var(--line);border-radius:0}
textarea{min-height:5rem;resize:vertical}
/* Safari and Chrome give date and time inputs an intrinsic height that ignores
   min-height, so set the box explicitly. */
input[type=time],input[type=date],input[type=datetime-local]{height:var(--tap);align-items:center}
input::placeholder{color:var(--ink-3);opacity:1}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
  linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem}
.field{margin-bottom:.9rem}
button,.btn{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  min-height:var(--tap);padding:.6rem 1.1rem;cursor:pointer;
  background:var(--gold);color:#16294F;border:1px solid var(--gold);border-radius:0;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none}
button:active,.btn:active{background:var(--gold-deep)}
button.ghost,.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
button[disabled]{opacity:.45;cursor:not-allowed}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}

.err{border:1px solid var(--alert);background:color-mix(in oklch,var(--alert) 10%,var(--surface));color:var(--alert);padding:.7rem .9rem;margin-bottom:1rem;font-size:.9375rem}
.ok-msg{border:1px solid var(--live);background:color-mix(in oklch,var(--live) 9%,var(--surface));color:var(--live);padding:.7rem .9rem;margin-bottom:1rem;font-size:.9375rem}

/* ---------------------------------------------------------------- gate --- */
.gate{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:radial-gradient(125% 95% at 50% 0%,rgba(30,54,102,.85),transparent 68%),var(--ground)}
.gate-box{width:min(24rem,100%);text-align:center}
.gate-box img{width:130px;height:auto;margin:0 auto 1.5rem;display:block}
.gate-box form{text-align:left;margin-top:1.5rem}
.gate-box .divider{width:150px;margin:1.5rem auto 0;opacity:.5}

/* -------------------------------------------------------------- footer --- */
footer{border-top:1px solid var(--line);margin-top:2.5rem;padding:1.25rem 0 2.5rem;
  font-family:var(--mono);font-size:.6875rem;color:var(--ink-3);letter-spacing:.04em}
footer .wrap{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.stale{color:var(--warn)}

/* --------------------------------------------------------------- print --- */
@media print{
  header.bar,nav.tabs,footer,.actions,button,.btn{display:none!important}
  body{background:transparent;color:#111;font-size:11pt}
  .pill{color:#111!important;border-color:#767676!important}
  .card,.rows,.row{border-color:#999;background:transparent}
  @page{size:A4;margin:14mm}
  .row{break-inside:avoid}
}
/* Reduced motion means fewer and gentler, not none: colour and background
   still transition because they aid comprehension. Only movement goes. */
@media (prefers-reduced-motion:reduce){
  *{transition-property:background-color,border-color,color,opacity!important;
    transition-duration:.12s!important}
  *:active{transform:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.01ms!important}
}

/* ============================================================ polish === */

/* Cross-document view transitions: a real crossfade between pages with no JS
   and no framework. Browsers without support just navigate as before. */
@view-transition { navigation: auto; }
::view-transition-old(root){animation:fade .14s var(--ease-out) both}
/* Was ease-in, which delays movement at the moment the reader is watching
   most closely and makes the whole navigation feel slower than it is. */
::view-transition-new(root){animation:fade .18s var(--ease-out) both reverse}
@keyframes fade{from{opacity:1}to{opacity:0}}

/* Press feedback. Touch has no hover, so :active carries the whole signal. */
a.row,a.card,a.ev,a.tile,.alert,.grow,.viewtoggle a,.tabbar a,button,.btn,
.ttab,.rolepick,.tgroup-add,.rgroup-set>summary,.tgroup-head{
  transition:background-color .14s var(--ease-out),border-color .14s var(--ease-out),
             color .14s var(--ease-out),filter .14s var(--ease-out),
             transform .12s var(--ease-out)}
a.row:active,a.card:active,a.ev:active,a.tile:active,.alert:active,a.grow:active{
  background:var(--indigo)}
/* Every pressable surface confirms it heard the tap, not just the elements
   that happen to be buttons. Rows are large, so they need less scale than a
   button to read as pressed. */
a.row:active,a.card:active,a.ev:active,a.tile:active,.alert:active,a.grow:active,
.rolepick:active,.tgroup-add:active,.ttab:active,.tgroup-head:active{
  transform:scale(.99)}
button:active,.btn:active{transform:scale(.97)}

/* Hover only where a real pointer exists, so touch devices never get stuck
   in a hovered state after a tap. */
@media (hover:hover) and (pointer:fine){
  a.row:hover,a.card:hover,a.ev:hover,a.tile:hover,.alert:hover,a.grow:hover{
    background:var(--raise)}
  .tile:hover .tile-c{transform:translateX(3px)}
  .viewtoggle a:hover{color:var(--ink);border-color:var(--ink-3)}
  .tabbar a:hover{color:var(--ink-2)}
  button:hover,.btn:hover{filter:brightness(1.08)}
}
.tile-c{transition:transform .16s ease-out}
.chev{color:var(--ink-3);flex:none;align-self:center}

/* Rows that contain their own controls cannot be an <a>, so the title is. */
.rowlink{color:inherit;text-decoration:none;display:block}
@media (hover:hover){.rowlink:hover{color:var(--gold)}}

.pillrow{display:flex;gap:.35rem;flex-wrap:wrap;margin:.5rem 0 1rem}

/* Definition list used by every detail screen. */
.deflist{margin:0 0 1.5rem;border:1px solid var(--line);background:var(--surface)}
.deflist>div{display:flex;gap:1rem;padding:.65rem .9rem;border-bottom:1px solid var(--line-soft)}
.deflist>div:last-child{border-bottom:0}
.deflist dt{flex:none;width:7.5rem;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:.15rem}
.deflist dd{margin:0;flex:1;min-width:0;overflow-wrap:anywhere}

.editform{border:1px solid var(--line);background:var(--surface);padding:1rem;margin-bottom:1.5rem}
.editform .actions{margin-top:.5rem}

.hist{list-style:none;margin:0 0 1.5rem;padding:0;border:1px solid var(--line);background:var(--surface)}
.hist li{padding:.6rem .9rem;border-bottom:1px solid var(--line-soft);font-size:.875rem}
.hist li:last-child{border-bottom:0}
.hist b{font-weight:400;color:var(--gold)}
.histd{display:block;font-family:var(--mono);font-size:.6875rem;color:var(--ink-3);margin-top:.15rem}

/* Collapsible filter block, so search never eats the top of the screen. */
.filters-d{border:1px solid var(--line);background:var(--surface);margin-bottom:1.25rem}
.filters-d>summary{padding:.75rem .9rem;cursor:pointer;min-height:var(--tap);
  display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.filters-d>summary::marker{color:var(--gold)}
.filters-d[open]>summary{border-bottom:1px solid var(--line)}
.filterbar{display:flex;flex-direction:column;gap:.75rem;padding:.9rem;border:0;background:none;margin:0}
.filterrow{display:flex;gap:.6rem}
.filterrow .field{flex:1;min-width:0;margin:0}
.filteract{display:flex;gap:.5rem}
.filteract button,.filteract .btn{flex:1}

/* -------------------------------------------------------- wider screens --- */
@media (min-width:48rem){
  :root{--wrap:min(64rem,100% - 3rem);--gutter:1.5rem}
  main{padding:2rem 0 3rem}
  /* Tab bar becomes a top row on desktop: no thumb to reach with. */
  .tabbar{position:static;border-top:0;border-bottom:1px solid var(--line);
    justify-content:flex-start;background:var(--surface-2)}
  .tabbar a{flex:0 0 auto;flex-direction:row;gap:.5rem;padding:.7rem 1.1rem;
    font-size:.6875rem;border-top:0;border-bottom:2px solid transparent}
  .tabbar a[aria-current]{border-bottom-color:var(--gold);border-top-color:transparent}
  body{display:flex;flex-direction:column;min-height:100vh}
  header.bar{order:0} .tabbar{order:1} main{order:2;flex:1} footer{order:3}
  .tiles{flex-direction:row;flex-wrap:wrap}
  .tile{flex:1 1 15rem}
  .deflist>div{padding:.75rem 1.1rem}
  .hero{padding:1.4rem 1.6rem}
}
@media (min-width:64rem){
  .alerts{flex-direction:row}
  .alerts .alert{flex:1}
}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *{transition:none!important;animation:none!important}
}

/* Event rows are links, so they must not inherit the default link colour or
   underline the way body copy links do. */
a.ev{text-decoration:none;color:inherit}
a.ev b{color:var(--ink)}
@media (hover:hover) and (pointer:fine){a.ev:hover b{color:var(--gold)}}
.ev-time{text-decoration:none}

/* ================================ audit fixes ================================
   Touch targets below 44px found on: the header wordmark, the task status
   filter pills, and task title links inside rows. */
.mark{min-height:var(--tap)}
.pill.filter{min-height:var(--tap);padding-inline:.7rem}
.rowlink{min-height:var(--tap);display:flex;align-items:center}
.filters-d>summary,.more summary,.standing summary{min-height:var(--tap)}

/* .flag headings are h2 for document order but must not inherit the section
   rule and serif sizing that h2 normally carries. */
.flag-h{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--alert);margin:0 0 .4rem;padding:0;border:0;line-height:1.4}

/* The hero carries the page h1 on the hub, so it must not pick up the global
   h1 sizing that would blow the layout apart. */
.hero .hero-l{font-family:var(--sans);font-size:.9375rem;font-weight:400;
  line-height:1.4;color:var(--ink-2);margin:0}
.foot-note{margin-top:1.75rem;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.foot-note p{margin:0}

/* Status as shape, not only colour or a word. Colour is never the sole carrier
   of meaning: empty ring, filled half, tick. */
.sicon{flex:none;align-self:flex-start;margin-top:.15rem}
.sicon.ok{color:var(--live)}
.sicon.on{color:var(--indigo-lift)}
.sicon.idle{color:var(--ink-3)}

/* ================================== admin ================================== */
.statebox{border:1px solid var(--line);background:var(--surface);padding:1rem 1.1rem;margin-bottom:1.5rem}
.statebox.on{border-color:var(--live);background:color-mix(in oklch,var(--live) 8%,var(--surface))}
.statebox.off{border-color:var(--warn);background:color-mix(in oklch,var(--warn) 8%,var(--surface))}
.statebox b{display:block;font-weight:400;font-size:1.0625rem;margin-bottom:.35rem}
.statebox.on b{color:var(--live)} .statebox.off b{color:var(--warn)}
.statebox p{margin:0 0 .5rem;font-size:.9375rem;color:var(--ink-2)}
.statebox p:last-child{margin-bottom:0}

.urows{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.urow{background:var(--surface);padding:.9rem 1rem}
.urow.inactive{opacity:.55}
.urow-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.25rem}
.urow-head b{font-weight:400;font-size:1.0625rem}
.urow-meta{display:flex;gap:.75rem;flex-wrap:wrap;font-family:var(--mono);font-size:.6875rem;
  color:var(--ink-3);margin-bottom:.5rem}
.urow .chips{margin-bottom:.25rem}
.urow-act>summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.urow-act>summary::marker{color:var(--gold)}

.adminform{padding:.75rem 0 .25rem}
.boxed{border:1px solid var(--line);background:var(--surface);padding:1rem}
.adminform .field{margin-bottom:.75rem}

/* Settings: one column on a phone, two once there is room. Long values
   (addresses, water points, the quote) take the full width in both. */
.fieldgrid{display:grid;gap:.25rem .9rem}
.fieldgrid .field:last-child{margin-bottom:0}
.fieldgrid textarea{width:100%;min-height:var(--tap)}
@media (min-width:40rem){
  .fieldgrid{grid-template-columns:1fr 1fr}
  .fieldgrid .field.wide{grid-column:1 / -1}
}

.auditlist{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.aud{background:var(--surface);padding:.85rem 1rem}
.aud-ent a{display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 .2rem;font-family:var(--mono);font-size:.75rem}
.aud-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.aud-head b{font-weight:400;color:var(--gold)}
.aud-ent{font-family:var(--mono);font-size:.6875rem;color:var(--ink-3);margin-top:.2rem}
.diff{margin-top:.5rem;display:flex;flex-direction:column;gap:.25rem}
.diff>div{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;font-size:.875rem}
.dk{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);min-width:5rem}
.dwas{color:var(--ink-3);text-decoration:line-through}
.darr{color:var(--ink-3);font-family:var(--mono);font-size:.6875rem}
.dnow{color:var(--ink)}
.revertform{margin-top:.6rem}
.whowrap{display:flex;gap:.9rem;align-items:center}
.who.admin b{color:var(--live)}

/* ============================== call sheets ============================== */
.rrows{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.rrow{background:var(--surface);padding:.85rem 1rem}
.rrow.has-clash{background:color-mix(in oklch,var(--alert) 9%,var(--surface))}
.rrow-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.rrow-head b{font-weight:400;font-size:1.0625rem;flex:1;min-width:0}
.rrow-meta{display:flex;gap:.7rem;flex-wrap:wrap;font-family:var(--mono);font-size:.6875rem;
  color:var(--ink-3);margin-top:.2rem}
.calltime{color:var(--ink-2)}
.rrow-who{margin-top:.35rem;color:var(--ink)}
.rrow-note{margin-top:.3rem;font-size:.875rem;color:var(--ink-2)}
.clash{margin-top:.4rem;font-size:.8125rem;color:var(--alert)}
.rrow-act>summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer;margin-top:.3rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.rrow-act>summary::marker{color:var(--gold)}
.lockform{margin-top:1.5rem;padding:1rem;border:1px solid var(--line);background:var(--surface)}
.lockform p{margin:.6rem 0 0}

/* Printed call sheet: ink on paper, no chrome, one department per page. */
@media print{
  .rrow-act,.lockform,.viewtoggle,.pillrow,.statebox,.ok-msg{display:none!important}
  .rrows{border-color:#999}
  .rrow{padding:6pt 0;border-bottom:.5pt solid #bbb;break-inside:avoid}
  .rrow.has-clash{background:transparent}
  .clash{color:#000;font-weight:700}
  .rrow-meta,.rrow-who{color:#000}
  .deflist{border-color:#999}
  h1{font-size:18pt}
}

/* ------------------------------------------------------- roster groups --- */
/* The call sheet editor groups by department so a lead can set one time
   across a whole group, then adjust the people who differ. */
.rgroup{margin-bottom:1.6rem}
.rgroup-head{display:flex;align-items:baseline;gap:.6rem;
  padding-bottom:.4rem;border-bottom:1px solid var(--ink);margin-bottom:.5rem}
.rgroup-head h2{margin:0;flex:1;min-width:0;font-size:1.0625rem;line-height:1.45;
  overflow-wrap:anywhere}
.rgroup-state{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);text-align:right}
.rgroup-state.mixed{color:var(--gold)}
.rgroup-n{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums}

.rgroup-set{margin-bottom:.6rem;border:1px solid var(--line);background:var(--surface-2)}
.rgroup-set>summary{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);padding:0 .9rem;cursor:pointer;
  min-height:var(--tap);display:flex;align-items:center}
.rgroup-set[open]>summary{border-bottom:1px solid var(--line)}
.rgroup-set .adminform{padding:.75rem .9rem .9rem}
.field.alignend{display:flex;flex-direction:column;justify-content:flex-end}
.field.alignend button{width:100%}

/* An exception is the thing worth a second glance. A time that matches the
   group is just the group repeated, so it stays quiet. Marked by weight and a
   word as well as colour, never colour alone. */
.calltime.exception{color:var(--gold);font-weight:700}
.calltime.exception::after{content:" \00b7 not the group call";font-weight:400;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em}
.calltime.none{color:var(--ink-3);font-style:italic}

/* ---------------------------------------------------------------- food --- */
.meals{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:1.5rem}
.meal{background:var(--surface);padding:.9rem 1rem}
.meal-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.meal-head b{font-size:1.0625rem;font-weight:400;font-family:var(--serif);line-height:1.45}
.meal-t{flex:none;font-family:var(--mono);font-size:.875rem;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--gold);white-space:nowrap}
.meal-w{margin:.15rem 0 0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.meal-i{margin:.5rem 0 0;color:var(--ink-2);line-height:1.5}
.meal-n{margin:.4rem 0 0;font-size:.875rem;color:var(--ink-3)}

/* --------------------------------------------------------- task groups --- */
/* Tasks are grouped by rig team, a lead's own teams first. A flat list of
   everything on site is a report; the person holding the phone wants their
   own four rows. */
.tgroup{margin-bottom:1.75rem}
/* The whole header is the toggle, so it has to clear the tap floor on its own. */
.tgroup-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  min-height:var(--tap);padding:.35rem 0 .4rem;cursor:pointer;
  border-bottom:1px solid var(--ink);margin-bottom:.6rem;list-style:none}
.tgroup-head::-webkit-details-marker{display:none}
/* A caret that turns, so a folded group reads as folded and not as empty. */
.tgroup-head::before{content:"";flex:none;width:0;height:0;
  border-left:5px solid var(--gold);border-top:4px solid transparent;
  border-bottom:4px solid transparent;margin-right:.1rem;
  transition:transform .15s ease-out;transform-origin:25% 50%}
.tgroup[open]>.tgroup-head::before{transform:rotate(90deg)}
.tgroup-name{flex:1;min-width:0;font-family:var(--serif);font-size:1.0625rem;line-height:1.45;
  overflow-wrap:anywhere}
.tgroup:not([open])>.tgroup-head{border-bottom-color:var(--line);margin-bottom:.35rem}
@media (prefers-reduced-motion:reduce){.tgroup-head::before{transition:none}}
.tgroup-n{flex:none;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.tgroup-add{display:flex;align-items:center;gap:.5rem;min-height:var(--tap);
  padding:0 .9rem;margin-bottom:.6rem;border:1px dashed var(--line);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;background:var(--surface-2)}
.tgroup-add::before{content:"+";font-size:1rem;line-height:1}
.tgroup-add:active{background:var(--raise)}

/* ------------------------------------------------- picking roster roles --- */
.rolegroup{margin-bottom:1.25rem}
.rolelist{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.rolepick{display:flex;align-items:center;gap:.75rem;min-height:var(--tap);
  padding:.5rem .9rem;background:var(--surface);cursor:pointer}
.rolepick:active{background:var(--raise)}
.rolepick input{flex:none;width:20px;height:20px;accent-color:var(--gold)}
.rolepick-t{min-width:0;line-height:1.35}
.rolepick-s{display:block;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.05em;color:var(--ink-3)}
/* Long lists: the submit stays reachable without scrolling back up. */
.actions.stick{position:sticky;bottom:calc(var(--tap) + 1rem);z-index:5;
  padding:.75rem;background:var(--ground);border:1px solid var(--line)}
.checkfield{display:flex;align-items:center;gap:.75rem;min-height:var(--tap);
  border:1px solid var(--line);background:var(--surface-2);padding:0 .9rem}
.checkfield input{width:22px;height:22px;accent-color:var(--gold);flex:none}
/* The row IS the label, so the whole 44px strip toggles rather than the 22px
   box inside it. */
label.checkfield{cursor:pointer}
.checkfield span{flex:1;min-width:0;font-size:1rem;color:var(--ink)}

/* ----------------------------------------------------------- team tabs --- */
/* Tabs, not folds: one tap to a team beats scrolling past seven closed
   sections. Links rather than buttons, because the page ships no JavaScript
   and a tab has to survive a reload and a shared URL. */
.ttabs{display:flex;gap:.4rem;overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:0 calc(-1 * var(--gutter)) .9rem;padding:0 var(--gutter) .5rem;
  scroll-snap-type:x proximity}
.ttabs::-webkit-scrollbar{display:none}
.ttab{flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:.45rem;
  min-height:var(--tap);padding:0 .85rem;text-decoration:none;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap}
/* A lead's own team is marked before it is selected, so the strip reads at a
   glance even when it is scrolled. */
.ttab.mine{border-color:var(--gold-deep)}
.ttab.on{background:var(--gold);border-color:var(--gold);color:#16294F;font-weight:700}
.ttab:active{background:var(--raise)}
.ttab.on:active{background:var(--gold-deep)}
.ttab-c{font-variant-numeric:tabular-nums;opacity:.7}
.ttab.on .ttab-c{opacity:.85}

.tgroup-head.plain{cursor:default;list-style:none}

/* One row, scrolled sideways, matching the team strip above it. Two wrapped
   rows of pills pushed the first task most of a screen down. */
.filters.scrollrow{display:flex;flex-wrap:nowrap;gap:.4rem;overflow-x:auto;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:0 calc(-1 * var(--gutter)) 1rem;padding:0 var(--gutter) .35rem}
.filters.scrollrow::-webkit-scrollbar{display:none}
.filters.scrollrow .pill{flex:none;white-space:nowrap}
/* The fragment scrolls the tab into view on both axes. Vertically that puts it
   under the sticky header, which is 58px, so it lands hidden behind the bar.
   The margin clears the header and leaves the heading just above it. */
.ttab{scroll-margin-inline:var(--gutter);scroll-margin-top:calc(58px + 3.5rem)}

/* ------------------------------------------------------- pick a team --- */
/* Nothing is selected until someone picks, so this is the resting state of
   the page rather than an edge case. It asks the question and gets out of
   the way. */
.pickteam{border:1px dashed var(--line);background:var(--surface-2);
  padding:1.6rem 1.25rem;text-align:center}
.pickteam-q{margin:0;font-family:var(--serif);font-size:1.35rem;line-height:1.45;
  color:var(--ink)}
.pickteam-s{margin:.35rem 0 0;font-size:.9375rem;line-height:1.5;color:var(--ink-3)}
.pickteam-mine{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  align-items:center;margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px solid var(--line)}
.pickteam-lab{order:-1;width:100%;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ------------------------------------------------------ your next call --- */
/* The one fact 166 people open this app for. Set larger than anything else
   on the page by a wide margin: it has to be readable at arm's length, in
   daylight, by someone who has just got off a coach. */
.me-name{margin-bottom:.15rem}
.nextcall{border:1px solid var(--line);background:var(--surface);
  padding:1.25rem 1.1rem 1.1rem;margin:1.25rem 0 1.75rem}
.nc-lbl{margin:0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.nc-time{margin:.2rem 0 0;font-family:var(--mono);font-weight:700;
  font-size:clamp(3.5rem,19vw,5.5rem);line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.nc-when{margin:.35rem 0 0;font-family:var(--serif);font-size:1.25rem;line-height:1.45;
  color:var(--ink)}
.nc-what{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:1rem 0 0;
  padding-top:.9rem;border-top:1px solid var(--line-soft);font-size:.9375rem}
.nc-what dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);padding-top:.2rem}
.nc-what dd{margin:0;color:var(--ink);line-height:1.4}
.nc-away{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:.9rem 0 0;padding-top:.75rem;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold)}
.nc-sun{color:var(--ink-3)}
.nextcall.none .nc-when{color:var(--ink-2);font-size:1.1rem;margin-top:.5rem}
.nc-what-none{margin:.5rem 0 0;color:var(--ink-3);font-size:.9375rem;line-height:1.5}

.nc-row-t{display:block;font-weight:700;color:var(--ink)}
.row-right .mono{font-variant-numeric:tabular-nums}
.me-utils{margin-top:2rem}
.me-utils .btn{flex:1}
.me-forget{margin-top:1.25rem}
/* A quiet exit, not a button competing with the real actions. */
.linkish{background:none;border:0;padding:0;min-height:var(--tap);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkish:active{color:var(--ink-2);background:none}
.row-c{flex:none;color:var(--gold);align-self:center}

/* Clearing the team goes back to the question. Without it a chosen tab is a
   dead end: the strip can swap teams but never leave. */
.ttab.clear{padding:0 .9rem;color:var(--ink-3)}
.ttab.clear .ttab-n{font-size:1.1rem;line-height:1}

/* Two preferences beyond reduced motion. Neither was handled. */
@media (prefers-reduced-transparency:reduce){
  /* Every translucent value resolves to a solid one. */
  :root{--line:#373D48;--line-soft:#242B38;--ink-2:#BDB9B4;--ink-3:#8A867F}
}
@media (prefers-contrast:more){
  :root{--ink-2:#FFF6E9;--ink-3:#D8D2C7;--line:#6E7684;--line-soft:#4A515D;
        --gold:#E4C79B}
  a.row,a.card,a.tile,.alert,.meal,.aud,.urow{border:1px solid var(--line)}
  .pill{border-width:2px}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline-width:3px}
}