/* iTAN staff portal. Same palette and type as the public site, laid out as a working tool. */
:root{--paper:#ffffff;--card:#fff;--ink:#231f20;--muted:#5e5b5c;--line:#dedede;--gold:#c8a24d;--gold-ink:#735a23;--olive:#231f20;--olive-2:#3a3536;--red:#a23a26;--green:#2f6b3d}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overscroll-behavior:none}
body{background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,dl,dd{margin:0}ul{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:transparent}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #ad8835;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.muted{color:var(--muted)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#846829}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border:1px solid var(--olive);border-radius:2px;background:#fff;font-size:13px;font-weight:700;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:#ebebeb}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#231f20}
.btn-gold:hover{background:#cfae63;border-color:#cfae63}
.btn-danger{border-color:#c9553f;color:var(--red)}
.btn-danger:hover{background:#fbeee9}
.btn-sm{min-height:34px;padding:0 12px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:default}
.linkish{font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:0;text-align:left}
.linkish:hover{color:var(--gold-ink)}
.linkish.on-dark{color:#cfcbcc}
.linkish.on-dark:hover{color:#fff}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #bdbdbd;border-radius:2px;background:#fff;font-size:14px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--olive);box-shadow:0 0 0 3px rgba(138,138,138,.35)}
textarea{min-height:84px;resize:vertical}
.form-error{font-size:13px;font-weight:600;color:var(--red)}

/* sign in */
.login{min-height:100svh;display:grid;place-content:center;justify-items:center;gap:18px;padding:24px;background:var(--olive)}
.login-card{width:min(420px,100%);padding:36px 34px 28px;background:var(--paper);border-radius:4px;display:grid;gap:12px}
.login-card img{height:56px;width:auto}
.login-card h1{font-size:34px;line-height:1.05;letter-spacing:-.05em;font-weight:500;margin-top:6px}
.login-card form{display:grid;gap:8px;margin-top:8px}
.login-card label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#846829;margin-top:6px}
.login-card .btn{margin-top:12px;min-height:48px}
.fine{font-size:12px;color:var(--muted)}
.login-back{font-size:13px;color:#cfcbcc}

/* shell */
.app{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100svh}
.side{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;gap:26px;padding:22px 16px;background:var(--olive);color:#ffffff}
.side-logo img{display:block;height:46px;width:auto;margin-left:8px}
.side-nav{display:grid;gap:4px}
.side-nav button{display:flex;align-items:center;gap:11px;text-align:left;padding:11px 12px;border-radius:2px;font-size:14px;font-weight:600;color:#d9d6d7;transition:background .2s,color .2s}
.side-nav button:hover{background:var(--olive-2);color:#fff}
/* Selected page: near-black on white. #231f20 on #fff is about 16:1. */
.side-nav button[aria-current=page]{background:#fff;color:#231f20}
.side-nav svg,.side-out svg{flex:none;width:18px;height:18px}
.side-foot{margin-top:auto;display:grid;gap:10px;padding:0 8px}
.side-out{display:flex;align-items:center;gap:11px;margin:0 -8px;padding:11px 12px;border-radius:2px;font-size:14px;font-weight:600;color:#d9d6d7;text-align:left;transition:background .2s,color .2s}
.side-out:hover{background:var(--olive-2);color:#fff}
.side-user{display:grid;font-size:13px;line-height:1.35}
.side-user span{color:#b4b4b4;font-size:12px}
.main{min-width:0;padding:26px clamp(18px,3vw,40px) 60px}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:22px}
.top h1{font-size:clamp(30px,3vw,40px);line-height:1.05;letter-spacing:-.055em;font-weight:500}
.top-tools{display:flex;gap:10px;align-items:center}
.picker{position:relative}
.picker-btn{display:inline-flex;align-items:center;gap:9px;width:184px;min-height:42px;padding:0 14px 0 12px;border:1px solid var(--olive);border-radius:2px;background:#fff;font-size:13px;font-weight:700;transition:border-color .2s,background .2s}
.picker-btn:hover,.picker-btn[aria-expanded=true]{border-color:var(--olive);background:#f4f4f4}
.picker-btn>svg{flex:none}
.picker-btn>svg:first-child{color:var(--gold-ink)}
#studio-name{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-chev{color:var(--muted);transition:transform .2s}
.picker-btn[aria-expanded=true] .picker-chev{transform:rotate(180deg)}
.picker-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:15;min-width:100%;padding:6px;display:grid;gap:2px;background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:0 18px 40px -18px rgba(35,31,32,.45)}
.picker-menu button{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:2px;text-align:left;font-size:14px;font-weight:500;transition:background .15s}
.picker-menu button:hover,.picker-menu button:focus-visible{background:#f1e7d1}
.picker-menu button[aria-selected=true]{font-weight:700}
.picker-menu button[aria-selected=true]::after{content:"✓";color:var(--gold-ink);font-weight:700}
select.plain,.filters select{-webkit-appearance:none;appearance:none;padding-right:36px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2320211c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center;cursor:pointer}

.card{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:18px 20px}
.card>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.card h2{font-size:19px;letter-spacing:-.03em;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{display:grid;gap:2px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:2px}
.kpi b{font-size:34px;line-height:1.05;letter-spacing:-.05em;font-weight:500}
.kpi span{font-size:13px;font-weight:600}
.kpi small{font-size:12px;color:var(--muted)}
.cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.split>*{min-width:0}
.cols>*{min-width:0}
.lines{display:grid}
.lines+.lines{border-top:1px dashed var(--line)}
.line{display:grid;grid-template-columns:78px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 6px;border-top:1px solid #ebebeb;cursor:pointer;transition:background .15s}
.line:first-child{border-top:0}
.line:hover{background:#f4f4f4}
.line-time{font-size:13px;font-weight:700;white-space:nowrap}
.line-main{display:grid;min-width:0}
.line-main b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-main small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{padding:26px 8px;text-align:center;color:var(--muted);font-size:14px}

.pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;background:#ebebeb;color:#4a4647}
.pill.is-booked{background:#f1e7d1;color:var(--gold-ink)}
.pill.is-checked-in{background:#e0efe2;color:var(--green)}
.pill.is-completed{background:#ebebeb;color:#4a4647}
.pill.is-no-show{background:#fbeee9;color:var(--red)}
.pill.is-cancelled{background:#efefef;color:#77776f;text-decoration:line-through}
.src{font-size:12px;color:var(--muted)}
.src.is-online{color:var(--gold-ink);font-weight:700}
.tag{display:inline-block;margin-left:4px;padding:1px 8px;border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:700;color:#4a4647}
.tag.is-new{border-color:#ad8835;color:var(--gold-ink)}
.tag.is-warn{border-color:#c9553f;color:var(--red)}

.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{padding:10px 12px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#846829;border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:11px 12px;border-bottom:1px solid #ebebeb;vertical-align:top}
.table td small{display:block;font-size:12px;color:var(--muted)}
.table tbody tr{cursor:pointer;transition:background .15s}
.table tbody tr:hover{background:#f4f4f4}
.table tbody tr:last-child td{border-bottom:0}
.table.compact td,.table.compact th{padding:8px 8px}
.table .ref{font-size:12px;color:var(--muted);white-space:nowrap}
.table-card{padding:6px 8px}
.grid-scroll{overflow-x:auto}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.filters input[type=search]{flex:1 1 260px;max-width:420px}
.filters select{width:auto}

.bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:end;height:150px}
.bar{display:grid;grid-template-rows:1fr auto auto;gap:4px;height:100%;justify-items:center;font-size:12px}
.bar i{align-self:end;width:100%;max-width:46px;min-height:4px;background:var(--gold);border-radius:2px 2px 0 0;transition:background .2s}
.bar:hover i{background:var(--olive)}
.bar b{font-size:13px}
.bar span{color:var(--muted)}

/* schedule grid */
.daynav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.daynav-pick{position:relative}
.daynav-date{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:272px;min-height:36px;padding:0 14px;border:1px solid var(--olive);border-radius:2px;background:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em;transition:background .15s}
.daynav-date:hover,.daynav-date[aria-expanded=true]{background:#ebebeb}
.daynav-date svg:first-child{color:var(--gold-ink)}
.daynav-date svg:last-child{color:var(--muted)}
.daynav-pop{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);z-index:30;width:320px;text-align:left}
.daynav-pop .cal{position:static;box-shadow:0 20px 44px -18px rgba(35,31,32,.5)}
.card.grid-card{padding:0;overflow:hidden}
.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.grid th,.grid td{border-bottom:1px solid #ebebeb;border-right:1px solid #ebebeb;padding:4px}
.grid thead th{position:sticky;top:0;background:#fafafa;padding:10px 8px;text-align:left;min-width:104px;vertical-align:bottom;z-index:1}
.grid thead th b{display:block;font-size:13px;line-height:1.25}
.grid thead th small{font-size:11px;color:var(--muted);font-weight:500}
.grid thead th:first-child,.grid tbody th{position:sticky;left:0;min-width:84px;width:84px;background:#fafafa;font-size:12px;font-weight:700;white-space:nowrap;text-align:left;padding:8px 10px;z-index:2}
.grid td{height:44px;min-width:104px}
.grid td.is-past{background:repeating-linear-gradient(135deg,#f7f7f7,#f7f7f7 6px,#f0f0f0 6px,#f0f0f0 12px)}
.grid tr.is-now th{background:var(--gold);color:#231f20}
.chip{display:grid;width:100%;height:100%;min-height:36px;align-content:center;padding:4px 8px;border-radius:2px;text-align:left;background:#f1e7d1;border-left:3px solid #ad8835;transition:background .15s}
.chip:hover{background:#e4d1a7}
.chip b{font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip small{font-size:10px;color:var(--muted)}
.chip.is-checked-in{background:#e0efe2;border-left-color:var(--green)}
.chip.is-completed{background:#ebebeb;border-left-color:#969696}
.chip.is-no-show{background:#fbeee9;border-left-color:#c9553f}
.slot-add{width:100%;height:100%;min-height:36px;border-radius:2px;color:transparent;font-size:18px;transition:background .15s,color .15s}
.slot-add:hover,.slot-add:focus-visible{background:#f3e9cf;color:var(--gold-ink)}

/* drawer + modal */
.scrim{position:fixed;inset:0;background:rgba(17,17,17,.4);z-index:20}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--paper);border-left:1px solid var(--line);padding:26px 26px 40px;overflow-y:auto;z-index:21}
.drawer-close{position:absolute;right:12px;top:10px;width:40px;height:40px;font-size:17px}
.drawer h2{font-size:27px;line-height:1.1;letter-spacing:-.045em;font-weight:500;margin:6px 0 10px;padding-right:30px}
.drawer h3{font-size:15px;font-weight:700;margin:22px 0 4px}
.d-photo{margin:14px 0 2px;height:150px;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.d-photo img{max-width:100%;max-height:140px;object-fit:contain;padding:8px}
.d-list{display:grid;margin:14px 0}
.d-list div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.d-list dt{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#846829;padding-top:2px}
.d-list dd small{display:block;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.d-label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#846829;margin-bottom:6px}
.d-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.drawer .line{grid-template-columns:62px minmax(0,1fr) auto}
.modal{border:0;border-radius:4px;background:var(--paper);color:var(--ink);padding:28px 30px 0;width:min(900px,calc(100% - 24px));max-height:calc(100svh - 32px)}
.modal::backdrop{background:rgba(17,17,17,.5)}
.modal h2{font-size:28px;letter-spacing:-.045em;font-weight:500;margin-bottom:16px}
.nb{display:grid;gap:18px}
.nb fieldset{border:0;margin:0;padding:0;min-width:0}
.nb legend{padding:0;margin-bottom:10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#846829}
.nb-row{display:flex;flex-wrap:wrap;gap:8px}
.nb-chip{min-height:40px;padding:0 14px;border:1px solid #bdbdbd;border-radius:2px;background:#fff;font-size:13px;font-weight:600;transition:background .15s,border-color .15s,color .15s}
.nb-chip:hover{border-color:var(--olive)}
.nb-chip[aria-pressed=true],.nb-bed[aria-pressed=true]{background:var(--olive);border-color:var(--olive);color:#ffffff}
.nb-chip[disabled]{opacity:.45;cursor:not-allowed}
.nb-day{display:grid;gap:1px;justify-items:center;min-width:86px;padding:6px 12px}
.nb-day small{font-size:11px;font-weight:500;color:var(--muted)}
.nb-day[aria-pressed=true] small{color:#dcdcdc}
.nb-group{font-size:13px;font-weight:700;margin:12px 0 8px}
.nb-group:first-of-type{margin-top:0}
.nb-beds{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.nb-bed{display:grid;gap:3px;align-content:start;justify-items:start;text-align:left;padding:8px 10px 10px;border:1px solid var(--line);border-radius:2px;background:#fff;transition:border-color .15s,background .15s,color .15s}
.nb-bed:hover{border-color:var(--olive)}
.nb-photo{display:grid;place-items:center;width:100%;height:92px;margin-bottom:5px;background:#fff;border-radius:2px;overflow:hidden}
.nb-photo img{max-width:100%;max-height:92px;object-fit:contain;padding:4px}
.nb-bed b{font-size:14px;line-height:1.25}
.nb-bed small{font-size:11px;color:var(--muted)}
.nb-bed[aria-pressed=true] small{color:#cfcbcc}
.nb-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.nb-times .nb-chip{padding:0 6px}
.nb-none{padding:14px 0 4px}
.nb-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.nb-fields label{display:grid;gap:5px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#846829}
.nb-fields input{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.nb-foot{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:4px -30px 0;padding:14px 30px;background:var(--paper);border-top:1px solid var(--line)}
.nb-summary{font-size:14px}
.nb-actions{display:flex;gap:10px;margin-left:auto}

/* dashboard: period selector, sign-up trend, studio comparison */
.bar-row{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:14px}
.seg{display:inline-flex;border:1px solid #bdbdbd;border-radius:2px;background:#fff;overflow:hidden}
.seg button{min-height:38px;padding:0 14px;font-size:13px;font-weight:600;border-left:1px solid #dedede;transition:background .15s,color .15s}
.seg button:first-child{border-left:0}
.seg button:hover{background:#f0f0f0}
.seg button[aria-pressed=true]{background:var(--olive);color:#ffffff}
.kpi.is-range{border-top-color:var(--olive)}
.delta{font-style:normal;font-size:12px;color:var(--muted)}
.delta.is-good,.good{color:var(--green)}
.delta.is-bad,.bad{color:var(--red)}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.quick.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.quick div{display:grid;gap:1px;padding:10px 12px;background:#f4f4f4;border:1px solid #ebebeb}
.quick b{font-size:26px;line-height:1.1;letter-spacing:-.04em;font-weight:500}
.quick span{font-size:12px;color:var(--muted)}
.chart{display:flex;align-items:flex-end;gap:6px;height:190px;padding-top:18px}
.chart .col{flex:1;min-width:0;height:100%;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:4px}
.chart .col b{font-size:11px;font-weight:700}
.chart .col i{align-self:end;width:100%;max-width:44px;min-height:3px;background:var(--gold);border-radius:2px 2px 0 0;transition:background .15s}
.chart .col:hover i{background:var(--olive)}
.chart .col span{font-size:11px;color:var(--muted);white-space:nowrap;height:16px}
.chart.is-dense{gap:3px}
.chart.is-dense .col b{visibility:hidden}
.chart.is-dense .col:hover b{visibility:visible}
.cols.is-wide-left{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.card>header.pad{padding:12px 12px 0}
.perf td{vertical-align:middle}
.perf small.good{color:var(--green)}.perf small.bad{color:var(--red)}
.meter{display:block;width:100%;max-width:150px;height:5px;margin-bottom:5px;background:#ebebeb;border-radius:3px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--gold)}
.meter-row{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.meter-row .meter{flex:0 0 120px;margin-bottom:0}
.meter-row em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap}
select[hidden]{display:none!important}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);padding:11px 18px;border-radius:2px;background:#231f20;color:#fff;font-size:13px;font-weight:600;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.25)}

@media(max-width:1180px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.cols,.cols.is-wide-left{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:0;z-index:10;height:auto;min-width:0;flex-direction:row;align-items:center;gap:6px;padding:8px 10px}
  .side-logo img{height:30px;margin-left:0}
  .side-nav{display:flex;gap:2px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
  .side-nav::-webkit-scrollbar{display:none}
  .side-nav button{padding:9px 7px;font-size:12.5px;white-space:nowrap}
  .side-foot{margin:0;padding:0;display:flex;gap:10px;align-items:center}
  .side-user{display:none}
  .main{padding:18px 14px 50px}
  .top{align-items:flex-start;margin-bottom:16px}
  .top-tools{width:100%}
  .top-tools select{flex:1;min-width:0}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi{padding:12px 14px}
  .kpi b{font-size:28px}
  .line{grid-template-columns:66px minmax(0,1fr) auto;row-gap:6px}
  .card{padding:14px 14px}
  .daynav-pick{min-width:0;flex:1}
  .daynav-date{font-size:13px;padding:0 8px;gap:6px;width:100%;justify-content:center}
  .daynav-pop{left:0;transform:none;width:min(320px,calc(100vw - 28px))}
  .nb-fields{grid-template-columns:1fr}
  .modal{padding:22px 16px 0}
  .nb-foot{margin:4px -16px 0;padding:12px 16px}
  .nb-beds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nb-photo{height:74px}
  .nb-photo img{max-height:74px}
  .nb-times{grid-template-columns:repeat(3,minmax(0,1fr))}
  .seg{width:100%}
  .seg button{flex:1;padding:0 4px;font-size:12px}
  .chart{height:160px;gap:3px}
  .quick b{font-size:22px}
  .drawer{padding:22px 18px 36px}
}

/* dashboard top line: today's sessions as a pie, then the two period tiles */
.bar-row.is-end{justify-content:flex-end}
.topline{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:16px}
.pie-card{padding:16px 20px}
.pie{display:flex;align-items:center;gap:26px}
.pie svg{flex:none;width:150px;height:150px}
.pie-n{font-size:30px;font-weight:500;letter-spacing:-.04em;fill:var(--ink)}
.pie-n.is-sm{font-size:21px}
.pie-l{font-size:11px;fill:var(--muted)}
.chart .col.is-today i{background:var(--olive)}
.table.static tbody tr{cursor:default}
.table.static tbody tr:hover{background:transparent}
.legend{display:grid;gap:8px;flex:1;min-width:0}
.legend li{display:grid;grid-template-columns:12px var(--n,34px) minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #ebebeb;font-size:14px}
.legend li:last-child{border-bottom:0}
.legend i{width:12px;height:12px;border-radius:50%}
.legend b{font-size:20px;font-weight:500;letter-spacing:-.03em}
.legend em{font-style:normal;font-size:12px;color:var(--muted)}
.topline .kpi{align-content:center;padding:20px 22px}
.topline .kpi b{font-size:44px}
.kpi-top{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.kpi-icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#f1e7d1;color:var(--gold-ink)}

/* schedule: beds across the top, times down the side */
.daynav .seg{margin-left:6px}
/* the schedule fills the window and scrolls inside its own grid, so the page itself does not scroll as well */
.app.is-fit{height:100svh;overflow:hidden}
.app.is-fit .main{display:flex;flex-direction:column;height:100%;min-height:0;padding-bottom:22px;overflow-y:auto}
.app.is-fit .view{flex:1;min-height:0;display:flex;flex-direction:column}
.app.is-fit .daynav{flex:none}
.app.is-fit .grid-card{flex:1;min-height:280px;display:flex;flex-direction:column}
.grid-card .grid-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.daygrid thead th{min-width:112px;padding:10px 8px;vertical-align:top;white-space:normal}
.daygrid thead th:first-child{z-index:3;vertical-align:bottom}
.daygrid thead th:first-child,.daygrid tbody th{min-width:88px;width:88px;padding:8px 12px;font-size:12px;white-space:nowrap}
.daygrid tbody th small{font-size:10px;font-weight:600;color:var(--muted)}
.daygrid tr.is-now th small{color:#231f20}
.daygrid td{min-width:112px;height:50px}
.bed-col{display:grid;gap:6px;justify-items:start}
.bed-col img{width:44px;height:44px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:2px;padding:2px}
.bed-col .bed-photo-empty{display:block;box-sizing:border-box;width:44px;height:44px;border:1px dashed #c8c8c4;border-radius:2px;background:#f4f4f2}
.bed-col b{font-size:13px;line-height:1.2}
.bed-col small{font-size:11px;font-weight:500;color:var(--muted)}
.bed-col .bed-out{font-size:inherit;font-weight:700;color:var(--red)}
.bed{display:flex;align-items:center;gap:10px}
.bed img{flex:none;width:46px;height:46px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:2px;padding:2px}
.bed b{display:block;font-size:13px;line-height:1.25}
.bed small{display:block;font-size:11px;font-weight:500;color:var(--muted)}

/* bookings: calendar picks the day */
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.cal{padding:14px 14px 12px;position:sticky;top:16px}
.cal>header{align-items:center;margin-bottom:10px}
.cal h2{font-size:16px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-head{margin-bottom:4px}
.cal-head span{text-align:center;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#846829}
.cal-day{display:grid;align-content:center;justify-items:center;gap:1px;aspect-ratio:1;border:1px solid transparent;border-radius:2px;font-size:13px;transition:background .15s,border-color .15s,color .15s}
.cal-day:hover{border-color:var(--olive)}
.cal-day b{font-weight:600}
.cal-day small{font-size:10px;line-height:1;padding:2px 5px;border-radius:999px;background:#f1e7d1;color:var(--gold-ink);font-weight:700}
.cal-day.is-today{border-color:#ad8835}
.cal-day[aria-pressed=true]{background:var(--olive);color:#ffffff;border-color:var(--olive)}
.cal-day[aria-pressed=true] small{background:#c8a24d;color:#231f20}
.cal .linkish{margin-top:10px}
.day-title{font-size:22px;letter-spacing:-.035em;font-weight:500;margin-right:auto}
.nowrap{white-space:nowrap}
.d-list dd select{min-height:36px;padding-top:6px;padding-bottom:6px}
.d-list dt label{font:inherit;letter-spacing:inherit}

/* new booking: choose or create the client */
.nb-mode{margin-bottom:12px}
.nb-results{display:grid;gap:6px;margin-top:8px}
.nb-result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 14px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:2px;background:#fff;transition:border-color .15s,background .15s}
.nb-result:hover{border-color:var(--olive);background:#f4f4f4}
.nb-result b{font-size:14px}
.nb-result small{grid-column:1;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.nb-result span{grid-column:2;grid-row:1/3;align-self:center;font-size:12px;white-space:nowrap}
.nb-hint{font-size:13px;padding:6px 2px}
.nb-picked{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--olive);border-radius:2px;background:#fff}
.nb-picked b{display:block;font-size:15px}
.nb-picked small{font-size:12px;color:var(--muted)}
.nb-fields .wide{grid-column:1/-1}
.nb-fields select{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}

@media(max-width:1180px){.topline{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.topline .pie-card{grid-column:1/-1}.split{grid-template-columns:minmax(0,1fr)}.cal{position:static;max-width:360px}}
@media(max-width:860px){
  .top-tools{flex-wrap:wrap}
  .picker{flex:1 1 100%}
  .picker-btn{width:100%}
  .picker-btn .picker-chev{margin-left:auto}
  .picker-menu{left:0;right:0}
  .top-tools .btn{flex:1}
  .pie{gap:16px}
  .pie svg{width:118px;height:118px}
  .topline .kpi{padding:14px 16px}
  .topline .kpi b{font-size:32px}
  .kpi-top{gap:9px;margin-bottom:6px}
  .kpi-icon{width:34px;height:34px}
  .kpi-icon svg{width:19px;height:19px}
  .topline .kpi b{font-size:28px}
  .app.is-fit{grid-template-rows:auto minmax(0,1fr)}
  .app.is-fit .main{padding-bottom:12px}
  .daygrid thead th:first-child,.daygrid tbody th{min-width:68px;width:68px;padding:8px}
  .daygrid thead th,.daygrid td{min-width:104px}
  .bed-col img,.bed-col .bed-photo-empty{width:36px;height:36px}
  .bed img{width:36px;height:36px}
  .cal{max-width:none}
  .daynav .seg{margin-left:0;width:100%}
}

/* bookings: a card per bed or service for the day, then that bed's day as a timeline */
.bed-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:12px}
.bed-card{display:grid;gap:3px;align-content:start;text-align:left;padding:12px 14px 14px;background:#fff;border:1px solid var(--line);border-radius:2px;transition:border-color .15s,background .15s}
.bed-card:hover{border-color:var(--olive);background:#fafafa}
.bed-card-photo{display:grid;place-items:center;height:96px;margin-bottom:8px}
.bed-card-photo img{max-width:100%;max-height:96px;object-fit:contain}
.bed-card>b{font-size:15px;line-height:1.25}
.bed-card small{font-size:12px;color:var(--muted)}
/* booked reads as filled gold, available as an open outline: the same dots as the timeline */
.bed-card-stats{display:grid;gap:6px;margin-top:12px}
.bed-card-stats>span{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid transparent;border-radius:2px;font-size:13px;font-weight:700}
.bed-card-stats i{flex:none;width:11px;height:11px;border-radius:50%}
.bed-card-stats b{margin-left:auto;font-size:22px;line-height:1;letter-spacing:-.04em;font-weight:600;color:var(--ink)}
.bed-card-stats .is-booked{background:#f1e7d1;color:var(--gold-ink)}
.bed-card-stats .is-booked i{background:var(--gold);border:2px solid #ad8835}
.bed-card-stats .is-free{background:#fff;border-color:#bdbdbd;color:var(--ink)}
.bed-card-stats .is-free i{background:#fff;border:2px solid #848484}
.bed-card-stats .is-zero{background:#f4f4f4;border-color:transparent;color:#868686}
.bed-card-stats .is-zero b{color:#9e9e9e}
.bed-card-stats .is-zero i{background:transparent;border-color:#b9b9b9}
.btn-back{background:var(--olive);border-color:var(--olive);color:#ffffff;padding:0 18px 0 14px}
.btn-back:hover{background:var(--olive-2);border-color:var(--olive-2)}
.bed-detail{padding:16px 20px 10px}
.bed-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:14px 0 6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.bed.is-lg{gap:14px}
.bed.is-lg img{width:74px;height:74px}
.bed.is-lg b{font-size:21px;letter-spacing:-.035em;font-weight:600}
.bed.is-lg small{font-size:13px}
.bed-detail-n{display:grid;justify-items:end;font-size:13px;color:var(--muted)}
.bed-detail-n b{font-size:28px;line-height:1.1;letter-spacing:-.05em;font-weight:500;color:var(--ink);margin-right:3px}
.bed-detail-n small{font-size:12px}
.tl{display:grid;margin:0;padding:0;list-style:none}
.tl-row{position:relative;display:grid;grid-template-columns:78px 13px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:54px;padding:5px 0}
.tl-row::before{content:"";position:absolute;left:96px;top:0;bottom:0;width:1px;background:var(--line)}
.tl-row:first-child::before{top:50%}.tl-row:last-child::before{bottom:50%}
.tl-time{font-size:13px;font-weight:700;white-space:nowrap}
.tl-dot{position:relative;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #bdbdbd}
.tl-row.is-booked .tl-dot{background:var(--gold);border-color:#ad8835}
.tl-row.is-checked-in .tl-dot,.tl-row.is-completed .tl-dot{background:var(--olive);border-color:var(--olive)}
.tl-row.is-no-show .tl-dot{background:#c4c0c1;border-color:#8e8e8e}
.tl-row.is-now .tl-time{color:var(--gold-ink)}
.tl-main{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:9px 12px;text-align:left;background:#f4f4f4;border:1px solid #ebebeb;border-radius:2px;transition:border-color .15s,background .15s}
.tl-main:hover{border-color:var(--olive);background:#fff}
.tl-main>span:first-child{min-width:0}
.tl-main b{font-size:14px;font-weight:600}
.tl-main small{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-row.is-cancelled .tl-main{background:transparent;border-style:dashed}
.tl-row.is-cancelled .tl-main b{color:var(--muted);font-weight:500}
.tl-free{font-size:13px;color:var(--muted)}
.tl-row.is-free,.tl-row.is-gap{min-height:44px}
.tl-row.is-free{grid-template-columns:78px 13px auto minmax(0,1fr)}
.tl-row.is-free .btn{justify-self:start}
.tl-row.is-free .tl-time,.tl-row.is-gap .tl-time{font-weight:500;color:var(--muted)}
.tl-row.is-gap .tl-dot{width:7px;height:7px;margin-left:3px;border:0;background:#c3c3c3}

/* client panel: book first, then membership, details, save bar, history tabs */
.d-book{width:100%;min-height:48px;margin-top:6px;font-size:14px}
.d-plan{margin-top:14px;padding:12px 14px 14px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:2px}
.d-list dd input{min-height:36px;padding:6px 10px}
/* while there are unsaved edits the history is put away and Cancel / Save sit at the very bottom of the panel */
#drawer-body:has(#client-form){display:flex;flex-direction:column;min-height:100%}
#client-form{display:flex;flex-direction:column}
#client-form.is-dirty{flex:1}
#client-form.is-dirty~.d-history{display:none}
#client-form.is-dirty .d-save{display:flex}
.drawer:has(#client-form.is-dirty){padding-bottom:0}
#client-form textarea{flex:none;margin-bottom:16px}
.d-save{position:sticky;bottom:0;z-index:2;display:none;align-items:center;gap:8px;margin:auto -26px 0;padding:14px 26px;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -10px 18px -16px rgba(35,31,32,.55)}
.d-save span{flex:1;font-size:13px;font-weight:600}
.d-tabs{display:flex;width:100%;margin:10px 0 4px}
.d-tabs button{flex:1;padding:0 6px;white-space:nowrap}
.d-tabs i{font-style:normal;font-weight:500;margin-left:5px;opacity:.65}
.d-none{padding:14px 2px;font-size:13px}

@media(max-width:860px){
  .side{gap:4px;padding:6px 8px}
  .table.compact th{padding:8px 5px;font-size:10px;letter-spacing:.04em;white-space:normal}
  .table.compact td{padding:8px 5px}
  .seg button{flex:1 1 auto;padding:0 4px;font-size:11.5px;white-space:nowrap}
  .side-nav{gap:0}
  .side-nav button{flex:1 1 0;min-width:0;flex-direction:column;gap:3px;padding:6px 1px;font-size:10px;letter-spacing:-.01em}
  .side-nav svg{width:17px;height:17px}
  .side-out{margin:0;padding:9px 8px}
  .side-out span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .bed-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bed-card{padding:10px 10px 12px}
  .bed-card-photo{height:70px}
  .bed-card-photo img{max-height:70px}
  .bed-card-stats>span{padding:0 10px;font-size:12px}
  .bed-card-stats b{font-size:20px}
  .bed-detail{padding:14px 14px 8px}
  .bed.is-lg img{width:56px;height:56px}
  .bed.is-lg b{font-size:18px}
  .bed-detail-n{justify-items:start}
  .tl-row{grid-template-columns:62px 13px minmax(0,1fr) auto;gap:8px}
  .tl-row::before{left:76px}
  .tl-row.is-free{grid-template-columns:62px 13px auto minmax(0,1fr)}
  .tl-time{font-size:12px}
  .tl-main{padding:8px 9px;gap:8px}
  .d-save{margin:auto -18px 0;padding:12px 18px}
}

/* services: each bed's hours and whether it is in service */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:14px}
.svc-card{display:grid;gap:14px;align-content:start}
.svc-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.svc-fields label{display:grid;gap:5px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#846829}
.svc-fields select,.svc-fields input{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink)}
.svc-fields .wide{grid-column:1/-1}
.svc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;font-size:13px}
.svc-foot .warn{color:var(--red);font-weight:700}
.svc-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
.tag.is-off{border-color:#c9553f;color:var(--red);font-weight:700}
.bed-col .tag.is-off{display:inline-block;margin:2px 0 0;font-size:10px}
.nb-bed .tag.is-off{margin:0 0 4px}
.nb-bed[disabled]{opacity:.55;cursor:not-allowed}
.daygrid td.is-off{background:repeating-linear-gradient(135deg,#ebebeb,#ebebeb 6px,#e4e4e4 6px,#e4e4e4 12px)}
@media(max-width:860px){.svc-grid{grid-template-columns:minmax(0,1fr)}.svc-fields{grid-template-columns:1fr}.side-nav button{font-size:9.5px}}
/* services: out of service warning and the "what happens to each session" list */
.svc-warn{display:block;margin:2px 0 0;padding:12px 14px;border:1px solid #c9553f;border-left-width:4px;border-radius:2px;background:#fbeee9;color:#7c2a1a;font-size:13px;line-height:1.45}
.svc-warn[hidden]{display:none}
.svc-warn b{font-weight:700}
.svc-warn span{display:block;margin-top:4px}
.oos-lead{font-size:14px;line-height:1.5;margin:0}
.oos-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.oos-list li{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:2px}
.oos-list b{display:block;font-size:14px}
.oos-list small{font-size:12px;color:var(--muted)}
.oos-list select{min-width:220px}
/* "Up next" rows: the action button always sits in the last column, with or without a Late tag */
.line > [data-act]{grid-column:-2}
/* Today button while already on today: clearly inactive */
.daynav-today[disabled]{opacity:1;background:#ebebeb;border-color:#ebebeb;color:#a8a8a8;box-shadow:none}
/* operating hours: holidays and special hours */
.hol-card{margin-bottom:16px}
.hol-card > header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:12px}
.hol-card > header p{margin:4px 0 0;max-width:620px;font-size:13px;line-height:1.5}
.hol-scope{display:grid;gap:5px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#846829}
.hol-scope select{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);min-width:190px}
.hol-list{display:grid}
.hol-row{display:grid;grid-template-columns:minmax(0,190px) minmax(0,250px) minmax(0,1fr) auto;grid-auto-flow:row;align-items:center;gap:10px 12px;padding:10px 0;border-top:1px solid #ebebeb}
.hol-list .hol-row:first-child{border-top:0}
.hol-row.is-set .hol-date b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:var(--gold);vertical-align:middle}
.hol-date{display:grid;min-width:0}
.hol-date b{font-size:14px}
.hol-date small{font-size:12px;color:var(--muted)}
.hol-new{grid-template-columns:150px minmax(0,1fr);gap:8px}
.hol-hours{grid-column:2/4;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.hol-hours[hidden]{display:none}
.hol-hours select{width:118px}
.hol-row > button{grid-column:4;grid-row:1;justify-self:end}
.hol-row > .hol-new{grid-column:1/3;grid-template-columns:150px minmax(0,1fr)}
.hol-row > .hol-new ~ select{grid-column:3;max-width:250px}
.hol-row > .hol-new ~ .hol-hours{grid-column:3}
.hol-add-label{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--line);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#846829}
@media(max-width:860px){.hol-row{grid-template-columns:minmax(0,1fr) auto}.hol-row > select,.hol-row > .hol-hours,.hol-row > .hol-new ~ select,.hol-row > .hol-new ~ .hol-hours{grid-column:1/-1;max-width:none}.hol-row > button{grid-column:2;grid-row:1}.hol-row > .hol-new{grid-column:1;grid-template-columns:1fr}}

.demo-links{display:flex;flex-wrap:wrap;gap:8px 18px}

/* ---------- the portal on a phone ---------- */
@media(max-width:860px){
  /* short labels under the icons, so five items fit without overlapping */
  .side-nav button span{display:none}
  .side-nav button::after{content:attr(data-short);font-size:10px;letter-spacing:-.01em;white-space:nowrap}
  .side-nav button{padding:6px 2px 5px;gap:3px}
  .side-nav svg{width:19px;height:19px}
  /* a tighter header: smaller title, selector and buttons on the same row */
  .main{padding:14px 12px 40px}
  .top{margin-bottom:12px;gap:10px}
  .top h1{font-size:26px}
  .top-tools{gap:8px}
  .picker{flex:1 1 100%}
  .top-tools .btn{min-height:40px;font-size:12.5px;padding:0 10px}
  .picker-btn{min-height:40px}
  /* schedule: compact day controls and bed headers, so more of the grid shows */
  .daynav{gap:6px;margin-bottom:8px}
  .daynav .btn-sm{min-height:36px}
  .daynav-date{min-height:36px;font-size:12.5px}
  .daynav .seg{margin-top:2px}
  .daynav>.muted{display:none}
  .daygrid thead th{padding:6px 6px}
  .bed-col{gap:3px}
  .bed-col img,.bed-col .bed-photo-empty{width:32px;height:32px}
  .bed-col b{font-size:12px}
  .bed-col small{display:none}
  .daygrid td{height:46px}
  /* tables scroll sideways inside their card; the first column stays put */
  .table-card .table th:first-child,.table-card .table td:first-child{position:sticky;left:0;background:#fff;z-index:1}
  .card.pie-card,.card{padding:14px 12px}
  .drawer{padding:18px 14px 36px}
  .drawer h2{font-size:24px}
  .d-list div{grid-template-columns:104px minmax(0,1fr);gap:8px}
  .d-list dt{font-size:10px}
  .modal{padding:18px 14px 0}
  .modal h2{font-size:24px;margin-bottom:12px}
  .nb{gap:14px}
  .nb-foot{margin:4px -14px 0;padding:10px 14px}
}

/* ---------- phone layout: top bar with the studio selector and settings, pages in a bottom bar ---------- */
.side-tools{display:none}
@media(max-width:860px){
  .side{gap:8px;padding:8px 10px;overflow:visible}
  .side-tools{display:flex;align-items:center;gap:6px;flex:1;min-width:0;position:relative}
  .side-picker-slot{flex:1;min-width:0}
  .side-picker-slot .picker{flex:none;width:100%}
  .side-picker-slot .picker-btn{width:100%;min-height:38px;padding:0 10px;border-color:#585858;background:#f7f7f7;color:var(--ink);font-size:13px}
  .side-picker-slot .picker-menu{color:var(--ink)}
  .side-picker-slot .picker-menu{left:0;right:0;min-width:0}
  .side-settings{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:2px;color:#d9d6d7;transition:background .2s,color .2s}
  .side-settings:hover,.side-settings[aria-expanded=true]{background:var(--olive-2);color:#fff}
  .settings-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:15;min-width:220px;padding:14px 16px 10px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:2px;box-shadow:0 18px 40px -18px rgba(35,31,32,.45)}
  .side-user.is-menu{display:grid;color:var(--ink);padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .side-user.is-menu span{color:var(--muted)}
  .settings-out{display:block;width:100%;text-align:left;padding:10px 0;font-size:14px;font-weight:600;color:var(--red)}
  .side-foot{display:none}
  .side-nav{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;gap:0;overflow:visible;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--olive);border-top:1px solid #3a3536}
  .side-nav button{min-height:50px;justify-content:center}
  .side-nav button[aria-current=page]{background:#f7f7f7;color:#231f20}
  .main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .app.is-fit .main{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .top-tools .btn{flex:1}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
  .drawer,.scrim{z-index:21}
  .drawer{z-index:22}
}
/* operating hours: lunch break, and lunch on the schedule grid */
.daygrid td.is-lunch{background:#efefef;text-align:center}
.daygrid td.is-lunch span{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7d7d7d}
/* operating hours: lunch breaks for the next 7 days */
.lunch-row{display:grid;grid-template-columns:minmax(0,190px) auto minmax(0,1fr) auto;align-items:center;gap:10px 14px;padding:10px 0;border-top:1px solid #ebe7da}
.lunch-card .hol-list .lunch-row:first-child{border-top:0}
.lunch-row.is-closed{grid-template-columns:minmax(0,190px) minmax(0,1fr)}
.lunch-times{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.lunch-times input{width:74px;padding:8px 10px;border:1px solid #b6af9e;border-radius:2px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--ink);text-align:center}
.lunch-times input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--olive)}
.lunch-times input.is-bad{border-color:var(--red);background:#fbeee9}
.lunch-note{font-size:12px;line-height:1.4}
@media(max-width:860px){.lunch-row{grid-template-columns:minmax(0,1fr) auto}.lunch-times,.lunch-note{grid-column:1/-1}.lunch-row > button{grid-column:2;grid-row:1}}
/* operating hours: first and last time typed as H:MM with an AM/PM switch */
.time-in{display:flex;gap:6px;font-weight:400;letter-spacing:0;text-transform:none}
.time-in input{flex:1;min-width:0;padding:9px 12px;border:1px solid #b6af9e;border-radius:2px;background:#fff;font:inherit;font-size:14px;color:var(--ink)}
.time-in input::placeholder{color:#8a8a7d}
.time-in input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--olive)}
.time-in input.is-bad{border-color:var(--red);background:#fbeee9}
.time-in select{flex:none;width:76px}
/* schedule: 5-minute rows; each session spans its 20 minutes */
:root{--copper:#a8582f;--copper-soft:#f5e3d6}
.grid-card .grid-scroll{position:relative}
.daygrid.is-fine td.has-chip{position:relative;padding:0}
.daygrid.is-fine .chip{position:absolute;inset:1px 3px;width:auto;height:auto;min-height:0;align-content:start;padding:3px 7px;overflow:hidden}
.daygrid.is-fine .chip small{font-size:10px;line-height:1.3}
.daygrid.is-fine td.is-busy{background:#fff}
.daygrid td.is-lunch,.daygrid td.is-down{vertical-align:top}
.daygrid td.is-lunch span,.daygrid td.is-down span{display:block;padding-top:3px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.daygrid td.is-down{background:repeating-linear-gradient(135deg,#fbeee9,#fbeee9 6px,#f6e0d8 6px,#f6e0d8 12px)}
.daygrid td.is-down span{color:var(--red)}
/* a staff booking for someone new: "New client", in the brand copper */
.chip.is-new-client{background:var(--copper-soft);border-left-color:var(--copper)}
.chip.is-new-client:hover{background:#eccdb8}
.chip.is-new-client small{color:var(--copper);font-weight:700}
/* the current time: a line across the schedule */
.now-line{position:absolute;left:0;z-index:2;height:0;border-top:2px solid #c9553f;pointer-events:none}
.now-line span{position:sticky;left:0;display:inline-block;transform:translateY(-50%);margin-top:-1px;padding:1px 6px;border-radius:2px;background:#c9553f;color:#fff;font-size:10px;font-weight:700;white-space:nowrap}
/* operating hours: out of service for a few hours */
.svc-hours .lunch-times{font-weight:400;letter-spacing:0;text-transform:none}
.svc-hours .lunch-times input{flex:1;width:auto;min-width:0}
.daygrid.is-fine thead th{z-index:3}.daygrid.is-fine thead th:first-child{z-index:4}
/* unbookable stretches read as one smooth pattern instead of a stack of 5-minute tiles */
.daygrid.is-fine td.is-past,.daygrid.is-fine td.is-off,.daygrid.is-fine td.is-down{background-attachment:fixed;border-bottom-color:transparent}
.daygrid.is-fine td.is-lunch{border-bottom-color:transparent}
/* operating hours */
.lbl-note{margin-left:6px;font-size:10px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.lunch-actions{display:flex;gap:8px;justify-content:flex-end}
@media(max-width:860px){.lunch-row > .lunch-actions{grid-column:2;grid-row:1}}
/* 5-minute rows at half the old 20-minute row height */
.daygrid.is-fine td,.daygrid.is-fine tbody th{height:25px;padding-top:0;padding-bottom:0}
.daygrid.is-fine tbody th{vertical-align:top;padding-top:4px;font-size:11px;line-height:1.2}
@media(max-width:760px){.daygrid.is-fine td,.daygrid.is-fine tbody th{height:23px}}
.daygrid.is-fine td.is-lunch span,.daygrid.is-fine td.is-down span{padding-top:5px;line-height:1}
/* hours are easy to scan: bold label, tinted cell and a darker line across the whole row */
.daygrid.is-fine tbody th{font-size:10.5px;font-weight:500;color:#8c8c80}
.daygrid.is-fine tr.is-hour th{font-size:14px;font-weight:700;color:var(--ink);background:#ececec;padding-top:3px}
.daygrid.is-fine tr.is-hour th small{font-size:10px;font-weight:700;color:var(--ink)}
.daygrid.is-fine tr.is-hour th,.daygrid.is-fine tr.is-hour td{border-top:1px solid #d6d6d6}
/* hovering a free time previews the whole 20-minute session it would book, not a single 5-minute row */
.daygrid.is-fine{--row:25px}
@media(max-width:760px){.daygrid.is-fine{--row:23px}}
.daygrid.is-fine td:has(> .slot-add){position:relative}
.daygrid.is-fine .slot-add{position:absolute;z-index:1;top:1px;left:3px;right:3px;height:calc(4 * var(--row) - 3px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;color:transparent;border:1px dashed transparent}
.daygrid.is-fine .slot-add b{font-size:16px;line-height:1}
.daygrid.is-fine .slot-add small{font-size:10.5px;font-weight:600}
.daygrid.is-fine .slot-add:hover,.daygrid.is-fine .slot-add:focus-visible{background:#f3e9cf;border-color:#c9a65a;color:var(--gold-ink)}
.nb-down{margin:0 0 10px;padding:10px 12px;border:1px solid #c9553f;border-left-width:4px;border-radius:2px;background:#fbeee9;color:#7c2a1a;font-size:13px}
.room-tag{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:600;color:var(--muted);vertical-align:middle}
.bed-col .bed-booked{display:block;margin-top:-5px} /* sits right under the room and level line */
@media(max-width:860px){.bed-col .bed-booked{display:none}} /* phones hide the header details, the count included */
.daygrid.is-fine .slot-add b,.daygrid.is-fine .slot-add small{visibility:hidden}
.daygrid.is-fine .slot-add:hover b,.daygrid.is-fine .slot-add:hover small,.daygrid.is-fine .slot-add:focus-visible b,.daygrid.is-fine .slot-add:focus-visible small{visibility:visible}
/* the 5 minutes before each slot (and the stagger) are greyed out; slots themselves stay plain until hovered */
.daygrid.is-fine td.is-gap{background:#e5e5e2;border-bottom-color:transparent}
/* booking slots show as 15 minutes (the 5 before them are greyed out as turnover) */
.daygrid.is-fine .slot-add{height:calc(3 * var(--row) - 3px)}
.daygrid.is-fine .slot-add{width:auto} /* stays inside its column (left/right set the width) */
/* lunch: one plain grey block per bed with a single label; its slots stay bookable by staff and show on hover */
.daygrid.is-fine td.is-lunch{background:#ededeb;border-bottom-color:transparent}
.daygrid.is-fine td.is-lunch span{padding-top:5px;color:#8f8f88}
/* bookings: each status gets its own hover, a darker shade of its colour */
.daygrid.is-fine .chip{--c:#ad8835}
.daygrid.is-fine .chip.is-checked-in{--c:var(--green)}
.daygrid.is-fine .chip.is-completed{--c:#8f8f8f}
.daygrid.is-fine .chip.is-no-show{--c:#c9553f}
.daygrid.is-fine .chip.is-new-client{--c:var(--copper)}
.daygrid.is-fine .chip:hover,.daygrid.is-fine .chip:focus-visible{box-shadow:inset 0 0 0 1px var(--c)}
.daygrid.is-fine .chip.is-booked:hover{background:#ecd9a9}
.daygrid.is-fine .chip.is-checked-in:hover{background:#c6e1cc}
.daygrid.is-fine .chip.is-completed:hover{background:#dcdcdc}
.daygrid.is-fine .chip.is-no-show:hover{background:#f6cfc3}
.daygrid.is-fine .chip.is-new-client:hover{background:#eecbb4}

/* Narrow desktop / laptop windows (about half a MacBook, often 520–960px, and as
   low as 480px): a left icon rail, not the phone's bottom tab bar. The rail's
   button slides the full menu over the page. Every bed column shares the schedule
   width, so Barrhaven and Kanata (10 beds) fit with no sideways scroll.
   Phones stay on the bottom tab bar: under 480px, or a coarse pointer on a small
   screen. Full desktop above 960px is unchanged.
   Keep this media query in sync with railQuery in staff.js. */
.nav-toggle,.side-password,.bed-parts{display:none}
.nav-icon-close,.nav-label-open{display:none}
.nav-scrim{position:fixed;inset:0;z-index:25;background:rgba(17,17,17,.45)}
@media(min-width:480px) and (max-width:960px) and (not ((pointer:coarse) and (max-width:700px))){
  .app{display:block;max-width:100%;overflow-x:clip}
  .main{margin-left:48px;min-width:0;padding:14px 8px 28px}
  .app.is-fit .main{min-width:0;overflow-x:clip;padding-bottom:12px}
  .side{position:fixed;top:0;left:0;bottom:0;z-index:26;width:48px;height:auto;min-width:0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:8px 4px;overflow:hidden;background:var(--olive);color:#fff;transition:width .2s ease,box-shadow .2s ease}
  .app.is-nav-open .side{width:224px;padding:22px 16px 12px;gap:22px;overflow:auto;box-shadow:16px 0 40px rgba(35,31,32,.35)}
  .side-logo{display:block;flex:none}
  .side-logo img{display:block;height:28px;width:auto;max-width:100%;margin:0 auto}
  .app.is-nav-open .side-logo img{height:46px;width:auto;max-width:none;margin:0 0 0 8px}
  /* Collapsed: the five pages stay as icons. Expanded: labels slide over the schedule. */
  .side-nav{position:static;left:auto;right:auto;bottom:auto;z-index:auto;display:grid;flex:1 1 auto;align-content:start;width:100%;min-width:0;gap:2px;overflow:visible;padding:8px 0 0;background:transparent;border:0}
  .side-nav button{flex:none;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;min-width:0;min-height:42px;padding:8px 0;border-radius:2px;font-size:14px;letter-spacing:0}
  .side-nav button span{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .side-nav button::after{content:none}
  .side-nav svg{width:20px;height:20px}
  .app.is-nav-open .side-nav button{flex-direction:row;align-items:center;justify-content:flex-start;gap:11px;min-height:0;width:auto;padding:11px 12px;font-size:14px;font-weight:600;letter-spacing:0;white-space:nowrap;text-align:left;color:#d9d6d7}
  .app.is-nav-open .side-nav button span{display:inline;position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
  .app.is-nav-open .side-nav button::after{content:none}
  .app.is-nav-open .side-nav svg{width:18px;height:18px}
  .side-tools,.side-foot,.side-user{display:none}
  .app.is-nav-open .side-foot{display:grid;margin-top:auto;padding:0 8px;gap:10px}
  .app.is-nav-open .side-user{display:grid;font-size:13px;line-height:1.35;color:#fff}
  .app.is-nav-open .side-user span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;color:#b4b4b4;font-size:12px}
  .app.is-nav-open .side-out{display:flex;align-items:center;gap:11px;margin:0 -8px;padding:11px 12px;font-size:14px;font-weight:600;color:#d9d6d7}
  .app.is-nav-open .side-out span{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap}
  .app.is-nav-open .side-password{display:block;padding:2px 4px 6px;font-size:13px;font-weight:600;color:#cfcbcc;text-decoration:underline;text-underline-offset:3px}
  .app.is-nav-open .side-password:hover{color:#fff}
  .nav-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:auto;padding:8px 4px;border-radius:2px;background:#3a3536;color:#fff;font-size:13px;font-weight:700}
  .nav-toggle:hover{background:#4e4849;color:#fff}
  .app.is-nav-open .nav-toggle{margin-top:10px;justify-content:flex-start;padding:11px 12px;background:transparent}
  .app.is-nav-open .nav-toggle:hover{background:var(--olive-2)}
  .app.is-nav-open .nav-icon-open,.app.is-nav-open .nav-label-closed{display:none}
  .app.is-nav-open .nav-icon-close{display:block}
  .app.is-nav-open .nav-label-open{display:inline}
  .toast{bottom:22px}
  .top,.top-tools,.picker,.view{min-width:0;max-width:100%}
  .top-tools .btn{min-width:0}
  /* beds: equal flexible columns inside the schedule. Fixed min-widths would
     push Pure Red Light's neighbours off to the right. */
  .view,.grid-card,.grid-card .grid-scroll{min-width:0;max-width:100%}
  .grid-card{width:100%}
  .grid-card .grid-scroll{display:block;width:100%;overflow-x:clip;overflow-y:auto}
  .daygrid.is-fine{--time:36px;table-layout:fixed;width:100%;max-width:100%}
  .daygrid.is-fine col.time-col{width:var(--time)}
  .daygrid.is-fine col.bed-slot{width:calc((100% - var(--time)) / var(--beds, 10))}
  .grid.daygrid.is-fine thead th,
  .grid.daygrid.is-fine tbody th,
  .grid.daygrid.is-fine td{min-width:0;max-width:none;overflow:hidden}
  .grid.daygrid.is-fine thead th:not(:first-child){width:calc((100% - var(--time)) / var(--beds, 10))}
  .daygrid thead th{padding:4px 1px;white-space:normal;overflow:hidden;vertical-align:bottom}
  .grid.daygrid.is-fine thead th:first-child,
  .grid.daygrid.is-fine tbody th{width:var(--time);max-width:var(--time);padding:1px;font-size:9px;line-height:1.15;white-space:nowrap;overflow:hidden}
  .daygrid.is-fine tbody th,.daygrid.is-fine tr.is-hour th{font-size:9px}
  .daygrid.is-fine tr.is-hour th{padding-top:1px}
  .daygrid.is-fine tr.is-hour th small{font-size:8px}
  .bed-col{gap:1px;justify-items:center;text-align:center;width:100%;min-width:0;max-width:100%;overflow:hidden}
  .bed-col img,.bed-col .bed-photo-empty{width:18px;height:18px;max-width:100%;padding:0}
  .bed-col b{display:block;width:100%;min-width:0;max-width:100%;font-size:9px;font-weight:700;line-height:1.15;text-align:center}
  .bed-full{display:none}
  .bed-parts{display:-webkit-box;width:100%;max-width:100%;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:normal;word-break:normal}
  .bed-col small{display:none}
  .daygrid.is-fine .chip{padding:0 1px;left:0;right:0;min-width:0;overflow:hidden}
  .daygrid.is-fine .chip b,
  .daygrid.is-fine .chip small{display:block;max-width:100%;overflow:hidden;font-size:8px;line-height:1.15;white-space:nowrap;text-overflow:ellipsis}
  .bed-col .bed-booked{display:none}
  .daynav{min-width:0;max-width:100%}
  .daynav>*{min-width:0}
  .daynav-pick{min-width:0;max-width:100%}
  .daynav-date{max-width:100%;min-width:0;overflow:hidden}
  .daynav .seg{display:flex;flex-wrap:wrap;width:100%;min-width:0;max-width:100%;overflow:hidden}
  .daynav .seg button{flex:1 1 64px;min-width:0;max-width:100%;padding:0 4px;overflow:hidden;font-size:11px;text-overflow:ellipsis}
}
@media(min-width:700px) and (max-width:960px) and (not ((pointer:coarse) and (max-width:700px))){
  .daygrid.is-fine{--time:42px}
  .grid.daygrid.is-fine thead th:first-child,
  .grid.daygrid.is-fine tbody th,
  .daygrid.is-fine tr.is-hour th{font-size:10px}
  .bed-col img,.bed-col .bed-photo-empty{width:22px;height:22px}
  .bed-col b{font-size:10px}
  .daygrid.is-fine .chip b{font-size:9px}
}
@media(min-width:860px) and (max-width:960px){
  .daygrid.is-fine{--time:48px}
  .grid.daygrid.is-fine thead th:first-child,
  .grid.daygrid.is-fine tbody th{font-size:11px}
  .daygrid.is-fine tr.is-hour th{font-size:12px}
  .bed-col img,.bed-col .bed-photo-empty{width:26px;height:26px}
  .bed-col b{font-size:11px}
  .bed-col small{display:block;width:100%;max-width:100%;overflow:hidden;font-size:9px;line-height:1.1;white-space:nowrap;text-overflow:ellipsis}
  .daygrid.is-fine .chip{padding:2px 4px;left:2px;right:2px}
  .daygrid.is-fine .chip b{font-size:10px}
  .daynav .seg button{font-size:12px}
}
@media(min-width:480px) and (max-width:960px) and (not ((pointer:coarse) and (max-width:700px))) and (prefers-reduced-motion:reduce){
  .side{transition:none}
}
/* The open rail sets a pale label colour on every item, which was washing the
   selected page out against its white pill. The selected item stays near-black
   on white in the desktop sidebar, the icon rail, and the slide-in menu. */
.app.is-nav-open .side-nav button[aria-current=page],
.side-nav button[aria-current=page]{background:#fff;color:#231f20}
.app.is-nav-open .side-nav button[aria-current=page]:hover,
.side-nav button[aria-current=page]:hover{background:#fff;color:#231f20}
.app.is-nav-open .side-nav button[aria-current=page] svg,
.side-nav button[aria-current=page] svg{color:#231f20}