/* =====================================================================
   ROOTS IVY Timetable, shared design system
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{
  --brand:#6d28d9; --brand-2:#4c1d95; --brand-3:#db2777; --brand-4:#2563eb;
  --brand-soft:rgba(109,40,217,.10); --brand-ring:rgba(109,40,217,.20);
  --ink:#0f172a; --ink-2:#334155; --ink-3:#64748b; --ink-4:#94a3b8;
  --bg:#f6f7fb; --surface:#ffffff; --surface-2:#fafbfd; --surface-3:#f1f3f9;
  --line:#e6e9f0; --line-2:#cbd2e0;
  --ok:#047857; --warn:#b45309; --bad:#be123c; --info:#1d4ed8;

  /* one spacing scale, used everywhere */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem;

  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 16px -6px rgba(15,23,42,.10);
  --shadow-md:0 2px 4px rgba(15,23,42,.04), 0 12px 28px -10px rgba(15,23,42,.16);
  --shadow-lg:0 24px 56px -20px rgba(15,23,42,.28);

  --r:14px; --r-sm:10px; --r-xs:7px; --r-lg:20px; --r-pill:999px;
  --header-h:60px;
  --ease:cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}
[data-theme="dark"]{
  --ink:#e8ecf5; --ink-2:#b8c2d6; --ink-3:#8b96ad; --ink-4:#66718a;
  --bg:#0a0d16; --surface:#141926; --surface-2:#10151f; --surface-3:#1c2334;
  --line:#242c3d; --line-2:#374056;
  --brand:#a78bfa; --brand-2:#7c3aed; --brand-3:#f472b6; --brand-4:#60a5fa;
  --brand-soft:rgba(167,139,250,.14); --brand-ring:rgba(167,139,250,.28);
  --ok:#34d399; --warn:#fbbf24; --bad:#fb7185; --info:#60a5fa;
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 20px -8px rgba(0,0,0,.6);
  --shadow-md:0 2px 6px rgba(0,0,0,.5), 0 16px 34px -12px rgba(0,0,0,.7);
  --shadow-lg:0 28px 64px -24px rgba(0,0,0,.85);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --ink:#e8ecf5; --ink-2:#b8c2d6; --ink-3:#8b96ad; --ink-4:#66718a;
  --bg:#0a0d16; --surface:#141926; --surface-2:#10151f; --surface-3:#1c2334;
  --line:#242c3d; --line-2:#374056;
  --brand:#a78bfa; --brand-2:#7c3aed; --brand-3:#f472b6; --brand-4:#60a5fa;
  --brand-soft:rgba(167,139,250,.14); --brand-ring:rgba(167,139,250,.28);
  --ok:#34d399; --warn:#fbbf24; --bad:#fb7185; --info:#60a5fa;
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 20px -8px rgba(0,0,0,.6);
  --shadow-md:0 2px 6px rgba(0,0,0,.5), 0 16px 34px -12px rgba(0,0,0,.7);
  --shadow-lg:0 28px 64px -24px rgba(0,0,0,.85);
  color-scheme:dark;
  }
}

*{box-sizing:border-box}
/* every size in the site is rem, so one number scales all text: --fs is the visitor's text-size choice (Aa menu) */
html{font-size:calc(15px * var(--fs,1))}
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.18;font-weight:800;letter-spacing:-.021em}
h1{font-size:1.65rem} h2{font-size:1.28rem} h3{font-size:1rem} h4{font-size:.9rem}
::selection{background:var(--brand-soft)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
p{margin:.4rem 0;line-height:1.6}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
     background:var(--surface-3);padding:1px 6px;border-radius:6px}
.muted{color:var(--ink-3);font-size:.86rem}
.tiny{font-size:.72rem}
.right{margin-left:auto}
.row{display:flex;align-items:center;gap:.6rem}
.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:.75rem}
.hidden{display:none!important}
.grow{flex:1;min-width:0}
.center{text-align:center}
.container{max-width:1400px;margin:0 auto;padding:0 20px}

/* ---------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:.48rem .85rem;border-radius:var(--r-sm);font:inherit;font-weight:600;font-size:.84rem;
  cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),
             color .15s var(--ease),box-shadow .15s var(--ease),transform .12s var(--ease);
  white-space:nowrap;box-shadow:var(--shadow-xs);line-height:1.3;
}
.btn:hover{border-color:var(--line-2);background:var(--surface-2);color:var(--ink)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{background:var(--brand);border-color:transparent;color:#fff;
             box-shadow:0 1px 2px rgba(15,23,42,.08),0 6px 14px -6px var(--brand-ring)}
.btn-primary:hover{background:var(--brand-2);color:#fff;
                   box-shadow:0 2px 4px rgba(15,23,42,.10),0 10px 22px -8px var(--brand-ring)}
[data-theme="dark"] .btn-primary{color:#160b2c}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2);box-shadow:none}
.btn-ghost:hover{background:var(--surface-3);color:var(--ink);border-color:transparent}
.btn-danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 28%,transparent);background:var(--surface)}
.btn-danger:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn-sm{padding:.3rem .58rem;font-size:.75rem;border-radius:var(--r-xs)}
.btn-lg{padding:.72rem 1.25rem;font-size:.93rem;border-radius:var(--r-sm);width:100%}
.icon-btn{width:34px;height:34px;padding:0;border-radius:var(--r-xs)}
.btn i{font-size:.9em}

/* ---------------------------------------------------------- forms */
input,select,textarea{
  width:100%;font:inherit;font-size:.86rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:.52rem .68rem;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
  box-shadow:var(--shadow-xs);
}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-4)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)
}
select{appearance:none;-webkit-appearance:none;padding-right:1.9rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%, calc(100% - 10px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input[type=color]{padding:2px;height:36px;cursor:pointer}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
label{display:block;font-size:.74rem;font-weight:700;color:var(--ink-3);
      text-transform:uppercase;letter-spacing:.05em}
label input,label select,label textarea{margin-top:.3rem;text-transform:none;letter-spacing:0}
.form-grid{display:grid;gap:.8rem}
.form-grid .two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.check{display:flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:600;
       color:var(--ink-2);text-transform:none;letter-spacing:0}
.check input{width:16px;flex:0 0 16px}

/* ---------------------------------------------------------- cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      box-shadow:var(--shadow);overflow:hidden}
.card-head{padding:.75rem 1rem;border-bottom:1px solid var(--line);
           display:flex;align-items:center;gap:.6rem;background:var(--surface-2)}
.card-head h3{font-size:.95rem}
.card-body{padding:1rem}
.pad{padding:1rem}

.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:800;
       padding:.15rem .5rem;border-radius:999px;background:var(--surface-3);color:var(--ink-2);
       text-transform:uppercase;letter-spacing:.04em}
.badge-brand{background:var(--brand-soft);color:var(--brand)}
.badge-ok{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)}
.badge-warn{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.badge-bad{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}

.alert{padding:.7rem .9rem;border-radius:var(--r-sm);font-size:.84rem;margin:.5rem 0;
       border:1px solid transparent;line-height:1.5;display:flex;gap:.5rem;align-items:flex-start}
.alert > i:first-child{margin-top:.15rem;flex:0 0 auto}
.alert-info{background:color-mix(in srgb,var(--info) 8%,transparent);
            border-color:color-mix(in srgb,var(--info) 24%,transparent);color:var(--info)}
.alert-error{background:color-mix(in srgb,var(--bad) 8%,transparent);
             border-color:color-mix(in srgb,var(--bad) 24%,transparent);color:var(--bad)}
.alert-ok{background:color-mix(in srgb,var(--ok) 9%,transparent);
          border-color:color-mix(in srgb,var(--ok) 24%,transparent);color:var(--ok)}
.alert-warn{background:color-mix(in srgb,var(--warn) 10%,transparent);
            border-color:color-mix(in srgb,var(--warn) 26%,transparent);color:var(--warn)}

/* ---------------------------------------------------------- tables */
table.data{width:100%;border-collapse:collapse;font-size:.82rem}
table.data th{
  text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);font-weight:800;padding:.55rem .6rem;border-bottom:1px solid var(--line);
  background:var(--surface-2);position:sticky;top:0;z-index:1
}
table.data td{padding:.5rem .6rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tbody tr{transition:background .12s var(--ease)}
table.data tbody tr:hover td{background:var(--surface-2)}
table.data tbody tr:last-child td{border-bottom:none}
.table-scroll{overflow:auto;max-height:60vh;border-radius:var(--r-sm);border:1px solid var(--line)}
.mini-table{width:100%;border-collapse:collapse;font-size:.8rem;margin-top:.6rem}
.mini-table th,.mini-table td{border:1px solid var(--line);padding:.4rem .55rem;text-align:left}

/* ---------------------------------------------------------- header */
.appbar{
  position:sticky;top:0;z-index:60;min-height:var(--header-h);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.75rem;padding:0 20px;
}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:900;letter-spacing:.02em;font-size:1rem}
.brand .mark{width:30px;height:30px;border-radius:9px;flex:0 0 30px;
  background:linear-gradient(135deg,var(--brand),var(--brand-3));
  display:grid;place-items:center;color:#fff;font-size:.8rem}
.appbar nav{display:flex;gap:.15rem;align-items:center}
.appbar nav a{padding:.42rem .7rem;border-radius:9px;font-size:.83rem;font-weight:600;color:var(--ink-2)}
.appbar nav a:hover{background:var(--surface-3);color:var(--ink)}
.appbar nav a.active{background:var(--brand-soft);color:var(--brand)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-4));
        color:#fff;display:grid;place-items:center;font-weight:800;font-size:.75rem;flex:0 0 32px}

/* ---------------------------------------------------------- auth pages */
.auth-body{min-height:100vh;display:grid;place-items:center;
  background:radial-gradient(1000px 600px at 15% -10%,rgba(124,58,237,.22),transparent 60%),
             radial-gradient(900px 600px at 110% 110%,rgba(59,130,246,.18),transparent 60%),var(--bg);
  padding:24px}
.auth-wrap{width:100%;max-width:420px}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
           padding:1.8rem;box-shadow:var(--shadow-lg)}
.auth-brand{display:flex;align-items:center;gap:.5rem;font-weight:900;letter-spacing:.14em;
            font-size:.76rem;text-transform:uppercase;color:var(--brand);margin-bottom:1rem}
.auth-brand .dot{width:9px;height:9px;border-radius:50%;
                 background:linear-gradient(135deg,var(--brand),var(--brand-3))}
.auth-card h1{margin-bottom:.4rem}
.report{font-size:.84rem;color:var(--ink-2);padding-left:1.1rem;line-height:1.8}

/* ---------------------------------------------------------- timetable grid */
.tt{width:100%;border-collapse:separate;border-spacing:0;font-size:.76rem;
    border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.tt th,.tt td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
.tt th:last-child,.tt td:last-child{border-right:none}
.tt thead th{
  background:var(--brand-2);color:#fff;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;
  padding:.5rem .35rem;text-align:center
}
.tt thead th.today{background:var(--warn)}
.tt .slot{background:var(--surface-2);color:var(--ink-2);font-weight:800;font-size:.66rem;
          text-align:center;padding:.4rem .25rem;white-space:nowrap;width:74px}
.tt .slot small{display:block;font-weight:600;color:var(--ink-4);font-size:.62rem}
.tt td.cell{vertical-align:top;padding:3px;min-width:104px;height:60px}
.tt td.cell.today{background:rgba(245,158,11,.08)}
.tt tr.break-row td{background:repeating-linear-gradient(45deg,var(--surface-3),var(--surface-3) 8px,transparent 8px,transparent 16px);
  text-align:center;font-weight:800;font-size:.68rem;color:var(--warn);
  text-transform:uppercase;letter-spacing:.1em;padding:.3rem}

.chip{
  display:block;border-radius:var(--r-xs);padding:5px 7px;height:100%;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);
  cursor:pointer;overflow:hidden;box-shadow:var(--shadow-xs);
  transition:transform .12s var(--ease),box-shadow .15s var(--ease),border-color .15s var(--ease)
}
.chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.chip b{display:block;font-size:.72rem;font-weight:700;line-height:1.25;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.chip span{display:block;font-size:.63rem;color:var(--ink-3);line-height:1.4;
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .chip-time{font-weight:700;color:var(--warn);font-size:.62rem;letter-spacing:.01em}
.chip.empty{border:1px dashed var(--line-2);border-left-style:dashed;background:transparent;
            display:grid;place-items:center;color:var(--ink-4);font-size:1rem;opacity:0;height:100%}
.tt td.cell:hover .chip.empty{opacity:.8}

/* ---------------------------------------------------------- slider */
.slider{position:relative;overflow:hidden;border-radius:var(--r)}
.slider-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.slide{flex:0 0 100%;min-width:0;padding:2px}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:.7rem;padding-top:.7rem}
.dots{display:flex;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line-2);cursor:pointer;transition:.25s;border:none;padding:0}
.dot.active{width:22px;border-radius:4px;background:linear-gradient(135deg,var(--brand),var(--brand-3))}

/* ---------------------------------------------------------- department cards */
.dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.dept-card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem;box-shadow:var(--shadow);transition:.2s;overflow:hidden;display:block
}
.dept-card{transition:transform .16s var(--ease),box-shadow .18s var(--ease),border-color .16s var(--ease)}
.dept-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent,var(--brand))}
.dept-card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent,var(--brand))}
.dept-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;
          font-size:1.05rem;background:var(--accent,var(--brand));margin-bottom:.7rem}
.dept-card h3{margin-bottom:.15rem}
.dept-meta{display:flex;gap:.9rem;margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--line)}
.dept-meta div{font-size:.68rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.dept-meta b{display:block;font-size:1.05rem;color:var(--ink);letter-spacing:-.02em}

/* ---------------------------------------------------------- hero */
.hero{padding:2.4rem 0 1.6rem;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.20),transparent 65%);
  top:-260px;right:-140px;pointer-events:none}
.hero h1{font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:.5rem}
.hero p{color:var(--ink-3);max-width:640px}
/* A page whose only content is the timetable: keep the masthead out of the way
   so the grid itself is above the fold. */
.hero-tight{padding:1.3rem 0 1rem}
.hero-tight h1{font-size:clamp(1.25rem,2.6vw,1.75rem);margin-bottom:.25rem}
.hero-tight p{font-size:.86rem}
.hero-tight .dept-logo-hero{height:42px;max-height:42px;margin-bottom:.55rem}
@media (max-width:640px){ .hero-tight .dept-logo-hero{height:34px;max-height:34px} }
.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
         color:var(--brand);margin-bottom:.5rem}

/* ---------------------------------------------------------- panel layout */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:calc(100vh - var(--header-h))}
.side{border-right:1px solid var(--line);background:var(--surface);padding:1rem .7rem;
      position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow:auto}
.side .group{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
             color:var(--ink-4);padding:.9rem .6rem .35rem}
.side a{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:9px;
        font-size:.85rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.side a i{width:16px;text-align:center;font-size:.8rem;color:var(--ink-4)}
.side a:hover{background:var(--surface-3);color:var(--ink)}
.side a{position:relative}
.side a.active{background:var(--brand-soft);color:var(--brand);font-weight:700}
.side a.active::before{content:'';position:absolute;left:-.7rem;top:20%;bottom:20%;
  width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.side a.active i{color:var(--brand)}
.main{padding:1.2rem 1.4rem 3rem;min-width:0}
.page-head{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.page-head h2{font-size:1.3rem}
.tabpage{display:none}
.tabpage.active{display:block}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin-bottom:1.2rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
       padding:.85rem 1rem;box-shadow:var(--shadow);transition:border-color .15s var(--ease)}
.stat:hover{border-color:var(--line-2)}
.stat b{display:block;font-size:1.55rem;letter-spacing:-.03em;line-height:1.15;
        font-variant-numeric:tabular-nums}
.stat span{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:700}

/* ---------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:200;background:rgba(8,11,20,.55);
       backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
       display:none;place-items:center;padding:20px;overflow:auto}
.modal.open{display:grid}
.modal-box{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:560px;
           box-shadow:var(--shadow-lg);border:1px solid var(--line);max-height:92vh;
           display:flex;flex-direction:column;animation:pop .2s ease}
.modal-box.wide{max-width:900px}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important;scroll-behavior:auto!important}
}
.modal-head{padding:1rem 1.2rem;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.6rem}
.modal-body{padding:1.2rem;overflow:auto}
.modal-foot{padding:.85rem 1.2rem;border-top:1px solid var(--line);display:flex;gap:.5rem;justify-content:flex-end;background:var(--surface-2)}

/* ---------------------------------------------------------- toast */
.toast{position:fixed;right:18px;bottom:18px;z-index:400;background:var(--surface);
       border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--r-sm);
       padding:.72rem .95rem;box-shadow:var(--shadow-lg);font-size:.85rem;font-weight:600;
       transform:translateY(140%);opacity:0;
       transition:transform .32s var(--ease),opacity .2s var(--ease);max-width:min(400px,90vw)}
.toast.show{opacity:1}
.toast.show{transform:none}
.toast.err{border-left-color:var(--bad)}
.toast.warn{border-left-color:var(--warn)}

/* ---------------------------------------------------------- misc */
.marquee{overflow:hidden;background:var(--surface);border-top:1px solid var(--line);
         border-bottom:1px solid var(--line);height:34px;display:flex;align-items:center}
.marquee-track{display:flex;white-space:nowrap;animation:mq 38s linear infinite;padding-left:100%}
.marquee-track:hover{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-100%)}}
.marquee-item{padding:0 2.4rem;font-size:.78rem;color:var(--ink-2);font-weight:600}
.marquee-item i{color:var(--warn);margin-right:.4rem}

.person{display:flex;align-items:center;gap:.6rem;padding:.55rem;border-radius:var(--r-sm);
        border:1px solid var(--line);background:var(--surface)}
.person .avatar{width:36px;height:36px;flex:0 0 36px;font-size:.8rem}
.person b{display:block;font-size:.84rem}
.person span{font-size:.72rem;color:var(--ink-3)}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.6rem}

.legend{display:flex;flex-wrap:wrap;gap:.5rem}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.legend span{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;
             font-weight:700;color:var(--ink-2);background:var(--surface-3);
             padding:.2rem .5rem;border-radius:999px}

.empty-state{text-align:center;padding:2.4rem 1rem;color:var(--ink-3)}
.empty-state i{font-size:2rem;color:var(--line-2);display:block;margin-bottom:.6rem}

.bar{height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-3))}

/* ---------------------------------------------------------- responsive */
@media (max-width:1023px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;display:flex;gap:.35rem;overflow-x:auto;
        border-right:none;border-bottom:1px solid var(--line);padding:.6rem}
  .side .group{display:none}
  .side a{white-space:nowrap}
  .main{padding:1rem}
}
@media (max-width:640px){
  html{font-size:calc(14px * var(--fs,1))}
  .container{padding:0 16px}
  .appbar{padding:0 16px;gap:.4rem}
  .appbar nav{display:none}
  .form-grid .two{grid-template-columns:1fr}
  .modal{padding:10px}
}
@media print{
  .appbar,.side,.no-print,.toast,.slider-nav{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  .tt{font-size:.68rem}
}

/* ---------------------------------------------------------- department logos
   Every rule caps max-height as well as height, so a shield can never blow up
   to its natural size if the stylesheet arrives late or an override misses. */
img[class^="dept-logo"], img[class*=" dept-logo"]{max-height:56px;width:auto;object-fit:contain}
.dept-logo{height:24px;max-height:24px;width:auto;object-fit:contain;flex-shrink:0}
.appbar .brand .dept-logo{height:24px;max-height:24px}
.card-head .dept-logo{height:26px;max-height:26px}
.dept-logo-lg{height:32px;max-height:32px;width:auto;object-fit:contain;margin-bottom:.6rem;display:block}
.dept-logo-hero{height:52px;max-height:52px;width:auto;object-fit:contain;margin-bottom:.8rem;display:block}
@media (max-width:640px){
  .dept-logo-hero{height:40px;max-height:40px}
  .appbar .brand .dept-logo{height:22px;max-height:22px}
}

/* =====================================================================
   DEPARTMENT BOARD: one section per school, each with its own slider
   ===================================================================== */
.deptboard{
  display:grid; gap:1rem; padding-bottom:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(560px,100%),1fr));
}
@media (max-width:1200px){ .deptboard{grid-template-columns:1fr} }

.deptsection{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;
  border-top:3px solid var(--accent,var(--brand));
}
.deptsection-head{
  display:flex; align-items:center; gap:.7rem; padding:.6rem .85rem;
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent,var(--brand)) 10%,transparent), transparent);
}
.deptsection-head .dept-logo{height:26px;max-height:26px}
.deptsection-head .dept-ico{
  width:28px;height:28px;margin:0;border-radius:8px;font-size:.8rem;
  background:var(--accent,var(--brand));display:grid;place-items:center;color:#fff;flex:0 0 28px;
}
.deptsection-head h2{font-size:1rem;letter-spacing:-.01em}
.deptsection-sub{
  display:block;font-size:.68rem;color:var(--ink-3);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38ch;
}
.prognow{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;min-width:0}
.prognow b{
  font-size:.78rem;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch;
}
/* Countdown to the next program: a hairline under the section header, the way
   a media player shows progress. Thin on purpose, it should read as "this is
   live" from across a room without competing with the timetable. */
.progbar{
  height:3px;width:100%;flex:0 0 3px;overflow:hidden;
  background:color-mix(in srgb,var(--accent,var(--brand)) 14%,transparent);
}
.progbar i{
  display:block;height:100%;width:0;background:var(--accent,var(--brand));
  box-shadow:0 0 8px color-mix(in srgb,var(--accent,var(--brand)) 60%,transparent);
}
@media (prefers-reduced-motion:reduce){ .progbar{display:none} }

.deptsection-body{padding:.5rem;overflow:auto;flex:1;transition:opacity .18s ease}
.deptsection-body.fading{opacity:.25}
.deptsection-body .empty-state{padding:1.6rem 1rem}

/* =====================================================================
   DISPLAY MODE (notice board / LCD)
   ===================================================================== */
.tv-only{display:none}
.tvbar{display:none}

body.tvmode{overflow:hidden;height:100vh}
body.tvmode .no-tv{display:none!important}
body.tvmode .tv-only{display:block}
body.tvmode .tvbar{
  display:flex;align-items:center;gap:1rem;padding:.7rem 1.4rem;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;height:66px;
}
body.tvmode .tvbar .mark{
  width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-size:1.1rem;
}
body.tvmode .tvbar b{display:block;font-size:1.15rem;font-weight:900;letter-spacing:.01em}
body.tvmode .tvbar span{display:block;font-size:.78rem;opacity:.85;font-weight:600}
body.tvmode .tvbar .sep{display:inline;opacity:.5;margin:0 .3rem}
body.tvmode .tvbar .right b{font-size:1.7rem;font-variant-numeric:tabular-nums;line-height:1}
body.tvmode .tvbar .right span{font-size:.76rem}

body.tvmode .deptboard{
  height:calc(100vh - 66px - 34px);
  max-width:none;padding:.6rem;gap:.6rem;
  grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  padding-bottom:.6rem;
}
body.tvmode .deptsection{min-height:0}
body.tvmode .deptsection-body{padding:.35rem}
body.tvmode .marquee{position:fixed;bottom:0;left:0;right:0;height:34px;z-index:50}

/* the grid has to stay readable from across a room */
body.tvmode .tt{font-size:.82rem}
body.tvmode .tt thead th{font-size:.72rem;padding:.35rem .3rem}
body.tvmode .tt .slot{font-size:.7rem;width:66px}
body.tvmode .tt td.cell{min-height:0;height:auto;padding:2px}
body.tvmode .chip b{font-size:.78rem}
body.tvmode .chip span{font-size:.68rem}
body.tvmode .deptsection-head{padding:.4rem .7rem}
body.tvmode .deptsection-head h2{font-size:1.05rem}
/* readable from across a room */
body.tvmode .progbar{height:4px;flex-basis:4px}

@media (min-width:2200px){          /* large LCD panels */
  body.tvmode .tt{font-size:1rem}
  body.tvmode .chip b{font-size:.95rem}
  body.tvmode .chip span{font-size:.82rem}
  body.tvmode .tvbar b{font-size:1.5rem}
  body.tvmode .tvbar .right b{font-size:2.2rem}
}
@media (max-width:900px){
  body.tvmode{overflow:auto;height:auto}
  body.tvmode .deptboard{grid-template-columns:1fr;grid-template-rows:none;height:auto}
}

.tvexit{
  position:fixed;top:14px;right:14px;z-index:80;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;display:none;place-items:center;opacity:0;transition:.2s;
}
body.tvmode .tvexit{display:grid}
body.tvmode:hover .tvexit{opacity:1}

/* ---------------------------------------------------------- small screens: keep the header on one line */
@media (max-width:640px){
  .appbar{gap:.35rem;padding:0 12px}
  .appbar .right{gap:.3rem;min-width:0;flex-wrap:nowrap;overflow:hidden}
  .appbar .right .badge,
  .appbar .right .hide-sm{display:none}
  .appbar .brand{font-size:.9rem;min-width:0;overflow:hidden;white-space:nowrap}
  .appbar .btn-sm{padding:.3rem .5rem}
  .appbar .btn-sm .label-sm{display:none}
}

/* Display mode: let each timetable fill its section so rows are tall and legible */
body.tvmode .deptsection-body{display:flex}
body.tvmode .deptsection-body .tt{height:100%;width:100%}
body.tvmode .deptsection-body .tt td.cell{height:auto}
body.tvmode .deptsection-body .empty-state{margin:auto}
body.tvmode .chip{display:flex;flex-direction:column;justify-content:center}

/* Numbered period rows, matching the printed timetables where Mon/Tue and
   Wed/Thu run at different times */
.tt .slot-num{font-size:1rem;font-weight:900;color:var(--brand);letter-spacing:0}
.chip .chip-time.plain{color:var(--ink-3);font-weight:700}
body.tvmode .tt .slot-num{font-size:1.15rem}

/* Display mode: rows still share the height, but a lone row keeps its card a
   sensible size instead of stretching into a tall empty box */
body.tvmode .deptsection-body .tt td.cell{vertical-align:middle}
body.tvmode .deptsection-body .chip{height:auto;min-height:52px;max-height:190px}

/* =====================================================================
   NEW UI PIECES
   ===================================================================== */

/* Segmented control, used for the two sign-in modes */
.segmented{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.25rem;
  background:var(--surface-3);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.25rem;margin-bottom:1.2rem;
}
.segmented a,.segmented button{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.5rem .6rem;border-radius:var(--r-xs);font:inherit;font-size:.82rem;font-weight:700;
  color:var(--ink-3);transition:.15s var(--ease);
  border:0;background:transparent;cursor:pointer;text-align:center;line-height:1.25;
}
.segmented a:hover,.segmented button:hover{color:var(--ink)}
.segmented a.on,.segmented button.on{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-xs)}
@media (max-width:520px){ .segmented{grid-auto-flow:row} }

/* Radio cards, used to pick a department at sign-in */
.pickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:.5rem}
.picker{margin:0;cursor:pointer;text-transform:none;letter-spacing:0}
.picker input{position:absolute;opacity:0;width:0;height:0}
.picker-body{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;
  padding:.7rem .5rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);transition:.15s var(--ease);height:100%;box-shadow:var(--shadow-xs);
}
.picker-body img{height:24px;max-height:24px;width:auto;object-fit:contain}
.picker-body b{font-size:.85rem;color:var(--ink);font-weight:800}
.picker-body small{font-size:.65rem;color:var(--ink-3);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.picker:hover .picker-body{border-color:var(--ink-4)}
.picker input:checked + .picker-body{
  border-color:var(--accent,var(--brand));background:var(--brand-soft);
  box-shadow:0 0 0 3px var(--brand-ring);
}
.picker input:focus-visible + .picker-body{outline:2px solid var(--brand);outline-offset:2px}

/* Password field with a reveal button */
.input-reveal{position:relative;display:block}
.input-reveal input{padding-right:2.4rem}
.input-reveal .reveal{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:none;background:transparent;color:var(--ink-4);
  cursor:pointer;border-radius:var(--r-xs);display:grid;place-items:center;padding:0;
}
.input-reveal .reveal:hover{color:var(--ink-2);background:var(--surface-3)}

/* Grouped settings block inside a modal */
.fieldset{
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.8rem;background:var(--surface-2);
}
.fieldset-head{display:flex;align-items:flex-start;gap:.55rem;margin-bottom:.7rem}
.fieldset-head > i{color:var(--brand);margin-top:.15rem}
.fieldset-head b{display:block;font-size:.85rem}
.fieldset-head span{display:block;line-height:1.4}

/* Sign-in page shell */
.auth-mark{
  display:flex;align-items:center;gap:.65rem;justify-content:center;margin-bottom:1.1rem;
}
.auth-mark .mark{
  width:38px;height:38px;border-radius:11px;flex:0 0 38px;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-size:1rem;box-shadow:0 6px 16px -6px var(--brand-ring);
}
.auth-mark b{display:block;font-size:1rem;font-weight:900;letter-spacing:.01em}
.auth-mark span{display:block;font-size:.74rem;color:var(--ink-3);font-weight:600}
.auth-lede{margin-bottom:1.1rem;line-height:1.55}
.auth-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--line);
}
.auth-foot a{font-size:.8rem;color:var(--ink-3);font-weight:600}
.auth-foot a:hover{color:var(--brand)}

/* Loading skeletons */
.skel{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);
      background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:var(--r-xs)}
@keyframes shimmer{to{background-position:-200% 0}}
.skel-row{height:12px;margin:.5rem 0}


/* =====================================================================
   MAIN PAGE: responsive board, text-size menu, phone list view
   ===================================================================== */

/* Aa menu (text size + layout). Lives in <body>, not the header: the header's
   backdrop-filter would otherwise trap a fixed child inside it. */
.disp-pop{position:fixed;z-index:75;top:66px;right:12px;width:min(320px,calc(100vw - 24px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:.9rem;display:none}
.disp-pop.open{display:block}
.disp-pop h4{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:0 0 .45rem}
.disp-pop .grp+.grp{margin-top:.9rem}
.fs-row{display:flex;align-items:center;gap:.4rem}
.fs-row .btn{flex:1;justify-content:center;min-height:38px}
.fs-row .fs-val{flex:1.2;font-variant-numeric:tabular-nums}
.fs-sample{margin-top:.5rem;font-size:.85rem;color:var(--ink-3)}
.seg{display:flex;border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.seg button{flex:1;padding:.5rem .3rem;border:0;background:transparent;font:inherit;font-weight:700;
  font-size:.78rem;cursor:pointer;color:var(--ink-2);min-height:38px}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button.on{background:var(--brand);color:#fff}

/* department shortcuts, phones and tablets only */
.jumpbar{display:none}
@media (max-width:1100px){
  .appbar nav.dept-nav{display:none}   /* the shortcut strip below the header replaces it */
  .jumpbar{display:flex;gap:.4rem;overflow-x:auto;padding:.6rem 16px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .jumpbar::-webkit-scrollbar{display:none}
  .jumpbar a{flex:0 0 auto;padding:.42rem .8rem;border-radius:999px;font-size:.8rem;font-weight:700;
    border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);white-space:nowrap}
  .jumpbar a:active{background:var(--brand-soft);color:var(--brand)}
  .deptsection{scroll-margin-top:calc(var(--header-h) + 8px)}
  .deptsection-body .tt td.cell{min-width:92px}
}
.deptsection{scroll-margin-top:calc(var(--header-h) + 8px)}
.brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* previous / next program, for anyone without a mouse to hover and read */
.progrow{display:flex;align-items:center;gap:.15rem;min-width:0}
.ps-btn{border:0;background:transparent;color:var(--ink-3);width:26px;height:26px;border-radius:50%;
  cursor:pointer;display:grid;place-items:center;flex:0 0 26px;font-size:1.25rem;line-height:1;padding:0 0 2px}
.ps-btn:hover{background:var(--surface-3);color:var(--ink)}
@media (hover:none){ .ps-btn{width:36px;height:36px;flex-basis:36px;font-size:1.5rem} }

@media (max-width:640px){
  .deptsection-head{flex-wrap:wrap;row-gap:.35rem}
  .deptsection-head .grow{min-width:0}
  .deptsection-sub{max-width:none;white-space:normal}
  .prognow{order:3;flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem}
  .prognow b{max-width:none;flex:1;text-align:center}
  .progrow{flex:1;justify-content:space-between}
  .deptboard{padding-bottom:1.6rem}
  .deptsection-body{padding:.4rem}
  .appbar .brand-name{max-width:34vw}
}

/* phone list view: one collapsible card per day instead of a wide grid */
.agenda{display:flex;flex-direction:column;gap:.5rem}
.ag-day{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.ag-day summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  padding:.65rem .8rem;font-size:.92rem;background:var(--surface-2);min-height:44px}
.ag-day summary::-webkit-details-marker{display:none}
.ag-day summary small{color:var(--ink-3);font-weight:600;font-size:.75rem}
.ag-day summary::after{content:'';margin-left:auto;width:.5rem;height:.5rem;flex:0 0 .5rem;
  border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.ag-day[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.ag-day.today summary{background:color-mix(in srgb,var(--warn) 13%,var(--surface))}
.ag-item{display:grid;grid-template-columns:4.4rem 1fr;gap:.65rem;padding:.6rem .8rem;
  border-top:1px solid var(--line);border-left:3px solid var(--brand)}
.ag-item time{font-weight:800;font-size:.86rem;font-variant-numeric:tabular-nums;line-height:1.3}
.ag-item time small{display:block;font-weight:600;color:var(--ink-4);font-size:.72rem}
.ag-item b{display:block;font-size:.92rem;line-height:1.3}
.ag-item span{display:block;font-size:.8rem;color:var(--ink-3);line-height:1.5}

/* Larger text can push the header's buttons past the edge: let the header wrap rather than overflow.
   (Phones keep the single-line header from the rule above, where the brand name shrinks instead.) */
@media (min-width:641px){
  .appbar{flex-wrap:wrap;row-gap:.3rem;padding-top:.3rem;padding-bottom:.3rem}
}

/* =====================================================================
   DISPLAY MODE: every timetable fits its box, nothing scrolls
   index.php measures each box and sets its font-size (px) to the largest size at which the
   whole timetable fits. Everything inside is in em, so text, padding and row heights all shrink
   together. Columns share the width equally and long names wrap instead of being cut off.
   ===================================================================== */
body.tvmode .deptsection-body{overflow:hidden;font-size:12px;padding:.25rem}
body.tvmode .deptsection-body .tt{table-layout:fixed;width:100%;height:100%;font-size:1em;border-radius:.5em}
body.tvmode .deptsection-body .tt thead th{font-size:.8em;padding:.3em .2em}
body.tvmode .deptsection-body .tt thead th:first-child{width:5em!important;font-size:.62em;letter-spacing:.02em}
body.tvmode .deptsection-body .tt .slot{width:5em;font-size:.85em;padding:.2em .1em}
body.tvmode .deptsection-body .tt .slot small{font-size:.85em}
body.tvmode .deptsection-body .tt .slot-num{font-size:1.1em}
body.tvmode .deptsection-body .tt td.cell{min-width:0;padding:.15em;height:auto}
body.tvmode .deptsection-body .tt tr.break-row td{font-size:.75em;padding:.15em}
body.tvmode .deptsection-body .chip{padding:.3em .45em;border-radius:.4em;min-height:0;max-height:none;height:auto}
body.tvmode .deptsection-body .chip b{font-size:1em;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
body.tvmode .deptsection-body .chip span{font-size:.82em;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
body.tvmode .deptsection-body .chip .chip-time{font-size:.8em}
body.tvmode .deptsection-body .empty-state{padding:.5em}

/* Teacher and room run on one line (wrapping if they must) instead of one line each: a row needs
   about a third less height, which is what lets a full week of lectures fit a small screen. */
body.tvmode .deptsection-body .chip{padding:.25em .4em}
body.tvmode .deptsection-body .chip span{display:inline}
body.tvmode .deptsection-body .chip span + span::before{content:" \00b7  ";opacity:.55}
body.tvmode .deptsection-body .tt thead th{padding:.25em .2em}
@media (max-height:820px){
  body.tvmode .deptsection-sub{display:none}      /* the school's full name; the short name stays */
  body.tvmode .deptsection-head{padding:.3rem .6rem}
}
@media (max-height:820px){          /* short screens: slimmer top and bottom bars give the timetables the room */
  body.tvmode .tvbar{height:48px;padding:.3rem 1.2rem}
  body.tvmode .tvbar .mark{width:30px;height:30px;flex-basis:30px;font-size:.9rem}
  body.tvmode .tvbar b{font-size:1rem}
  body.tvmode .tvbar .right b{font-size:1.3rem}
  body.tvmode .marquee{height:28px}
  body.tvmode .deptboard{height:calc(100vh - 48px - 28px);padding:.4rem;gap:.4rem}
}
/* the older display rule made the chip a flex column, which would keep every span on its own line */
body.tvmode .deptsection-body .chip{display:block}
body.tvmode .deptsection-body .chip .chip-time{display:block}
body.tvmode .deptsection-body .chip .chip-time + span::before{content:none}
/* each detail (teacher, room) moves as a unit, so "Room 9" is never split across two lines */
body.tvmode .deptsection-body .chip span{display:inline-block;max-width:100%;margin-right:.35em}
body.tvmode .deptsection-body .chip .chip-time{display:block}


/* =====================================================================
   DISPLAY MODE 2 (?tv=2): only today's classes, one list per school
   Sized in em like the weekly display; index.php sets each box's font-size to the largest that fits.
   ===================================================================== */
body.tvtoday .deptsection-body{display:block;overflow:hidden;font-size:14px;padding:.35rem .6rem}
body.tvtoday .deptsection-body .empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.3em;padding:.5em}
.todaytbl{width:100%;border-collapse:collapse}
.todaytbl th{text-align:left;font-size:.62em;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
  padding:.3em .55em;border-bottom:2px solid var(--line)}
.todaytbl td{padding:.42em .55em;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.92em;line-height:1.25}
.todaytbl td.tm{white-space:nowrap;width:1%;font-weight:800;font-variant-numeric:tabular-nums}
.todaytbl td.tm small{display:block;font-weight:600;color:var(--ink-4);font-size:.78em}
.todaytbl td.pg{width:1%}
.todaytbl td.pg span{display:inline-block;white-space:nowrap;padding:.12em .55em;border-radius:.45em;font-weight:800;
  font-size:.85em;color:var(--pc);background:color-mix(in srgb,var(--pc) 13%,transparent)}
.todaytbl td.co b{font-weight:800}
.todaytbl td.rm{white-space:nowrap;font-weight:700;width:1%}
.todaytbl tr.past{opacity:.4}
.todaytbl tr.now{background:color-mix(in srgb,var(--pc) 15%,var(--surface));box-shadow:inset .3em 0 0 var(--pc)}
.todaytbl tr.now td.co b{color:var(--pc)}
.nowpill{display:inline-block;margin-top:.2em;padding:.05em .4em;border-radius:.4em;background:var(--pc);color:#fff;
  font-style:normal;font-weight:900;font-size:.62em;letter-spacing:.08em}

/* ---------------------------------------------------------- room availability page */
.rb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.9rem}
.rb-card{border-left:4px solid var(--line-2)}
.rb-card.rb-free{border-left-color:var(--ok)}
.rb-card.rb-occupied{border-left-color:var(--bad)}
.rb-card.rb-closed{border-left-color:var(--warn)}
.rb-bar{position:relative;height:10px;border-radius:99px;background:color-mix(in srgb,var(--ok) 18%,var(--surface-2,transparent));overflow:hidden}
.rb-blk{position:absolute;top:0;bottom:0;background:var(--bad);opacity:.85}
.rb-now{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink,#111)}
.rb-scale{display:flex;justify-content:space-between;font-size:.66rem;color:var(--ink-3);margin-top:.2rem}