/* The booking screen and the admin calendar: black, with hours in the site's blue. */
.booker-page{color-scheme:dark;--bg:#05070d;--panel:#0d111c;--text:#f2f5fb;--muted:#9aa4ba;--accent:#7fa8ff;--accent-2:#4f8dff;--line:#232a3a;--btn:#2563eb;--btn-text:#fff;--btn-hover:#1d4fd7;--accent-hover:#1d4fd7;--accent-contrast:#fff;--field-border:#232a3a;--header-bg:#05070def;background:#05070d;color:var(--text)}
.booker{--cal-line:#161d2c;--cal-faint:#0e1320;--cal-band:#0c2152;--cal-band-2:#08173a;--cal-band-edge:#1a3a7c;--cal-text:#f2f5fb;--cal-muted:#7d879f;--cal-accent:#2563eb;--cal-glow:#7fa8ff;--cal-fill:linear-gradient(135deg,#3b82f6,#2563eb);
  position:relative;z-index:1;min-height:100vh;min-height:100svh;padding:104px 5% 28px;background:radial-gradient(110% 60% at 50% -12%,#0b1c42 0%,#070b16 42%,#05070d 75%);color:var(--cal-text);display:flex;flex-direction:column;gap:18px;outline:0}
.booker-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.booker-nav{display:flex;align-items:center;gap:8px}
.booker-heading-block{display:flex;flex-direction:column;gap:2px;margin-left:12px}
.booker-eyebrow{margin:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cal-glow)}
.booker-eyebrow span{color:var(--cal-muted);font-weight:500}
.booker-title{font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--cal-text);max-width:none}
.booker button{font:inherit;color:inherit;cursor:pointer}
.booker-icon,.booker-today{min-height:38px;border:1px solid var(--cal-line);background:#090d17;border-radius:6px;transition:border-color .15s,color .15s,background .15s}
.booker-icon{width:38px;font-size:20px;line-height:1}
.booker-today{padding:0 14px;font-size:13px}
.booker-views{display:flex;padding:3px;gap:3px;border:1px solid var(--cal-line);border-radius:8px;background:#090d17}
.booker-views button{min-height:32px;padding:0 14px;border:1px solid transparent;border-radius:5px;background:none;font-size:13px;color:var(--cal-muted);transition:background .15s,color .15s}
.booker-views button[aria-pressed=true]{background:var(--cal-band);border-color:var(--cal-band-edge);color:var(--cal-text);box-shadow:0 0 18px #2563eb33}
.booker-icon:hover,.booker-today:hover,.booker-views button:hover{border-color:var(--cal-band-edge);color:var(--cal-text)}
.booker-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;min-height:0;align-items:start}
.booker-cal{position:relative;border:1px solid var(--cal-line);border-radius:12px;background:linear-gradient(180deg,#080b14,#05070d 60%);box-shadow:0 30px 80px #0007,inset 0 1px #ffffff08;overflow:hidden;display:flex;flex-direction:column;height:calc(100svh - 210px);min-height:460px}
.booker-cal.is-loading::after{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--cal-accent),transparent);animation:booker-load 1s linear infinite}
@keyframes booker-load{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Day and week. */
.cal-grid-view{display:flex;flex-direction:column;min-height:0;height:100%}
.cal-head{display:grid;grid-template-columns:52px repeat(var(--days),minmax(0,1fr));border-bottom:1px solid var(--cal-line);background:#080b14}
.cal-day-head{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;border-left:1px solid var(--cal-faint);font-size:12px;color:var(--cal-muted)}
.cal-date{display:grid;place-items:center;min-width:28px;height:28px;border-radius:50%;font-size:14px;font-weight:600;color:var(--cal-text)}
.is-today .cal-date{background:var(--cal-accent);color:#fff;box-shadow:0 0 16px #2563eb99}
.cal-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--cal-line) transparent}
.cal-body{position:relative;display:grid;grid-template-columns:52px repeat(var(--days),minmax(0,1fr));background:repeating-linear-gradient(180deg,var(--cal-faint) 0 1px,transparent 1px var(--hour))}
.cal-hours{position:relative;grid-column:1}
.cal-hours span{position:absolute;right:10px;transform:translateY(-50%);font-size:11px;font-variant-numeric:tabular-nums;color:#4f5a72}
.cal-col{position:relative;border-left:1px solid var(--cal-faint);outline:0}
.cal-col:focus-visible{box-shadow:inset 0 0 0 2px var(--cal-accent)}
.cal-band{position:absolute;left:3px;right:3px;border-radius:6px;background:linear-gradient(180deg,var(--cal-band),var(--cal-band-2));box-shadow:inset 0 0 0 1px #173a7a,inset 0 1px #ffffff12;cursor:pointer}
.cal-busy{position:absolute;left:3px;right:3px;border-radius:6px;background:repeating-linear-gradient(135deg,#070a12 0 6px,#0d1424 6px 12px);cursor:not-allowed}
.cal-block{position:absolute;left:4px;right:4px;z-index:1;padding:0;border:1px dashed #2a3d66;border-radius:8px;background:repeating-linear-gradient(135deg,#090d17 0 6px,#0d1424 6px 12px)}
.booker .cal-block{cursor:pointer}
.cal-node{position:absolute;left:6px;right:6px;z-index:2;display:flex;flex-direction:column;gap:0;padding:3px 10px;line-height:1.25;border:0;border-radius:6px;text-align:left;overflow:hidden;background:var(--cal-fill);box-shadow:0 6px 18px #1d4fd755;color:#fff}
.cal-node b{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-node span{font-size:11px;color:#dbe7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-node.is-picked{z-index:3;box-shadow:0 0 0 1.5px #c7dbff,0 0 30px #2563ebb3;animation:node-in .25s ease-out;cursor:pointer}
.cal-node.is-ghost{z-index:1;pointer-events:none;background:#2563eb1f;box-shadow:inset 0 0 0 1px #4f8dff99}
.cal-node.is-ghost b{color:#b9cfff;font-weight:500}
.cal-node.is-cancelled{opacity:.5;background:#121826;box-shadow:none}
.cal-node.is-cancelled b{text-decoration:line-through}
@keyframes node-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.cal-now{position:absolute;left:0;right:0;z-index:4;height:2px;background:#e0645a;pointer-events:none}
.cal-now::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:#e0645a}

/* Month: each day is a tile, and the open ones light up. */
.cal-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:32px repeat(6,minmax(0,1fr));gap:5px;padding:4px 8px 8px;height:100%}
.cal-month-head{display:grid;place-items:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cal-muted)}
.cal-cell{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:6px;min-height:0;border:1px solid transparent;border-radius:8px;background:#090d17;text-align:left;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.cal-cell.is-other{background:none;color:#3a4252}
.cal-cell.is-open{background:linear-gradient(180deg,#0d2457,#0a1a3f);border-color:#173a7a;box-shadow:inset 0 1px #ffffff12}
.cal-cell.is-blocked{background:repeating-linear-gradient(135deg,#090d17 0 6px,#0d1424 6px 12px);border-color:#1a2232}
.cal-cell.is-other.is-open{opacity:.5}
.cal-cell:hover{border-color:var(--cal-line)}
.cal-cell.is-open:hover{border-color:var(--cal-accent);box-shadow:inset 0 1px #ffffff14,0 0 0 1px var(--cal-accent),0 10px 28px #2563eb40;transform:translateY(-1px)}
.cal-cell:focus-visible{outline:2px solid var(--cal-glow);outline-offset:1px}
.cal-cell-date{align-self:center;display:grid;place-items:center;min-width:28px;height:28px;border-radius:50%;font-size:13px;font-weight:600}
.cal-cell.is-today .cal-cell-date{background:var(--cal-accent);color:#fff;box-shadow:0 0 16px #2563eb99}
.cal-chip{font-size:11px;padding:2px 7px;border-radius:6px;background:var(--cal-fill);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-chip.is-more{background:none;color:var(--cal-muted)}

/* The side panel: when, which platform, and the button. */
.booker-side{display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid #1f2737;border-radius:12px;background:linear-gradient(180deg,#0d111c,#070a12);box-shadow:0 30px 80px #0008,inset 0 1px #ffffff0d}
.booker-side p{max-width:none;padding:0}
.booker-when{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--cal-muted);line-height:1.4}
.booker-when b{font-size:26px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--cal-text)}
.booker-prompt{font-size:18px;color:var(--cal-muted)}
.booker-zone{font-size:12px;color:#5d6880;margin-top:6px}
.booker-platforms{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.booker-platforms button{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border:1px solid #1f2737;border-radius:6px;background:#090d17;font-size:14px;text-align:left;color:var(--cal-muted);transition:border-color .15s,background .15s,box-shadow .15s,color .15s}
.booker-platforms button::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #4a5670;transition:box-shadow .15s,background .15s}
.booker-platforms button:hover{border-color:var(--cal-band-edge);color:var(--cal-text)}
.booker-platforms button[aria-pressed=true]{border-color:var(--cal-accent);background:linear-gradient(135deg,#0c2152,#08173a);box-shadow:0 0 0 1px var(--cal-accent),0 8px 24px #2563eb33;color:var(--cal-text)}
.booker-platforms button[aria-pressed=true]::before{background:radial-gradient(circle,#fff 0 3px,var(--cal-accent) 3.5px);box-shadow:0 0 12px #2563ebcc}
.booker-platforms button[disabled]{opacity:.35;cursor:not-allowed}
.booker-side .button{width:100%;min-width:0;justify-content:center;min-height:48px;border:0;border-radius:var(--button-radius,6px);background:var(--cal-fill);box-shadow:0 10px 30px #2563eb55;color:#fff;font-weight:600}
.booker-side .button:hover:not([disabled]){filter:brightness(1.12);box-shadow:0 12px 36px #2563eb77}
.booker-side .button[disabled]{background:#0d1220;box-shadow:inset 0 0 0 1px #1f2737;color:#5d6880;cursor:not-allowed;transform:none}
.booker-note{font-size:13px;line-height:1.5;color:var(--cal-muted)}
.booker-note:empty{display:none}
.booker-note.is-error{color:#ff8a8a}
.booker-note.is-done{color:#a9c4ff}
.booker-calls{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--cal-line)}
.booker-calls[hidden]{display:none}
.booker-heading{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cal-muted)}
.booker-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.booker-list li{display:flex;align-items:center;gap:6px;padding:10px 8px 10px 12px;border:1px solid #1a2232;border-radius:8px;background:#0a0e18;font-size:13px}
.booker-list li.is-highlight{border-color:var(--cal-accent);box-shadow:0 0 0 1px var(--cal-accent)}
.booker-list li>span{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.booker-list b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.booker-list small{color:var(--cal-muted);font-size:12px}
.booker-list button,.booker-link{flex-shrink:0;background:none;border:0;padding:6px;color:var(--cal-glow);font-size:12px}
.booker-list button:hover,.booker-link:hover{color:var(--cal-text)}
.booker-list button[data-armed=true]{color:#ff8a8a}
.booker-field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--cal-muted)}
.booker-field input{min-height:42px;padding:10px 12px;border:1px solid #1f2737;border-radius:6px;background:#0a0e18;color:var(--cal-text);font-size:14px}
.booker-field input:focus{outline:2px solid var(--cal-accent);outline-offset:2px}
.booker-detail{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--cal-text)}
.booker-detail a{color:var(--cal-glow);overflow-wrap:anywhere}
.booker-detail small{font-size:12px;color:var(--cal-muted)}
.booker-detail-wrap{display:flex;flex-direction:column;gap:12px}
.booker-detail-wrap:empty{display:none}
.booker.is-locked .booker-body{opacity:.25;pointer-events:none}
.booker-quiet{background:none;border:1px solid #1f2737;border-radius:6px;min-height:42px;font-size:13px;color:var(--cal-muted)}
.booker-quiet:hover{border-color:var(--cal-band-edge);color:var(--cal-text)}
.booker-quiet[data-armed=true]{border-color:#ff8a8a;color:#ff8a8a}
@media(prefers-reduced-motion:reduce){.cal-cell,.cal-node.is-picked,.booker-side{transition:none;animation:none}.cal-cell.is-open:hover{transform:none}}

@media(max-width:900px){
  .booker{padding:86px 12px 0;gap:12px}
  .booker-body{grid-template-columns:minmax(0,1fr);gap:0}
  .booker-cal{height:calc(100svh - 214px);min-height:380px;margin-bottom:14px}
  .booker-views{width:100%}
  .booker-views button{flex:1}
  /* On a phone the panel is a sheet that rises once there's something to show. */
  .booker-side{position:sticky;bottom:0;z-index:5;margin:-28px -12px 0;gap:12px;padding:18px 16px calc(16px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;border-bottom:0;box-shadow:0 -18px 50px #000d,inset 0 1px #ffffff12;animation:sheet-in .3s ease-out}
  [data-booker] .booker-side::before{content:"";align-self:center;width:36px;height:4px;margin:-8px 0 0;border-radius:2px;background:#2a3550}
  .booker-side.is-empty{display:none}
  [data-booker] .booker-side.is-idle :is(.booker-when,.booker-zone,.booker-platforms,[data-book]){display:none}
  [data-booker] .booker-side.is-idle .booker-calls{padding-top:0;border-top:0}
  [data-admin] .booker-side{position:static;margin:0 0 14px;border-radius:12px;border-bottom:1px solid #1f2737;box-shadow:none;animation:none}
  .booker-when{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
  .booker-when b{font-size:21px}
  .booker-platforms{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .booker-platforms button{justify-content:center;gap:7px;min-height:42px;padding:0 6px;font-size:13px}
  .booker-platforms button::before{width:11px;height:11px}
  .booker-heading-block{margin-left:6px}
  .booker-title{font-size:17px}
  .booker-today{padding:0 10px}
  .booker-views button{padding:0 10px}
  .cal-head,.cal-body{grid-template-columns:42px repeat(var(--days),minmax(0,1fr))}
  .cal-hours span{right:6px;font-size:10px}
  .is-week .cal-day-head{flex-direction:column;gap:2px;font-size:10px}
  .is-week .cal-date{min-width:22px;height:22px;font-size:12px}
  .is-week .cal-band{left:1px;right:1px;border-radius:5px}
  .is-week .cal-node{left:1px;right:1px;padding:3px 4px;border-radius:6px}
  .is-week .cal-node span{display:none}
  .is-week .cal-node b{font-size:10px}
  .cal-month{gap:3px;padding:2px 4px 6px}
  .cal-cell{padding:4px 2px;border-radius:6px}
  .cal-chip{display:none}
  .cal-cell:has(.cal-chip)::after{content:"";align-self:center;width:5px;height:5px;border-radius:50%;background:var(--cal-glow);box-shadow:0 0 8px var(--cal-accent)}
}
@keyframes sheet-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(max-width:420px){
  .booker-bar{gap:10px}
  .booker-nav{gap:6px}
  .booker-icon{width:34px;min-height:34px}
  .booker-today{min-height:34px}
  .booker-platforms button::before{display:none}
}
