/* ════════════════════════════════════════════════════════════════════
   ROTA HOURS  —  css/rota-hours.css

   Ported from the Claude Design board "Rota Hours.dc.html" (project
   0bb3830f, 3 August 2026). The design authors everything as inline
   styles on React nodes; this file re-expresses the same visual language
   as real classes, which is the house convention and what lets the five
   themes work.

   TOKENS ARE THE PORTAL'S OWN, not the design's literals. The design used
   raw hex values that happen to equal the portal tokens; using the tokens
   instead is what keeps midnight / slate / emerald / daylight working
   without a second design pass.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --void:#0c1109; --deep:#111a0e; --base:#172213; --lift:#1e2e1b;
  --panel:rgba(255,255,255,0.10); --panel2:rgba(255,255,255,0.23);
  --border:rgba(255,255,255,0.21); --border2:rgba(255,255,255,0.34);
  --gold:#f0c832; --gold2:#f7d94e; --gdim:rgba(212,175,55,0.12); --gglow:rgba(212,175,55,0.30);
  --gold-b:rgba(240,200,50,0.34);
  --green:#4cd657; --green-t:#8ce694; --grdim:rgba(67,177,75,0.12); --green-b:rgba(76,214,87,0.40);
  --red:#ff4848; --red-t:#ff8f8f; --rdim:rgba(232,64,64,0.12); --red-b:rgba(255,72,72,0.45);
  --blue:#4a9eff; --bldim:rgba(74,158,255,0.10); --blue-b:rgba(74,158,255,0.40);
  --text:#f2f7ee; --t2:rgba(242,247,238,0.92); --t3:rgba(242,247,238,0.68);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp:'Cinzel',serif;
  --body:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--void);}
body{
  font-family:var(--body); color:var(--text); min-height:100vh;
  background:
    radial-gradient(140% 90% at 85% -10%, rgba(4,80,30,.30), transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(240,200,50,.07), transparent 55%),
    var(--void);
  background-attachment:fixed;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ── ANIMATION VOCABULARY (shared names, CLAUDE.md) ── */
@keyframes hdrDrop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes sbIn{from{transform:translateX(-18px);opacity:0}to{transform:none;opacity:1}}
@keyframes wgIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes cvIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes scIn{from{transform:translateY(12px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes mIn{from{transform:translateY(18px) scale(.985);opacity:0}to{transform:none;opacity:1}}
@keyframes shIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes drIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:none}}
/* A figure that moves while somebody is reading is marked, then the mark
   decays so the board settles back to calm. Design section "Live, without
   a refresh". */
@keyframes freshDecay{
  0%{box-shadow:0 0 0 2px var(--gold-b),0 0 22px var(--gglow);background:rgba(212,175,55,.20)}
  100%{box-shadow:0 0 0 0 rgba(240,200,50,0);background:transparent}
}

/* ══════════ HEADER ══════════ */
#hdr{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:12px 20px;min-height:66px;
  background:rgba(12,17,9,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);animation:hdrDrop .5s var(--ease) both;
}
#hdr .hdr-left,#hdr .hdr-right{display:flex;align-items:center;gap:12px;min-width:0;}
.hdr-back-btn{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:11px;
  border:1px solid var(--border);background:var(--panel);color:var(--t2);font-size:13px;font-weight:500;
  cursor:pointer;text-decoration:none;transition:background .25s var(--ease),border-color .25s var(--ease);
}
.hdr-back-btn:hover{background:var(--gdim);border-color:var(--gold-b);color:var(--gold);}
.brand-logo-img{height:38px;width:auto;object-fit:contain;}
.brand-logo{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--gold);}
.page-pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:22px;
  border:1px solid var(--gold-b);background:var(--gdim);color:var(--gold);
  font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;
}
.rh-live-chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:22px;min-height:36px;
  border:1px solid var(--green-b);background:var(--grdim);color:var(--green-t);font-size:13px;font-weight:600;
}
.rh-live-chip.stale{border-color:var(--border);background:var(--panel);color:var(--t3);}
.pip{width:8px;height:8px;border-radius:50%;display:inline-block;}
.pip-green{background:var(--green);animation:blink 2.4s ease-in-out infinite;}
.hdr-clock{font-family:var(--mono);font-size:14px;color:var(--t2);white-space:nowrap;}
.rh-clock-tz{font-size:13px;color:var(--t3);margin-left:5px;}
.hdr-user-chip{
  display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:26px;
  border:1px solid var(--border);background:var(--panel);min-width:0;
}
.hdr-user-av{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold),#8b6914);color:#0c1109;font-family:var(--disp);
  font-size:13px;font-weight:700;overflow:hidden;
}
.rh-user-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.rh-user-text > span:first-child{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.rh-user-role{font-size:13px;color:var(--t3);}
.hdr-icon-btn{
  width:44px;height:44px;border-radius:11px;border:1px solid var(--border);background:var(--panel);
  color:var(--t2);cursor:pointer;font-size:14px;transition:background .25s var(--ease),color .25s var(--ease);
}
.hdr-icon-btn:hover{background:var(--rdim);border-color:var(--red-b);color:var(--red-t);}

/* ══════════ BANNERS ══════════ */
.rh-banner{
  display:none;align-items:center;gap:10px;padding:11px 20px;font-size:13px;line-height:1.5;
  border-bottom:1px solid var(--border);
}
.rh-banner.show{display:flex;}
.rh-banner-test{background:rgba(245,158,11,.14);border-bottom-color:rgba(245,158,11,.45);color:#f7d08a;}
.rh-banner-ro{background:var(--bldim);border-bottom-color:var(--blue-b);color:#a9d2ff;}

/* ══════════ SHELL ══════════ */
.rh-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;padding:20px;max-width:1720px;margin:0 auto;align-items:start;}
.rh-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:86px;animation:sbIn .5s var(--ease) both;}
.rh-main{min-width:0;}

.rh-card{
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* ── sidebar nav ── */
.rh-nav-card{padding:16px;}
.rh-nav-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--border);}
.rh-nav-icon{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--gdim);border:1px solid var(--gold-b);color:var(--gold);font-size:15px;
}
.rh-nav-title{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--text);line-height:1.2;}
.rh-nav-sub{font-family:var(--mono);font-size:13px;color:var(--t3);margin-top:2px;}
.rh-nav-group{
  font-family:var(--mono);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--t3);margin:14px 0 7px;
}
.rh-nav-item{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:44px;
  padding:10px 12px;margin-bottom:3px;border-radius:11px;border:1px solid transparent;
  background:transparent;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--body);
  cursor:pointer;text-align:left;transition:background .25s var(--ease),color .25s var(--ease);
}
.rh-nav-item i{width:18px;text-align:center;font-size:13px;color:var(--t3);flex-shrink:0;}
.rh-nav-item span{flex:1;min-width:0;}
.rh-nav-item:hover{background:var(--panel);color:var(--text);}
.rh-nav-item.active{background:var(--gdim);border-color:var(--gold-b);color:var(--gold);font-weight:600;}
.rh-nav-item.active i{color:var(--gold);}
.rh-nav-item.active::before{
  content:'';position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--gold);
}
.rh-nav-badge{
  font-family:var(--mono);font-size:13px;font-weight:600;font-style:normal;padding:3px 9px;border-radius:11px;
  background:var(--panel2);color:var(--t2);flex-shrink:0;
}
.rh-nav-badge.gold{background:var(--gdim);border:1px solid var(--gold-b);color:var(--gold);}

/* ── the focus card ── */
.rh-focus-card{border-color:var(--gold-b);background:linear-gradient(160deg,var(--gdim),var(--panel));}
.rh-focus-lbl{font-family:var(--mono);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t3);}
.rh-focus-val{font-family:var(--disp);font-size:30px;font-weight:700;color:var(--gold);margin:6px 0 8px;line-height:1;}
.rh-focus-txt{font-size:13px;line-height:1.6;color:var(--t2);margin:0 0 14px;}

/* ══════════ SECTIONS ══════════ */
.rh-sec{display:none;}
.rh-sec.active{display:block;animation:cvIn .4s var(--ease) both;}

.rh-hero{
  border:1px solid var(--gold-b);border-radius:16px;padding:22px 24px;margin-bottom:18px;
  background:linear-gradient(135deg,var(--gdim),rgba(255,255,255,.03));
}
.rh-hero-gold{background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(255,255,255,.03));}
.rh-hero-eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);}
.rh-hero-title{font-family:var(--disp);font-size:26px;font-weight:700;color:var(--text);margin:8px 0 10px;line-height:1.15;}
.rh-hero-blurb{font-size:14px;line-height:1.65;color:var(--t2);margin:0;max-width:74ch;}

.rh-sec-title{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--text);margin:0 0 8px;}
.rh-sec-blurb{font-size:13px;line-height:1.65;color:var(--t3);margin:0 0 16px;max-width:74ch;}

/* ══════════ KPI STRIP ══════════ */
/* auto-fit, never auto-fill: auto-fill keeps empty tracks and strands a lone
   card at its minimum width. The max-width + margin-inline pair stops the
   opposite failure, one card stretched across the whole row. LESSONS.md. */
/* FIVE ACROSS, one straight row (VP 2026-08-04). auto-fit at minmax(230px)
   gave four then one on a 1084px shell, and the card's own max-width:420px
   with margin-inline:auto centred each card inside its track, so the row read
   as a broken grid. Five equal tracks at the design's gap of 12. */
.rh-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px;}
@media(max-width:1100px){ .rh-kpis{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:760px){  .rh-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:460px){  .rh-kpis{grid-template-columns:1fr;} }
.rh-kpi{
  width:100%;   /* no max-width: it centred each card inside its own track */
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px 18px;
  display:flex;flex-direction:column;animation:scIn .45s var(--ease) both;
}
.rh-kpis > *:nth-child(1){animation-delay:.06s}.rh-kpis > *:nth-child(2){animation-delay:.10s}
.rh-kpis > *:nth-child(3){animation-delay:.14s}.rh-kpis > *:nth-child(4){animation-delay:.18s}
.rh-kpis > *:nth-child(5){animation-delay:.22s}
.rh-kpi-lbl{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--mono);font-size:13px;letter-spacing:1.3px;text-transform:uppercase;color:var(--t3);
}
.rh-kpi-val{font-family:var(--disp);font-size:30px;font-weight:700;line-height:1.05;margin:10px 0 8px;color:var(--text);}
.rh-kpi-sub{font-size:13px;line-height:1.55;color:var(--t3);}
.rh-kpi-btn{margin-top:12px;}
.rh-kpi-red{border-color:var(--red-b);background:linear-gradient(160deg,var(--rdim),var(--panel));}
.rh-kpi-red .rh-kpi-val,.rh-kpi-red .rh-kpi-lbl i{color:var(--red-t);}
.rh-kpi-green{border-color:var(--green-b);background:linear-gradient(160deg,var(--grdim),var(--panel));}
.rh-kpi-green .rh-kpi-val,.rh-kpi-green .rh-kpi-lbl i{color:var(--green-t);}
.rh-kpi-gold{border-color:var(--gold-b);background:linear-gradient(160deg,var(--gdim),var(--panel));}
.rh-kpi-gold .rh-kpi-val,.rh-kpi-gold .rh-kpi-lbl i{color:var(--gold);}

/* ══════════ THE ONE-LINE POSITION BAR ══════════ */
.rh-line-card{margin-bottom:18px;}
.rh-line-wrap{margin:18px 0 12px;}
.rh-line{position:relative;height:22px;border-radius:6px;background:var(--panel);border:1px solid var(--border);display:flex;align-items:stretch;overflow:hidden;}
.rh-line-owed{background:linear-gradient(270deg,var(--red),rgba(232,64,64,.35));margin-left:auto;transform-origin:right;animation:barGrow .6s var(--ease) both;}
.rh-line-credit{background:linear-gradient(90deg,var(--green),rgba(67,177,75,.35));transform-origin:left;animation:barGrow .6s var(--ease) both;}
.rh-line-pending{
  background-image:repeating-linear-gradient(45deg,var(--gold-b) 0 6px,transparent 6px 12px);
  border-right:1px solid var(--gold-b);transform-origin:left;animation:barGrow .6s var(--ease) both;
}
.rh-line-zero{position:relative;width:1px;background:var(--text);flex-shrink:0;}
.rh-line-zero span{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:13px;color:var(--t3);}
.rh-line-ends{display:flex;justify-content:space-between;margin-top:7px;font-size:13px;}
.rh-line-end-l{color:var(--red-t);}
.rh-line-end-r{color:var(--green-t);}
.rh-legend{display:flex;flex-wrap:wrap;gap:9px;}
.rh-leg{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:20px;
  border:1px solid var(--border);background:var(--panel);font-size:13px;color:var(--t2);
}
.rh-leg-sw{width:11px;height:11px;border-radius:3px;display:inline-block;flex-shrink:0;}
.sw-red{background:var(--red);}
.sw-green{background:var(--green);}
.sw-hatch{background-image:repeating-linear-gradient(45deg,var(--gold) 0 3px,transparent 3px 6px);border:1px solid var(--gold-b);}

/* ══════════ DEFINITION CARDS ══════════ */
/* min(340px,100%): the same 320px overflow the Command overview hit. */
.rh-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px;}
.rh-def{display:flex;gap:12px;padding:13px 15px;border-radius:12px;border:1px solid var(--border);background:var(--panel);margin-bottom:10px;}
.rh-def strong{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px;}
.rh-def p{margin:0;font-size:13px;line-height:1.55;color:var(--t3);}
.rh-def-sign{font-family:var(--mono);font-size:18px;font-weight:700;flex-shrink:0;line-height:1.3;}
.rh-def-green{border-color:var(--green-b);background:var(--grdim);}
.rh-def-green .rh-def-sign{color:var(--green-t);}
.rh-def-red{border-color:var(--red-b);background:var(--rdim);}
.rh-def-red .rh-def-sign{color:var(--red-t);}
.rh-def-blue{border-color:var(--blue-b);background:var(--bldim);}
.rh-def-blue .rh-def-sign{color:var(--blue);}
.rh-formula{
  text-align:center;padding:13px;border-radius:11px;border:1px dashed var(--gold-b);background:var(--gdim);
  color:var(--gold);font-size:14px;margin:14px 0 12px;
}
.rh-foot{font-size:13px;line-height:1.6;color:var(--t3);margin:0;}

/* ══════════ LIVE FEED ══════════ */
.rh-feed{display:flex;flex-direction:column;gap:10px;max-height:430px;overflow-y:auto;}
.rh-feed-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--border);background:var(--panel);animation:wgIn .4s var(--ease) both;
}
.rh-feed-row.fresh{animation:wgIn .4s var(--ease) both,freshDecay 6s var(--ease) .4s both;}
.rh-feed-av{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold),#8b6914);color:#0c1109;font-family:var(--disp);font-size:13px;font-weight:700;overflow:hidden;
}
.rh-feed-body{flex:1;min-width:0;}
.rh-feed-title{font-size:13px;font-weight:600;color:var(--text);}
.rh-feed-when{font-family:var(--mono);font-size:13px;color:var(--t3);margin-top:2px;}
.rh-feed-amt{font-family:var(--mono);font-size:14px;font-weight:600;flex-shrink:0;}
.amt-pos{color:var(--green-t);}
.amt-neg{color:var(--red-t);}
.amt-flat{color:var(--t3);}

/* ══════════ FILTERS ══════════ */
.rh-filters{margin-bottom:16px;}
.rh-filter-row{display:flex;flex-wrap:wrap;gap:13px;align-items:flex-end;}
.rh-ot-selfnote{margin-top:11px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t3);}
.rh-ot-selfnote i{color:var(--gold);font-size:11px;}
.rh-field{display:flex;flex-direction:column;gap:6px;min-width:170px;}
.rh-field-grow{flex:1;min-width:230px;}
.rh-field > span{font-size:13px;color:var(--t3);}
.rh-field input,.rh-field select{
  min-height:44px;padding:10px 13px;border-radius:11px;border:1px solid var(--border);
  background:rgba(255,255,255,.09);color:var(--text);font-size:14px;font-family:var(--body);width:100%;
}
.rh-field input:focus,.rh-field select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold-b);}
.rh-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.rh-chip{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 15px;border-radius:22px;
  border:1px solid var(--border);background:var(--panel);color:var(--t2);font-size:13px;font-weight:500;
  font-family:var(--body);cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.rh-chip:hover{background:var(--gdim);border-color:var(--gold-b);color:var(--gold);}
.rh-chip.active{background:var(--gdim);border-color:var(--gold-b);color:var(--gold);font-weight:600;}
.rh-chip em{font-family:var(--mono);font-style:normal;font-size:13px;opacity:.85;}

/* ══════════ BUTTONS ══════════ */
.rh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;
  border-radius:11px;border:1px solid var(--border);background:var(--panel);color:var(--text);
  font-family:var(--body);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .18s var(--ease);
}
.rh-btn:not(:disabled):active{transform:translateY(1px);}
.rh-btn:disabled{opacity:.45;cursor:not-allowed;}
.rh-btn-full{width:100%;}
.rh-btn-sm{min-height:38px;padding:8px 13px;font-size:13px;}
.rh-btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));border-color:transparent;color:#0c1109;font-weight:700;}
.rh-btn-gold:hover:not(:disabled){box-shadow:0 6px 22px var(--gglow);}
.rh-btn-green{background:rgba(67,177,75,.22);border-color:var(--green-b);color:var(--green-t);}
.rh-btn-green:hover:not(:disabled){background:rgba(67,177,75,.34);}
.rh-btn-red{background:rgba(232,64,64,.22);border-color:var(--red-b);color:var(--red-t);}
.rh-btn-red:hover:not(:disabled){background:rgba(232,64,64,.34);}
.rh-btn-ghost{background:var(--panel);border-color:var(--border);color:var(--t2);}
.rh-btn-ghost:hover:not(:disabled){background:var(--panel2);color:var(--text);}
.rh-icon-btn{
  width:40px;height:40px;min-height:40px;padding:0;border-radius:10px;border:1px solid var(--border);
  background:var(--panel);color:var(--t2);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.rh-icon-btn:hover{background:var(--gdim);border-color:var(--gold-b);color:var(--gold);}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px;}

/* ══════════ BULK BAR ══════════ */
.rh-bulkbar{
  display:none;align-items:center;gap:13px;padding:14px 18px;margin-bottom:14px;border-radius:14px;
  border:1px solid var(--gold-b);background:linear-gradient(135deg,var(--gdim),var(--panel));
  animation:wgIn .35s var(--ease) both;
}
.rh-bulkbar.show{display:flex;}
.rh-bulkbar > i{color:var(--gold);font-size:15px;flex-shrink:0;}
.rh-bulkbar > span{flex:1;min-width:0;font-size:13px;line-height:1.5;color:var(--t2);}
.rh-bulkbar strong{color:var(--text);}

/* ══════════ TABLES ══════════ */
.rh-tbl-card{padding:0;overflow:hidden;}
.rh-tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.rh-tbl{width:100%;border-collapse:collapse;min-width:940px;}
.rh-tbl-audit{min-width:1080px;}
.rh-tbl thead th{
  position:sticky;top:0;z-index:2;text-align:left;padding:13px 14px;white-space:nowrap;
  background:rgba(23,34,19,.96);backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:13px;letter-spacing:1.3px;text-transform:uppercase;color:var(--t3);
  border-bottom:1px solid var(--border);
}
.rh-tbl th.num,.rh-tbl td.num{text-align:right;}
.rh-tbl tbody td{padding:14px;border-bottom:1px solid rgba(255,255,255,.09);font-size:13px;color:var(--t2);vertical-align:middle;}
.rh-tbl tbody tr:last-child td{border-bottom:none;}
.rh-tbl tbody tr{transition:background .2s var(--ease);}
.rh-tbl tbody tr:hover{background:rgba(255,255,255,.04);}
.rh-tbl tbody tr.fresh{animation:freshDecay 6s var(--ease) both;}
.rh-th-sel{width:46px;}
.rh-th-net{width:290px;}
.rh-th-act{width:130px;text-align:right;}
.rh-tbl input[type=checkbox]{width:19px;height:19px;accent-color:var(--gold);cursor:pointer;}
.rh-loading{text-align:center;padding:34px 14px !important;color:var(--t3);font-size:13px;}
.rh-loading i{color:var(--gold);margin-right:8px;}

.rh-person{display:flex;align-items:center;gap:11px;min-width:0;}
.rh-person-av{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold),#8b6914);color:#0c1109;font-family:var(--disp);
  font-size:13px;font-weight:700;overflow:hidden;
}
.rh-person-name{font-size:13px;font-weight:600;color:var(--text);word-break:break-word;line-height:1.3;}
.rh-person-dept{font-family:var(--mono);font-size:13px;color:var(--t3);margin-top:2px;}
.num-red{color:var(--red-t);}
.num-green{color:var(--green-t);}
.num-dim{color:var(--t3);}

.rh-pend-chip{
  display:inline-block;padding:4px 10px;border-radius:11px;font-family:var(--mono);font-size:13px;font-weight:600;
  border:1px solid var(--gold-b);background:var(--gdim);color:var(--gold);
}
.rh-pend-chip.none{border-color:var(--border);background:var(--panel);color:var(--t3);}

/* the diverging net bar */
.rh-net{display:flex;align-items:center;gap:11px;}
/* THE DESIGN'S NET BAR, one component and four readings, used on the people
   table, in the drawer header and inside every settlement preview so the
   figure never appears to change meaning between screens. Design values:
   20px tall, 5px radius, the zero rule 2px wide OVERHANGING the bar by 2px
   top and bottom, and the fill inset 1px with its own 4px radius. Ours was
   19px with a 1px flush rule and a fill flush to the edges. */
.rh-netbar{position:relative;flex:1 1 180px;min-width:110px;height:20px;border-radius:5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.21);}
.rh-netbar-zero{position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:rgba(242,247,238,.55);}
.rh-netbar-fill{position:absolute;top:1px;bottom:1px;border-radius:4px;animation:barGrow .5s var(--ease) both;}
.rh-netbar-fill.neg{right:50%;transform-origin:right;background:linear-gradient(270deg,rgba(255,72,72,.75),rgba(232,64,64,.35));}
.rh-netbar-fill.pos{left:50%;transform-origin:left;background:linear-gradient(90deg,rgba(76,214,87,.75),rgba(67,177,75,.35));}
.rh-net-val{font-family:var(--mono);font-size:14px;font-weight:600;white-space:nowrap;}
.rh-row-acts{display:flex;gap:7px;justify-content:flex-end;}

/* ══════════ CLOSED RECORDS ══════════ */
.rh-closed{margin-top:16px;border:1px dashed var(--border2);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.03);}
.rh-closed-head{
  display:flex;align-items:center;gap:13px;width:100%;padding:15px 18px;min-height:44px;
  background:transparent;border:none;color:var(--t2);cursor:pointer;text-align:left;font-family:var(--body);
}
.rh-closed-head > i:first-child{color:var(--t3);font-size:15px;flex-shrink:0;}
.rh-closed-head > div{flex:1;min-width:0;}
.rh-closed-head strong{display:block;font-size:13px;font-weight:600;color:var(--text);}
.rh-closed-head span{display:block;font-size:13px;color:var(--t3);margin-top:2px;line-height:1.5;}
.rh-closed-chev{transition:transform .3s var(--ease);color:var(--t3);}
.rh-closed.open .rh-closed-chev{transform:rotate(180deg);}
.rh-closed-body{display:none;padding:0 18px 16px;}
.rh-closed.open .rh-closed-body{display:block;animation:cvIn .3s var(--ease) both;}
.rh-closed-row{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;
  border:1px solid var(--border);background:var(--panel);margin-bottom:8px;font-size:13px;
}
.rh-closed-row .rh-cl-id{font-family:var(--mono);font-size:13px;color:var(--t3);flex:1;min-width:0;word-break:break-all;}

/* ══════════ OVERTIME QUEUE ══════════ */
.rh-otbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;border-color:var(--gold-b);}
.rh-otbar-val{font-family:var(--disp);font-size:22px;font-weight:700;color:var(--gold);margin:5px 0 4px;}
.rh-otbar-sub{font-size:13px;color:var(--t3);line-height:1.5;}
.rh-otbar-acts{display:flex;gap:9px;flex-wrap:wrap;}

.rh-otgroup{margin-bottom:16px;padding:0;overflow:hidden;}
.rh-otgroup-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--border);}
.rh-otgroup-who{display:flex;align-items:center;gap:11px;flex:1;min-width:210px;}
.rh-otgroup-name{font-size:13px;font-weight:600;color:var(--text);}
.rh-otgroup-meta{font-family:var(--mono);font-size:13px;color:var(--t3);margin-top:2px;}
.rh-ifapproved{
  /* THE DESIGN'S "IF THIS QUEUE IS APPROVED" PANEL. The colours already
     matched, because --gdim and --gold-b ARE the design's G.gold and B.gold.
     The TYPE SCALE did not: the design steps UP from the current figure to
     the one after it, 14px then 16px, so the eye lands on the result. Ours
     had both at 14px and 600, so they read as equal weight and the panel
     never said which figure mattered. Padding is 13px, not 15px. */
  padding:11px 13px;border-radius:12px;border:1px solid var(--gold-b);background:var(--gdim);min-width:290px;
}
.rh-ifapproved-lbl{font-family:var(--mono);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);margin-bottom:7px;}
.rh-ifapproved-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-family:var(--mono);font-size:14px;font-weight:400;}
/* The figure BEFORE stays 14 and normal; the figure AFTER steps to 16 and
   600, which is the design's whole point. */
.rh-ifapproved-row .rh-ifa-to{font-size:16px;font-weight:600;}
.rh-ifapproved-row .rh-ifa-arrow{font-size:13px;color:var(--t3);opacity:1;}
.rh-verdict{
  padding:3px 9px;border-radius:999px;font-family:var(--mono);font-size:13px;font-weight:400;
  border:1px solid var(--border);background:var(--panel);color:var(--t2);
}
.rh-verdict.good{border-color:var(--green-b);background:var(--grdim);color:var(--green-t);}
.rh-verdict.part{border-color:var(--gold-b);background:var(--gdim);color:var(--gold);}

.rh-otrow{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.07);flex-wrap:wrap;}
.rh-otrow:last-child{border-bottom:none;}
.rh-otrow input[type=checkbox]{width:19px;height:19px;accent-color:var(--gold);cursor:pointer;flex-shrink:0;}
.rh-otrow-when{min-width:180px;}
.rh-otrow-date{font-size:13px;font-weight:600;color:var(--text);}
.rh-otrow-times{font-family:var(--mono);font-size:13px;color:var(--t3);margin-top:2px;}
.rh-otrow-amt{
  font-family:var(--mono);font-size:13px;font-weight:600;padding:5px 11px;border-radius:11px;flex-shrink:0;
  border:1px solid var(--gold-b);background:var(--gdim);color:var(--gold);
}
.rh-otrow-note{flex:1;min-width:170px;font-size:13px;color:var(--t2);line-height:1.5;}
.rh-otrow-by{font-family:var(--mono);font-size:13px;color:var(--t3);white-space:nowrap;}
.rh-otrow-acts{display:flex;gap:7px;flex-shrink:0;}

/* ══════════ AUDIT ══════════ */
.rh-note{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border-radius:12px;margin-bottom:16px;font-size:13px;line-height:1.6;}
.rh-note i{flex-shrink:0;margin-top:2px;}
.rh-note-blue{border:1px solid var(--blue-b);background:var(--bldim);color:#a9d2ff;}
.rh-note-gold{border:1px solid var(--gold-b);background:var(--gdim);color:var(--gold);}
.rh-note-red{border:1px solid var(--red-b);background:var(--rdim);color:var(--red-t);}
.rh-when{font-family:var(--mono);font-size:13px;color:var(--t3);line-height:1.5;white-space:nowrap;}
.rh-act-chip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:11px;
  font-family:var(--mono);font-size:13px;font-weight:600;white-space:nowrap;
  border:1px solid var(--border);background:var(--panel);color:var(--t2);
}
.rh-act-chip.green{border-color:var(--green-b);background:var(--grdim);color:var(--green-t);}
.rh-act-chip.red{border-color:var(--red-b);background:var(--rdim);color:var(--red-t);}
.rh-act-chip.gold{border-color:var(--gold-b);background:var(--gdim);color:var(--gold);}
.rh-act-chip.blue{border-color:var(--blue-b);background:var(--bldim);color:#a9d2ff;}
.rh-reason{font-size:13px;line-height:1.55;color:var(--t2);min-width:220px;}

/* ══════════ EMPTY + SKELETON ══════════ */
.rh-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:36px 20px;color:var(--t3);}
.rh-empty i{font-size:26px;color:var(--gold);opacity:.55;}
.rh-empty p{margin:0;font-size:13px;line-height:1.65;max-width:46ch;}
.skel{
  display:inline-block;width:100%;height:1em;border-radius:6px;
  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.14) 37%,rgba(255,255,255,.06) 63%);
  background-size:400% 100%;animation:shim 1.4s ease-in-out infinite;
}

/* ══════════ OVERLAYS ══════════ */
.rh-scrim{
  /* THE DESIGN'S om-scrim, exactly. Ours was a different frame entirely:
     a greener black at .72, a 6px blur and z-index 200 where the design uses
     a neutral rgba(0,0,0,.72), a 4px blur and 900. The rota board was ported
     to this frame; this page never was, which is why its overlays "look
     nothing like" the design even when their content is right. */
  position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.rh-scrim.show{display:flex;animation:fadeIn .25s var(--ease) both;}
.rh-modal{
  /* om-card: ONE padded box, not a head/body/foot sandwich with rules
     between. 26px 24px, 16px radius, the design's 165deg gradient, and a
     viewport clamp so it never touches the edges of a small screen. */
  width:100%;max-width:min(600px,calc(100vw - 24px));max-height:calc(100vh - 40px);
  overflow-y:auto;border-radius:16px;padding:26px 24px;
  border:1px solid rgba(255,255,255,.21);background:linear-gradient(165deg,#172213,#111a0e);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.75);animation:mIn .32s cubic-bezier(.16,1,.3,1) both;
}
/* THE COLOURED LEFT EDGE. The design uses it to say what kind of action
   an overlay is before a word of it is read: red on the one that throws
   work away, blue on the manual adjustment that bypasses the normal
   path (which also gets its own cooler background, so it never reads as
   routine). Every other overlay carries none. */
.rh-modal[data-tone="destructive"]{border-left:3px solid #ff4848;}
.rh-modal[data-tone="override"]{
  border-left:3px solid #4a9eff;
  background:linear-gradient(165deg,#141f22,#0f1618);
}
/* A wheel inside the overlay must not chain out to the page behind it. */
.rh-modal{overscroll-behavior:contain;}
.rh-modal.w760{max-width:min(760px,calc(100vw - 24px));}
.rh-modal.w480{max-width:min(480px,calc(100vw - 24px));}
/* The card owns the padding now; these are sections of one flow, so their
   own padding and the rules between them go. */
.rh-mod-head{padding:0;border-bottom:0;}
.rh-mod-eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);}
.rh-mod-title{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--text);margin:7px 0 0;line-height:1.25;text-wrap:pretty;}
.rh-mod-blurb{font-size:13px;line-height:1.62;color:rgba(242,247,238,.92);margin:13px 0 0;text-wrap:pretty;}
.rh-mod-body{padding:0;margin-top:15px;}
.rh-mod-acts{display:flex;gap:10px;justify-content:flex-end;padding:0;margin-top:20px;border-top:0;flex-wrap:wrap;}
.rh-mod-person{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:12px;border:1px solid var(--border);background:var(--panel);margin-bottom:15px;}
.rh-mod-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:15px;}
.rh-mod-meta > div{padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--panel);}
.rh-mod-meta dt{font-family:var(--mono);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(242,247,238,.68);margin:0 0 6px;}
.rh-mod-meta dd{margin:0;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--text);}
.rh-preview{
  padding:14px 16px;border-radius:12px;border:1px dashed var(--gold-b);background:var(--gdim);
  font-family:var(--mono);font-size:14px;color:var(--gold);text-align:center;margin:14px 0;line-height:1.7;
}
.rh-err{display:none;margin-top:10px;padding:10px 13px;border-radius:10px;border:1px solid var(--red-b);background:var(--rdim);color:var(--red-t);font-size:13px;}
.rh-err.show{display:block;}
/* The design writes field labels in the FULL text colour, not the muted
   one. A label at .62 reads as help text, which is what ours looked like
   next to the answer it is asking for. */
.rh-mod-body label{display:block;font-size:13px;color:var(--text);margin:0 0 7px;}
.rh-mod-body input[type=text],.rh-mod-body input[type=number],.rh-mod-body select,.rh-mod-body textarea{
  /* Design values: a 46px control on a .34 border, which is brighter than
     the panel border used elsewhere so a field reads as something you can
     type in rather than as another panel. */
  width:100%;min-height:46px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.10);color:var(--text);font-size:14px;font-family:var(--body);margin-bottom:13px;
}
.rh-mod-body textarea{min-height:82px;padding:11px 12px;resize:vertical;line-height:1.55;}
.rh-help{font-size:13px;color:var(--t3);margin:-8px 0 13px;line-height:1.5;}

/* ══════════ PERSON DRAWER ══════════ */
/* ════════════════════════════════════════════════════════════════
   THE DESIGN'S OVERLAY, VALUE FOR VALUE.

   Extracted from "Rota Hours.dc.html" (the overlay renderer at the
   OVERLAYS block) rather than eyeballed. Two things to know:

   1. The design works in its own text tokens, T2 rgba(242,247,238,.92)
      and T3 rgba(242,247,238,.68), where the portal's --t2/--t3 are
      .88/.62. Inside the overlay the design's values are used literally.
      Changing --t2/--t3 page wide would have rippled into every other
      surface, so it is scoped here.
   2. The full record is data-drawer="true": a RIGHT EDGE, FULL HEIGHT
      variant of this same card, not a separate component. That is why
      the header, padding, meta grid and action row below are shared.
   ════════════════════════════════════════════════════════════════ */
/* The background scroll lock is NOT page-local. js/scroll-lock.js is
   injected into every page by build.js and now matches .rh-scrim, so it
   handles this board the same way it handles the other 250 overlay roots,
   with the scrollbar-gutter compensation and the iOS rubber-band fix that
   a hand-rolled lock here would have missed. A duplicate was written here
   first; this note is what is left of it. */

.rh-grab{display:none;}

/* ── the shared header: accent disc, eyebrow and title, close ─────── */
.rh-ovh{display:flex;align-items:flex-start;gap:13px;}
.rh-ovh-disc{
  width:40px;height:40px;flex:0 0 auto;border-radius:50%;
  border:1px solid rgba(240,200,50,.34);background:rgba(212,175,55,.12);
  display:flex;align-items:center;justify-content:center;
}
.rh-ovh-disc i{font-size:14px;}
.rh-ovh-txt{flex:1 1 auto;min-width:0;}
.rh-ovh-x{
  width:44px;height:44px;flex:0 0 auto;border:1px solid rgba(255,255,255,.21);
  border-radius:10px;background:rgba(255,255,255,.05);color:#f2f7ee;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.rh-ovh-x:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.34);}
.rh-ovh-x i{font-size:13px;}

/* ── the notice: explains a position rather than restating it ─────── */
.rh-ovnotice{
  margin-top:15px;display:flex;align-items:flex-start;gap:11px;padding:14px;
  border:1px solid rgba(240,200,50,.34);border-radius:13px;background:rgba(212,175,55,.12);
}
.rh-ovnotice > i{margin-top:3px;font-size:13px;flex:0 0 auto;}
.rh-ovnotice > div{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.6;color:rgba(242,247,238,.92);text-wrap:pretty;}

/* ── the person block ────────────────────────────────────────────── */
.rh-rec-id{
  display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.21);background:rgba(255,255,255,.05);flex-wrap:wrap;
}
.rh-rec-av{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f0c832,#f7d94e);color:#0c1109;
  font-family:var(--mono);font-size:14px;font-weight:600;
}
.rh-rec-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.rh-rec-who{flex:1 1 160px;min-width:0;}
.rh-rec-name{font-size:14px;font-weight:600;color:var(--text);line-height:1.3;word-break:break-word;}
.rh-rec-sub{font-family:var(--mono);margin-top:4px;font-size:13px;color:rgba(242,247,238,.68);line-height:1.45;word-break:break-word;}
.rh-rec-net{flex:0 0 auto;text-align:right;margin-left:auto;}
.rh-rec-net-lbl{font-family:var(--mono);font-size:13px;text-transform:uppercase;color:rgba(242,247,238,.68);}
.rh-rec-net-val{font-family:var(--mono);margin-top:4px;font-size:16px;font-weight:600;white-space:nowrap;}

/* ── the meta grid: SIX cells on the record, not four ────────────── */
.rh-rec-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}

/* ── section heads and the print control ─────────────────────────── */
.rh-rec-sechead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;}
.rh-rec-sechead .rh-drw-sec{margin:0;}
.rh-rec-note{font-size:13px;line-height:1.6;color:rgba(242,247,238,.68);margin:9px 0 0;text-wrap:pretty;}

/* ── the timeline ────────────────────────────────────────────────── */
.rh-tl{margin-top:14px;display:flex;flex-direction:column;gap:0;}
.rh-tl-item{display:flex;gap:13px;}
.rh-tl-rail{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;width:34px;}
.rh-tl-disc{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(255,255,255,.21);
  display:flex;align-items:center;justify-content:center;
}
.rh-tl-disc i{font-size:12px;}
.rh-tl-line{flex:1 1 auto;width:1px;min-height:14px;background:rgba(255,255,255,.21);}
.rh-tl-item.is-last .rh-tl-line{background:transparent;}
.rh-tl-body{flex:1 1 auto;min-width:0;padding-bottom:16px;}
.rh-tl-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.rh-tl-lbl{font-size:13px;font-weight:600;color:var(--text);}
.rh-tl-amt{font-family:var(--mono);font-size:14px;font-weight:600;}
.rh-tl-when{font-family:var(--mono);margin-top:5px;font-size:13px;color:rgba(242,247,238,.68);}
.rh-tl-ba{font-family:var(--mono);margin-top:7px;display:flex;align-items:center;gap:9px;font-size:13px;flex-wrap:wrap;}
.rh-tl-ba-from{color:rgba(242,247,238,.68);}
.rh-tl-ba .fa-arrow-right{font-size:10px;color:rgba(242,247,238,.68);}
.rh-tl-ba-to{font-weight:600;color:var(--text);}
.rh-tl-reason{
  margin-top:8px;padding:11px 12px;border-left:2px solid rgba(255,255,255,.21);
  border-radius:0 10px 10px 0;background:rgba(255,255,255,.028);
  font-size:13px;line-height:1.55;color:rgba(242,247,238,.92);text-wrap:pretty;
}

/* ── the action row ──────────────────────────────────────────────── */
.rh-mod-acts .rh-btn{min-height:48px;padding:0 18px;border-radius:12px;font-size:14px;}

/* ── data-drawer: the record rides the right edge, full height ───── */
.rh-scrim[data-drawer="true"]{align-items:stretch;justify-content:flex-end;padding:0;}
.rh-scrim[data-drawer="true"] .rh-modal{
  max-width:min(560px,100vw);max-height:100vh;height:100vh;border-radius:0;
  border-left:1px solid rgba(240,200,50,.34);
  animation:drIn .38s cubic-bezier(.16,1,.3,1) both;
}

/* ── below 640 every overlay becomes a bottom sheet ──────────────── */
@media(max-width:640px){
  .rh-scrim{align-items:flex-end;padding:0;}
  .rh-modal{
    max-width:100% !important;border-radius:18px 18px 0 0;max-height:92vh;
    padding:22px 18px calc(22px + env(safe-area-inset-bottom));
    animation:shIn .34s cubic-bezier(.16,1,.3,1) both;
  }
  .rh-scrim[data-drawer="true"]{align-items:flex-end;}
  .rh-scrim[data-drawer="true"] .rh-modal{
    height:92vh;max-width:100%;border-radius:18px 18px 0 0;border-left:none;
    animation:shIn .34s cubic-bezier(.16,1,.3,1) both;
  }
  .rh-grab{display:block;width:44px;height:4px;margin:0 auto 16px;border-radius:999px;background:rgba(255,255,255,.28);}
  .rh-mod-acts{flex-direction:column-reverse;}
  .rh-mod-acts .rh-btn{width:100%;}
}

/* Print this record: the card is the document, everything else is chrome. */
@media print{
  body > *:not(.rh-scrim){display:none !important;}
  .rh-scrim{position:static !important;display:block !important;padding:0 !important;
            background:#fff !important;backdrop-filter:none !important;}
  .rh-modal{max-width:none !important;max-height:none !important;height:auto !important;
            overflow:visible !important;border:0 !important;background:#fff !important;
            box-shadow:none !important;animation:none !important;}
  .rh-modal *{color:#111 !important;}
  .rh-mod-acts,.rh-ovh-x,.rh-rec-sechead .rh-btn,.rh-grab{display:none !important;}
}

/* The design's section heads are Cinzel 18/600, not 16/700. */
.rh-drw-sec{font-family:var(--disp);font-size:18px;font-weight:600;color:var(--text);margin:16px 0 11px;}
.rh-drw-sec:first-child{margin-top:0;}
/* The old drawer timeline lived here. It loaded AFTER the design's
   rules and quietly beat them on every shared property, which is how
   the reason block computed margin-top:5px against a declared 8px.
   Its markup is gone, so the rules go with it. */

/* ══════════ TOAST ══════════ */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(120%);z-index:300;
  display:flex;align-items:center;gap:10px;padding:13px 20px;border-radius:13px;
  border:1px solid var(--green-b);background:rgba(23,34,19,.97);color:var(--text);font-size:13px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.7);transition:transform .4s var(--ease);max-width:calc(100vw - 32px);
}
#toast.show{transform:translateX(-50%) translateY(0);}
#toast i{color:var(--green);}
#toast.error{border-color:var(--red-b);}
#toast.error i{color:var(--red);}

/* ══════════ READ-ONLY MODE ══════════
   One attribute hook hides every write control. The rules layer still
   denies the write; this only stops the interface offering something that
   would fail. Mirrors body[data-rota-readonly] on the rota board. */
body[data-rh-readonly="true"] [data-action="rh.openSettle"],
body[data-rh-readonly="true"] [data-action="rh.openAdjust"],
body[data-rh-readonly="true"] [data-action="rh.openBulk"],
body[data-rh-readonly="true"] [data-action="rh.openApprove"],
body[data-rh-readonly="true"] [data-action="rh.openDecline"],
body[data-rh-readonly="true"] [data-action="rh.otAll"],
body[data-rh-readonly="true"] [data-action="rh.otNone"],
body[data-rh-readonly="true"] [data-action="rh.selAll"],
body[data-rh-readonly="true"] .rh-th-sel,
body[data-rh-readonly="true"] .rh-sel-cell,
body[data-rh-readonly="true"] .rh-otrow-acts,
body[data-rh-readonly="true"] .rh-otrow > input[type=checkbox],
body[data-rh-readonly="true"] .rh-bulkbar{display:none !important;}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:1200px){
  .rh-shell{grid-template-columns:240px minmax(0,1fr);}
  .rh-th-net{width:220px;}
}
@media(max-width:1100px){
  .rh-shell{grid-template-columns:1fr;}
  .rh-side{position:static;flex-direction:row;flex-wrap:wrap;}
  .rh-nav-card{flex:1;min-width:280px;}
  .rh-focus-card{flex:1;min-width:260px;}
  .rh-nav-item.active::before{display:none;}
}
@media(max-width:820px){
  #hdr{padding:10px 14px;gap:9px;}
  .page-pill{display:none;}
  .hdr-back-btn span{display:none;}
  .rh-hero-title{font-size:22px;}
  .rh-shell{padding:14px;gap:14px;}
}
@media(max-width:640px){
  #hdr{flex-wrap:wrap;min-height:auto;}
  .hdr-clock{display:none;}
  .rh-user-text > span:first-child{max-width:110px;}
  .rh-hero{padding:18px;}
  .rh-hero-title{font-size:20px;}
  .rh-kpi-val{font-size:26px;}
  .rh-otbar{flex-direction:column;align-items:stretch;}
  .rh-otbar-acts .rh-btn{flex:1;}
  .rh-mod-acts{flex-direction:column-reverse;}
  .rh-mod-acts .rh-btn{width:100%;}}
@media(max-width:540px){
  .rh-side{flex-direction:column;}
  .rh-nav-card,.rh-focus-card{min-width:0;}
  .rh-filter-row{flex-direction:column;align-items:stretch;}
  .rh-field,.rh-field-grow{min-width:0;width:100%;}
  .rh-legend{flex-direction:column;align-items:flex-start;}
}
@media(max-width:400px){
  .rh-shell{padding:10px;}
  .rh-card{padding:14px;}
  .rh-hero{padding:15px;}
  .rh-hero-title{font-size:18px;}
  .rh-kpi-val{font-size:23px;}
  .rh-focus-val{font-size:26px;}
}

/* ── THE APPROVAL PREVIEW TABLE (design) ─────────────────────────────
   "Every change this will write": one row per person, what is being
   applied, and the net position before and after. It was a run of
   "name: before to after" separated by <br>, which is not readable at
   four people and not checkable at forty. Design values: label mono 13px
   at 1.4px uppercase, table min-width 520 inside a scroller, numeric
   columns right aligned, the applying figure gold, the before figure
   muted, the after figure 600 weight in its own state colour. */
.rh-prev-lbl{
  margin-top:15px;font-family:var(--mono);font-size:13px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--t3);
}
.rh-prev-wrap{
  margin-top:9px;overflow-x:auto;
  border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.05);
}
.rh-prev-tbl{width:100%;min-width:520px;border-collapse:separate;border-spacing:0;}
.rh-prev-tbl th{
  padding:11px 12px;text-align:left;white-space:nowrap;
  font-family:var(--mono);font-size:13px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--t3);border-bottom:1px solid var(--border);
}
.rh-prev-tbl td{
  padding:11px 12px;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rh-prev-tbl tr:last-child td{border-bottom:none;}
.rh-prev-tbl .num{text-align:right;font-family:var(--mono);}
.rh-prev-apply{color:var(--gold);}
.rh-prev-before{color:var(--t3);}
.rh-prev-after{font-weight:600;}
.rh-prev-after.is-credit{color:#8ce694;}
.rh-prev-after.is-owing{color:#ff8f8f;}
.rh-prev-after.is-flat{color:var(--t2);}

/* ── THE DESIGN'S BADGES AND CHIPS ───────────────────────────────────
   Eight of them, one component. Ours was `.rh-state` at 11px in an 11px
   radius with three variants and no icon; the design draws a 999px
   capsule at 13px with a leading 11px icon, padding 6px 12px and gap 7,
   and defines eight readings. Values are the design's own. */
.rh-state{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  font-family:var(--mono);font-size:13px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.21);background:rgba(255,255,255,.05);color:var(--t2);
}
.rh-state > i{font-size:11px;}
.rh-state.credit{border-color:rgba(76,214,87,.40);background:rgba(67,177,75,.12);color:#8ce694;}
.rh-state.owing{border-color:rgba(255,72,72,.45);background:rgba(232,64,64,.12);color:#ff8f8f;}
.rh-state.balanced{border-color:rgba(255,255,255,.21);background:rgba(255,255,255,.05);color:var(--t2);}
.rh-state.pending{border-color:rgba(240,200,50,.34);background:rgba(212,175,55,.12);color:var(--gold);}
/* Dashed: a thing that has not happened yet, or a record that is closed. */
.rh-state.would{border:1px dashed rgba(240,200,50,.55);background:rgba(212,175,55,.12);color:var(--gold);}
.rh-state.adjust{border-color:rgba(74,158,255,.40);background:rgba(74,158,255,.10);color:#4a9eff;}
.rh-state.closed{border:1px dashed rgba(255,255,255,.34);background:rgba(255,255,255,.028);color:var(--t3);}
.rh-state.viewing{border-color:rgba(74,158,255,.40);background:rgba(74,158,255,.10);color:#4a9eff;}

/* ── THE DESIGN'S FOUR BUTTON KINDS ──────────────────────────────────
   Primary is the gold gradient on dark text; secondary a gold tint;
   quiet the neutral panel; destructive the red tint; and a disabled
   button is the quiet one at reduced opacity, never a fifth colour. */
.rh-btn{min-height:44px;padding:0 16px;border-radius:11px;font-size:13px;}
.rh-btn-gold{
  background:linear-gradient(135deg,#f0c832,#f7d94e);
  border:1px solid rgba(240,200,50,.34);color:#0c1109;font-weight:700;
}
.rh-btn-secondary{
  background:rgba(212,175,55,.12);border:1px solid rgba(240,200,50,.34);color:var(--text);
}
.rh-btn-ghost{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.21);color:var(--text);
}
.rh-btn-red{
  background:rgba(232,64,64,.12);border:1px solid rgba(255,72,72,.45);color:#ff8f8f;
}
.rh-btn[disabled]{opacity:.55;cursor:not-allowed;}

/* ── SKELETON TREATMENT (design) ─────────────────────────────────────
   "Every section loads in its own shape, so nothing jumps when the
   figures arrive." A 38px disc, two text lines at 13px, and a 110x20
   block on the right: the shape of a people row. */
.rh-skel{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.rh-skel-row{display:flex;align-items:center;gap:12px;}
/* after .rh-skel .skel, or its 8px radius squares off the disc */
/* Two classes, so this beats the generic .rh-skel .skel below it whatever
   the source order. At equal specificity the generic rule won and its
   8px radius squared the disc off: a test asserting the CSS TEXT passed
   the whole time, because reading a rule cannot tell you it is losing.
   Caught by dumping the computed value. */
.rh-skel .skel.rh-skel-av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;}
.rh-skel-id{flex:1 1 auto;min-width:0;}
.rh-skel-id .skel{height:13px;display:block;}
.rh-skel-id .skel + .skel{margin-top:8px;}
.rh-skel-end{width:110px;height:20px;flex:0 0 auto;}
.rh-skel .skel{
  border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.11),rgba(255,255,255,.05));
  background-size:200% 100%;animation:shim 1.25s linear infinite;
}
.rh-skel-cell{padding:16px 12px !important;}

/* Two header controls fell under the 44px touch target on a phone: the back
   button at 39x40 and the icon button at 38 wide. Measured, not assumed. */
/* The header is #hdr, not .rh-hdr: my first selector matched nothing.
   Measured at 390: the back link 39x40 and the sign-out 38 wide, both under
   the portal's 44px touch target. css/header-command.css loads after this
   file and sets height on .hdr-icon-btn with !important, so this must too,
   scoped to this page. */
body #hdr .hdr-back-btn,
body #hdr .hdr-icon-btn{
  min-width:44px !important;min-height:44px !important;
  height:auto !important;
  display:inline-flex;align-items:center;justify-content:center;
}