/* Dugout — Shashwat ka self-designed light theme (claude.design import,
   18 Aug). Bone canvas (#F4F2EC), deep green brand (#205C3B), dark-green
   sidebar shell, IBM Plex Sans body + Barlow Condensed display, square-dot
   status chips, floating save bar. Self-hosted fonts — no CDN dependency. */

/* IBM Plex Sans: latin ek variable file (wght 400-600), Devanagari statics
   unicode-range se gated — Roman-script Hinglish pe kabhi download nahi hote */
@font-face{
  font-family:'Plex';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/static/fonts/plex-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plex';font-style:normal;font-weight:400;font-display:swap;
  src:url('/static/fonts/plex-deva-400.woff2') format('woff2');
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face{
  font-family:'Plex';font-style:normal;font-weight:500;font-display:swap;
  src:url('/static/fonts/plex-deva-500.woff2') format('woff2');
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face{
  font-family:'Plex';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/plex-deva-600.woff2') format('woff2');
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
/* Barlow Condensed — display face: wordmark (700 italic), page titles,
   times, day heads */
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;
  src:url('/static/fonts/barlow-cond-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url('/static/fonts/barlow-cond-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('/static/fonts/barlow-cond-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';font-style:italic;font-weight:700;font-display:swap;
  src:url('/static/fonts/barlow-cond-700-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#F4F2EC;            /* bone canvas */
  --surface:#FFFFFF;       /* cards, table */
  --surface-2:#FBFAF5;     /* day heads, table header */
  --line:#D9D6C8;          /* controls / strong boundaries */
  --line-card:#E0DDD0;     /* card borders */
  --line-soft:#E8E5DA;     /* dividers */
  --line-faint:#F0EDE2;    /* row dividers */
  --tx:#1A1D18;            /* ink */
  --mut:#5D6156;           /* secondary text */
  --faint:#7A7E72;         /* labels, units */
  --cal-faint:#9A9E90;     /* year-mode ke match-free din */
  --brand:#205C3B;         /* deep green */
  --brand-deep:#16452B;
  --brand-ink:#F4F2EC;     /* text ON green */
  --hover-tint:#E7EFE5;    /* green-washed hover/selection */
  --ok:#1F6B40;  --warn:#8F5A0C;  --bad:#AF3B2C;
  --ok-bg:#E3F0E4; --warn-bg:#F5ECD8; --bad-bg:#F7E7E2;
  --side-bg:#16211A;       /* sidebar: near-black green */
  --side-mut:#9AA595;
  --side-sec:#5E6A5E;
  --side-on:#EAF2E8;
  --header-h:52px;
  --radius:8px; --radius-s:6px;
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px;
  --trans:140ms ease;
  --font-sans:'Plex',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Barlow Condensed','Arial Narrow',sans-serif;
  --shadow-1:0 1px 2px rgba(26,29,24,.06);
  --shadow-pop:0 12px 32px rgba(26,29,24,.16);
}
*{box-sizing:border-box;margin:0}
html{scroll-padding-top:calc(var(--header-h) + 8px)}
body{background:var(--bg);color:var(--tx);
  font:15px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-deep);text-decoration:underline}
.num,.time,.count{font-variant-numeric:tabular-nums}
.mut{color:var(--mut)}
/* design ka time-unit label: chhota, faint, body face (display nahi) */
.unit{font-family:var(--font-sans);font-size:11px;color:var(--faint);
  font-weight:500;letter-spacing:.05em}

/* ---------- focus / motion / a11y ---------- */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
.side :focus-visible,.actionbar :focus-visible{outline-color:#6FBF8A}
.skip-link{position:absolute;left:-9999px;top:0;z-index:60;background:var(--brand);
  color:var(--brand-ink);padding:8px 14px;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* ---------- shell: dark-green sidebar + light maincol ---------- */
body.shelled{display:flex;min-height:100dvh}
.wordmark{font-family:var(--font-display);font-weight:700;font-style:italic;
  letter-spacing:.14em;color:var(--brand-ink)}
.side{width:206px;flex:none;background:var(--side-bg);display:flex;
  flex-direction:column;position:sticky;top:0;height:100dvh;overflow:hidden;
  transition:width .22s ease-out,transform .22s ease-out}
/* PR-15: collapse/drawer animation ke dauran content apni 206px width pe
   rigid rahe — squish nahi, clip hota hai */
.side-brand,.side-nav,.side-user{width:206px;flex-shrink:0}
/* collapse state: inline head script localStorage se pre-paint lagata hai.
   PR-15: display:none -> smooth width collapse; visibility delay se closed
   sidebar focus/AT se bhi bahar (pehle jaisa) */
@media(min-width:821px){
  html.side-off .side{width:0;visibility:hidden;
    transition:width .22s ease-out,visibility 0s .22s}
}
.side-brand{padding:18px 12px 20px 16px;display:flex;align-items:center;gap:9px}
.side-brand .wordmark{font-size:21px}
.side-collapse{margin-left:auto;width:24px;height:24px;min-height:24px;
  border-radius:5px;border:0;background:rgba(255,255,255,.07);
  color:var(--side-mut);font-size:12px;font-weight:400;padding:0;
  display:grid;place-items:center;
  transition:background var(--trans),color var(--trans)}
.side-collapse:hover{background:rgba(255,255,255,.15);border:0;color:#FFFFFF}
.side-nav{display:flex;flex-direction:column;gap:1px;padding:0 8px;min-height:0;
  overflow-y:auto}
.side-sec{font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;color:var(--side-sec);padding:14px 10px 4px}
.side-sec:first-child{padding-top:4px}
.side-nav a{display:flex;align-items:center;border-radius:5px;padding:8px 10px;
  font-size:13px;font-weight:500;color:var(--side-mut);
  transition:color var(--trans),background var(--trans)}
.side-nav a:hover{color:#FFFFFF;background:rgba(255,255,255,.07);text-decoration:none}
.side-nav a[aria-current="page"]{background:rgba(111,191,138,.13);
  color:var(--side-on);box-shadow:inset 2px 0 0 #6FBF8A}
.side-user{margin-top:auto;padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:10px}
.avatar{width:28px;height:28px;border-radius:6px;background:var(--brand);
  color:var(--brand-ink);display:grid;place-items:center;font-weight:600;
  font-size:11px;flex:none;text-transform:uppercase}
.side-user-meta{min-width:0}
.side-user-meta .nm{color:#E7EAE2;font-size:12.5px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user-meta .rl{color:#7A857A;font-size:11px}
.maincol{flex:1;min-width:0;display:flex;flex-direction:column}

/* ---------- header ---------- */
header.app{position:sticky;top:0;z-index:30;background:var(--bg);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
  min-height:var(--header-h);padding:8px clamp(14px,3vw,26px)}
.htitle{font-family:var(--font-display);font-weight:700;font-size:19px;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
/* mobile header wordmark — desktop pe chhupa */
.m-wordmark{display:none;font-size:19px;color:var(--side-bg)}
.side-open{width:28px;height:28px;min-height:28px;border-radius:5px;
  border:1px solid var(--line);background:var(--surface);color:var(--mut);
  font-size:13px;font-weight:400;padding:0;display:grid;place-items:center;
  transition:color var(--trans),border-color var(--trans)}
.side-open:hover{color:var(--tx);border-color:var(--faint);background:var(--surface)}

/* account menu: <details> dropdown, design ka 248px card */
.acct{position:relative;margin-left:auto}
.acct > summary{list-style:none;cursor:pointer;display:block;border-radius:6px}
.acct > summary::-webkit-details-marker{display:none}
.acct-menu{position:absolute;top:36px;right:0;width:248px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-pop);padding:6px;z-index:40}
@media (prefers-reduced-motion: no-preference){
  .acct-menu{animation:drop .12s ease-out}
}
.acct-id{padding:8px 10px 6px}
.acct-id .nm{font-weight:600;font-size:13.5px}
.acct-id .rl{font-size:12px;color:var(--mut)}
.menu-div{height:1px;background:var(--line-soft);margin:4px}
.signout{display:flex;width:100%;border:0;background:none;text-align:left;
  border-radius:5px;padding:7px 10px;font-size:13.5px;font-weight:400;
  color:var(--bad);min-height:auto;transition:background var(--trans)}
.signout:hover{background:var(--bad-bg);border:0;color:var(--bad)}

/* mobile tab nav — sidebar chhup jata hai */
.m-tabs{display:none;gap:2px;padding:0 10px;overflow-x:auto;background:var(--bg);
  border-bottom:1px solid var(--line);scrollbar-width:none}
.m-tabs::-webkit-scrollbar{display:none}
.m-tabs a{border:0;padding:8px 12px 10px;font-size:13px;font-weight:500;
  white-space:nowrap;flex:none;color:var(--mut)}
/* 5+ tabs (My calendar, Board, Admin, Agent) 390px pe strip se bahar jaate
   hain aur scrollbar hidden hai: app.js `.scrolls` lagata hai jab tak right
   mein aur tabs hon -> sticky fade = "aage aur hai" cue (same as .ovl-tl-card) */
.m-tabs.scrolls::after{content:"";position:sticky;right:0;flex:none;width:28px;
  margin-left:-28px;pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,0),var(--bg))}
.m-tabs a:hover{color:var(--tx);text-decoration:none}
.m-tabs a[aria-current="page"]{color:var(--brand);box-shadow:inset 0 -2px 0 var(--brand);
  font-weight:600}

main{width:100%;max-width:1100px;margin:0 auto;flex:1;
  padding:clamp(12px,2vw,20px) clamp(12px,3vw,24px) 110px}
body.bare main{max-width:none;padding:0}

/* ---------- page intro ---------- */
.page-head{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-2)}
.page-head .meta{color:var(--faint);font-size:12px}

/* ---------- cards / day sections / match rows ---------- */
.card{background:var(--surface);border:1px solid var(--line-card);
  border-radius:var(--radius);padding:14px 16px;margin:8px 0;box-shadow:var(--shadow-1)}
.card.empty{border-style:dashed;border-color:var(--line);background:transparent;
  box-shadow:none;max-width:560px}
.day{background:var(--surface);border:1px solid var(--line-card);
  border-radius:var(--radius);overflow:hidden;margin:0 0 16px}
.dayhead{display:flex;align-items:baseline;gap:10px;padding:6px 14px;
  background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
.dayhead .d{font-family:var(--font-display);font-weight:700;font-size:16px;
  letter-spacing:.05em;text-transform:uppercase}
.dayhead .c{font-size:11px;color:var(--faint);letter-spacing:.04em;
  text-transform:uppercase}
/* QA round-2 #22: when-column 96px + venue nowrap => "6:30pm CST (Fri)"
   title pe chadh jaata tha — column 110px, venue wrap karti hai.
   QA 20 Aug 5pm: align-items center tha — alag line-count wali rows mein
   pehli lines alag height pe tairti thin ("Abhi koi assigned nahi" beech
   mein, "Crew:" upar).
   QA 21 Aug: start box-TOPS align karta tha, baselines nahi — columns ke
   font-size/line-height alag hain to crew line title se ~4px upar dikhti
   thi. baseline = har column ki pehli line ek typographic baseline pe. */
.match{display:grid;grid-template-columns:110px 1.1fr 1.3fr auto;gap:var(--sp-3);
  align-items:baseline;padding:9px 14px;border-bottom:1px solid var(--line-faint)}
/* QA 21 Aug round-3: har .match apna alag grid tha — badge (auto) column
   ki width row-by-row alag ("UNASSIGNED" chauda, "FULL 3/3" patla) to
   crew column ka left edge rows ke beech ragged dikhta tha. Day-section
   ab shared grid hai aur .match subgrid se uske tracks leta hai — auto
   column poore din ke widest badge pe EK baar resolve hoti hai, saare
   left edges ek seedh mein. Pehla track 124px (110 + 14 padding): subgrid
   mein .match ki side-padding edge-track se katati hai, 110px rakhte to
   when-col 96px pe girta aur QA-#22 ka venue-wrap wapas aata. Admin ki
   .day.adminsec sections :has(> .match) scope se bahar hi rehti hain. */
.day:has(> .match){display:grid;grid-template-columns:124px 1.1fr 1.3fr auto;
  column-gap:var(--sp-3)}
.day:has(> .match) .dayhead{grid-column:1/-1}
.day:has(> .match) .match{grid-column:1/-1;grid-template-columns:subgrid}
.day:has(> .match) .staff{justify-self:end}
.match:last-child{border-bottom:0}
.match .when .ist{font-family:var(--font-display);font-weight:600;font-size:19px;
  line-height:1.15;white-space:nowrap}
.match .when .venue{color:var(--faint);font-size:11.5px;
  font-variant-numeric:tabular-nums}
.match .title{font-weight:600;font-size:14.5px;display:flex;align-items:center;
  gap:7px;flex-wrap:wrap}
.substage{font-size:11px;color:var(--faint);letter-spacing:.06em;
  text-transform:uppercase;margin-top:1px}
.crewline{font-size:13px}
.crewline b{font-weight:600}
.backupline{font-size:12px;color:var(--faint)}
.next-badge{font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-ink);background:var(--brand);
  border-radius:3px;padding:1.5px 6px}
/* game chip on rundown rows (19 Sep 2026): quiet outline, same scale as substage */
.gtag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx);border:1px solid var(--line);
  border-radius:3px;padding:1px 6px;vertical-align:middle}
/* History manage-mode (21 Aug): tick apni alag pehli column track mein —
   .when/.title/.crew ki alignment (round 1-4 ke fixes) bilkul untouched */
.day.manage:has(> .match){grid-template-columns:28px 124px 1.1fr 1.3fr auto}
.rowtick{width:15px;height:15px;accent-color:var(--brand);margin:2px 0 0}
.bulkbar{position:sticky;bottom:10px;z-index:30;display:flex;
  align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--line-card);border-radius:var(--radius);
  padding:10px 14px;margin:10px 0;box-shadow:var(--shadow-1)}
.page-head .managelink{margin-left:auto}

@media(max-width:700px){
  .day:has(> .match), .day.manage:has(> .match){display:block}
  .match{grid-template-columns:1fr;gap:4px}
  .match .staff{justify-self:start}
  .day:has(> .match) .staff{justify-self:start}
}

/* person page duty cards */
.pday{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.pcard{background:var(--surface);border:1px solid var(--line-card);
  border-radius:var(--radius);padding:10px 14px;display:flex;gap:12px;
  align-items:center;flex-wrap:wrap}
.pcard.bk{border-style:dashed;border-color:var(--line)}
.pcard .title{font-weight:600;font-size:14px}
.pcard .ist{font-family:var(--font-display);font-weight:600;font-size:16px}
.pcard .pinfo{flex:1;min-width:160px}
.tag{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border-radius:3px;padding:2px 8px;white-space:nowrap}
.tag.pr{background:var(--brand);color:var(--brand-ink)}
.tag.bk{border:1px solid var(--line);color:var(--mut)}

.datehead{margin:var(--sp-4) 0 var(--sp-2);font-family:var(--font-display);
  font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mut);border-bottom:1px solid var(--line);padding-bottom:3px}

/* ---------- badges & status ---------- */
.badge{font-size:11px;padding:2px 8px;border-radius:4px;background:var(--surface-2);
  color:var(--mut);white-space:nowrap;border:1px solid var(--line-soft)}
.badge.demo{color:var(--warn);background:var(--warn-bg);
  border-color:color-mix(in srgb, var(--warn) 35%, transparent);font-weight:600}
.badge.pilot{color:var(--brand);background:var(--hover-tint);
  border-color:color-mix(in srgb, var(--brand) 30%, transparent);font-weight:600}
.badge.review{color:var(--bad);background:var(--bad-bg);
  border-color:color-mix(in srgb, var(--bad) 45%, transparent)}
/* QA-6: standing-overlap flag — same banda do takrate matches pe primary.
   Warn tint (no emoji, house rule); nowrap yahan galat hota — text lamba hai */
.badge.overlap{color:var(--warn);background:var(--warn-bg);
  border-color:color-mix(in srgb, var(--warn) 35%, transparent);
  font-weight:600;white-space:normal}
/* QA-R2 T4: save ke baad needs-crew view mein tiki row ka tag — subtle
   ok-tint; refresh pe row (aur tag) apne aap chala jaata hai */
.badge.kept{color:var(--ok);background:var(--ok-bg);
  border-color:color-mix(in srgb, var(--ok) 35%, transparent);font-weight:600}
/* design ka status chip: colored text + 7px SQUARE dot, koi pill nahi */
.status{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.status::before{content:"";width:7px;height:7px;border-radius:2px;
  background:currentColor;flex:none}
.status.full{color:var(--ok)}
.status.partial{color:var(--warn)}
.status.empty{color:var(--bad)}
.status.played{color:var(--faint)}

/* ---------- filters ---------- */
/* PR-13 addendum: chip row 390px pe page overflow karati thi (scrollWidth
   620 vs 390) — design ki tarah wrap, scroll nahi */
.filters{display:flex;gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-3);
  align-items:center;flex-wrap:wrap}
.filters.bare{margin:0}
.filters a{flex:0 0 auto;padding:6px 12px;border-radius:var(--radius-s);
  background:var(--surface);color:var(--tx);font-size:12.5px;font-weight:500;
  border:1px solid var(--line);min-height:32px;display:inline-flex;
  align-items:center;transition:color var(--trans),border-color var(--trans)}
.filters a:hover{border-color:var(--faint);text-decoration:none}
.filters a.on{color:var(--brand);border-color:var(--brand);font-weight:600}
.filters label{flex:0 0 auto;white-space:nowrap}
.filters .chk{display:inline-flex;align-items:center;gap:6px;color:var(--mut);
  font-size:13px}

/* ---------- forms & buttons ---------- */
select,input[type=password],input[type=text],input[type=date]{
  background-color:var(--surface);color:var(--tx);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:7px 10px;font-size:13.5px;
  font-family:var(--font-sans);max-width:100%;min-height:36px;
  transition:border-color var(--trans)}
select:hover,input:hover{border-color:var(--faint)}
input[type=checkbox]{accent-color:var(--brand);width:16px;height:16px}
/* native chevron OS-dependent hai — consistent custom chevron */
select{appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235D6156' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
button,.btn{background:var(--brand);border:1px solid var(--brand);
  color:var(--brand-ink);font-weight:600;border-radius:var(--radius-s);
  padding:8px 16px;font-size:13.5px;cursor:pointer;font-family:var(--font-sans);
  min-height:36px;display:inline-flex;align-items:center;gap:6px;
  transition:background var(--trans),border-color var(--trans)}
button:hover,.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);
  text-decoration:none;color:var(--brand-ink)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
button.ghost,.btn.ghost{background:var(--surface);border-color:var(--line);
  color:var(--tx);font-weight:500}
button.ghost:hover,.btn.ghost:hover{background:var(--surface);
  border-color:var(--faint);color:var(--tx)}
button.brand{white-space:nowrap}
button.small{padding:5px 12px;min-height:30px;font-size:12.5px}
label{display:block;font-size:13.5px;color:var(--mut)}
label > input, label > select{margin-top:4px;display:block;width:100%}

/* ---------- toast / live status (design :631-635: fixed bottom-right) ---------- */
.toast{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;
  align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--ok);color:var(--tx);border-radius:var(--radius-s);
  padding:10px 14px;margin:0;font-size:13.5px;max-width:min(380px,calc(100vw - 24px));
  box-shadow:0 8px 24px rgba(26,29,24,.14)}
.toast::before{content:"\2713";color:var(--ok);font-weight:600}
.toast.err::before{content:"";display:none}
@media (prefers-reduced-motion: no-preference){
  .toast{animation:rise .2s cubic-bezier(.16,1,.3,1)}
}
.toast.err{border-left-color:var(--bad);color:var(--bad)}
.toast.info{border-left-color:var(--line);color:var(--mut)}

/* ---------- shared dropdown / segmented / toggle (design :141-196) ---------- */
.filterrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:14px}
.filterrow .seg a, .toolbar .seg a{color:var(--mut)}
.filterrow .seg a.on, .toolbar .seg a.on{color:var(--tx)}
.dd{position:relative}
.dd > summary{list-style:none;cursor:pointer}
.dd > summary::-webkit-details-marker{display:none}
.ddbtn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-s);
  padding:5.5px 11px;font-size:12.5px;font-weight:500;color:var(--tx);
  white-space:nowrap;transition:border-color var(--trans),color var(--trans);
  /* QA-5: label badle to button ki chaudai stable rahe — "Partially
     staffed" tak ke labels bina jump ke fit hote hain */
  min-width:150px;justify-content:space-between}
.ddbtn:hover{border-color:var(--faint)}
.ddbtn.active{border-color:var(--brand);color:var(--brand)}
.caret{color:var(--faint);font-size:9px}
.dd .menu{position:absolute;top:calc(100% + 4px);left:0;min-width:190px;
  max-width:calc(100vw - 24px);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-pop);padding:4px;z-index:45}
@media (prefers-reduced-motion: no-preference){
  .dd .menu{animation:drop .1s ease-out}
}
.menu-item{display:flex;width:100%;border:0;background:none;text-align:left;
  border-radius:5px;padding:8.5px 10px;font-size:13px;font-weight:400;
  color:var(--tx);align-items:center;gap:8px;min-height:auto;
  transition:background var(--trans)}
.menu-item:hover{background:var(--bg);text-decoration:none;color:var(--tx);border:0}
.menu-item.on{background:var(--hover-tint)}
.menu-item .check{margin-left:auto;color:var(--brand)}
.menu-item .ini{width:22px;height:22px;border-radius:5px;background:var(--bg);
  color:var(--mut);display:grid;place-items:center;font-size:9.5px;
  font-weight:600;flex:none}
.minebtn{display:inline-flex;align-items:center;border-radius:var(--radius-s);
  padding:5.5px 12px;font-size:12.5px;font-weight:500;background:var(--surface);
  border:1px solid var(--line);color:var(--mut);white-space:nowrap;
  transition:border-color var(--trans),color var(--trans)}
.minebtn:hover{border-color:var(--faint);text-decoration:none;color:var(--tx)}
.minebtn.active{background:var(--brand);border-color:var(--brand);
  color:var(--brand-ink)}
.minebtn.active:hover{color:var(--brand-ink)}
.resetlink{border:0;background:none;color:var(--brand);font-size:12.5px;
  font-weight:500;padding:4px 6px;text-decoration:underline}
/* QA-5: clean state mein Reset ghosted render hota hai — jagah reserved
   rehti hai, isliye filter lagate hi baaki controls shift nahi hote */
.resetlink.ghosted{visibility:hidden}
.listsummary{font-size:12px;color:var(--faint);margin-left:auto}
.customrange{display:flex;align-items:center;gap:6px}
.customrange input[type=date]{border:1px solid var(--line);
  border-radius:var(--radius-s);padding:5px 8px;font-size:12.5px;
  color:var(--tx);background:var(--surface);min-height:auto}
.customrange .rangeto{color:var(--faint);font-size:12px}
.applyrange{background:var(--surface);border:1px solid var(--line);
  color:var(--tx);font-weight:500;font-size:12.5px;padding:5px 12px;
  min-height:auto;border-radius:var(--radius-s)}
.applyrange:hover{background:var(--surface);border-color:var(--faint);color:var(--tx)}

/* stale-filter card (design :182-188) */
.stalecard{border:1px solid var(--line-soft);border-left:3px solid var(--bad);
  background:var(--surface);border-radius:0 8px 8px 0;padding:16px 18px;
  max-width:560px;margin-bottom:16px}
.stalecard .st-title{font-weight:600;color:var(--bad);font-size:14px}
.stalecard .st-sub{font-size:13px;color:var(--mut);margin-top:2px}
.stalecard .st-note{font-size:12px;color:var(--faint);margin-top:6px}
.stalecard .st-reset{display:inline-block;margin-top:10px;background:var(--tx);
  border-radius:var(--radius-s);padding:6px 14px;font-size:12.5px;
  font-weight:500;color:var(--brand-ink)}
.stalecard .st-reset:hover{background:#000000;color:var(--brand-ink);
  text-decoration:none}

/* dashed empty card (design :190-196, :454-459) */
.emptycard{border:1px dashed var(--line);border-radius:var(--radius);
  padding:18px 20px;max-width:560px;margin-bottom:16px}
.emptycard .et{font-weight:600;font-size:14px}
.emptycard .es{font-size:13px;color:var(--mut);margin-top:2px}
.ghostbtn{display:inline-block;margin-top:10px;background:none;
  border:1px solid var(--line);border-radius:var(--radius-s);padding:5px 13px;
  font-size:12.5px;font-weight:500;color:var(--tx)}
.ghostbtn:hover{border-color:var(--faint);text-decoration:none;color:var(--tx)}

/* rundown past rows */
.actualline{font-size:12px;color:var(--faint)}
.status.played{color:var(--faint)}

/* ---------- asli kaam (22 Aug): fc_stream evidence per past row ----------
   Dense data, isliye apni line pe wrap hota hai aur numbers tabular hain
   (varna counts row-to-row jump karte dikhte). Manual attendance line ke
   NEECHE baithta hai — dono alag signal hain, ek doosre ki jagah nahi. */
.workline{margin-top:3px;font-size:12px;color:var(--faint);
  font-variant-numeric:tabular-nums}
/* teen alag lines: roles / meta / farak. Ek hi flat flex mein sab daalne pe
   "60 clips" pichhle role-group ka hissa lagta tha — isliye meta apni line
   pe hai. Roles ke andar wrap chalta hai par ek banda-count kabhi nahi
   tootta (nowrap + nbsp). */
.workline .wrow{display:flex;flex-wrap:wrap;gap:1px 14px;align-items:baseline}
.workline .wlabel{font-weight:600;color:var(--mut)}
.workline .wgroup{white-space:nowrap}
/* role ka naam halka gehra — yahi groups ko alag karta hai (explicit "·"
   separator hataya: wrap pe line ke end mein dangling dot chhod jaata tha) */
.workline .wrole{color:var(--mut)}
.workline .wmore{color:var(--faint);opacity:.75}
.workline .wnone,.workline .wmeta{color:var(--faint)}
/* farak (planned vs asli) — yahi row ka asli signal hai, isliye thoda
   gehra; alag rang nahi, warna History ek chetavni-board lagne lagti hai */
.workline .wgaps{display:flex;flex-wrap:wrap;gap:1px 12px}
.workline .wgap{color:var(--mut)}
@media (max-width:720px){
  .workline .wrow,.workline .wgaps{gap:1px 8px}
}

/* ---------- board (PR-13: cards, design :421-619) ---------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:8px}
.toolbar .hint{font-size:12px;color:var(--faint);margin-left:auto}
/* PR-15: needs-crew filter apni state khud bolta hai */
.scopenote{font-size:12.5px;color:var(--mut);margin:2px 0 10px}
.scopenote .count{font-weight:600;color:var(--tx);
  font-variant-numeric:tabular-nums}
.rotbtn{background:var(--brand);border:0;border-radius:var(--radius-s);
  padding:6.5px 14px;font-size:12.5px;font-weight:500;color:var(--brand-ink);
  display:inline-flex;gap:7px;align-items:center;min-height:auto;
  white-space:nowrap}
.rotbtn:hover{background:var(--brand-deep);border:0}
.draft-note{font-size:12.5px;color:var(--brand);border-left:3px solid var(--brand);
  background:var(--surface);padding:6px 10px;display:inline-block;
  margin-bottom:8px}
.draft-note[hidden]{display:none}

/* table skeleton sirf semantics ke liye (caption + column headers);
   visual layout = cards */
table.cardlist{width:100%;border-collapse:collapse;margin-top:6px}
table.cardlist, .cardlist tbody, .cardlist tr, .cardlist td{display:block;
  width:100%}
.cardlist tr{margin:0 0 10px}
.cardcol{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.bcard{background:var(--surface);border:1px solid var(--line-card);
  border-radius:var(--radius);padding:11px 14px;display:flex;
  flex-direction:column;gap:8px}
.bcard.past{background:var(--surface-2);border-color:#E4E1D4}
.bcard.blocked{border-color:var(--bad)}
.bcard.drafted{box-shadow:inset 3px 0 0 var(--warn)}
.bhead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.btitle{flex:1;min-width:200px}
.btitle .t{font-weight:600;font-size:14.5px}
.btitle .tl{font-size:12.5px;color:var(--mut);margin-left:8px}
.needsnote{font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--warn)}
.edited-badge{font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand);border:1px solid var(--brand);
  border-radius:3px;padding:1px 6px}
.edited-badge[hidden]{display:none}

/* blocked banner (design :476-481) — server-rendered */
.blockbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border-left:3px solid var(--bad);background:var(--bad-bg);
  border-radius:0 6px 6px 0;padding:8px 12px;font-size:12.5px;color:#7A2A1F}
.blockbar .msg{flex:1;min-width:220px}
.reloadbtn{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:4px 11px;font-size:12.5px;
  font-weight:500;color:var(--tx);white-space:nowrap}
.reloadbtn:hover{border-color:var(--faint);text-decoration:none;color:var(--tx)}

/* editable row: slots + assign-crew + backups */
.slotrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.slotcell{display:flex;flex-direction:column;gap:3px;position:relative}
.slotlabel{font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--faint)}
select.slotsel, select.backupsel{min-width:118px;font-size:13px;
  padding:5.5px 30px 5.5px 9px;min-height:auto;border-radius:var(--radius-s)}
/* JS active (card successfully enhanced = .cardjs): natives chhup jaate
   hain, design buttons unhe sync-replace karte hain (values hamesha natives
   mein hi save hoti hain) */
.bcard.cardjs select.slotsel{position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.bcard.cardjs .bknative{position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;display:block}
.slotbtn{display:inline-flex;align-items:center;gap:8px;min-width:118px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:5.5px 9px;font-size:13px;
  font-weight:400;color:var(--tx);min-height:auto;
  transition:border-color var(--trans)}
.slotbtn:hover{background:var(--surface);border-color:var(--faint);color:var(--tx)}
.slotbtn.openslot{border-style:dashed;color:var(--faint)}
.slotbtn.openslot:hover{color:var(--faint)}
.slotbtn .caret{margin-left:auto}
.menu .open-opt{font-style:italic;color:var(--faint)}
.menu-item:hover{background:var(--hover-tint)}
.assignbtn{background:var(--surface);border:1px solid var(--brand);
  border-radius:var(--radius-s);padding:7px 12px;font-size:12.5px;
  font-weight:500;color:var(--brand);min-height:auto}
.assignbtn:hover{background:var(--surface);border-color:var(--brand-deep);
  color:var(--brand-deep)}
.extraslot{background:none;border:1px dashed var(--line);
  border-radius:var(--radius-s);padding:7px 12px;font-size:12.5px;
  font-weight:400;color:var(--mut);min-height:auto}
.extraslot:hover{background:none;border-color:var(--faint);color:var(--tx)}
.multi{width:min(280px,80vw);max-height:320px;overflow-y:auto}
.multi .search{width:calc(100% - 8px);margin:4px;border:1px solid var(--line);
  border-radius:5px;padding:7px 9px;font-size:13px;color:var(--tx);
  background:var(--surface-2);outline:none;min-height:auto}
.multi .mnote{font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);padding:2px 10px 3px}
.mfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;
  border-top:1px solid var(--line-soft);margin-top:4px;padding:6px 6px 2px}
.mfoot .cap{font-size:11px;color:var(--faint)}
.mfoot .apply{background:var(--brand);border:0;border-radius:5px;
  color:var(--brand-ink);font-size:12px;font-weight:600;padding:6px 14px;
  min-height:auto}
.mfoot .apply:hover{background:var(--brand-deep);border:0}
/* QA-R2 T1 (day-1 video, ab tak pending): "Done" tak pahunchne ke liye
   popover ke ANDAR scroll karna padta tha — footer ab sticky hai, list
   uske peeche scroll hoti hai. Opaque bg zaroori: warna neeche ke
   menu-items footer ke aar-paar jhalakte. Negative margins footer ko
   menu ke 4px padding tak failati hain, taaki scroll edge tak dhake. */
.multi .mfoot{position:sticky;bottom:0;background:var(--surface);
  margin:4px -4px -4px;padding:6px 10px 8px;border-radius:0 0 6px 6px}
.bkrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bkchip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);
  border-radius:4px;padding:3px 6px 3px 9px;font-size:12.5px}
.bkchip .bkx{border:0;background:none;color:var(--faint);font-size:12px;
  padding:0 2px;min-height:auto;font-weight:400}
.bkchip .bkx:hover{background:none;border:0;color:var(--bad)}
.addbkbtn{border:1px dashed var(--line);border-radius:var(--radius-s);
  background:transparent;color:var(--mut);font-size:12.5px;font-weight:400;
  padding:4px 10px;min-height:auto;display:inline-flex;align-items:center}
.addbkbtn:hover{background:transparent;border-color:var(--faint);color:var(--tx)}

/* history read view (design :542-613) */
.pastblock{position:relative;display:flex;flex-direction:column;gap:8px}
.arow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.klabel{font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);min-width:60px}
.klabel.wide{min-width:0;font-weight:600;letter-spacing:.1em}
.tokens{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;flex:1;
  min-width:180px;padding-right:110px}
.tok{font-size:13px}
.tok.noshow{color:var(--bad);text-decoration:line-through}
/* swapped: plan pehle badla tha — neutral (red accountability-tint nahi) */
.tok.swapped{color:var(--mut);text-decoration:line-through}
.tok.repl, .tok.added{color:var(--ok);font-weight:500}
.actualtext{font-size:12.5px;color:var(--mut)}
.bkline{font-size:12px;color:var(--faint)}
.auditblock{border-top:1px dashed var(--line-soft);padding-top:6px;
  display:flex;flex-direction:column;gap:2px}
.auditline{font-size:11.5px;color:var(--mut)}

/* edit actuals: <details>; summary button design spot (top-right) pe */
.attedit > summary{list-style:none;cursor:pointer;position:absolute;
  top:0;right:0}
.attedit > summary::-webkit-details-marker{display:none}
.attedit[open] > summary{display:none}
.editbtn{display:inline-flex;background:none;border:1px solid var(--line);
  border-radius:5px;padding:4.5px 12px;font-size:12px;font-weight:500;
  color:var(--tx);transition:border-color var(--trans)}
.attedit > summary:hover .editbtn{border-color:var(--faint)}
.attform{border-top:1px dashed var(--line-soft);padding-top:8px;
  display:flex;flex-direction:column;gap:7px}
.attchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.attchip{display:inline-flex;align-items:center;gap:7px;border-radius:4px;
  padding:4.5px 11px;font-size:12.5px;border:1px solid var(--line);
  background:var(--surface);margin:0;min-inline-size:auto}
.attchip legend{padding:0}
.attchip .nm{font-size:12.5px}
.attchip .opt{display:inline-flex;align-items:center;gap:3px;font-size:10px;
  font-weight:600;letter-spacing:.04em;color:var(--mut);white-space:nowrap}
.attchip .opt input{width:12px;height:12px;accent-color:var(--brand)}
.attchip:has(input[value="noshow"]:checked){border-color:var(--bad);
  background:var(--bad-bg)}
.attchip:has(input[value="noshow"]:checked) .nm{color:var(--bad)}
/* swapped chip: neutral tint — bookkeeping hai, accountability nahi */
.attchip:has(input[value="swapped"]:checked){border-color:var(--faint)}
.attchip:has(input[value="swapped"]:checked) .nm{color:var(--mut)}
.attchip .replsel{display:none;font-size:11.5px;padding:3px 24px 3px 8px;
  min-height:auto;border-radius:4px;border-style:dashed;max-width:150px}
.attchip:has(input[value="noshow"]:checked) .replsel,
.attchip:has(input[value="swapped"]:checked) .replsel{display:inline-block}
/* JS enhanced chip: radios chhupte hain, chip khud toggle hota hai */
.attchip.enhanced{cursor:pointer}
.attchip.enhanced .opt{display:none}
.attchip .mark{font-size:10px;font-weight:600;letter-spacing:.04em}
.addworked{display:flex;flex-direction:column;gap:3px}
.addworked .addedsel{font-size:12.5px;min-height:auto}
.addworked.native-hidden{position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.addchip{display:inline-flex;align-items:center;gap:7px;border-radius:4px;
  padding:3.5px 9px;font-size:12.5px;border:1px solid var(--ok);
  background:var(--ok-bg);color:var(--ok);min-height:auto;font-weight:400}
.addchip:hover{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.addchip .amark{font-size:10px;font-weight:600;letter-spacing:.04em}
.attactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.applybtn{background:var(--brand);border:0;border-radius:5px;
  color:var(--brand-ink);font-size:12px;font-weight:600;padding:6px 15px;
  min-height:auto}
.applybtn:hover{background:var(--brand-deep);border:0}
.cancelbtn{display:inline-flex;background:none;border:1px solid var(--line);
  border-radius:5px;color:var(--tx);font-size:12px;font-weight:500;
  padding:5px 13px}
.cancelbtn:hover{border-color:var(--faint);text-decoration:none;color:var(--tx)}
.hintline{font-size:11.5px;color:var(--faint)}

/* PR-15: mobile drawer ka backdrop (base.html data-side-overlay) */
.side-overlay{position:fixed;inset:0;z-index:65;border:0;padding:0;
  background:rgba(13,20,14,.44)}
.side-overlay[hidden]{display:none}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: no-preference){
  .side-overlay{animation:fadein .2s ease-out}
}
/* drawer khula = page peeche scroll na kare (JS class lagata hai) */
html.side-drawer body{overflow:hidden}

/* mobile board + shell — landscape phones (844x390, 932x430) bhi: sidebar drawer,
   m-tabs, 40px taps; desktop window itna chhota kabhi nahi hota (max-width bound) */
@media (max-width:820px), ((max-width:1000px) and (max-height:500px) and (orientation:landscape)){
  /* PR-15: sidebar ab off-canvas swipe drawer — default band; ☰ ya left-edge
     swipe-right kholta hai; left-swipe / overlay tap / « / Escape band karta
     hai. Reduced-motion pe global rule transition maar deta hai. */
  .side{position:fixed;top:0;left:0;bottom:0;z-index:70;height:100dvh;
    transform:translateX(-100%);visibility:hidden;
    box-shadow:0 0 42px rgba(10,18,12,.45);
    transition:transform .22s ease-out,visibility 0s .22s}
  html.side-drawer .side{transform:translateX(0);visibility:visible;
    transition:transform .22s ease-out}
  .m-tabs{display:flex}
  .m-wordmark{display:inline}
  .htitle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .slotcell{flex:1 1 140px}
  .slotcell select.slotsel, .slotbtn{width:100%;min-height:40px}
  .toolbar .hint{margin-left:0;flex-basis:100%}
  .listsummary{margin-left:0;flex-basis:100%}
  input[type=checkbox]{width:20px;height:20px}
  .actionbar button{min-height:44px}
  .tokens{padding-right:0}
  .attedit > summary{position:static}
  .attedit[open] > summary{display:none}
}

/* ---------- floating save bar (board) — design ka green pill ---------- */
.actionbar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;
  z-index:50;background:var(--brand-deep);color:var(--brand-ink);
  border-radius:var(--radius);box-shadow:0 12px 32px rgba(13,46,28,.4);
  padding:9px 10px 9px 18px;display:flex;gap:14px;align-items:center;
  max-width:calc(100vw - 24px);flex-wrap:wrap}
/* JS: bar sirf dirty state pe (design); no-JS: hamesha visible (submit path) */
.actionbar[hidden]{display:none}
.actionbar .dirty-count:empty{display:none}
@media (prefers-reduced-motion: no-preference){
  .actionbar{animation:rise .15s ease-out}
}
.actionbar .dirty-count{color:rgba(244,242,236,.85);font-size:13px;
  white-space:nowrap}
.actionbar .dirty-count b{color:#FFFFFF}
.actionbar .bar-ghost{background:none;border:1px solid rgba(244,242,236,.3);
  color:var(--brand-ink);font-size:13px;font-weight:500;padding:5.5px 12px;
  min-height:34px}
.actionbar .bar-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(244,242,236,.5)}
.actionbar #save-btn{background:var(--bg);border-color:var(--bg);
  color:var(--brand-deep);font-weight:600;padding:6.5px 13px;min-height:34px;
  white-space:nowrap}
.actionbar #save-btn:hover{background:#FFFFFF;border-color:#FFFFFF;
  color:var(--brand-deep)}

/* ---------- login: split screen ---------- */
.login-split{min-height:100dvh;display:flex;background:var(--surface)}
.login-left{flex:1;min-width:320px;display:grid;place-items:center;padding:32px}
.login-box{width:100%;max-width:330px;display:flex;flex-direction:column;gap:18px}
.lmark{width:38px;height:38px;background:var(--brand);color:var(--brand-ink);
  display:grid;place-items:center;font-family:var(--font-display);
  font-weight:700;font-size:22px;border-radius:var(--radius-s)}
.ltitle{font-family:var(--font-display);font-size:30px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;line-height:1.1}
.lsub{margin:6px 0 0;font-size:13.5px;color:var(--mut)}
.lfoot{margin:0;font-size:12px;color:var(--faint);
  border-top:1px solid var(--line-soft);padding-top:12px}
.login-divider{display:flex;align-items:center;gap:10px;color:var(--faint);
  font-size:12.5px;margin:2px 0}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;
  background:var(--line-soft)}
.login-right{flex:1.1;display:grid;place-items:center;padding:40px;
  background:linear-gradient(165deg,#1C5236 0%,#16452B 55%,#0D2E1C 100%)}
.lr-inner{display:flex;flex-direction:column;gap:26px;max-width:380px;width:100%}
.wordmark.xl{font-size:46px;letter-spacing:.16em;line-height:1}
.lr-kicker{color:#8FBF9F;font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;margin-top:4px}
.lr-card{background:var(--surface);border-radius:var(--radius);padding:14px 16px;
  box-shadow:0 16px 40px rgba(6,20,12,.4)}
.lr-card-head{font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line-soft);padding-bottom:8px}
.lr-row{display:flex;align-items:baseline;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line-soft)}
.lr-row.last{border-bottom:0}
.lr-row .t{font-family:var(--font-display);font-weight:600;font-size:17px;
  width:64px;flex:none;color:var(--tx)}
.lr-row .n{font-size:13px;flex:1;color:var(--tx)}
.lr-row .s{font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase}
.lr-row .s.ok{color:var(--ok)}
.lr-row .s.warn{color:var(--warn)}
.lr-copy{margin:0;color:rgba(244,242,236,.7);font-size:13px;line-height:1.6}
@media(max-width:760px){.login-right{display:none}}

/* ---------- error page ---------- */
.errcard{width:min(520px, calc(100% - 32px));margin:48px auto}
.etitle{font-size:20px;font-weight:600;margin:4px 0 8px}

/* ---------- calendar (PR-12) ---------- */
.cal-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin:var(--sp-2) 0}
.seg{display:flex;background:var(--line-soft);border-radius:var(--radius-s);
  padding:2px;gap:2px}
.seg a{border-radius:5px;padding:4.5px 11px;font-size:12.5px;font-weight:500;
  white-space:nowrap;color:var(--mut)}
.seg a:hover{color:var(--tx);text-decoration:none}
.seg a.on{background:var(--surface);color:var(--tx);font-weight:600;
  box-shadow:0 1px 2px rgba(26,29,24,.1)}
.cal-nav{display:flex;align-items:center;gap:4px}
.navbtn{width:26px;height:26px;border-radius:var(--radius-s);
  border:1px solid var(--line);background:var(--surface);font-size:14px;
  color:var(--tx);display:grid;place-items:center}
.navbtn:hover{border-color:var(--faint);text-decoration:none;color:var(--tx)}
.cal-label{font-family:var(--font-display);font-weight:700;font-size:17px;
  letter-spacing:.03em;text-transform:uppercase;min-width:132px;
  text-align:center}
.legend{display:flex;gap:12px;margin-left:auto;font-size:10.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:5px}
.lg::before{content:"";width:7px;height:7px;border-radius:2px;flex:none}
.lg.full::before{background:var(--ok)}
.lg.partial::before{background:var(--warn)}
.lg.empty::before{background:var(--bad)}
.cal-wrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.cal-card{flex:2.2;min-width:300px;background:var(--surface);
  border:1px solid var(--line-card);border-radius:var(--radius);
  overflow:hidden}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow{background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
.cal-dow span{padding:7px 8px;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--faint)}
.cal-cell{height:85px;border-bottom:1px solid var(--line-faint);
  border-right:1px solid var(--line-faint);overflow:hidden;
  background:var(--surface);display:flex;flex-direction:column}
.cal-cell:nth-child(7n){border-right:0}
.cal-cell.out{background:var(--surface-2)}
.cal-cell.sel{background:var(--hover-tint);
  box-shadow:inset 0 0 0 1.5px var(--brand)}
.cell-hit{display:block;flex:1 1 auto;min-height:0;overflow:hidden;
  padding:5px 6px;color:inherit}
.cell-hit:hover{text-decoration:none;color:inherit;background:var(--surface-2)}
.cal-cell.sel .cell-hit:hover{background:transparent}
.cnum{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--faint)}
.cal-cell.has .cnum{color:var(--tx)}
.cal-cell.today .cnum{display:inline-grid;place-items:center;width:20px;
  height:20px;border-radius:4px;background:var(--brand);color:var(--brand-ink)}
.chip{display:block;font-size:10px;font-weight:600;border-radius:3px;
  padding:1px 5px;margin-top:2px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.chip.full{background:var(--ok-bg);color:var(--ok)}
.chip.partial{background:var(--warn-bg);color:var(--warn)}
.chip.empty{background:var(--bad-bg);color:var(--bad)}
.cal-cell.past .chip{opacity:.6}
.more{flex:none;align-self:flex-start;font-size:10px;color:var(--brand);
  font-weight:600;text-decoration:underline;padding:0 6px 4px}
.cal-panel{flex:1;min-width:260px;display:flex;flex-direction:column;gap:8px}
.cal-day-head{font-family:var(--font-display);font-weight:700;font-size:16px;
  letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid var(--tx);
  padding-bottom:4px}
.cal-match{background:var(--surface);border:1px solid var(--line-card);
  border-radius:var(--radius);padding:11px 14px;display:flex;
  flex-direction:column;gap:5px}
.cal-match .row{display:flex;gap:8px;align-items:baseline;
  justify-content:space-between;flex-wrap:wrap}
.cal-match .title{font-weight:600;font-size:14px}
.cal-match .sub{font-size:12.5px;color:var(--mut)}
.g-time{font-family:var(--font-display);font-weight:700;font-size:19px;
  letter-spacing:.03em}
.atonce{font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--warn);border:1px solid var(--warn);
  border-radius:3px;padding:1px 7px}
.yr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px}
.yr-month{background:var(--surface);border:1px solid var(--line-card);
  border-radius:var(--radius);padding:12px 14px}
.yr-title{display:inline-block;font-family:var(--font-display);font-size:15px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tx)}
.yr-title:hover{color:var(--brand);text-decoration:none}
.yr-cells{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  margin-top:7px}
.yr-day{font-size:9.5px;text-align:center;padding:1.5px 0;border-radius:3px;
  font-variant-numeric:tabular-nums;color:var(--cal-faint)}
a.yr-day{font-weight:600;color:var(--tx)}
a.yr-day:hover{text-decoration:none;outline:1px solid var(--brand)}
.yr-day.full{background:var(--ok-bg);color:var(--ok)}
.yr-day.partial{background:var(--warn-bg);color:var(--warn)}
.yr-day.empty{background:var(--bad-bg);color:var(--bad)}
/* design today-treatment sirf match-free din pe deta hai — wash jeetta hai */
.yr-day.today:not(.full):not(.partial):not(.empty){color:var(--brand);
  font-weight:700}
.yr-count{font-size:11px;color:var(--faint);margin-top:7px}
.mcount{display:none}
@media(max-width:700px){
  .cal-cell{height:55px}
  .chip{display:none}
  .cal-cell .more{display:none}
  /* chips chhupe -> compact count chip day-mode kholta hai */
  .mcount{display:inline-grid;place-items:center;min-width:18px;height:18px;
    flex:none;align-self:flex-start;border-radius:4px;
    background:var(--hover-tint);color:var(--brand);
    font-size:10px;font-weight:700;margin:0 0 4px 6px;text-decoration:none}
}

/* ---------- calendar day = overlap view (18 Sep 2026) ----------
   Prototype dugout_overlap_view.html ka port, .ovl- prefix. Reuse: .card,
   .status, .tag, .legend/.lg, .g-time, .atonce, .unit, .mut. Sport colour
   bars pe --c se aata hai (src/core/sport.py), solid = crewed, 45% mix =
   partial, hollow = 0 crew. */
.lg.ovl-lg::before{width:14px;height:8px;background:var(--c);border:1.5px solid var(--c)}
.lg.ovl-lg.hollow::before{background:var(--surface)}
.ovl-peak{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  margin:6px 0 4px;border-bottom:2px solid var(--tx);padding-bottom:4px}
.ovl-peak .g-time{font-size:21px}
.ovl-peak .g-time b{color:var(--brand)}
.ovl-peak .atonce{color:var(--bad);border-color:var(--bad)}
.ovl-peak .atonce.ok{color:var(--ok);border-color:var(--ok)}
.ovl-peak .mut{font-size:12px}
.ovl-two{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;position:sticky;
  top:var(--header-h);z-index:20;background:var(--bg);padding:4px 0 6px}
.ovl-panel{margin:0;height:168px;overflow:auto;padding:12px 16px}
.ovl-panel h2{font-family:var(--font-display);font-weight:700;font-size:15px;
  letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid var(--tx);
  padding-bottom:3px;margin-bottom:8px;display:flex;gap:10px;align-items:baseline;
  flex-wrap:wrap}
.ovl-panel h2 .mut{font-family:var(--font-sans);font-weight:500;font-size:11.5px;
  text-transform:none;letter-spacing:0}
.ovl-kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:12.5px}
.ovl-kv dt{color:var(--faint);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding-top:2px}
.ovl-kv dd{font-variant-numeric:tabular-nums;min-width:0}
.ovl-people{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ovl-person{border:1px solid var(--line);border-radius:4px;padding:1px 8px;
  font-size:12.5px;background:var(--surface-2);font-variant-numeric:tabular-nums}
.ovl-live{margin-top:8px;font-size:12px;color:var(--mut);display:flex;flex-wrap:wrap;
  gap:3px 12px}
.ovl-live i,.ovl-sw{display:inline-block;width:8px;height:8px;border-radius:2px;
  background:var(--c);margin-right:5px;vertical-align:1px}
.ovl-live i.hollow{background:var(--surface);border:1.5px solid var(--c)}
.ovl-sw{width:9px;height:9px;margin-right:6px;vertical-align:-1px}
.bad-t{color:var(--bad)}
.hint{color:var(--faint);font-size:12.5px}
.micro{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint)}
.ovl-tl-card{padding:0;overflow:hidden}
.ovl-wrap{overflow-x:auto;--lbl:290px;--rh:42px}
.ovl-strip{display:grid;grid-template-columns:var(--lbl) 1fr;min-width:900px;
  border-bottom:1px solid var(--line)}
.ovl-strip .lbl{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  padding:8px 10px;border-right:1px solid var(--line-soft)}
.ovl-strip-area{display:flex;align-items:stretch;height:118px;padding-top:22px;
  position:relative}
.ovl-sl{flex:1;position:relative;cursor:pointer;border-left:1px solid var(--line-faint)}
.ovl-sl:hover{background:var(--surface-2)}
.ovl-sl.pk{background:var(--hover-tint)}
.ovl-sl.cur{background:var(--hover-tint);box-shadow:inset 0 0 0 1px var(--brand)}
.ovl-sl .bo,.ovl-sl .bg{position:absolute;left:1px;right:1px;bottom:0;
  border-radius:2px 2px 0 0}
.ovl-sl .bo{background:#9DB5A3;height:var(--h)}
.ovl-sl.pk .bo{background:var(--brand)}
.ovl-sl .bg{background:var(--bad);height:var(--g)}
.ovl-sl .n{position:absolute;left:0;right:0;bottom:calc(var(--h) + 2px);
  text-align:center;font-family:var(--font-display);font-weight:700;font-size:13px;
  line-height:1;display:none;font-variant-numeric:tabular-nums}
.ovl-sl.pk .n,.ovl-sl.cur .n,.ovl-sl:hover .n{display:block}
.ovl-sl.pk .n{color:var(--brand)}
.ovl-tl{position:relative;min-width:900px}
.ovl-grid{position:absolute;top:0;bottom:0;left:var(--lbl);right:0;z-index:0;
  pointer-events:none}
.ovl-tl .tk,.ovl-paxis .tk{position:absolute;top:0;bottom:0;border-left:1px solid var(--line-soft)}
.ovl-grid .tk{border-left-color:var(--line-faint)}
.ovl-tl .tk.h0,.ovl-paxis .tk.h0{border-left-color:var(--line)}
.ovl-tl .tk.dayend,.ovl-paxis .tk.dayend{border-left:1px dashed var(--warn)}
/* line-height 1: pehli line 5-15.5px, doosri 17-26.5px — 28px axis mein dono
   alag rows, rects kabhi intersect nahi (review PR-232, measured) */
.ovl-tl .tk span,.ovl-paxis .tk span{position:absolute;top:5px;left:4px;font-size:10.5px;color:var(--faint);
  white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1}
.ovl-tl .tk.h0 span,.ovl-paxis .tk.h0 span{color:var(--tx);font-weight:600}
.ovl-tl .tk.dayend span,.ovl-paxis .tk.dayend span{color:var(--warn)}
/* dense axis ka aakhri label: tick ki width = box ka bacha hissa, span box ke
   right edge pe clamp (review PR-235: "6am" 5px bahar nikal raha tha) */
.ovl-tl .tk.end span,.ovl-paxis .tk.end span{left:auto;right:4px}
.ovl-tl .tk span.d,.ovl-paxis .tk span.d{top:17px;font-size:9.5px;font-weight:500;color:var(--faint);
  letter-spacing:.04em}
/* phone-only markup (cal.html renders both layouts from one ctx) */
.ovl-rot,.ovl-paxis,.ovl-list{display:none}
.ovl-band{position:absolute;top:0;bottom:0;background:var(--hover-tint);opacity:.75}
.ovl-guide{position:absolute;top:0;bottom:0;border-left:1px dashed var(--tx);opacity:.55}
.ovl-row{display:grid;grid-template-columns:var(--lbl) 1fr;
  border-bottom:1px solid var(--line-faint)}
.ovl-tl .lbl{padding:4px 10px;position:sticky;left:0;background:var(--surface);
  z-index:3;border-right:1px solid var(--line-soft);min-width:0}
.ovl-row.m .lbl{cursor:pointer}
.ovl-row.m:hover .lbl{background:var(--surface-2)}
.ovl-row.m.sel .lbl{background:var(--hover-tint)}
.ovl-row .t1{display:flex;gap:6px;align-items:baseline;min-width:0}
.ovl-row .ttl{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.ovl-row .tag{border:1px solid var(--line);border-radius:3px;padding:0 5px;flex:none;
  line-height:15px;color:var(--mut);background:transparent}
/* manual window: Se/Tak selects toolbar mein, baaki controls jaise */
.ovl-win{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--mut);flex-wrap:wrap}
.ovl-win label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ovl-win select{font:inherit;font-size:12.5px;color:var(--tx);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-s);padding:4px 8px;min-height:30px}
/* client + person dropdowns: same control styling, sits where the chips were */
.cal-filt{margin:0 0 var(--sp-3)}
/* doosre civil din ka match is page pe: date chip warn colour mein */
.ovl-row .tag.ovl-nd{color:var(--warn);border-color:var(--warn);font-weight:700}
.ovl-row .t2{font-size:11.5px;color:var(--mut);display:flex;gap:7px;
  align-items:baseline;min-width:0}
.ovl-row .t2 .time{font-family:var(--font-display);font-weight:600;font-size:13.5px;
  color:var(--tx);letter-spacing:.02em;flex:none}
.ovl-row .comp{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ovl-row .area{position:relative;height:var(--rh)}
.ovl-axis .area{height:28px}
.ovl-axis .lbl{padding:7px 10px}
.ovl-row.grp .lbl{background:var(--surface-2);font-size:11.5px;color:var(--mut);
  display:flex;gap:8px;align-items:baseline;white-space:nowrap;overflow:hidden}
.ovl-row.grp .lbl b{color:var(--tx)}
.ovl-row.grp .area{height:22px}
.gspan{position:absolute;top:8px;height:6px;border-radius:3px;background:var(--line)}
.ovl-bar{position:absolute;top:calc((var(--rh) - 20px)/2);height:20px;border-radius:3px;
  background:var(--c);border:1.5px solid var(--c);cursor:pointer;min-width:3px;
  z-index:2}
.ovl-bar.partial{background:color-mix(in srgb,var(--c) 45%,#fff)}
.ovl-bar.empty{background:var(--surface)}
.ovl-bar.sel{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--tx)}
.ovl-bar:hover{filter:brightness(.92)}
.ovl-foot{margin:8px 0 0}
.ovl-tip{position:fixed;z-index:50;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;box-shadow:var(--shadow-pop);padding:8px 10px;font-size:12px;
  max-width:340px;pointer-events:none;line-height:1.45}
.ovl-tip h2{font-family:var(--font-sans);font-size:13px;font-weight:600;
  text-transform:none;letter-spacing:0;border:0;margin:0 0 4px;padding:0;display:block}
.ovl-tip h2 .mut{display:block;font-weight:400}
/* mobile (Shashwat 18 Sep: "mobile view fata hua hai"): 290px label column
   ne 364px card mein timeline ko 74px pe daba diya tha, controls 26-30px.
   Ek hi breakpoint (820 = shell ka drawer/touch mode). Desktop untouched.
   Landscape phones (<=500px tall) same block + apna override neeche. */
@media (max-width:820px), ((max-width:1000px) and (max-height:500px) and (orientation:landscape)){
  .ovl-two{position:static;grid-template-columns:1fr}
  .ovl-panel{height:auto}
  /* toolbar: 40px tap targets; date nav apni line pe, heading wrap ok */
  .cal-toolbar .seg a{min-height:40px;display:inline-flex;align-items:center;padding:0 16px}
  .cal-toolbar .navbtn{width:40px;height:40px;font-size:20px;flex:none}
  .cal-nav{flex-basis:100%;gap:8px}
  .cal-label{flex:1;min-width:0;font-size:16px;line-height:1.2;text-wrap:balance}
  .ovl-win{flex-basis:100%;gap:8px}
  .ovl-win label{flex:1;display:flex}
  /* 16px = iOS focus pe auto-zoom nahi */
  .ovl-win select{flex:1;min-width:0;min-height:40px;font-size:16px}
  .legend{margin-left:0;flex-basis:100%}
  /* timeline: label column 180px, strip/bars 700px card ke andar swipe (labels
     sticky rahte hain); right-edge fade = "aage aur hai" cue */
  .ovl-wrap{--lbl:180px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .ovl-strip,.ovl-tl{min-width:700px}
  .ovl-tl-card{position:relative}
  .ovl-tl-card::after{content:"";position:absolute;top:0;bottom:0;right:0;width:28px;
    pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,0),var(--surface))}
  .ovl-row .t1 .tag,.ovl-row .comp{display:none}
  .ovl-row .t2{flex-wrap:wrap;gap:3px 7px}
  .ovl-row.m .area{height:auto}
  .ovl-bar{top:calc(50% - 10px)}
  .ovl-row.grp .lbl{white-space:normal;flex-wrap:wrap;gap:2px 8px}
  .ovl-row.grp .area{height:auto}
  /* match detail = bottom sheet (panel upar off-screen hota hai); row dobara
     tap ya bahar tap = band (app.js) */
  .ovl-det:not([hidden]):not([data-id=""]){position:fixed;left:0;right:0;bottom:0;z-index:45;
    background:var(--surface);border-top:2px solid var(--tx);box-shadow:var(--shadow-pop);
    padding:12px 16px 20px;max-height:45vh;overflow:auto}
}
/* touch: tap ke baad emulated mousemove tooltip ko chipka deta hai — sheet hi detail hai */
@media(hover:none){.ovl-tip{display:none}}
/* phone (<600px; Shashwat 18 Sep late: 390px pe 30h Gantt ~2 ghante dikhata tha,
   bars edge se bahar). Strip card-wide + apna axis, slot panel main content,
   Gantt rows -> match cards with a 4px mini-bar (same left/width). Landscape
   (>=600) = #237 tablet layout. */
@media(max-width:599px){
  /* client + person selects: one per line, full width (labels ka min-width
     auto = content width, side-by-side overflow karta tha) */
  .cal-filt{flex-direction:column;align-items:stretch}
  .cal-filt label{min-width:0}
  .ovl-rot{display:block;margin:0;padding:8px 12px 0}
  .ovl-body{display:flex;flex-direction:column}
  .ovl-tl-card{order:1}
  .ovl-two{order:2;padding:0}
  .ovl-list{order:3;display:block}
  .ovl-foot{order:4}
  /* detail panel ka card chrome hatao: placeholder gayab, sheet fixed rehta hai */
  .ovl-two>.ovl-panel:last-child{display:contents}
  .ovl-det[data-id=""]{display:none}
  .ovl-tl-card::after{content:none}
  .ovl-wrap{overflow:visible;--lbl:0px}
  .ovl-strip{grid-template-columns:1fr;min-width:0}
  .ovl-strip .lbl{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:2px 12px;border-right:0;padding:6px 12px 0}
  .ovl-strip-area{height:96px;padding-top:18px}
  /* 15-min columns 3-4px: borders hatao, bars edge-to-edge = stepped histogram;
     tap hit-test area pe hota hai (app.js slotAt), column pe nahi */
  .ovl-sl{border-left:0}
  .ovl-sl .bo,.ovl-sl .bg{left:0;right:0;border-radius:0}
  .ovl-sl.pk:not(.cur) .n{display:none}
  .ovl-tl{display:none}
  .ovl-paxis{display:block;position:relative;height:28px}
  .ovl-pgrp{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:11.5px;
    color:var(--mut);padding:10px 4px 2px}
  .ovl-pgrp b{color:var(--tx)}
  .ovl-pm{background:var(--surface);border:1px solid var(--line-card);border-radius:var(--radius);
    padding:10px 12px 12px;margin:8px 0;box-shadow:var(--shadow-1);cursor:pointer}
  .ovl-pm.sel{box-shadow:0 0 0 2px var(--tx)}
  .ovl-pm .ttl{font-weight:600;font-size:14px;line-height:1.3}
  .ovl-pm .t2{display:flex;gap:4px 8px;align-items:baseline;flex-wrap:wrap;margin-top:4px;
    font-size:11.5px;color:var(--mut)}
  .ovl-pm .time{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--tx);
    letter-spacing:.02em}
  .ovl-pm .tag{border:1px solid var(--line);border-radius:3px;padding:0 5px;line-height:15px}
  .ovl-pm .tag.ovl-nd{color:var(--warn);border-color:var(--warn);font-weight:700}
  .ovl-pm .crew{font-size:12.5px;margin-top:5px;color:var(--mut)}
  .ovl-pm .crew b{color:var(--tx);font-weight:500}
  .ovl-mini{position:relative;height:4px;margin-top:9px;border-radius:2px;background:var(--line-faint)}
  .ovl-mini i{position:absolute;top:0;bottom:0;min-width:2px;border-radius:2px;background:var(--c)}
  .ovl-mini i.partial{background:color-mix(in srgb,var(--c) 45%,#fff)}
  .ovl-mini i.empty{background:var(--surface);box-shadow:inset 0 0 0 1px var(--c)}
}
/* landscape phone (844x390 / 932x430; lead ruling 18 Sep late): "Landscape mein
   poora timeline dikhta hai" sach ho — #237 block upar lagta hai (drawer shell,
   40px taps, bottom sheet), yahan swipe hatao: label column 150px, timeline =
   card width (~650px axis at 844: 13h ~50px/h, 24h ~27px/h every-2nd labels). */
@media ((max-width:1000px) and (max-height:500px) and (orientation:landscape)){
  .ovl-wrap{--lbl:150px}
  /* axis-end tick (left:100%) ka 1px border wrap se bahar jhaankta hai -> 1px
     swipe; timeline ko 1px chhota rakho (strip bhi, band/guide align ke liye) */
  .ovl-strip,.ovl-tl{min-width:0;width:calc(100% - 1px)}
  .ovl-tl-card::after{content:none}
  .ovl-two{padding:0}
  .ovl-two>.ovl-panel:last-child{display:contents}
  .ovl-det[data-id=""]{display:none}
  .ovl-det:not([hidden]):not([data-id=""]){max-height:60vh}
}

/* ---------- summary strip (person) ---------- */
.stats{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:baseline;
  border-bottom:2px solid var(--tx);padding-bottom:10px;margin-bottom:18px}
.stat{display:flex;align-items:baseline;gap:8px}
.stat .n{font-family:var(--font-display);font-weight:700;font-size:34px;
  line-height:1}
.stat .l{color:var(--mut);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase}

/* perf-p2: MPA view transitions — navigation pe halka cross-fade (Chromium);
   baaki browsers ignore karte hain. Reduced-motion pe animation band. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* perf-p3: board pager — plain links, 44px touch targets */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;
  margin:20px 0 8px}
.pager a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:8px;color:var(--brand);
  font-weight:600;text-decoration:none;background:var(--surface)}
.pager a:hover{border-color:var(--brand)}
/* QA-R2 T3: JS-active pe pager hidden (infinite scroll usko replace karta
   hai) — display:flex hidden attribute ko maat de deta, isliye explicit */
.pager[hidden]{display:none}
.scroll-sentinel{height:2px}
.pager-info{color:var(--mut);font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase}

/* ---------- Admin tab (20 Aug): time corrections + roles panel ---------- */
/* Sections .day/.dayhead card pattern reuse karte hain; andar apna body pad */
.adminbody{display:flex;flex-direction:column;gap:10px;padding:10px 14px 14px}
.adminbody .scopenote{margin:0}
.admrow{border:1px solid var(--line-faint);border-radius:var(--radius-s);
  padding:10px 12px;background:var(--surface)}
.timeform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  border-top:1px dashed var(--line-soft);margin-top:8px;padding-top:8px}
.timeform input[type="datetime-local"]{background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-s);padding:5px 8px;
  font:inherit;font-size:12.5px;color:var(--tx)}
/* roles panel: white table, surface-2 header, micro-label headings —
   design system ke table conventions (koi naya pattern nahi) */
.rolewrap{border:1px solid var(--line-card);border-radius:var(--radius-s);
  overflow-x:auto;background:var(--surface)}
.roletable{width:100%;border-collapse:collapse;font-size:13px}
.roletable th{background:var(--surface-2);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  text-align:left;padding:8px 12px;border-bottom:1px solid var(--line-soft);
  white-space:nowrap}
.roletable td{padding:7px 12px;border-bottom:1px solid var(--line-faint);
  white-space:nowrap}
.roletable tr:last-child td{border-bottom:0}
.roletable .pname{font-weight:600}
.roletable .pkey{color:var(--mut);font-size:12px}
.roleform{display:inline}
.roletgl{background:var(--surface);border:1px solid var(--line);
  border-radius:5px;padding:3px 12px;font:inherit;font-size:11px;
  font-weight:600;letter-spacing:.04em;color:var(--mut);cursor:pointer;
  transition:border-color var(--trans)}
.roletgl:hover{border-color:var(--faint)}
.roletgl.on{background:var(--ok-bg);border-color:#BCD8C2;color:var(--ok)}
.badge.admin{color:var(--brand);background:var(--hover-tint)}
.roletable .pemail{color:var(--mut)}

/* Access rework (20 Aug raat): time-correction ab History mein inline —
   admin-only details/summary, band rehkar row ko halka rakhta hai */
.fixtime{margin-top:6px;font-size:12px}
.fixtime summary{color:var(--mut);cursor:pointer;width:fit-content;
  border-bottom:1px dashed var(--line-soft)}
.fixtime summary:hover{color:var(--tx)}
.fixtime[open] summary{color:var(--tx)}
.fixtime .timeform{border-top:0;margin-top:6px;padding-top:0}
/* naya-email form: fields grid + flag checkboxes ek line-height rhythm pe */
.accessform{display:flex;flex-direction:column;gap:10px}
.af-fields{display:grid;grid-template-columns:auto minmax(180px,260px);
  gap:8px 10px;align-items:center;width:fit-content}
.af-fields input{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:6px 9px;font:inherit;
  font-size:13px;color:var(--tx)}
.af-flags{display:flex;flex-direction:column;gap:5px}
.af-check{font-size:12.5px;color:var(--tx);display:flex;gap:7px;
  align-items:center;cursor:pointer}
.af-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:700px){
  .af-fields{grid-template-columns:1fr;width:100%}
}

/* ---------- batch clients (spec 23 Aug): capacity strip + panel + queue ----
   TTE jaise clients ka atom din + content-hours hai — rows ki jagah din ke
   header ke neeche ek patli obligation strip. Rang deliberately shaant:
   strip standing kaam hai, alert nahi. */
.bstrip{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;
  /* day-section 4-track grid (subgrid) mein strip ek ITEM ban ke pehli
     124px column mein sikud jaati thi — poori row span karo */
  grid-column:1/-1;
  padding:8px 14px;margin:0 0 6px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius-s);
  font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.bstrip .bname{font-weight:600;color:var(--tx);text-decoration:none}
.bstrip .bname:hover{text-decoration:underline}
.bstrip .bfact{white-space:nowrap}
.bstrip .bwho{color:var(--tx);font-weight:500}
.bstrip .bwarn{color:var(--mut);font-style:italic}
.blink{color:var(--brand);text-decoration:none}
.blink:hover{text-decoration:underline}
/* calendar marker: normal staffing-chips se alag pehchan, par chillata nahi */
.chip.bchip{background:var(--bg);border:1px dashed var(--line);
  color:var(--mut)}
/* board day-panel */
.bpanel{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.bphead{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;
  padding:10px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-s)}
.bphead .bpname{font-weight:700;color:var(--tx)}
.bpday{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
  padding:10px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-s);font-size:13px}
.bpday .bpd{font-weight:600;min-width:150px}
.bpform{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.bppick{white-space:nowrap;font-size:12.5px;color:var(--mut)}
/* queue page */
.bqhead{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;
  padding:10px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-s);margin-bottom:14px;font-size:13px}
.bqtitle{font-family:'Barlow Condensed',sans-serif;font-size:18px;
  letter-spacing:.02em;text-transform:uppercase;margin:18px 0 8px}
.bqlist{display:flex;flex-direction:column;gap:4px}
.bqrow{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;
  padding:8px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-s);font-size:13px}
.bqrow .bqname{font-weight:600;color:var(--tx)}
.bqrow .bqstage,.bqrow .bqmeta{color:var(--mut);font-size:12px}
.bqrow .bqhrs{font-size:12px;font-weight:600;color:var(--brand);
  font-variant-numeric:tabular-nums}
.bqrow .bqnovid{font-size:12px;color:var(--mut);font-style:italic}
/* Shield deep-link (25 Aug) — har fcstream-linked match se production
   tool tak ek click */
.shlink{font-size:12px;color:var(--brand);text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap}
.shlink:hover{color:var(--tx)}

/* ---------- Agent page (L7, 30 Aug) ----------
   Koi nayi design language nahi: strip = person page ka .stats, tables =
   Admin ka .roletable, filters = Rundown ka .filterrow/.seg/.dd, pager wahi.
   Yahan sirf wo teen chhoti cheezein hain jo pehle kahin thi hi nahi:
   mode/classes ki ek line, mode buttons ki row, aur do square-dot states. */
.agstrip{margin-bottom:var(--sp-3)}
.agmode{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
  margin-bottom:10px}
.agmode .l{font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.agmode .v{font-family:var(--font-display);font-weight:700;font-size:19px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--tx)}
.agmode .v.classes{font-family:var(--font-sans);font-size:13px;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--mut)}
.agmode .mode-off{color:var(--mut)}
.agmode .mode-shadow,.agmode .mode-readonly{color:var(--warn)}
.agmode .mode-live{color:var(--brand)}
.agstrip .stats{margin-bottom:8px}
.warnnote{color:var(--bad)}
.modebtns{display:flex;flex-wrap:wrap;gap:8px}
/* .pemail ki jagah — wahi muted token, par cell ka matlab email nahi */
.roletable .dim{color:var(--mut)}
/* square-dot states (design rule: koi pill background nahi) */
.status.undo-live{color:var(--ok)}
.status.undo-undone{color:var(--mut)}
.status.undo-undoing{color:var(--warn)}
.status.undo-failed{color:var(--bad)}
.status.overdue{color:var(--bad)}
.roletable caption.klabel{caption-side:top;text-align:left;
  padding:8px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--line-faint)}
@media (max-width:820px){
  .agmode{gap:2px 10px}
  .agmode .v{font-size:16px}
}