/* ILT Stadium Ops — Field App
   Shared design system injected below; field-app layout follows.
   Class names and DOM are untouched — this file restyles only. */

/* @tokens:start — generated from shared/tokens.css, do not edit */
/* ============================================================================
   ILT STADIUM OPS — SHARED DESIGN SYSTEM
   Source of truth. Do not edit the copies inside each app: they are generated.
   Run `node shared/build-styles.mjs` after changing this file.

   Visual language: NBA 2K20 MyGM. Hard-edged rectangles, faceted red/blue
   banner, grey panel-header rails, white-on-dark active state, and gold
   reserved strictly for data values.

   Reskin lever: change --team / --team-deep below.
   ============================================================================ */

/* ---- typefaces (self-hosted; no CDN dependency in the field) ------------- */
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/SairaCondensed-700.woff2) format('woff2');}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/SairaCondensed-800.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/Barlow-400.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/Barlow-500.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/Barlow-600.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/Barlow-700.woff2) format('woff2');}

:root{
  /* grounds — cool-biased neutrals, never pure grey */
  --void:#0a0c10;
  --panel:rgba(8,10,13,.90);
  --panel-solid:#0d1014;
  --panel-2:#12161c;
  --rail:#383e46;
  --rail-ink:#eef1f4;
  --rail-dim:#8f97a1;
  --hair:rgba(255,255,255,.14);
  --hair-soft:rgba(255,255,255,.06);

  /* accent — DATA VALUES ONLY */
  --gold:#f5a623;
  --gold-deep:#c07d10;

  /* banner facets */
  --team:#1c4f9e;
  --team-deep:#0f2f63;
  --ban-red:#8e1520;

  /* ink */
  --ink:#ffffff;
  --ink-2:#c9d0d8;
  --ink-3:#8b94a0;
  --ink-dim:#8b94a0;

  /* semantic — separate from the accent hue */
  --crit:#ff3b5c;
  --high:#ff8a3d;
  --med:#f5c542;
  --low:#6fa8dc;
  --good:#3ddc84;

  /* type */
  --display:'Saira Condensed',Impact,sans-serif;
  --body:'Barlow',system-ui,-apple-system,sans-serif;

  --pad:clamp(14px,2vw,26px);
  --radius:0px;              /* the look is hard-edged; kept as a lever */
}

/* ---- ground -------------------------------------------------------------
   No photography: depth comes from a team-tinted radial wash plus a fine
   diagonal pinstripe, both fixed so content scrolls over a stable field. */
.ops-ground{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(28,79,158,.30) 0%, transparent 62%),
    radial-gradient(80% 50% at 88% 8%, rgba(142,21,32,.18) 0%, transparent 70%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.018) 0 1px, transparent 1px 9px),
    linear-gradient(180deg,#0d1118 0%, var(--void) 46%, #06080b 100%);
}

/* ---- faceted banner ------------------------------------------------------ */
.ops-facets{position:absolute; inset:0; z-index:0; overflow:hidden;}
.ops-facets i{position:absolute; inset:0; display:block;}
.ops-facets .f-base{background:linear-gradient(100deg,
  var(--ban-red) 0%, #5d1830 26%, #223a72 55%, var(--team) 78%, var(--team-deep) 100%);}
.ops-facets .f-1{background:rgba(255,255,255,.10);
  clip-path:polygon(0 0, 26% 0, 15% 100%, 0 100%);}
.ops-facets .f-2{background:rgba(0,0,0,.30);
  clip-path:polygon(30% 0, 47% 0, 34% 100%, 17% 100%);}
.ops-facets .f-3{background:rgba(255,255,255,.07);
  clip-path:polygon(58% 0, 78% 0, 66% 100%, 46% 100%);}
.ops-facets .f-4{background:linear-gradient(90deg, rgba(245,166,35,.55), rgba(245,166,35,0));
  clip-path:polygon(49% 0, 51.2% 0, 39% 100%, 36.8% 100%);}
.ops-facets .f-5{background:rgba(0,0,0,.34);
  clip-path:polygon(82% 0, 100% 0, 100% 100%, 70% 100%);}
.ops-facets .f-shade{background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(4,6,10,.88));}

/* ---- brand lockup -------------------------------------------------------- */
.ops-logo{
  background-image:url(logo.png);
  background-size:contain; background-repeat:no-repeat; background-position:left center;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
  flex:none;
}

/* ---- stat chips ---------------------------------------------------------- */
.ops-chips{display:flex; background:rgba(4,6,10,.82); border:1px solid rgba(255,255,255,.10);}
.ops-chips .chip{padding:8px 16px 9px; min-width:92px;
  border-right:1px solid rgba(255,255,255,.10);}
.ops-chips .chip:last-child{border-right:0;}
.ops-chips .k{display:block; font-size:9.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;}
.ops-chips .v{display:block; font-family:var(--display); font-weight:800;
  font-size:26px; line-height:1.12; color:var(--gold); font-variant-numeric:tabular-nums;}
.ops-chips .v.crit{color:var(--crit);}
.ops-chips .v.good{color:var(--good);}

/* ---- panels -------------------------------------------------------------- */
.panel{background:var(--panel); border:1px solid rgba(255,255,255,.07);}
.phead{background:var(--rail); display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:9px 16px;}
.phead h2,.phead .h{font-family:var(--display); font-weight:800; font-size:16px;
  letter-spacing:.10em; text-transform:uppercase; color:var(--rail-ink); margin:0;}
.phead .rlabel{font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rail-dim);}
.pbody{padding:16px;}
.pbody.flush{padding:0;}

/* ---- buttons ------------------------------------------------------------- */
.ops-btn{
  appearance:none; cursor:pointer; background:transparent;
  border:1px solid rgba(245,166,35,.6); color:var(--gold);
  font-family:var(--body); font-weight:700; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; padding:9px 16px;
  transition:background .12s linear, color .12s linear;
}
.ops-btn:hover{background:var(--gold); color:#141414;}
.ops-btn:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.ops-btn.solid{background:var(--gold); color:#141414; border-color:var(--gold);}
.ops-btn.solid:hover{background:#ffb943;}
.ops-btn.ghost{border-color:rgba(255,255,255,.28); color:var(--ink-2);}
.ops-btn.ghost:hover{background:rgba(255,255,255,.10); color:#fff;}
.ops-btn.add::before{content:"+"; font-size:14px; line-height:1; margin-right:7px;}

/* ---- severity, encoded in form as well as colour ------------------------- */
.sev{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
.sev i{width:3px; height:15px; display:block; flex:none;}
.sev span{font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;}
.sev.critical i{background:var(--crit);} .sev.critical span{color:var(--crit);}
.sev.high i{background:var(--high);}     .sev.high span{color:var(--high);}
.sev.medium i{background:var(--med);}    .sev.medium span{color:var(--med);}
.sev.low i{background:var(--low);}       .sev.low span{color:var(--low);}

/* ---- tables -------------------------------------------------------------- */
.tbl{width:100%; overflow-x:auto;}
.tbl table{width:100%; border-collapse:collapse;}
.tbl th{text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3);
  padding:12px 14px 9px; border-bottom:1px solid var(--hair); white-space:nowrap;}
.tbl td{padding:13px 14px; font-size:14.5px; color:var(--ink);
  border-bottom:1px solid var(--hair-soft); vertical-align:top;}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl th.num,.tbl td.num{text-align:right;}
.tbl td.num{font-variant-numeric:tabular-nums; color:var(--ink-2); white-space:nowrap;}

/* ---- live indicator ------------------------------------------------------ */
.live{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--good);}
.live i{width:7px; height:7px; border-radius:50%; background:var(--good);
  animation:opsPulse 2s ease-in-out infinite;}
.live.off{color:var(--crit);}
.live.off i{background:var(--crit); animation:none;}
@keyframes opsPulse{0%,100%{opacity:1;}50%{opacity:.25;}}

/* ---- empty state --------------------------------------------------------- */
.empty{padding:30px 16px; color:var(--ink-3); font-size:13px;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-align:center;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* @tokens:end */

/* ==========================================================================
   BASE
   ========================================================================== */
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{color-scheme:dark;}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{
  font-family:var(--display); font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; margin:0; line-height:1;
}
::selection{background:var(--gold); color:#141414;}

/* ---- shell -------------------------------------------------------------- */
.phone{
  position:relative; z-index:2;
  max-width:620px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column;
}
.phone::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(28,79,158,.30) 0%, transparent 62%),
    radial-gradient(80% 50% at 88% 8%, rgba(142,21,32,.18) 0%, transparent 70%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.018) 0 1px, transparent 1px 9px),
    linear-gradient(180deg,#0d1118 0%, var(--void) 46%, #06080b 100%);
}
.phone > *{position:relative;}

/* ---- top bar ------------------------------------------------------------ */
header.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  padding:13px 16px 14px;
  background:linear-gradient(100deg,
    var(--ban-red) 0%, #5d1830 26%, #223a72 55%, var(--team) 78%, var(--team-deep) 100%);
  overflow:hidden;
}
header.bar::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.10) 0 14%, transparent 14%),
    linear-gradient(90deg, transparent 62%, rgba(0,0,0,.34) 78%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(4,6,10,.72));
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
/* brand mark holds the left slot until a back button needs it */
header.bar::before{
  content:""; position:relative; z-index:1; flex:none;
  width:124px; height:26px;
  background-image:url(logo.png); background-size:contain;
  background-repeat:no-repeat; background-position:left center;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
header.bar.haveback::before{display:none;}
header.bar .back{
  position:relative; z-index:1; flex:none; appearance:none; cursor:pointer;
  background:rgba(4,6,10,.55); border:1px solid rgba(255,255,255,.28); color:#fff;
  font-family:var(--body); font-weight:700; font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; padding:8px 12px;
}
header.bar .back:active{background:#fff; color:#14171c;}
header.bar .ttlwrap{position:relative; z-index:1; flex:1; min-width:0; text-align:right;}
header.bar.haveback .ttlwrap{text-align:left;}
header.bar .eyebrow{
  font-size:9px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
header.bar .ttl{
  font-family:var(--display); font-weight:800; font-size:17px;
  letter-spacing:.06em; text-transform:uppercase; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#logoutBtn{
  position:relative; z-index:1; flex:none; appearance:none; cursor:pointer;
  background:rgba(4,6,10,.55); border:1px solid rgba(255,255,255,.28); color:#fff;
  font-family:var(--body); font-weight:700; font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; padding:8px 11px;
}
#logoutBtn:active{background:#fff; color:#14171c;}

main{flex:1; padding:18px 16px 26px;}

/* ---- copy --------------------------------------------------------------- */
.lead{font-size:13.5px; color:var(--ink-3); line-height:1.55; margin:0 0 16px;}
.lead b{color:var(--ink-2); font-weight:600;}

/* ---- hub hero ----------------------------------------------------------- */
.hub-hero{
  position:relative; overflow:hidden;
  background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
  padding:18px 16px 19px; margin-bottom:16px;
}
.hub-hero::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold),transparent 62%);
}
.hub-date{
  font-size:10px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
.hub-greet{
  font-family:var(--display); font-weight:800; font-size:clamp(28px,8vw,40px);
  line-height:1; letter-spacing:.01em; text-transform:uppercase; margin:6px 0 6px;
}
.hub-sub{font-size:12.5px; color:var(--ink-3);}

/* ---- feature row -------------------------------------------------------- */
.feature{
  position:relative; overflow:hidden; cursor:pointer;
  display:flex; align-items:center; gap:13px;
  background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
  padding:15px 14px; margin-bottom:9px;
  transition:background .12s linear, color .12s linear;
}
.feature::before{content:""; position:absolute; top:0; bottom:0; left:0; width:3px;
  background:var(--gold);}
.feature:active{background:#f2f4f7; color:#14171c;}
.feature .fic{flex:none; width:26px; height:26px; color:var(--gold);}
.feature .fic svg{width:100%; height:100%; display:block;}
.feature .ftx{flex:1; min-width:0;}
.feature .ftt{
  font-family:var(--display); font-weight:800; font-size:16px;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.1;
}
.feature .fss{font-size:11.5px; color:var(--ink-3); margin-top:2px; line-height:1.35;}
.feature:active .fss{color:#5a636e;}
.feature .fchev{flex:none; width:16px; height:16px; color:var(--ink-3);}
.feature .fchev svg{width:100%; height:100%; display:block;}

/* ---- icon launcher grid --------------------------------------------------
   Large tap targets: the icon is the primary affordance, the title labels it.
   No subtitles. Three across once there is room for them. */
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px;}
@media(min-width:540px){ .tiles{grid-template-columns:repeat(3,1fr);} }
.tile{
  position:relative; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; gap:14px;
  align-items:center; justify-content:center;
  background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
  padding:22px 12px 20px; min-height:148px;
  transition:background .12s linear, color .12s linear;
}
.tile::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--team);}
.tile:active{background:#f2f4f7; color:#14171c;}
.tile .ic{flex:none; width:46px; height:46px;}
.tile .ic svg{width:100%; height:100%; display:block; stroke-width:1.4;}
.tile:active .ic{color:#5a636e;}
.tile .tt{
  font-family:var(--display); font-weight:800; font-size:16px;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.12;
  text-wrap:balance;
}
/* completion state carried through from the check screens */
.tile .pill{position:absolute; top:9px; right:9px;}
.tile.ok{border-color:rgba(61,220,132,.42);}
.tile.ok::before{background:var(--good);}
.tile.flag{border-color:rgba(255,59,92,.5);}
.tile.flag::before{background:var(--crit);}

/* ---- icons ---------------------------------------------------------------
   The icon markup in app.js carries no fill/stroke attributes — these are
   outline icons and rely entirely on this rule. Without it every path fills
   solid black. Keep the colour classes at single-class specificity so they
   are not beaten by a descendant selector like `.tile .ic`. */
svg.ico{
  width:22px; height:22px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ic{color:var(--ink-2);}
.ic-crimson{color:var(--crit);}
.ic-amber{color:var(--gold);}
.ic-ok{color:var(--good);}
.ic-slate{color:var(--ink-3);}

/* ---- list rows ---------------------------------------------------------- */
.row{
  position:relative; cursor:pointer;
  display:flex; align-items:center; gap:12px;
  background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
  padding:13px 14px; margin-bottom:7px;
  transition:background .12s linear, color .12s linear;
}
.row:active{background:#f2f4f7; color:#14171c;}
.row .name{flex:1; min-width:0;}
.row .name .t{font-size:14.5px; font-weight:500; line-height:1.3;}
.row .name .s{font-size:11.5px; color:var(--ink-3); margin-top:2px;}
.row:active .name .s{color:#5a636e;}
.row .chev{flex:none; width:16px; height:16px; color:var(--ink-3);}
.row .chev svg{width:100%; height:100%; display:block;}
.row.ok{border-left:3px solid var(--good);}
.row.flag{border-left:3px solid var(--crit);}
.row.done{opacity:.55;}
.row.done .t{text-decoration:line-through;}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:block; width:100%; appearance:none; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.28); color:var(--ink);
  font-family:var(--body); font-weight:700; font-size:12.5px;
  letter-spacing:.15em; text-transform:uppercase; padding:14px;
  margin-bottom:11px; transition:background .12s linear, color .12s linear;
}
.btn:hover{background:rgba(255,255,255,.08);}
.btn:active{background:#fff; color:#14171c;}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.btn.ghost{border-color:rgba(255,255,255,.24); color:var(--ink-2);}
.btn.ghost:hover{background:rgba(255,255,255,.10); color:#fff;}
.btn.ok{background:var(--gold); border-color:var(--gold); color:#141414;}
.btn.ok:active{background:#ffbe4d; color:#141414;}
.btn.amber{background:var(--high); border-color:var(--high); color:#200e02;}
.btn.dark{background:#070a0e; border-color:rgba(255,255,255,.18); color:var(--ink-2);}
.btn.sm{width:auto; display:inline-block; padding:8px 14px;
  font-size:10.5px; margin-bottom:0;}
.btn:disabled{opacity:.4; cursor:not-allowed;}

.footer{
  padding:14px 16px 22px; text-align:center;
  font-size:10px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
  border-top:1px solid var(--hair-soft);
}

/* ---- form controls ------------------------------------------------------ */
label.lbl{
  display:block; font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 7px;
}
textarea,select,input{
  width:100%; background:#070a0e; border:1px solid rgba(255,255,255,.16);
  color:var(--ink); font-family:var(--body); font-size:15px;
  padding:12px 13px; margin-bottom:14px; appearance:none;
}
textarea{min-height:110px; resize:vertical; line-height:1.5;}
input::placeholder,textarea::placeholder{color:#5c6672;}
textarea:focus,select:focus,input:focus{outline:2px solid var(--gold); outline-offset:-1px;}
select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:38px;
}

/* ---- cards -------------------------------------------------------------- */
.card{background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
  padding:15px 14px; margin-bottom:12px;}
.card.amber{border-left:3px solid var(--gold);}

/* ---- check / fault segmented control ------------------------------------ */
.chk{background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
  padding:13px 14px; margin-bottom:8px;}
.chk .top{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.chk .lab{flex:1; min-width:0; font-size:14px; font-weight:500; line-height:1.35;}
.chk .seg{display:flex; gap:4px; flex:none;}
.chk .seg button{
  appearance:none; cursor:pointer; padding:8px 13px;
  background:#070a0e; border:1px solid rgba(255,255,255,.16); color:var(--ink-3);
  font-family:var(--body); font-weight:700; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase;
}
.chk .seg button.ok.on{background:var(--good); border-color:var(--good); color:#08130b;}
.chk .seg button.fault.on{background:var(--crit); border-color:var(--crit); color:#fff;}
.chk .fault-box{display:none; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--hair-soft);}
.chk.show-fault .fault-box{display:block;}

/* ---- photo button ------------------------------------------------------- */
.photobtn{
  display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  background:#070a0e; border:1px dashed rgba(255,255,255,.24); color:var(--ink-3);
  padding:18px 14px; margin-bottom:12px;
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.photobtn img{display:block; width:100%; margin-top:10px;
  border:1px solid rgba(255,255,255,.14);}

/* ---- chips -------------------------------------------------------------- */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.chip{
  cursor:pointer; padding:8px 13px;
  background:#070a0e; border:1px solid rgba(255,255,255,.16); color:var(--ink-3);
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.chip:active{background:rgba(255,255,255,.14); color:#fff;}
.chip.on{background:#fff; border-color:#fff; color:#14171c;}

/* ---- pills -------------------------------------------------------------- */
.pill{
  display:inline-block; padding:3px 9px;
  border:1px solid currentColor; color:var(--ink-3);
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.pill.urg{color:var(--crit);}
.pill.ok{color:var(--good);}
.pill.amber{color:var(--gold);}

/* ---- contacts ----------------------------------------------------------- */
.contact{display:flex; align-items:center; gap:12px;
  background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
  padding:13px 14px; margin-bottom:7px;}
.contact .n{flex:1; min-width:0; font-size:14.5px; font-weight:500;}
.contact .r{font-size:11.5px; color:var(--ink-3); margin-top:2px;}
.contact a{
  flex:none; text-decoration:none; padding:8px 13px;
  border:1px solid rgba(245,166,35,.55); color:var(--gold);
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.contact a:active{background:var(--gold); color:#141414;}

/* ---- steps -------------------------------------------------------------- */
.step{display:flex; align-items:center; gap:12px; cursor:pointer;
  background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
  padding:13px 14px; margin-bottom:7px;}
.step:active{background:rgba(255,255,255,.06);}
.step .box{flex:none; width:20px; height:20px;
  border:1.5px solid rgba(255,255,255,.34); background:transparent;}
.step .tx{flex:1; font-size:14px; line-height:1.45;}
.step.done{border-color:rgba(61,220,132,.4);}
.step.done .box{
  background:var(--good); border-color:var(--good);
  background-image:linear-gradient(45deg,transparent 44%,#08130b 44%,#08130b 56%,transparent 56%),
                   linear-gradient(-45deg,transparent 44%,#08130b 44%,#08130b 56%,transparent 56%);
}
.step.done .tx{color:var(--ink-3); text-decoration:line-through;}

/* ---- accordion ---------------------------------------------------------- */
.acc{background:var(--panel-2); border:1px solid rgba(255,255,255,.07); margin-bottom:7px;}
.acc .q{display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer; padding:14px;
  font-family:var(--display); font-weight:800; font-size:14.5px;
  letter-spacing:.05em; text-transform:uppercase;}
.acc .q span{flex:none; font-size:19px; color:var(--ink-3); line-height:1;}
.acc.open .q span{color:var(--gold);}
.acc .a{display:none; padding:0 14px 14px; font-size:14px; line-height:1.6;
  border-top:1px solid var(--hair-soft);}
.acc.open .a{display:block;}
.acc .a ol{margin:10px 0 0; padding-left:20px;}
.acc .a ol li{margin-bottom:7px;}
.acc .esc{margin-top:12px; padding-top:12px; border-top:1px solid var(--hair-soft);
  font-size:12px; color:var(--ink-3);}
.acc .esc a{color:var(--gold); text-decoration:none; font-weight:600;}

/* ---- system notes ------------------------------------------------------- */
.note-sys{
  background:#070a0e; border:1px solid rgba(255,255,255,.12);
  border-left:3px solid var(--ink-3);
  padding:12px 14px; margin-bottom:12px; font-size:13px; line-height:1.55;
  color:var(--ink-2);
}
.note-sys b{color:var(--ink); font-weight:700;}
.note-sys.ok-note{border-left-color:var(--good);}
.note-sys.ok-note b{color:var(--good);}
.note-sys.warn-note{border-left-color:var(--gold);}
.note-sys.warn-note b{color:var(--gold);}

.empty{padding:30px 16px; color:var(--ink-3); font-size:13px;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-align:center;}

.rep-zone{background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
  padding:15px 14px; margin-bottom:12px;}

/* ---- event timeline ----------------------------------------------------- */
.event{display:flex; gap:14px; margin-bottom:4px;}
.event .time{position:relative; flex:none; width:58px; text-align:right; padding-top:2px;}
.event .time .t{font-family:var(--display); font-weight:800; font-size:15px;
  color:var(--gold); font-variant-numeric:tabular-nums;}
.event .time::after{content:""; position:absolute; top:24px; bottom:-4px; right:-8px;
  width:1px; background:var(--hair);}
.event:last-child .time::after{display:none;}
.event .body{flex:1; min-width:0;
  background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
  padding:12px 13px; margin-bottom:8px;}

/* ---- walkthrough grid --------------------------------------------------- */
.wgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px;}
.wcell{background:var(--panel-2); border:1px solid rgba(255,255,255,.07); overflow:hidden;}
.wcell .wd{padding:10px 11px; font-family:var(--display); font-weight:800;
  font-size:13.5px; letter-spacing:.06em; text-transform:uppercase;}
.wcell .wdesc{padding:0 11px 11px; font-size:11.5px; color:var(--ink-3); line-height:1.4;}
.wcell img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover;}
.wcell .nophoto{
  aspect-ratio:4/3; display:grid; place-items:center;
  background:repeating-linear-gradient(118deg, rgba(255,255,255,.04) 0 10px, transparent 10px 22px), #070a0e;
  color:var(--ink-3); font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}

/* ==========================================================================
   LOGIN
   ========================================================================== */
/* auth.js sets display:flex inline, so centre with properties that work for
   both flex and grid rather than relying on place-items alone */
#loginScreen{
  position:fixed; inset:0; z-index:60; padding:24px;
  display:grid; place-items:center;
  align-items:center; justify-content:center;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(28,79,158,.32) 0%, transparent 62%),
    radial-gradient(80% 50% at 88% 8%, rgba(142,21,32,.20) 0%, transparent 70%),
    linear-gradient(180deg,#0d1118 0%, var(--void) 46%, #06080b 100%);
}
.loginCard{width:min(400px,100%); background:var(--panel-2);
  border:1px solid rgba(255,255,255,.09);}
.loginCard .top{position:relative; overflow:hidden; padding:24px 22px 22px;
  background:linear-gradient(100deg,
    var(--ban-red) 0%, #5d1830 26%, #223a72 55%, var(--team) 78%, var(--team-deep) 100%);}
.loginCard::before{content:none;}
/* brand mark replaces the text eyebrow */
.loginCard .top .eyebrow2{
  display:block; width:190px; height:40px; text-indent:-9999px; overflow:hidden;
  background-image:url(logo.png); background-size:contain;
  background-repeat:no-repeat; background-position:left center;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
  position:relative; z-index:1;
}
.loginCard .top h1{
  position:relative; z-index:1; margin-top:14px;
  font-family:var(--display); font-weight:800; font-size:24px;
  letter-spacing:.07em; text-transform:uppercase; color:#fff;
}
.loginCard .body{padding:22px;}
.loginCard label.lbl{margin-top:4px;}
.loginCard label.lbl:first-child{margin-top:0;}
#loginError{color:var(--crit); font-size:12.5px; font-weight:600; min-height:18px;}
#loginBtn{margin-top:4px;}

/* ---- fridge restock tally -----------------------------------------------
   102 lines worked through in order on a phone, one hand, standing at an open
   fridge. So: a fixed row height with the stepper always in the same place
   down the column, and 44px targets that stay hittable with cold hands.
   Ops Manager App only — cafe stock is not the field apps' to count, so this
   lives here and not in shared/components.css. */

/* running total, stuck to the top so it stays visible while you scroll */
.dsum{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  margin:-4px -4px 12px; padding:11px 13px;
  background:var(--panel-solid); border:1px solid var(--hair);
  border-left:3px solid var(--gold);
}
.dsum-n{font-family:var(--display); font-weight:800; font-size:21px;
  line-height:1; color:var(--gold); letter-spacing:.02em;}
.dsum-l{font-size:12px; color:var(--ink-3); line-height:1.4;}
.dsum-sep{width:1px; height:13px; background:var(--hair); margin:0 5px;
  align-self:center;}

/* section rail, same grey header rail the rest of the system uses */
.dhead{
  margin:14px 0 6px; padding:6px 10px;
  background:var(--rail); color:var(--rail-ink);
  font-family:var(--display); font-weight:700; font-size:12.5px;
  letter-spacing:.09em; text-transform:uppercase;
}
.dhead:first-child{margin-top:0;}

.drow{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; min-height:66px;
  background:var(--panel-2); border:1px solid var(--hair-soft);
  border-top:none;
}
/* Only fires if a list ever renders without fridge headings; with them, the
   .dgrp above each group closes the top edge instead. */
.drow:first-of-type{border-top:1px solid var(--hair-soft);}
/* a tallied line is the one thing you scan for when checking your work */
.drow.on{border-left:3px solid var(--gold); background:#161b22;}

/* The drink's id is the storage key, not something anyone reads at the fridge
   — keeping it off the row gives the name its width back, which is what lets
   the stepper grow without squeezing the longest line on the list,
   "Keri Fruity Apple & Blackcurrant (Small Bottle)". */
.dname{flex:1; min-width:0; font-size:15px; line-height:1.3; color:var(--ink);}

.dstep{flex:none; display:flex; align-items:center; gap:2px;}
.dbtn{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  width:56px; height:52px; flex:none;
  background:rgba(255,255,255,.05); border:1px solid var(--hair);
  color:var(--ink); font-family:var(--display); font-weight:700; font-size:26px;
  line-height:1; padding:0;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.dbtn:active{background:#fff; color:#14171c;}
.dbtn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
/* gold is for data values, so the count is gold and the buttons around it
   stay neutral — same rule the rest of the system follows */
.dqty{
  width:52px; height:52px; flex:none; margin:0; padding:0;
  text-align:center; background:var(--void);
  border:1px solid var(--hair); border-left:none; border-right:none;
  font-family:var(--display); font-weight:800; font-size:21px;
  color:var(--gold); letter-spacing:.02em;
}
.dqty:focus{outline:none; border-color:var(--gold);}
.drow:not(.on) .dqty{color:var(--ink-3);}

/* Clear this one line. Deliberately narrower than − and +, and set apart by a
   gap: it undoes work, so it should not be as easy to hit by accident as the
   two buttons either side of it are to hit on purpose.

   ALWAYS ON SCREEN (Richard, 2026-08-22). It used to be visibility:hidden
   until the row had something to clear, which meant that on a fresh tally
   there was no x anywhere on the screen and nothing to tell you the feature
   existed. A control you cannot see until you no longer need to discover it
   is not discoverable. An untallied row now shows it faint — the slot was
   already reserved, so nothing moves when it lights up. */
.dclear{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  width:42px; height:52px; flex:none; margin-left:6px;
  background:transparent; border:1px solid var(--hair-soft);
  color:var(--ink-3); font-family:var(--body); font-weight:400; font-size:22px;
  line-height:1; padding:0;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.dclear:active{background:var(--crit); border-color:var(--crit); color:#fff;}
.dclear:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
/* nothing to clear yet: present and readable, but plainly not the live control */
.dclear.idle{opacity:.34;}
.dclear.idle:active{background:transparent; border-color:var(--hair-soft); color:var(--ink-3);}

/* Four controls in a row is tight on a handset, so the stepper gives back a
   little width rather than pushing every name onto a third line. Measured
   against the real 102 names: the breakpoints are at 440 and 384 because the
   common widths sit just inside them — 402px (iPhone Pro) and 390px land in
   the first, 375px in the second. A 400px breakpoint missed 402 entirely and
   left ten names running to three lines. Nothing overflows at any width;
   these only trade name lines against button size. */
@media (max-width:440px){
  .dbtn{width:50px;}
  .dqty{width:46px;}
  .dclear{width:38px; margin-left:4px;}
  .dname{font-size:14px;}
}
@media (max-width:384px){
  .dbtn{width:46px;}
  .dqty{width:42px;}
  .dclear{width:34px;}
}

/* ---- fridge headings ----------------------------------------------------
   The list is in walk order, fridge by fridge. The heading is what says so —
   without it the order looks arbitrary and someone "helpfully" alphabetises
   it. The right-hand number is that fridge's subtotal, so you can check one
   fridge's count before moving to the next. */
.dgrp{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:18px; padding:7px 10px;
  background:#383e46; border:1px solid var(--hair);   /* the system's panel-header rail */
  font-family:var(--display); font-weight:800; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
}
.dgrp:first-child{margin-top:0;}
.dgrp-n{
  font-family:var(--body); font-weight:600; font-size:11px;
  letter-spacing:.04em; text-transform:none; color:var(--gold);
}
/* a drink someone added from the screen, not one of the built-in lines */
.dtag{
  display:inline-block; margin-left:7px; padding:1px 6px; vertical-align:1px;
  border:1px solid var(--hair); color:var(--ink-3);
  font-family:var(--body); font-weight:600; font-size:9px;
  letter-spacing:.1em; text-transform:uppercase;
}

/* ---- add a drink --------------------------------------------------------
   Sits under the last fridge, which is where you look when you have walked
   all three and something was not on the list. */
.dadd{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  display:block; width:100%; margin-top:14px; padding:14px;
  background:transparent; border:1px dashed var(--hair);
  color:var(--ink-2); font-family:var(--body); font-weight:600; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.dadd:active{background:rgba(255,255,255,.06); color:#fff;}
.dadd-note{margin-top:7px; color:var(--ink-3); font-size:11.5px; text-align:center;}
.dadd-panel{
  margin-top:14px; padding:14px;
  background:var(--panel-2); border:1px solid var(--hair);
}
.dadd-ttl{
  font-family:var(--display); font-weight:800; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:12px;
}
.dadd-pick{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.dadd-hint{color:var(--ink-3); font-size:11.5px; line-height:1.5; margin-bottom:10px;}
.dadd-err{color:var(--crit); font-size:12px; font-weight:600; margin-bottom:8px;}
.dadd-err:empty{margin-bottom:0;}
.dadd-list{margin-top:16px; border-top:1px solid var(--hair-soft); padding-top:12px;}
.dadd-sub{
  font-family:var(--body); font-weight:700; font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;
}
.dadd-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--hair-soft);
  font-size:13.5px; color:var(--ink);
}
.dadd-row:last-child{border-bottom:none;}
.dadd-row em{color:var(--ink-3); font-style:normal; font-size:11px;}
.dadd-rm{
  appearance:none; -webkit-appearance:none; cursor:pointer; flex:none;
  padding:7px 11px; background:transparent; border:1px solid var(--hair-soft);
  color:var(--ink-3); font-family:var(--body); font-weight:600; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.dadd-rm:active{background:var(--crit); border-color:var(--crit); color:#fff;}

/* ==========================================================================
   PRINT — exported reports stay legible on paper
   ========================================================================== */
@media print{
  :root{--ink:#000; --ink-2:#222; --ink-3:#555;}
  body{background:#fff; color:#000;}
  .phone{max-width:none; min-height:0;}
  .phone::before{display:none;}
  header.bar,.footer,.no-print{display:none !important;}
  main{padding:0;}
  .row,.chk,.step,.card,.check,.contact,.acc,.event .body,.wcell,.rep-zone,.hub-hero,.tile,.feature{
    background:#fff; border:1px solid #bbb; color:#000; break-inside:avoid;
  }
  .wgrid{grid-template-columns:repeat(3,1fr);}
  .wcell img{aspect-ratio:auto; max-height:150px;}
  .wcell .wd,.rep-zone{color:#000;}
  .acc .a{display:block !important;}
}

/* ---- tick list (bathroom inspection) -------------------------------------
   The base .check, which the Ops Staff and Housekeeping stylesheets each carry
   their own copy of. shared/components.css only holds the MODIFIERS for it —
   the block below the marker restyles .check's label and alignment and would
   have nothing to modify without this. Kept here rather than moved into
   components.css because that block is injected into all four apps, and the
   other two already define the base earlier in their own files: adding it
   there would override two working screens to no benefit. If a fourth app ever
   needs it, that is the point to consolidate all three.

   The box is drawn with ::before rather than a marked-up element, so a row is
   just a button with a label. (The Ops Staff copy of this screen also emits a
   <span class="box"> holding an unsized tick SVG, which .box styles as a
   padded, bordered card — that is not reproduced here.) */
.checklist{margin:4px 0 14px;}
.check{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:12px 13px; margin-bottom:6px; width:100%; text-align:left;
  background:#070a0e; border:1px solid rgba(255,255,255,.10);
  color:var(--ink); font-family:var(--body); font-size:14px;
}
.check::before{
  content:""; flex:none; width:19px; height:19px;
  border:1.5px solid rgba(255,255,255,.34); background:transparent;
}
.check.done{border-color:rgba(61,220,132,.5); color:var(--ink-3);}
/* The Ops Staff copy also strikes the label through. Not carried across: on a
   yes/no inspection "Bathroom is clean and tidy" ticked YES read as crossed
   off, and on the room list a struck-out name read as cancelled, not done. */

/* .rate-row sits inside a spaced .field in the field apps; this app has no
   such wrapper, so the scale would otherwise butt against the next label. */
.rate-row{margin-bottom:16px;}
.check.done::before{
  background:var(--good); border-color:var(--good);
  background-image:linear-gradient(45deg,transparent 44%,#08130b 44%,#08130b 56%,transparent 56%),
                   linear-gradient(-45deg,transparent 44%,#08130b 44%,#08130b 56%,transparent 56%);
}

/* @components:start — generated from shared/components.css, do not edit */
/* ---- cleaning standards, shift priorities, handover ---------------------
   Added 2026-08-12 with the real Housekeeping manual content. The checklists
   are no longer one-liners: each row carries the manual's own description, so
   a check needs to align from the top and read as label + detail.           */

/* a checklist row is now two lines, so stop centring it vertically.
   width/text-align because .check is a <button>: it shrink-wraps to its
   content and centres its text unless told otherwise, which left every row a
   different width once the labels stopped being uniformly short. */
.check{align-items:flex-start; width:100%; text-align:left;}
.check::before{margin-top:1px;}
.check .lbl{display:block; font-family:var(--body); font-size:14px;
  font-weight:500; letter-spacing:0; text-transform:none; color:inherit;}
.check .lbl small{display:block; margin-top:2px;
  font-family:var(--body); font-size:12.5px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink-3);}
.check.done .lbl small{color:var(--ink-3);}

/* quiet explanatory line under a control */
.std-hint{color:var(--ink-3); font-size:12.5px; line-height:1.5; margin:0 0 14px;}

/* ---- 1-10 rating scale ---------------------------------------------------
   The bathroom inspection's cleanliness score. Ten targets across a phone
   screen is tight, so they wrap onto two rows on a narrow handset rather than
   shrinking below a thumb's worth of tap area. Tapping 7 fills 1 through 7,
   which reads as a level rather than ten unrelated buttons.            */
.rate-row{display:grid; grid-template-columns:repeat(10,1fr); gap:4px;}
@media (max-width:400px){ .rate-row{grid-template-columns:repeat(5,1fr);} }
.rate{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  min-height:42px; padding:0; border:1px solid rgba(255,255,255,.16);
  background:transparent; color:var(--ink-3);
  font-family:var(--display); font-weight:800; font-size:14px;
}
.rate.on{background:var(--gold); border-color:var(--gold); color:#141414;}
.rate:active{transform:translateY(1px);}

/* ---- official forms (incident report, trespass notice) -------------------
   Rendered from FORM_SPECS by form-render.js. These are long documents on a
   small screen, so the controls are sized for a thumb and the multi-choice
   answers are chips rather than a wall of checkboxes.                     */
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{
  display:inline-block; padding:9px 12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background:transparent;
  color:var(--ink-2); font-size:13px; line-height:1.2;
}
.chip.on{background:var(--gold); border-color:var(--gold); color:#141414; font-weight:600;}
.chip:active{transform:translateY(1px);}

/* A signature is drawn by finger, so it needs a real white surface and it must
   not scroll the page out from under the person signing. */
.sigpad{
  display:block; width:100%; height:150px; background:#fff;
  border:1px solid rgba(255,255,255,.2); touch-action:none; cursor:crosshair;
}
.btn-sm{margin-top:8px; padding:9px 14px; font-size:12.5px; width:auto;}

/* The site map, marked up by finger to show where an incident happened. */
.mapwrap{position:relative; line-height:0;}
.mapwrap img{width:100%; display:block; border:1px solid rgba(255,255,255,.2);}
.mapwrap canvas{position:absolute; left:0; top:0; width:100%; height:100%; touch-action:none;}

/* second line on a form menu item */
.fi-s{display:block; margin-top:3px; font-size:12px; color:var(--ink-3);}
.std-hint b{color:var(--ink-2); font-weight:600;}

/* a caveat that belongs to a standard, e.g. changing rooms get locked */
.std-note{border-left:3px solid var(--gold); background:rgba(245,166,35,.07);
  padding:10px 12px; margin:0 0 12px; font-size:13px; line-height:1.5;
  color:var(--ink-2);}

/* the manual's own framing lines */
.benchmark{font-family:var(--display); font-weight:700; font-size:15px;
  line-height:1.35; letter-spacing:.02em; color:var(--gold);
  border-left:3px solid var(--gold); padding:12px 14px;
  background:rgba(245,166,35,.06);}

/* STOP callout from the Health & Safety page */
.stop-note{border-left:3px solid var(--crit); background:rgba(255,59,92,.09);
  padding:11px 13px; margin:0 0 10px; font-size:13px; line-height:1.5;
  color:var(--ink-2);}
.stop-note b{font-family:var(--display); font-weight:800; letter-spacing:.1em;
  color:var(--crit);}

/* shift switcher — weekday / weeknight+weekend / event */
.seg-row{display:flex; gap:0; margin:16px 0 12px; border:1px solid var(--hair);}
.seg{flex:1; padding:10px 6px; background:transparent; border:0; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.seg + .seg{border-left:1px solid var(--hair);}
.seg.on{background:var(--rail-ink); color:#0a0c10;}

/* numbered priority order */
.prio{display:flex; align-items:flex-start; gap:12px; padding:11px 13px;
  margin-bottom:6px; background:#070a0e; border:1px solid rgba(255,255,255,.10);}
.prio-n{flex:none; width:22px; height:22px; display:grid; place-items:center;
  background:var(--gold); color:#0a0c10;
  font-family:var(--display); font-weight:800; font-size:13px;}
.prio-t{font-size:14px; line-height:1.45; color:var(--ink-2);}

/* handover: which shift and area the note came from */
.note-where{font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  margin-bottom:6px;}

/* free-text stock request needs room to write a list */
.input.tall{min-height:120px;}

/* ---- dashboard: delete, danger confirm, project photo -------------------
   Added 2026-08-12. Delete is destructive and irreversible, so it is styled
   as the quiet option next to Resolve/Open — visible when you look for it,
   never the thing your thumb lands on by accident — and turns red only on
   hover, once you have clearly aimed at it.                                */

.act{white-space:nowrap;}
.act > * + *{margin-left:6px;}

.btn-del{
  display:inline-grid; place-items:center; width:26px; height:26px;
  padding:0; cursor:pointer; vertical-align:middle;
  background:transparent; border:1px solid rgba(255,255,255,.16);
  color:var(--ink-3);
}
.btn-del svg{width:14px; height:14px; display:block;}
.btn-del:hover{background:var(--crit); border-color:var(--crit); color:#fff;}
.btn-del:focus-visible{outline:2px solid #fff; outline-offset:2px;}

/* the confirm step — states plainly what is about to go */
.danger-note{
  border-left:3px solid var(--crit); background:rgba(255,59,92,.08);
  padding:12px 14px; margin-bottom:14px;
  font-size:13.5px; line-height:1.55; color:var(--ink-2);
}
.danger-note p{margin:0 0 8px;}
.danger-note p:last-child{margin-bottom:0;}
.danger-what{
  font-family:var(--display); font-weight:800; font-size:16px;
  color:#fff; letter-spacing:.01em;
}
.ops-btn.danger{background:var(--crit); border-color:var(--crit); color:#fff;}
.ops-btn.danger:hover{background:#ff5470; border-color:#ff5470; color:#fff;}

/* project photo thumbnail in the drawer */
.proj-photo{display:block; margin-bottom:10px; border:1px solid var(--hair);}
.proj-photo img{display:block; width:100%; height:auto; max-height:260px; object-fit:cover;}
/* @components:end */