/* CampusFlow design system, from the approved design_spec.md. Every colour, font and weight is a variable set from the look in Settings (js/look.js). */
:root{
  --ink:#070A14;--ink-2:#0F1426;--ink-3:#171E36;--line-d:rgba(255,255,255,.1);
  --paper:#F7F6F2;--paper-2:#EFEDE6;--line:#E2DED3;--card:#fff;
  --text:#0F1426;--muted:#4A5266;--on-dark:#ECEFF8;--muted-d:#A6AEC4;
  --accent:#5B6CFF;--link:#3E4FE0;--cyan:#35D6F5;--gold:#F4B03E;--mint:#22C9A0;--rose:#FF7AA8;--lilac:#8F9BFF;
  --head:'Space Grotesk',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace;
  --w-head:600;--w-body:400;--r:22px;--r-hero:26px;--r-s:14px;--ease:cubic-bezier(.22,1,.36,1);--side:264px;
  --cb-call:#2563EB;--cb-wa:#1FAF54;--cb-sms:#7C3AED;--cb-mail:#EA580C;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--text);font:var(--w-body) 15px/1.5 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--head);font-weight:var(--w-head);letter-spacing:-.035em;margin:0;line-height:1.15}
h1{font-size:clamp(26px,3.2vw,38px)}h2{font-size:22px}h3{font-size:17px;letter-spacing:-.02em}
p{margin:0}a{color:var(--link)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.boot{padding:48px;font-family:var(--mono);color:var(--muted)}
.mono{font-family:var(--mono)}.muted{color:var(--muted)}.small{font-size:13px}.nowrap{white-space:nowrap}.right{text-align:right}
.eyebrow{font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.grow{flex:1 1 auto}
.stack{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}.stack-s{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.main-body>*,.stack>*,.grid>*,.form-grid>*{min-width:0;max-width:100%}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* shell */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{background:var(--ink);color:var(--on-dark);position:sticky;top:0;height:100vh;overflow-y:auto;padding:18px 12px 96px;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent;z-index:30}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 16px;font:var(--w-head) 19px var(--head);letter-spacing:-.03em;color:var(--on-dark);text-decoration:none}
.brand i{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--cyan));display:grid;place-items:center;font:600 14px var(--head);font-style:normal;color:#fff}
.side-group{margin-top:10px}
.side-group>button{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;width:100%;padding:8px 10px;cursor:pointer;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)}
.side-group>button:focus-visible{outline:2px solid var(--cyan)}
.side-group[data-open=false] .side-items{display:none}
.side a.item{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:12px;color:var(--on-dark);text-decoration:none;font-size:14px;transition:background .2s var(--ease)}
.side a.item:hover{background:var(--ink-3)}
.side a.item.on{background:var(--accent);color:#fff;font-weight:500}
.main{min-width:0;padding:26px clamp(14px,3vw,36px) 110px}
.topbar{display:none}
.page-head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.page-head .eyebrow{margin-bottom:6px}
.fade-up{animation:fadeUp .5s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* buttons + inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;text-decoration:none;font-weight:500;transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,20,38,.09)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.dark{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.btn.danger{background:#FFE4EE;border-color:#FFC4D7;color:#8A1F45}
.btn.ghost{background:transparent}
.btn.s{min-height:36px;padding:5px 12px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.search{display:flex;align-items:center;min-height:44px;border-radius:999px;border:1px solid var(--line);background:var(--card);padding:0 16px}
.search input{border:0;outline:0;background:none;min-width:180px;width:100%}
.field{display:grid;gap:5px}.field[hidden]{display:none}
.field>label,.field>.lab{font-size:13px;font-weight:500}
.field .help{font-size:12px;color:var(--muted)}
.field .req{color:#8A1F45}
.input,.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%;min-height:44px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);padding:9px 12px}
.field textarea{min-height:92px;resize:vertical}
.check{display:flex;align-items:center;gap:10px;min-height:44px}
.check input{width:20px;height:20px;accent-color:var(--accent)}
.form-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.form-section{grid-column:1/-1;margin-top:8px}
.err{background:#FFE4EE;border:1px solid #FFC4D7;color:#8A1F45;border-radius:var(--r-s);padding:10px 14px}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card.lift:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(15,20,38,.08)}
.card>h3{margin-bottom:12px}
.kpi .num{font:var(--w-head) 30px var(--head);letter-spacing:-.03em;margin-top:6px}
.bar{height:6px;border-radius:99px;background:var(--paper-2);overflow:hidden;margin-top:10px}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--accent);transform-origin:left;animation:grow .9s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tile{display:block;text-decoration:none;color:inherit}
/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:500;white-space:nowrap;background:var(--paper-2);color:var(--text)}
.chip.indigo{background:#E7EAFF;color:#2A39B8}.chip.cyan{background:#DDF7FC;color:#0B5C6E}.chip.gold{background:#FDF1DB;color:#6B4706}.chip.mint{background:#DBF6EE;color:#0C5A47}.chip.rose{background:#FFE4EE;color:#8A1F45}
.chip.sample{background:#6B4706;color:#FDF1DB;font:500 10.5px var(--mono);letter-spacing:.1em}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,201,160,.6)}70%{box-shadow:0 0 0 9px rgba(34,201,160,0)}100%{box-shadow:0 0 0 0 rgba(34,201,160,0)}}
/* tables */
.table-box{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table.t{width:100%;border-collapse:collapse;min-width:560px}
.t th{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card);position:sticky;top:0}
.t td{padding:12px 14px;border-bottom:1px solid var(--paper-2);vertical-align:top}
.t tr:last-child td{border-bottom:0}
.t tr.click{cursor:pointer}.t tr.click:hover td{background:var(--paper)}
.t td.num,.t th.num{text-align:right;font-family:var(--mono)}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:10px 4px}
.empty{padding:34px 18px;text-align:center;color:var(--muted)}
/* tabs */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:16px;scrollbar-width:none}
.tabs button,.tabs a{all:unset;box-sizing:border-box;cursor:pointer;padding:11px 14px;min-height:44px;white-space:nowrap;border-bottom:2px solid transparent;color:var(--muted);font-size:14px}
.tabs button:focus-visible,.tabs a:focus-visible{outline:2px solid var(--accent)}
.tabs [aria-selected=true],.tabs .on{color:var(--text);border-bottom-color:var(--accent);font-weight:500}
/* panel + modal */
.scrim{position:fixed;inset:0;background:rgba(7,10,20,.45);z-index:50;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);background:var(--paper);z-index:51;display:flex;flex-direction:column;animation:slideIn .35s var(--ease) both;box-shadow:-20px 0 50px rgba(7,10,20,.2)}
@keyframes slideIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.panel-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;align-items:flex-start;background:var(--card)}
.panel-body{padding:18px 20px;overflow-y:auto;flex:1;display:grid;gap:14px;align-content:start}
.panel-foot{padding:12px 20px;border-top:1px solid var(--line);background:var(--card);display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94vw);max-height:90vh;overflow:auto;background:var(--card);border-radius:var(--r);padding:22px;z-index:51;display:grid;gap:14px;animation:fade .2s}
.x{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;font-size:20px;flex:none}.x:hover{background:var(--paper-2)}
.dl{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:6px 12px;font-size:14px}
.dl dt{color:var(--muted);font-size:13px}.dl dd{margin:0;overflow-wrap:anywhere}
/* hero and stage line */
.hero{background:var(--ink);color:var(--on-dark);border-radius:var(--r-hero);padding:24px;display:grid;gap:18px}
.hero .muted,.hero .eyebrow{color:var(--muted-d)}
.avatar{width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,var(--accent),var(--cyan));display:grid;place-items:center;font:600 26px var(--head);color:#fff;flex:none;object-fit:cover}
.stages{display:flex;gap:0;overflow-x:auto;padding:6px 2px;scrollbar-width:none}
.stage{flex:1 0 96px;position:relative;text-align:center;font-size:12.5px;color:var(--muted-d);padding-top:22px}
.stage::before{content:"";position:absolute;top:7px;left:0;right:0;height:2px;background:var(--line-d)}
.stage:first-child::before{left:50%}.stage:last-child::before{right:50%}
.stage::after{content:"";position:absolute;top:2px;left:50%;margin-left:-6px;width:12px;height:12px;border-radius:50%;background:var(--ink-3);border:2px solid var(--muted-d)}
.stage.done{color:var(--on-dark)}.stage.done::after{background:var(--mint);border-color:var(--mint)}.stage.done::before{background:var(--mint)}
.stage.now{color:#fff;font-weight:600}.stage.now::after{background:var(--cyan);border-color:var(--cyan);animation:pulseC 1.8s infinite}
@keyframes pulseC{0%{box-shadow:0 0 0 0 rgba(53,214,245,.7)}70%{box-shadow:0 0 0 10px rgba(53,214,245,0)}100%{box-shadow:0 0 0 0 rgba(53,214,245,0)}}
/* board */
.board{max-width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--paper-2);border-radius:var(--r);padding:12px;display:grid;gap:10px;align-content:start;min-height:220px}
.hot{box-shadow:0 0 0 2px rgba(244,176,62,.5),0 0 22px rgba(244,176,62,.35);animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 2px rgba(244,176,62,.25),0 0 10px rgba(244,176,62,.15)}}
/* toast + assistant */
.toasts{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:70;max-width:min(420px,90vw)}
.toast{background:var(--ink-2);color:#fff;padding:11px 16px;border-radius:14px;animation:fadeUp .3s var(--ease) both}.toast.bad{background:#8A1F45}
.ai-btn{position:fixed;right:18px;bottom:18px;z-index:40;width:52px;height:52px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--accent),var(--cyan));color:#fff;font:600 13px var(--head);cursor:pointer;animation:aiPulse 2.6s infinite}
@keyframes aiPulse{0%{box-shadow:0 0 0 0 rgba(91,108,255,.5)}70%{box-shadow:0 0 0 14px rgba(91,108,255,0)}100%{box-shadow:0 0 0 0 rgba(91,108,255,0)}}
.ai-box{position:fixed;right:18px;bottom:82px;width:min(380px,calc(100vw - 36px));max-height:min(560px,70vh);z-index:41;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 50px rgba(7,10,20,.25);display:flex;flex-direction:column;animation:fadeUp .3s var(--ease) both}
.bubble{padding:9px 13px;border-radius:14px;max-width:88%;overflow-wrap:anywhere}.bubble.me{background:var(--accent);color:#fff;justify-self:end}.bubble.ai{background:var(--paper-2)}
.typing i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--muted);animation:dots 1.2s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--ink);color:var(--on-dark)}
.login .card{width:min(420px,100%);color:var(--text)}
.skeleton{height:120px;border-radius:var(--r);background:linear-gradient(90deg,var(--paper-2),var(--paper),var(--paper-2));background-size:200% 100%;animation:shine 1.2s infinite}
@keyframes shine{to{background-position:-200% 0}}
.printable{background:#fff;color:#000;padding:30px;border:1px solid var(--line);border-radius:var(--r-s)}
/* phone */
@media (max-width:820px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;width:min(84vw,300px);transform:translateX(-102%);transition:transform .3s var(--ease);box-shadow:20px 0 40px rgba(7,10,20,.3)}
  .side.open{transform:none}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);color:var(--on-dark);padding:8px 12px;position:sticky;top:0;z-index:20}
  .topbar button{all:unset;box-sizing:border-box;min-width:44px;min-height:44px;display:grid;place-items:center;cursor:pointer;font-size:20px}
  .main{padding:16px 12px 100px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .panel{width:100vw}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .search input{min-width:0}
  .search{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important}
@media print{.side,.topbar,.ai-btn,.ai-box,.no-print{display:none!important}.shell{display:block}.main{padding:0}}

/* the one list: filters, columns, sorting */
.cf-bar{align-items:flex-end;margin:10px 0;gap:12px}
.cf-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;flex:1 1 320px;min-width:0}
.cf-filter{min-width:130px;max-width:190px;margin:0}
.cf-filter select{width:100%}
.cf-sort{all:unset;cursor:pointer;font:inherit;color:inherit}
.cf-sort:focus-visible{outline:2px solid var(--accent,#4f46e5);outline-offset:2px}
table.cf-list{table-layout:auto;width:max-content;min-width:100%}
table.cf-list td{max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.cf-list td.act{overflow:visible;max-width:none}
table.cf-list .stack-s>span:not(.person-links){overflow:hidden;text-overflow:ellipsis}
.t .chip{max-width:100%;display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
table.cf-list th{white-space:nowrap}
table.cf-list td{vertical-align:top}
table.cf-list td .mono{white-space:nowrap}
table.cf-list .person-links{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.cf-cols{list-style:none;margin:0;padding:0;max-height:55vh;overflow:auto;display:grid;gap:4px}
.cf-cols li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 6px;border:1px solid var(--line,#e5e7eb);border-radius:8px;cursor:grab}
@media (max-width:640px){.cf-filter{flex:1 1 45%;max-width:none}.cf-bar{align-items:stretch}}

/* contact buttons: small square icons, one colour each */
.person-links{display:inline-flex;gap:6px;flex-wrap:wrap;vertical-align:middle}
a.cb{position:relative;display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;color:#fff;text-decoration:none;transition:transform .15s var(--ease),filter .15s;-webkit-touch-callout:none;user-select:none}
a.cb svg{width:16px;height:16px;fill:currentColor;pointer-events:none}
a.cb:hover{transform:translateY(-1px);filter:brightness(1.08)}
a.cb::after{content:"";position:absolute;inset:-3px}
a.cb.call{background:var(--cb-call)}a.cb.wa{background:var(--cb-wa)}a.cb.sms{background:var(--cb-sms)}a.cb.mail{background:var(--cb-mail)}
.cf-tip{position:fixed;z-index:80;background:var(--ink-2);color:#fff;font-size:12px;line-height:1.3;padding:4px 8px;border-radius:7px;max-width:min(320px,90vw);pointer-events:none;overflow-wrap:anywhere}

/* columns sized by hand */
.cf-table{min-width:0;max-width:100%}
.table-box{isolation:isolate}
.cf-thl{display:block;overflow:hidden;text-overflow:ellipsis}
.cf-grip{position:absolute;top:0;bottom:0;right:-5px;width:10px;cursor:col-resize;touch-action:none;z-index:1}
.cf-grip::after{content:"";position:absolute;top:22%;bottom:22%;left:4px;width:2px;border-radius:2px;background:transparent;transition:background .15s}
.cf-grip:hover::after,.cf-sizing .cf-grip:active::after{background:var(--accent)}
th:last-child>.cf-grip{right:0}
body.cf-sizing,body.cf-sizing *{cursor:col-resize!important;user-select:none}
.t td.cut{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
table.t.cf-fixed{table-layout:fixed;min-width:0}
.t.cf-fixed th{white-space:nowrap}
.t.cf-fixed td{overflow:hidden;max-width:none;text-overflow:ellipsis}
.t.cf-measure{table-layout:auto;min-width:0}
.t.cf-measure td,.t.cf-measure th{max-width:none!important;white-space:nowrap}
.cf-undo{all:unset;cursor:pointer;display:block;margin:6px 4px 0 auto;font-size:12px;color:var(--link)}
.cf-undo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cf-undo[hidden]{display:none}
@media (pointer:coarse){.cf-grip{right:-9px;width:18px}.cf-grip::after{left:8px;background:var(--line)}}

/* the date box: the same box as the dropdowns beside it */
.field select,.cf-date{appearance:none;-webkit-appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234A5266' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/12px;padding-right:32px}
.cf-date{display:block;width:100%;min-height:44px;border:1px solid var(--line);border-radius:var(--r-s);color:var(--text);padding:9px 32px 9px 12px;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:inherit}
.cf-date.none{color:var(--muted)}
.cf-date[disabled]{opacity:.6;cursor:not-allowed}
.cf-filter.cf-when{max-width:none;flex:0 1 auto;min-width:130px;width:max-content}
.cf-dt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,120px);gap:8px}
.cf-pop{position:fixed;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);box-shadow:0 18px 44px rgba(7,10,20,.22);padding:12px;width:max-content;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;animation:fadeUp .18s var(--ease) both}
.cf-pop.sheet{left:8px;right:8px;bottom:8px;width:auto}
.cf-range-pop{display:flex;gap:12px}
.cf-quick{display:flex;flex-direction:column;gap:2px;min-width:112px;border-right:1px solid var(--line);padding-right:10px}
.cf-quick button{all:unset;box-sizing:border-box;cursor:pointer;padding:7px 10px;border-radius:9px;font-size:13px;white-space:nowrap}
.cf-quick button:hover{background:var(--paper)}
.cf-quick button[aria-pressed=true]{background:var(--accent);color:#fff}
.cf-quick button:focus-visible{outline:2px solid var(--accent)}
.cf-sides{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cf-side{all:unset;box-sizing:border-box;cursor:pointer;display:grid;border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-size:13px}
.cf-side[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cf-side:focus-visible{outline:2px solid var(--accent)}
.cf-cal{width:266px;max-width:100%;margin-inline:auto}
.cf-cal-head{display:flex;gap:6px;align-items:center;justify-content:space-between;margin-bottom:6px}
.cf-cal-head select{flex:1 1 auto;min-width:0;min-height:34px;border:1px solid var(--line);border-radius:9px;background:var(--card);padding:2px 6px;font-size:13px}
.cf-cal-nav{all:unset;box-sizing:border-box;cursor:pointer;width:32px;height:34px;display:grid;place-items:center;border-radius:9px;font-size:18px;flex:none}
.cf-cal-nav:hover{background:var(--paper-2)}.cf-cal-nav:focus-visible{outline:2px solid var(--accent)}
.cf-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:34px;gap:2px;min-height:256px;align-content:start}
.cf-cal-wk{display:grid;place-items:center;font:500 11px var(--mono);color:var(--muted)}
.cf-day{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;border-radius:9px;font-size:13px}
.cf-day:hover{background:var(--paper-2)}.cf-day:focus-visible{outline:2px solid var(--accent)}
.cf-day.today{box-shadow:inset 0 0 0 1px var(--accent)}
.cf-day.in{background:#E7EAFF;color:#2A39B8}
.cf-day.on{background:var(--accent);color:#fff}
.cf-day[disabled]{opacity:.3;cursor:not-allowed;background:none}
.cf-cal-months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:40px;gap:4px}
.cf-pop-foot{gap:8px}
@media (max-width:640px){.cf-range-pop{flex-direction:column}.cf-quick{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:0 0 8px}.cf-cal{width:100%}.cf-filter.cf-when{flex:1 1 100%;width:auto}}