/* ============================================================
   calendar.css — matrix grid, cells, coverage cards, side panel
   ============================================================ */

.app{max-width:1440px;margin:0 auto;padding:28px 32px 64px}

/* ---------- masthead ---------- */
.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.brand{display:flex;flex-direction:column;align-items:flex-start}
.brandrow{display:flex;align-items:center;gap:14px}
.logo-slot{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.logo-slot .logo-img{height:60px;width:auto;display:block;mix-blend-mode:multiply}
.logo-slot #brandLogoTxt{width:48px;height:48px;border-radius:10px;border:1px dashed var(--line-strong);background:var(--surface);display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.04em}
.logo-slot #brandLogoTxt[hidden],.logo-slot .logo-img[hidden]{display:none}
.brand .mark{display:inline-flex;align-items:center;gap:9px;margin-bottom:10px;white-space:nowrap}
.brand .glyph{width:22px;height:22px;border-radius:6px;background:var(--ink);display:grid;place-items:center}
.brand .glyph b{font-family:var(--hero);color:#fff;font-size:14px;line-height:1;font-weight:400}
.brand .kicker{font-weight:600;font-size:13px;letter-spacing:-.01em}
.brand h1{font-family:var(--hero);font-weight:400;font-size:30px;line-height:1.02;letter-spacing:-.015em;margin:0}
.brand .kicker{white-space:nowrap}
.brand .sub{color:var(--ink-2);font-size:13px;margin-top:4px}
.masthead .meta{display:flex;align-items:center;gap:14px}

/* location toggle */
.loc-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:3px;box-shadow:var(--shadow-card)}
.loc-toggle button{border:0;background:transparent;padding:8px 16px;border-radius:7px;font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;gap:8px;transition:.12s}
.loc-toggle button .pin{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4}
.loc-toggle button.active{color:#fff}
.loc-toggle button.active .pin{opacity:1;background:#fff}
.loc-toggle button.active[data-loc=nwdc]{background:var(--nwdc)}
.loc-toggle button.active[data-loc=bcdc]{background:var(--bcdc)}

/* month stepper */
.month-nav{display:flex;align-items:center;gap:10px}
.month-nav .mlabel{font-weight:600;font-size:14px;min-width:104px;text-align:center}
.month-nav button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink-2);font-size:15px;line-height:1;box-shadow:var(--shadow-card)}
.month-nav button:disabled{opacity:.35;cursor:default}
.export-link{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:8px 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:500;text-decoration:none;box-shadow:var(--shadow-card);font-family:var(--mono);letter-spacing:.02em}
.export-link:hover{color:var(--ink);border-color:var(--line-strong)}

/* role (editor / team) preview toggle */
.role-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:3px;box-shadow:var(--shadow-card)}
.role-toggle button{border:0;background:transparent;padding:7px 13px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer}
.role-toggle button.active{background:var(--ink);color:#fff}
.schedule-link{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:8px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:500;text-decoration:none;box-shadow:var(--shadow-card)}
.schedule-link:hover{color:var(--nwdc);border-color:var(--nwdc-soft)}
.ro-val{font-size:11px;font-weight:500;color:var(--ink)}
.grid .rolecell .ro-val{color:var(--nwdc);font-weight:600}
.grid.loc-bcdc .rolecell .ro-val{color:var(--bcdc)}
body.readonly .avail-head .sec-hint{display:none}

/* ---------- status bar (replaces metric cards) ---------- */
.coverage{margin-bottom:22px}
.status-bar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.status-head{display:flex;align-items:center;gap:14px}
.status-pill{font-size:13px;font-weight:600;padding:5px 13px;border-radius:20px}
.status-pill.alert{color:var(--red);background:var(--red-soft)}
.status-pill.ok{color:var(--green);background:var(--green-soft)}
.status-stats{display:flex;align-items:center;gap:26px}
.status-stats .stat{font-size:13px;color:var(--ink-2)}
.status-stats .stat b{font-family:var(--hero);font-weight:400;font-size:20px;color:var(--ink);margin-right:5px;vertical-align:-1px}

/* ---------- coverage cards (legacy, unused) ---------- */
.cov-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.cov-card .eyebrow{display:block;margin-bottom:14px}
.cov-card .val{display:flex;align-items:baseline;gap:6px}
.cov-card .val .hero-num{font-size:42px}
.cov-card .val .unit{font-family:var(--hero);font-size:20px;color:var(--ink-2)}
.cov-card .val .suffix{font-size:13px;color:var(--ink-2);font-weight:500;margin-left:2px}
.cov-card .foot{margin-top:12px;font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.cov-card .spark{margin-top:14px;height:5px;border-radius:3px;background:var(--surface-sunk,#F1ECE3);overflow:hidden}
.cov-card .spark i{display:block;height:100%;border-radius:3px}
.cov-card.k-red .hero-num{color:var(--red)} .cov-card.k-red .spark i{background:var(--red)}
.cov-card.k-green .hero-num{color:var(--green)} .cov-card.k-green .spark i{background:var(--green)}
.cov-card.k-blue .spark i{background:var(--nwdc)}
.cov-card.k-amber .spark i{background:var(--amber)}
.cov-card .pillnote{position:absolute;top:16px;right:16px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px}
.cov-card .pillnote.up{color:var(--green);background:var(--green-soft)}
.cov-card .pillnote.down{color:var(--red);background:var(--red-soft)}