@font-face {
  font-family: "Archivo Black";
  src: url("../fonts/archivo-black-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  /* backgrounds — surface elevation ladder */
  --bg: #0F1117;
  --bg-elev: #181C27;
  --bg-elev-2: #1E2333;
  --bg-elev-3: #252A3D;
  --bg-inset: #1A1F2E;

  /* borders */
  --border: #2E3450;
  /* --border-control bounds interactive controls (inputs, buttons, selects), so
     WCAG 1.4.11 wants >=3:1 against adjacent colors. The old #3D4566 was only
     2.01:1 vs --bg #0F1117 (L 0.0620 vs 0.0056). #6B76A3 (L 0.1873) gives
     (0.1873+0.05)/(0.0056+0.05) = 4.26:1 vs --bg and 3.21:1 vs the lightest
     surface it sits on, --bg-elev-3 #252A3D (L 0.0239) — clears 3:1 on both
     sides of the border. --border is decorative (dividers) and is unchanged. */
  --border-control: #6B76A3;
  --border-muted: #4A5070;

  /* text */
  --text: #E8E9ED;
  --text-label: #C8D0E8;
  --text-dim: #9BA3BF;
  --text-faint: #909AAC;
  --white: #fff;

  /* accent — primary CTA blue */
  --accent: #3269F6;
  --accent-hover: #2B5AD4;
  --accent-border: #3B67E8;

  /* link/highlight blue — selection state, nav-active, badges, dots */
  --link: #4F7EF7;
  --link-bg: #1A2550;
  --link-text: #A8C0FC;

  /* tab accent — active tab underline */
  --tab-accent: #5B7FFF;

  /* status: green */
  --green-bg: #1A3D2C;
  --green-border: #3DBA7B;
  --green-text: #7DDBA8;
  --green-bg-hover: #1F4D32;
  --green-bg-muted: #0F2A20;
  --green-border-muted: #2E7D5B;
  --green-text-strong: #5DB87A;

  /* status: red */
  --red-bg: #3D1A1A;
  --red-border: #E05555;
  --red-text: #F09090;
  --red-bg-hover: #4D2020;

  /* status: amber */
  --amber-bg: #3D2A00;
  --amber-border: #E0A030;
  --amber-text: #F0C060;
  --amber-bg-muted: #2A1F0A;
  --amber-text-strong: #D4A017;
  --amber-text-on-solid: #1A1200;

  /* status: purple */
  --purple-bg: #2D1D5C;
  --purple-border: #8B5CF6;
  --purple-text: #C4A8FC;
  --purple-text-strong: #9B8AFF;

  /* one-off semantic */
  --dragger-border: #4F8A5A;

  --font-display: "Times New Roman", Times, Georgia, serif;

  /* spacing scale */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 32px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px}
.app{min-height:100vh;display:flex;flex-direction:column}
.layout{display:flex;flex:1}
.content{flex:1;overflow:auto;padding:24px}
.topbar{background:var(--bg-elev);border-bottom:1px solid var(--border);min-height:52px;padding:env(safe-area-inset-top,0px) 20px 0;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.sidebar{width:200px;background:var(--bg-elev);border-right:1px solid var(--border);padding:10px 0;display:flex;flex-direction:column}
.nav-item{padding:9px 16px;cursor:pointer;color:var(--text-dim);transition:all .12s;display:flex;align-items:center;border:none;border-left:2px solid transparent;background:none;width:100%;text-align:left;font:inherit;font-size:13px}
.nav-item:hover{background:var(--bg-elev-2);color:var(--text)}
.nav-item.active{background:var(--link-bg);color:var(--link-text);border-left-color:var(--link);font-weight:600}
.nav-badge{margin-left:auto;background:var(--red-border);color:var(--white);border-radius:10px;padding:0 6px;font-size:10px;font-weight:700}
.nav-bottom{margin-top:auto;border-top:1px solid var(--border);padding-top:8px}
.btn{border:1px solid var(--border-control);background:var(--bg-elev-2);color:var(--text);padding:7px 14px;border-radius:8px;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:6px;font-weight:500;transition:background .12s}
.btn:hover{background:var(--bg-elev-3)}.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-blue{background:var(--accent);color:var(--white);border-color:var(--accent-border)}.btn-blue:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-red{background:var(--red-bg);color:var(--red-text);border-color:var(--red-border)}.btn-red:hover{background:var(--red-bg-hover)}
.btn-green{background:var(--green-bg);color:var(--green-text);border-color:var(--green-border)}.btn-green:hover{background:var(--green-bg-hover)}
.btn-amber{background:var(--amber-bg);color:var(--amber-text);border-color:var(--amber-border)}.btn-amber:hover:not(:disabled){background:color-mix(in srgb,var(--amber-bg) 75%,var(--amber-border) 25%)}
.btn-purple{background:var(--purple-bg);color:var(--purple-text);border-color:var(--purple-border)}.btn-purple:hover:not(:disabled){background:color-mix(in srgb,var(--purple-bg) 75%,var(--purple-border) 25%)}
.btn-sm{padding:4px 10px;font-size:12px}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.b-blue{background:var(--link-bg);color:var(--link-text);border:1px solid var(--link)}
.b-green{background:var(--green-bg);color:var(--green-text);border:1px solid var(--green-border)}
.b-red{background:var(--red-bg);color:var(--red-text);border:1px solid var(--red-border)}
.b-amber{background:var(--amber-bg);color:var(--amber-text);border:1px solid var(--amber-border)}
.b-purple{background:var(--purple-bg);color:var(--purple-text);border:1px solid var(--purple-border)}
.b-dim{background:var(--bg-elev-3);color:var(--text-faint);border:1px solid var(--border)}
.b-ump{background:var(--purple-bg);color:var(--purple-text);border:1px solid var(--purple-border)}
.b-field{background:var(--green-bg);color:var(--green-text);border:1px solid var(--green-border)}
.b-conc{background:var(--amber-bg);color:var(--amber-text);border:1px solid var(--amber-border)}
.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px}
.card-title{font-weight:700;font-size:14px;margin-bottom:12px}
.ph{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.ph h2{font-size:20px;font-weight:800}.ph p{color:var(--text-dim);font-size:12px;margin-top:3px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.metric{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:10px;padding:14px}
.metric-label{font-size:11px;color:var(--text-dim);margin-bottom:4px;text-transform:uppercase;font-weight:700}
.metric-val{font-size:24px;font-weight:800}
.metric-sub{font-size:11px;color:var(--text-faint);margin-top:3px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:8px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);border-bottom:1px solid var(--border);font-weight:700}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}.tbl tr:hover td{background:var(--bg-elev-2)}
.form-group{margin-bottom:14px}
.form-label{font-size:11px;font-weight:700;color:var(--text-faint);margin-bottom:5px;display:block;text-transform:uppercase;letter-spacing:.06em}
.form-input{width:100%;padding:8px 11px;border:1px solid var(--border-control);border-radius:8px;font-size:13px;background:var(--bg-elev-3);color:var(--text);outline:none}
/* Two-layer focus ring: an inner --bg gap so the outer solid --link band reads
   against whatever content sits behind it (5.09:1 vs --bg, 3.83:1 vs --bg-elev-3),
   replacing the old single 35%-opacity band that washed out over light surfaces. */
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--link)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal{background:var(--bg-elev);border:1px solid var(--border);border-radius:14px;padding:22px;width:480px;max-width:100%;max-height:90vh;overflow-y:auto}
.modal-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.modal-title{font-weight:800;font-size:17px}
.toast{position:fixed;bottom:20px;right:20px;background:var(--bg-elev-3);border:1px solid var(--border-control);color:var(--text);padding:11px 16px;border-radius:10px;font-size:13px;font-weight:600;z-index:200;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.toast-s{background:var(--green-bg);border-color:var(--green-border)}
.toast-w{background:var(--red-bg);border-color:var(--red-border)}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:14px;padding:32px;width:360px}
.empty{text-align:center;padding:40px 16px;color:var(--text-faint)}
.inline-sel{border:1px solid var(--border-control);border-radius:6px;padding:4px 8px;font-size:12px;background:var(--bg-elev-3);color:var(--text);outline:none;cursor:pointer}
.inline-sel:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--link)}
.conf-banner{background:var(--red-bg);border:1px solid var(--red-border);border-radius:10px;padding:10px 14px;margin-bottom:16px;color:var(--red-text);font-size:13px}
.conf-banner-title{font-weight:700;margin-bottom:4px}
.wpb{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;margin-bottom:10px;flex-wrap:wrap}
.wpb-d{background:var(--amber-bg);border:1px solid var(--amber-border);color:var(--amber-text)}
.wpb-p{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green-text)}
.rsvp-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.rsvp-btn{padding:7px 16px;border-radius:8px;cursor:pointer;border:1px solid;font-weight:700;font-size:13px;transition:all .15s}
.rsvp-y{border-color:var(--green-border);background:var(--green-bg);color:var(--green-text)}.rsvp-y.on{background:var(--green-border);color:var(--white)}
.rsvp-n{border-color:var(--red-border);background:var(--red-bg);color:var(--red-text)}.rsvp-n.on{background:var(--red-border);color:var(--white)}
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:18px}
.wday{border:1px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;background:var(--bg-elev-2);transition:all .12s;font:inherit;width:100%;color:inherit}
.wday:hover{border-color:var(--border-control)}.wday.has{background:var(--link-bg);border-color:var(--link)}
.wday.sel{background:var(--link);border-color:var(--accent-border)}
.wday.sel .wd-n,.wday.sel .wd-d{color:var(--white)}
.wd-n{font-size:10px;font-weight:700;color:var(--text-dim);margin-bottom:2px}
.wd-d{font-size:16px;font-weight:800;color:var(--text)}
.wd-dot{width:5px;height:5px;border-radius:50%;background:var(--link);margin:4px auto 0}
.swap-slot{border:1px solid var(--border-control);background:var(--bg-elev-2);border-radius:8px;padding:8px 14px;font-size:12px;min-width:130px;cursor:pointer;transition:all .12s}
.swap-slot:hover{border-color:var(--link)}.swap-slot.sel{border-color:var(--link);background:var(--link-bg)}
.swap-slot-label{font-size:10px;color:var(--text-faint);margin-bottom:3px;font-weight:700;text-transform:uppercase}
.swap-slot-name{font-weight:600;color:var(--text)}.swap-slot.sel .swap-slot-name{color:var(--link-text)}
.wl-bar{height:5px;border-radius:3px;background:var(--border);overflow:hidden;margin:6px 0 10px}
.wl-fill{height:100%;border-radius:3px;background:var(--link)}.wl-fill.high{background:var(--red-border)}

@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--border-control);border-top-color:var(--link);animation:spin .7s linear infinite}
@media (prefers-reduced-motion: reduce){
  .spinner{animation:none;border-top-color:var(--border-control)}
}

@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.skel{background:var(--bg-elev-3);border-radius:6px;animation:skel-pulse 1.3s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .skel{animation:none;opacity:.75}
}

.tab-item{padding:10px 18px;cursor:pointer;color:var(--text-faint);transition:all .12s;display:inline-flex;align-items:center;gap:6px;border:none;border-bottom:2px solid transparent;background:none;font:inherit;font-weight:600;font-size:13px;white-space:nowrap}
.tab-item:hover{color:var(--text)}
.tab-item.active{color:var(--text);border-bottom-color:var(--tab-accent)}

/* ── Global additions ───────────────────────────────────────── */
.bottom-nav{display:none}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;z-index:300;padding:10px 16px;border-radius:8px;background:var(--accent);color:var(--white);font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--link)}
.cal-row{display:flex;gap:12px;align-items:center;width:100%;padding:12px 14px;margin-bottom:8px;border:1px solid var(--border);border-radius:9px;background:var(--bg-elev-2);color:inherit;font:inherit;text-align:left;cursor:pointer}
.cal-row:hover{background:var(--bg-elev-3)}
.conflict-pill{background:var(--red-bg);color:var(--red-text);border:1px solid var(--red-border);padding:3px 10px;cursor:pointer;border-radius:20px;font:inherit;font-size:11px;font-weight:700}
.topbar-name{font-size:13px;font-weight:600}

/* ── Mobile (≤640px) ─────────────────────────────────────────── */
@media(max-width:640px){
  .topbar{padding:env(safe-area-inset-top,0px) 12px 0;min-height:48px;height:auto}
  .topbar-name{display:none}
  .sidebar{display:none!important}
  .content{padding:12px 12px 80px}
  .content-worker{padding-bottom:76px}
  .ph{margin-bottom:14px}
  .ph h2{font-size:17px}
  .metrics{grid-template-columns:1fr 1fr}
  .g2{grid-template-columns:1fr}
  .modal{width:100%!important;border-radius:18px 18px 0 0!important;position:fixed!important;bottom:0!important;left:0!important;max-height:85vh;margin:0!important}
  .modal-wrap{align-items:flex-end!important;padding:0!important}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{min-width:500px}
  .week-strip{gap:3px}
  .wd-n{font-size:9px}
  .wd-d{font-size:14px}
  .btn{padding:9px 14px;font-size:14px}
  .btn-sm{padding:7px 12px;font-size:13px}
  .rsvp-btn{padding:10px 20px;font-size:14px}
  .card{padding:14px}
  .login-card{width:calc(100% - 32px);max-width:360px;padding:24px 20px}
  .badge{font-size:10px;padding:2px 7px}
  .form-input{font-size:16px}
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--bg-elev);border-top:1px solid var(--border);z-index:60;padding-bottom:env(safe-area-inset-bottom,0px)}
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px 6px;cursor:pointer;color:var(--text);transition:color .12s;min-height:56px;border:none;background:none;font:inherit}
  .bn-item.bn-active{color:var(--link)}
  .bn-icon{font-size:20px;line-height:1;margin-bottom:2px;position:relative;display:inline-block}
  .bn-label{font-size:10px;font-weight:600;letter-spacing:.02em}
  .bn-badge{position:absolute;top:-4px;right:-8px;background:var(--red-border);color:var(--white);border-radius:50%;font-size:9px;font-weight:700;min-width:14px;height:14px;display:flex;align-items:center;justify-content:center;padding:0 2px}
  .toast{bottom:70px;right:12px;left:12px;text-align:center}
  .ph-actions{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .ph-actions>.btn{flex:0 0 auto}
  .wpb>span{flex:1 1 100%!important;flex-wrap:wrap;font-size:13px!important}
}
.topbar-badges{display:inline-flex;gap:4px;align-items:center}
@media(max-width:640px){
  .topbar-badges{display:none}
  .content-admin{padding-bottom:76px}
}

.btn:focus-visible,.nav-item:focus-visible,.wday:focus-visible,.rsvp-btn:focus-visible,.swap-slot:focus-visible,.tab-item:focus-visible,.cal-row:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--link)}