/* ===========================================================================
   Le Parfumier: SCHEDULE
   Same "Encre et Verre" system as the FLAG pilot: violet-biased neutrals, iris
   as the one interaction accent, semantic colour reserved for state. Bodoni for
   the wordmark and numerals, Archivo for interface text, Plex Mono for times.
   Dark by design; the shop wants it dark whatever the phone is set to.
   =========================================================================== */
:root {
  --paper:#131019; --paper-sunk:#0c0a11; --surface:#1b1724; --surface-2:#221c2d; --surface-3:#2a2338;
  --ink:#f1edf5; --ink-2:#b6adc2; --ink-3:#978da6; --ink-4:#6d6380;
  --rule:#322b3e; --rule-soft:#272134;
  --iris:#c68ec3; --iris-deep:#a86fa5; --iris-wash:rgba(198,142,195,.14);
  --vermilion:#e9796b; --vermilion-wash:rgba(233,121,107,.14);
  --ochre:#d9a83e; --ochre-wash:rgba(217,168,62,.14);
  --moss:#87be90; --moss-wash:rgba(135,190,144,.14);
  --rail:#0c0a11; --rail-ink:#f1edf5; --rail-accent:#c68ec3;
  --pl:#c68ec3; --pb:#7fb6d9; --pv:#e2a86f;
  --serif:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --r:14px; --r-sm:9px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
.hidden,[hidden]{display:none!important}
::selection{background:var(--iris-wash)}
a{color:var(--iris)}

/* ------------------------------------------------------------- lock gate */
.lock{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,#241c33 0%,var(--paper) 60%);z-index:50;padding:20px}
.lock-card{width:min(420px,100%);text-align:center;padding:40px 30px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid var(--rule);border-radius:22px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.crest{width:52px;height:52px;margin:0 auto 14px;border-radius:14px;display:grid;place-items:center;font-family:var(--serif);font-size:20px;color:var(--iris);background:#1a1622;border:1px solid var(--rule)}
.lock-mark{font-family:var(--mono);font-size:10.5px;letter-spacing:.32em;color:var(--iris);text-transform:uppercase}
.lock-title{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:.01em;margin-top:6px}
.lock-welcome{font-family:var(--serif);font-weight:400;font-size:22px;margin:22px 0 4px;color:var(--ink-2)}
.lock-welcome em{color:var(--ink);font-style:italic}
.lock-hook{margin:0 0 22px;color:var(--ink-3);font-size:13.5px}
.lock-input{width:100%;padding:14px 16px;text-align:center;font-family:var(--mono);font-size:26px;letter-spacing:.5em;background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--r);color:var(--ink);outline:none}
.lock-input:focus{border-color:var(--iris)}
.lock-btn{margin-top:12px;width:100%;padding:13px;border-radius:var(--r);border:1px solid var(--iris-deep);background:var(--iris);color:#1a1622;font-weight:700;letter-spacing:.02em}
.lock-btn:hover{filter:brightness(1.06)}
.lock-error{min-height:20px;margin:10px 0 0;color:var(--vermilion);font-size:13px}
.reveal{opacity:0;transform:translateY(8px);animation:reveal .6s var(--ease) forwards}
.r1{animation-delay:.05s}.r2{animation-delay:.15s}.r3{animation-delay:.25s}.r4{animation-delay:.4s}.r5{animation-delay:.5s}.r6{animation-delay:.65s}
@keyframes reveal{to{opacity:1;transform:none}}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ----------------------------------------------------------- name picker */
.picker{position:fixed;inset:0;overflow:auto;background:radial-gradient(1200px 600px at 50% -10%,#241c33 0%,var(--paper) 60%);z-index:45;padding:40px 20px}
.picker-inner{max-width:760px;margin:0 auto;text-align:center}
.picker-title{font-family:var(--serif);font-weight:400;font-size:34px;margin:8px 0 4px}
.picker-sub{color:var(--ink-3);margin:0 0 26px}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pick{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 12px;border-radius:18px;background:var(--surface);border:1px solid var(--rule);transition:transform .2s var(--ease),border-color .2s;text-align:center}
.pick:hover{transform:translateY(-3px);border-color:var(--iris)}
.pick .av{width:48px;height:48px;font-size:17px}
.pick b{font-weight:600;font-size:14px;line-height:1.25}
.pick small{color:var(--ink-3);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em}
.pick.sup{border-color:rgba(198,142,195,.4);background:linear-gradient(180deg,var(--iris-wash),var(--surface))}
.picker-status{margin-top:22px;color:var(--ink-4);font-family:var(--mono);font-size:11px}
.av{border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--ac,#6d6380);flex:none;width:26px;height:26px;font-size:11px;letter-spacing:.02em}

/* ------------------------------------------------------------------ app */
.app{display:grid;grid-template-columns:96px 1fr;min-height:100vh}
.rail{position:sticky;top:0;height:100vh;background:var(--rail);border-right:1px solid var(--rule-soft);display:flex;flex-direction:column;align-items:center;padding:18px 0 14px;gap:6px}
.rail-crest{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:var(--serif);font-size:16px;color:var(--iris);background:#1a1622;border:1px solid var(--rule)}
.rail-mark{font-family:var(--mono);font-size:8.5px;letter-spacing:.3em;color:var(--iris);margin:6px 0 16px}
.rail-nav{display:flex;flex-direction:column;gap:4px;width:100%;padding:0 9px}
.rail-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;padding:11px 4px 9px;border:0;border-radius:12px;background:transparent;color:var(--ink-3);font-size:10.5px;font-weight:600;letter-spacing:.01em;line-height:1.1;text-align:center}
.rail-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rail-btn:hover{color:var(--rail-ink);background:rgba(255,255,255,.05)}
.rail-btn.active{color:var(--rail-ink);background:var(--iris-wash)}
.rail-btn.active::before{content:"";position:absolute;left:-9px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--iris)}
.rail-count{position:absolute;top:6px;right:8px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--vermilion);color:#1a0d0b;font-family:var(--mono);font-size:10px;font-weight:600;display:grid;place-items:center}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:0 9px}
.whoami{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:10px 4px;border-radius:12px;border:1px solid var(--rule-soft);background:transparent;color:var(--ink-2);font-size:11px;font-weight:600}
.whoami small{color:var(--ink-4);font-size:9.5px;font-weight:500}
.whoami:hover{border-color:var(--iris)}
.rail-ver{font-family:var(--mono);font-size:8.5px;color:#554a63}
.main{padding:28px 34px 80px;min-width:0}

.panel{animation:fade .35s var(--ease) both;max-width:1280px}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.panel-head h1{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05;margin:0;letter-spacing:.005em}
.panel-head h1 em{color:var(--iris);font-style:italic}
.panel-sub{max-width:64ch;margin:8px 0 0;color:var(--ink-2);font-size:13.5px}
.kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--iris);margin-bottom:8px}
h2.sec{font-family:var(--serif);font-weight:400;font-size:21px;margin:30px 0 12px}
h2.sec:first-child{margin-top:0}
h2.sec small{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em;margin-left:10px}

/* ------------------------------------------------------------- controls */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);font-weight:600;font-size:13px;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--iris)}
.btn.primary{background:var(--iris);border-color:var(--iris-deep);color:#1a1622}
.btn.primary:hover{filter:brightness(1.06)}
.btn.danger{color:var(--vermilion);border-color:rgba(233,121,107,.4)}
.btn.ok{color:var(--moss);border-color:rgba(135,190,144,.4)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:default}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grow{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;border:1px solid var(--rule);color:var(--ink-2);background:var(--surface-2)}
.pill.store{font-weight:600;color:#1a1622;border-color:transparent}
.pill.s-PL{background:var(--pl)}.pill.s-PB{background:var(--pb)}.pill.s-PV{background:var(--pv)}
.pill.warn{background:var(--ochre-wash);color:var(--ochre);border-color:rgba(217,168,62,.35)}
.pill.bad{background:var(--vermilion-wash);color:var(--vermilion);border-color:rgba(233,121,107,.35)}
.pill.good{background:var(--moss-wash);color:var(--moss);border-color:rgba(135,190,144,.35)}
.pill.iris{background:var(--iris-wash);color:var(--iris);border-color:rgba(198,142,195,.35)}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-4)}
.small{font-size:12.5px}
input.field,select.field,textarea.field{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--rule);background:var(--paper-sunk);color:var(--ink);outline:none}
input.field:focus,select.field:focus,textarea.field:focus{border-color:var(--iris)}
textarea.field{min-height:70px;resize:vertical}
label.lbl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:12px 0 6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--iris)}

/* ---------------------------------------------------------------- cards */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px}
.card+.card{margin-top:10px}
.card.attn{border-color:rgba(217,168,62,.45);background:linear-gradient(180deg,rgba(217,168,62,.07),var(--surface))}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:22px}
.stat{padding:14px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--rule)}
.stat b{display:block;font-family:var(--serif);font-weight:500;font-size:28px;line-height:1;margin-bottom:6px}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.empty{padding:36px 20px;text-align:center;color:var(--ink-3);border:1px dashed var(--rule);border-radius:var(--r)}
.empty h3{font-family:var(--serif);font-weight:400;font-size:20px;margin:0 0 6px;color:var(--ink-2)}

/* shift list (Your schedule) */
.daylist{display:grid;gap:10px}
.dayrow{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:start;padding:14px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--rule)}
.dayrow.today{border-color:rgba(198,142,195,.5)}
.dayrow .d{font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.35}
.dayrow .d b{display:block;font-family:var(--serif);font-size:22px;font-weight:500;color:var(--ink);line-height:1}
.dayrow .d i{display:block;font-style:normal;color:var(--iris);font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-top:4px}
.shift{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;background:var(--surface-2);border:1px solid var(--rule-soft);cursor:pointer;transition:border-color .15s}
.shift:hover{border-color:var(--iris)}
.shift+.shift{margin-top:8px}
.shift .t{font-family:var(--mono);font-size:14px;font-weight:500}
.shift .h{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.shift.off{cursor:default;color:var(--ink-4);background:transparent;border-style:dashed}
.shift.off:hover{border-color:var(--rule-soft)}
.lockmark{font-size:11px;color:var(--ochre)}

/* week nav */
.weeknav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.weeknav .wk{font-family:var(--serif);font-size:20px;min-width:210px;text-align:center}
.weeknav .wk small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}

/* Your week grid */
.wgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.wday{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:12px;min-height:150px;display:flex;flex-direction:column;gap:8px}
.wday.today{border-color:rgba(198,142,195,.55)}
.wday .wd{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between}
.wday .wd b{font-family:var(--serif);font-size:20px;letter-spacing:0;color:var(--ink);font-weight:500}
.chip{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--rule-soft);cursor:pointer;font-size:12.5px;transition:border-color .15s}
.chip:hover{border-color:var(--iris)}
.chip .t{font-family:var(--mono);font-size:12.5px;font-weight:500}
.chip .n{color:var(--ink-2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.mine{border-left:3px solid var(--iris)}
.chip.locked{background:linear-gradient(180deg,rgba(217,168,62,.08),var(--surface-2))}
.chip.off{color:var(--ink-4);border-style:dashed;background:transparent;cursor:default;text-align:center}

/* Master schedule */
.storeblk{margin-bottom:34px}
.storehead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.storehead h2{font-family:var(--serif);font-weight:400;font-size:24px;margin:0}
.storehead .hrs{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.mwrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
table.master{border-collapse:separate;border-spacing:0;width:100%;min-width:900px}
table.master th,table.master td{padding:8px 8px;vertical-align:top;border-bottom:1px solid var(--rule-soft);border-right:1px solid var(--rule-soft)}
table.master th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;text-align:left;background:var(--surface-2);position:sticky;top:0}
table.master th.today{color:var(--iris)}
table.master th:first-child,table.master td:first-child{position:sticky;left:0;background:var(--surface);min-width:160px;z-index:1}
table.master th:first-child{background:var(--surface-2);z-index:2}
table.master td:last-child,table.master th:last-child{border-right:0}
table.master tr:last-child td{border-bottom:0}
table.master td .chip{margin-bottom:6px}
table.master td .chip:last-child{margin-bottom:0}
table.master .emp{display:flex;align-items:center;gap:9px}
table.master .emp b{font-weight:600;font-size:13px}
table.master .emp small{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-3)}
table.master td.hrs{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:right;white-space:nowrap}
table.master tr.cov td{background:var(--paper-sunk)}
.cov-bar{position:relative;height:10px;border-radius:5px;background:var(--rule-soft);overflow:hidden;margin:4px 0 4px}
.cov-bar i{position:absolute;top:0;bottom:0;background:var(--moss)}
.cov-bar i.gap{background:var(--vermilion)}
.cov-bar i.thin{background:var(--ochre)}
.cov-lbl{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);display:flex;justify-content:space-between}
.addcell{width:100%;border:1px dashed var(--rule);background:transparent;color:var(--ink-4);border-radius:8px;padding:4px;font-size:12px}
.addcell:hover{color:var(--iris);border-color:var(--iris)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:14px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:6px}

/* requests */
.req{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start}
.req .who{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.req .who b{font-weight:600}
.req .arrow{color:var(--ink-4)}
.req .shifts{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:10px 0}
.req .shifts .sw{font-size:22px;color:var(--ink-4);text-align:center}
.req .box{padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--rule-soft);font-size:13px}
.req .box .t{font-family:var(--mono);font-weight:500}
.req .box .dim{font-size:12px}
.req .msg{color:var(--ink-2);font-style:italic;margin:6px 0 0;font-size:13px}
.status{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.timeline{display:flex;gap:6px;align-items:center;margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--ink-4);flex-wrap:wrap}
.timeline i{width:8px;height:8px;border-radius:50%;background:var(--rule);display:inline-block}
.timeline i.done{background:var(--moss)}
.timeline i.now{background:var(--ochre);box-shadow:0 0 0 4px var(--ochre-wash)}
.timeline i.bad{background:var(--vermilion)}

/* tabs */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tab{padding:7px 13px;border-radius:999px;border:1px solid var(--rule);background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:600}
.tab.active{background:var(--iris-wash);border-color:rgba(198,142,195,.5);color:var(--ink)}

/* admin tables */
table.plain{width:100%;border-collapse:collapse}
table.plain th,table.plain td{padding:8px 10px;border-bottom:1px solid var(--rule-soft);text-align:left;vertical-align:middle;font-size:13px}
table.plain th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
table.plain input.field,table.plain select.field{padding:6px 8px;font-size:12.5px}
table.plain input.tm{width:74px;font-family:var(--mono)}
.avgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.avday{padding:10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--rule-soft)}
.avday .wd{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.avday input,.avday select{width:100%;margin-top:4px;padding:6px 8px;font-size:12px}

/* --------------------------------------------------------------- sheet */
.sheet{position:fixed;inset:0;z-index:60;display:grid;place-items:end center}
.sheet-backdrop{position:absolute;inset:0;background:rgba(6,4,10,.6);backdrop-filter:blur(4px);animation:fade .2s}
.sheet-card{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--rule);border-radius:22px 22px 0 0;padding:22px 22px 30px;animation:up .3s var(--ease)}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.sheet h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 4px;padding-right:36px}
.sheet .sub{color:var(--ink-3);margin:0 0 16px;font-size:13.5px}
.sheet .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.choice{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;border:1px solid var(--rule-soft);background:var(--surface-2);cursor:pointer;width:100%;text-align:left}
.choice+.choice{margin-top:6px}
.choice:hover{border-color:var(--iris)}
.choice.sel{border-color:var(--iris);background:var(--iris-wash)}
.choice b{font-weight:600}
.choice small{display:block;color:var(--ink-3);font-size:12px}
.choice .mono{margin-left:auto;font-size:12px;color:var(--ink-2);text-align:right}
.choice:disabled{opacity:.45;cursor:not-allowed}
.close-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--ink-3)}
@media (min-width:700px){.sheet{place-items:center}.sheet-card{border-radius:22px}}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;padding:11px 16px;border-radius:12px;background:var(--surface-3);border:1px solid var(--rule);color:var(--ink);font-size:13px;z-index:70;transition:all .25s var(--ease);pointer-events:none;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:var(--vermilion)}.toast.ok{border-color:var(--moss)}.toast.warn{border-color:var(--ochre)}

/* -------------------------------------------------------------- mobile */
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;flex-direction:row;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--rule-soft);z-index:40;gap:0}
  .rail-crest,.rail-mark,.rail-ver{display:none}
  .rail-nav{flex-direction:row;padding:0;gap:2px}
  .rail-btn{padding:7px 2px 5px;font-size:9.5px;border-radius:10px}
  .rail-btn.active::before{display:none}
  .rail-foot{margin:0;width:auto;padding:0 2px}
  .whoami{padding:6px;font-size:10px;border:0;gap:2px}
  .whoami small{display:none}
  .main{padding:20px 14px 110px}
  .panel-head h1{font-size:27px}
  .wgrid{grid-template-columns:1fr 1fr}
  .dayrow{grid-template-columns:82px 1fr;gap:10px}
  .field-row{grid-template-columns:1fr}
  .avgrid{grid-template-columns:1fr 1fr}
  .req{grid-template-columns:1fr}
  .req .shifts{grid-template-columns:1fr}
  .req .shifts .sw{transform:rotate(90deg)}
  .toast{bottom:90px}
}

/* ================================================================ V2 */
:root{--sky:#7fb6d9;--sky-wash:rgba(127,182,217,.16)}
.pill.sky{background:var(--sky-wash);color:var(--sky);border-color:rgba(127,182,217,.4)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin:0 2px;background:var(--ink-4);flex:none}
.dot.ochre{background:var(--ochre);box-shadow:0 0 0 3px var(--ochre-wash)}
.dot.sky{background:var(--sky);box-shadow:0 0 0 3px var(--sky-wash)}
.dot.vermilion{background:var(--vermilion);box-shadow:0 0 0 3px var(--vermilion-wash)}
.dot.moss{background:var(--moss);box-shadow:0 0 0 3px var(--moss-wash)}
.dot.grey{background:var(--ink-4)}
.chip .t .dot{margin-left:6px}
.chip.fill{border-left:3px solid var(--ochre)}
.chip.mine.fill{border-left:3px solid var(--iris);box-shadow:inset 3px 0 0 var(--ochre)}
.chip.off.tag{color:var(--ink-3);border-style:solid;background:var(--moss-wash);border-color:transparent;font-size:11px}
.chip.off.tag.pend{background:var(--ochre-wash)}
.warn-text{color:var(--ochre)}
.again{margin-top:10px;padding-top:10px;border-top:1px dashed var(--rule)}
.again .field{padding:6px 10px;font-size:12.5px}
.legend .dot{margin-right:4px}

/* month grid (Your schedule) */
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.mgrid.head{margin-bottom:6px}
.mh{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:0 4px}
.mday{min-height:96px;padding:8px;border-radius:12px;background:var(--surface);border:1px solid var(--rule);display:flex;flex-direction:column;gap:6px}
.mday[data-offday]{cursor:pointer}
.mday[data-offday]:hover{border-color:var(--iris)}
.mday.out{opacity:.35}
.mday.past{opacity:.55}
.mday.today{border-color:var(--iris);box-shadow:0 0 0 3px var(--iris-wash)}
.mday .mn{display:flex;align-items:baseline;justify-content:space-between}
.mday .mn b{font-family:var(--serif);font-weight:500;font-size:18px;line-height:1}
.mday .mn i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--iris)}
.mday .chip{padding:6px 8px}
.mday .chip .t{font-size:12px}
.mfree{margin-top:auto;font-family:var(--mono);font-size:10px;color:var(--ink-4);letter-spacing:.1em;text-transform:uppercase}

/* year calendar (Time off) */
.ygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ymonth{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:12px}
.ym{font-family:var(--serif);font-size:17px;margin-bottom:8px}
.yd{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.yd>span{font-family:var(--mono);font-size:9.5px;color:var(--ink-4);text-align:center}
.yday{position:relative;aspect-ratio:1;border-radius:7px;border:1px solid transparent;background:var(--surface-2);color:var(--ink-2);font-family:var(--mono);font-size:11px;padding:0}
.yday:hover:not(:disabled){border-color:var(--iris);color:var(--ink)}
.yday.out{background:transparent}
.yday.past{opacity:.4}
.yday.today{border-color:var(--iris);color:var(--ink);font-weight:600}
.yday.ok{background:var(--moss-wash);color:var(--moss)}
.yday.pend{background:var(--ochre-wash);color:var(--ochre)}
.yday.no{background:var(--vermilion-wash);color:var(--vermilion);text-decoration:line-through}
.yday i{position:absolute;top:-4px;right:-4px;min-width:14px;height:14px;border-radius:7px;background:var(--iris);color:#1a1622;font-size:9px;font-style:normal;display:grid;place-items:center;padding:0 3px}
.yday:disabled{cursor:default}

/* option cards, sheet extras */
.choice.opt{align-items:flex-start;padding:14px}
.choice.opt small{white-space:normal;line-height:1.45}
.sheet .lock-input{font-size:22px;letter-spacing:.6em}
tr.dim td{opacity:.5}
details summary{cursor:pointer}
/* the trail of after-the-fact manager changes on a request card */
.hist{margin-top:8px;border-top:1px solid var(--rule-soft);padding-top:6px}
.hist summary{list-style:none;color:var(--ink-4)}
.hist ul{list-style:none}
.hist li{margin:4px 0;line-height:1.45;color:var(--ink-3)}

@media (max-width:820px){
  .mgrid{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .mday{min-height:64px;padding:5px;border-radius:8px;gap:3px}
  .mday .mn b{font-size:14px}
  .mday .mn i{display:none}
  .mday .chip{padding:3px 4px}
  .mday .chip .t{font-size:10px}
  .mday .chip .n{display:none}
  .mfree{display:none}
  .mh{font-size:9px;letter-spacing:.05em}
  .ygrid{grid-template-columns:1fr 1fr}
}

/* range calendar in the time-off sheet */
.rcal{background:var(--surface-2);border:1px solid var(--rule-soft);border-radius:12px;padding:10px}
.rhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rhead b{font-family:var(--serif);font-weight:500;font-size:17px}
.rgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.rd{font-family:var(--mono);font-size:9.5px;color:var(--ink-4);text-align:center;padding-bottom:2px}
.rday{aspect-ratio:1;border-radius:8px;border:1px solid transparent;background:var(--paper-sunk);color:var(--ink-2);font-family:var(--mono);font-size:12px;padding:0;cursor:pointer}
.rday:hover:not(:disabled){border-color:var(--iris);color:var(--ink)}
.rday.out{background:transparent}
.rday.past{opacity:.3;cursor:default}
.rday.today{border-color:var(--iris)}
.rday.in{background:var(--iris-wash);color:var(--ink)}
.rday.a,.rday.b{background:var(--iris);color:#1a1622;font-weight:600}

/* AI command center */
.ai-grid{display:grid;grid-template-columns:1fr 260px;gap:16px}
.ai-log{min-height:320px;max-height:60vh;overflow:auto;padding:12px;border-radius:12px;background:var(--paper-sunk);border:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:8px}
.ai-msg{display:flex}.ai-msg.me{justify-content:flex-end}
.ai-bubble{max-width:82%;padding:10px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--rule-soft);font-size:13.5px;line-height:1.5}
.ai-msg.me .ai-bubble{background:var(--iris-wash);border-color:rgba(198,142,195,.35)}
.ai-bubble p{margin:0 0 6px}.ai-bubble p:last-child{margin:0}.ai-bubble ul{margin:4px 0 6px 18px;padding:0}
.ai-act{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);padding:4px 8px}
.ai-act summary{cursor:pointer;list-style:none}.ai-act pre{white-space:pre-wrap;word-break:break-word;font-size:11px;color:var(--ink-4);margin:6px 0 0;max-height:220px;overflow:auto}
.ai-confirm{margin-top:6px}.ai-confirm pre{white-space:pre-wrap;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--paper-sunk);padding:10px;border-radius:8px}
.ai-input{display:flex;gap:8px;margin-top:10px;align-items:flex-end}.ai-input textarea{flex:1;min-height:0;resize:none}
.ai-side{padding:12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--rule-soft);font-size:12.5px}
.ai-tool{padding:3px 0;color:var(--ink-2)}.ai-tool .mono{font-size:11.5px}
.ai-sug{font-size:12px;font-weight:500}
@media (max-width:820px){.ai-grid{grid-template-columns:1fr}.ai-side{order:2}}

/* ------------------------------------------------------------- day / night */
.rail-icon{width:38px;height:38px;border-radius:12px;border:1px solid var(--rule);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer}
.rail-icon svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rail-icon:hover{border-color:var(--iris);background:rgba(255,255,255,.12)}
.rail-icon .ic-sun{display:none}
:root[data-theme="light"] .rail-icon .ic-sun{display:block}
:root[data-theme="light"] .rail-icon .ic-moon{display:none}
:root[data-theme="light"]{
  --paper:#f0eef2;--paper-sunk:#e6e2ea;--surface:#ffffff;--surface-2:#faf9fb;--surface-3:#f3f0f6;
  --ink:#1a1622;--ink-2:#4b4456;--ink-3:#6f6780;--ink-4:#9a92a8;
  --rule:#dcd7e3;--rule-soft:#ebe7ef;
  --iris:#a86fa5;--iris-deep:#8e5a8b;--iris-wash:rgba(168,111,165,.14);
  --vermilion:#c9584a;--vermilion-wash:rgba(201,88,74,.12);
  --ochre:#b8891f;--ochre-wash:rgba(184,137,31,.14);
  --moss:#4f9a5c;--moss-wash:rgba(79,154,92,.14);
  --sky:#3f88b5;--sky-wash:rgba(63,136,181,.14);
  --pl:#c68ec3;--pb:#8ec2e2;--pv:#e8b27a;
  --rail:#1a1622;--rail-ink:#f1edf5;
}
:root[data-theme="light"] .lock,:root[data-theme="light"] .picker{background:radial-gradient(1200px 600px at 50% -10%,#e4dcea 0%,var(--paper) 60%)}
:root[data-theme="light"] .crest,:root[data-theme="light"] .rail-crest{background:#2a2338;color:#e3c6e1}
:root[data-theme="light"] .rail-btn{color:#b6adc2}
:root[data-theme="light"] .rail-btn.active,:root[data-theme="light"] .rail-btn:hover{color:#fff}
:root[data-theme="light"] .whoami{color:#e3ddea;border-color:#3a3147}
:root[data-theme="light"] .whoami small{color:#a99fb8}
:root[data-theme="light"] .rail-ver{color:#7a7090}
:root[data-theme="light"] .rail-mark{color:#e3c6e1}
:root[data-theme="light"] .lock-card{background:var(--surface)}
:root[data-theme="light"] .lock-input,:root[data-theme="light"] .rday,:root[data-theme="light"] .ai-log{background:#fff}
:root[data-theme="light"] .btn.primary,:root[data-theme="light"] .lock-btn{color:#fff}
:root[data-theme="light"] .pill.store{color:#1a1622}
:root[data-theme="light"] .rail-count{color:#fff}
:root[data-theme="light"] .dot.ochre{box-shadow:0 0 0 3px var(--ochre-wash)}
:root[data-theme="light"] .toast{background:#fff;color:var(--ink)}
:root[data-theme="light"] .sheet-backdrop{background:rgba(26,22,34,.45)}
@media (max-width:820px){.rail-icon{width:34px;height:34px;border-radius:10px}.rail-icon svg{width:17px;height:17px}}

/* rule editor: tick several days / stores / people */
.rgroup{display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 10px;border:1px solid var(--rule);border-radius:10px;background:var(--paper-sunk)}
.rgroup .rchk{padding:2px 0;font-size:13px}

/* ordered cover list in the rule editor */
.rorder{list-style:none;margin:0;padding:0;counter-reset:ro}
.rorder li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border:1px solid var(--rule-soft);border-radius:9px;background:var(--paper-sunk);margin-bottom:4px;counter-increment:ro}
.rorder li>span:first-child::before{content:counter(ro) ". ";font-family:var(--mono);color:var(--iris);margin-right:4px}
