/* 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,.48);
  --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);
  --tap:44px;
  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;
}
.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{
  outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;text-wrap:balance}
/* 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. */
h1{font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.45}
h2{font-size:clamp(1.25rem,4vw,1.6rem);line-height:1.35}
h3{font-size:1.0625rem;line-height:1.35}

/* ------------------------------------------------------------- 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}
/* 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)}
.mark img{height:28px;width:auto;display:block}
.mark span{font-family:var(--serif);font-size:1.05rem;letter-spacing:.01em;line-height:1}
.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;white-space:nowrap;
  display:flex;flex-direction:column;justify-content:center;min-height:var(--tap);padding-left:.5rem}
.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))}

.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#16294F;padding:.6rem 1rem;z-index:100}
.skip:focus{left:.5rem;top:.5rem}

/* -------------------------------------------------------------- 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}
.ev{display:flex;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;min-width:0}
.ev-body b{display:block;font-weight:400;line-height:1.35}
.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}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!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 .16s ease-out both}
::view-transition-new(root){animation:fade .22s ease-in 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{
  transition:background-color .14s ease-out,border-color .14s ease-out,
             color .14s ease-out,transform .1s ease-out}
a.row:active,a.card:active,a.ev:active,a.tile:active,.alert:active,a.grow:active{
  background:var(--indigo)}
button:active,.btn:active{transform:scale(.985)}

/* 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)}
  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}
.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}
.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)}