/* Liquify Time Tracker · app.css
   Main styles (brand tokens, layout, every screen). */
/* ---------- Liquify Studio brand tokens (Brandbook 2026) ----------
   Buttermilk #f9f6f0 · primary backgrounds (60%)
   Deep Navy  #1b252f · text, headings, outlines (20%)
   Light Taupe #bfae9b · secondary backgrounds, borders (10%)
   Caramel    #be884a · call-to-action buttons, highlights, icons (10%)
   Typeface: Manrope — Semibold headers, Medium subheaders, Regular body.
   Layout: a framed app (rounded shell on a soft satin backdrop, from the brand textures), an icon rail
   with the brandmark, a greeting header, tinted cards (caramel / taupe / navy tints of the palette).
   Contrast notes: caramel buttons carry Deep Navy text (5.0:1); small caramel text uses
   --priInk (a deeper caramel, 5.4:1). --bad is the only non-palette colour, kept for errors. */
:root{
  --buttermilk:#f9f6f0;--navy:#1b252f;--taupe:#bfae9b;--caramel:#be884a;
  --page:linear-gradient(135deg,#d9cbb9 0%,#ece3d7 38%,#f8f4ed 52%,#e6dbcd 70%,#d2c3b0 100%);
  --shell:#f9f6f0;--rail:#fffdf9;--bg:#f9f6f0;--card:#fffdf9;--soft:#f4efe7;--soft2:#ebe3d8;
  --ink:#1b252f;--mute:#5e6469;--line:#e8dfd4;--line2:#bfae9b;
  --pri:#be884a;--pri2:#ad7a40;--onPri:#1b252f;--priSoft:#f3e7d8;--priInk:#7d603f;
  --warn:#bfae9b;--warnSoft:#ebe3d8;--warnInk:#1b252f;
  --bad:#9c3d2b;--badSoft:#f6e4de;--badInk:#8a3324;
  --info:#1b252f;--infoSoft:#e7e2da;--infoInk:#1b252f;
  --dis:#e6ded3;--disInk:#8b8f93;--focus:#1b252f;--shadow:rgba(27,37,47,.22);
  --w1:#bfae9b;--w2:#1b252f;--w3:#8f7b65;color-scheme:light;
  /* card tints (brand colours mixed into buttermilk) */
  --tCar:linear-gradient(160deg,#f1e0ca 0%,#f8efe4 100%);
  --tTau:linear-gradient(160deg,#e7ddd0 0%,#f4eee6 100%);
  --tNav:linear-gradient(160deg,#dde2e6 0%,#eef0f1 100%);
  --tEdge:rgba(255,253,249,.85);
  /* chart marks */
  --bar:#1b252f;--barHi:#be884a;--barMute:rgba(27,37,47,.10);--bar3:#a8957f;
  /* attendance traffic lights (muted to sit with the brand palette) */
  --go:#3a7a4e;--goSoft:#dcebdf;--goInk:#2b5a39;--wait:#d9a640;--waitSoft:#f5e5bd;--waitInk:#5e430a;--stop:#b0473a;--stopSoft:#f5dcd7;--stopInk:#8a3324
}
:root[data-theme="dark"]{
  --page:linear-gradient(135deg,#0b1116 0%,#16202a 45%,#0e151b 100%);
  --shell:#141c24;--rail:#1b252f;--bg:#141c24;--card:#1b252f;--soft:#212c37;--soft2:#2a3642;
  --ink:#f9f6f0;--mute:#abadac;--line:#2b3744;--line2:#4a5561;
  --pri:#be884a;--pri2:#cb9658;--onPri:#1b252f;--priSoft:#33291e;--priInk:#d6a66c;
  --warn:#bfae9b;--warnSoft:#2f2c28;--warnInk:#e9e0d4;
  --bad:#d0705c;--badSoft:#3a221d;--badInk:#f0a896;
  --info:#f9f6f0;--infoSoft:#2a3642;--infoInk:#f9f6f0;
  --dis:#26313c;--disInk:#6f7a84;--focus:#f9f6f0;--shadow:rgba(0,0,0,.55);
  --w1:#8f7b65;--w2:#0d1318;--w3:#bfae9b;color-scheme:dark;
  --tCar:linear-gradient(160deg,#3a2d1f 0%,#272119 100%);
  --tTau:linear-gradient(160deg,#302b25 0%,#24221f 100%);
  --tNav:linear-gradient(160deg,#25333f 0%,#1c2731 100%);
  --tEdge:#2b3744;
  --bar:#ddd3c6;--barHi:#d39a58;--barMute:rgba(249,246,240,.12);--bar3:#8f7b65;
  --goSoft:#1d3325;--goInk:#9fd4ac;--waitSoft:#3a2f15;--waitInk:#efcd78;--stopSoft:#3b201d;--stopInk:#f2a596
}
*{box-sizing:border-box}
html{background:var(--page);background-attachment:fixed;min-height:100%}
body{margin:0;font:400 15px/1.55 Manrope,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--page);background-attachment:fixed;color:var(--ink);min-height:100vh}

/* ---------- app shell: framed panel, icon rail, header ---------- */
#app{display:grid;grid-template-columns:auto minmax(0,1fr);margin:16px;min-height:calc(100vh - 32px);background:var(--shell);border-radius:28px;box-shadow:0 24px 70px rgba(27,37,47,.16),0 0 0 1px rgba(255,253,249,.6) inset}
:root[data-theme="dark"] #app{box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 0 1px var(--line) inset}
#app.hide{display:none}
#side{width:76px;margin:12px 0 12px 12px;padding:14px 0;background:var(--rail);border:1px solid var(--line);border-radius:22px;display:flex;flex-direction:column;align-items:center;gap:6px;position:sticky;top:28px;height:calc(100vh - 56px)}
.rmark{width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--buttermilk);display:flex;align-items:center;justify-content:center;margin-bottom:18px;flex:none}
.rmark svg{width:28px;height:auto;display:block}
.rmark svg.clockmark{width:100%!important;height:100%!important;border-radius:50%}
:root[data-theme="dark"] .rmark{background:var(--buttermilk);color:var(--navy)}
.rlogo{display:none}
#nav{width:100%}
.items{display:flex;flex-direction:column;align-items:center;gap:6px}
.navsec{display:flex;flex-direction:column;align-items:center;gap:6px}
.navh{display:none}
#side button{font-family:inherit}
.item,.rbtn{position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:14px;background:transparent;color:var(--mute);font-weight:500}
.item svg,.rbtn svg{flex:none}
.item:hover,.rbtn:hover{background:var(--soft2);color:var(--ink)}
.item.on,.rbtn.on{background:var(--navy);color:var(--buttermilk)}
:root[data-theme="dark"] .item.on,:root[data-theme="dark"] .rbtn.on{background:var(--buttermilk);color:var(--navy)}
.item .lbl2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rbtn .lbl2{display:none}
/* Hovering the rail for 0.2 s widens it to show the labels; the page moves over to make room */
#side{transition:width .18s ease;z-index:25}
@media (min-width:821px){
  #side.wide{width:220px;align-items:stretch;padding:14px 12px}
  #side.wide .rmark{display:none}
  #side.wide .rlogo{display:flex;align-items:center;height:46px;margin:0 2px 18px}
  #side.wide .items,#side.wide .navsec,#side.wide .foot{align-items:stretch}
  #side.wide .item,#side.wide .rbtn{width:100%;justify-content:flex-start;gap:12px;padding:0 12px}
  #side.wide .item .lbl2{position:static;width:auto;height:auto;clip:auto;font-size:14.5px}
  #side.wide .rbtn .lbl2{display:inline;font-size:14.5px}
  #side.wide .item::after,#side.wide .rbtn::after{content:none}
}
/* hover/focus label for the icon rail */
.item::after,.rbtn::after{content:attr(data-label);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);background:var(--navy);color:var(--buttermilk);font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:30}
:root[data-theme="dark"] .item::after,:root[data-theme="dark"] .rbtn::after{background:var(--buttermilk);color:var(--navy)}
.item:hover::after,.item:focus-visible::after,.rbtn:hover::after,.rbtn:focus-visible::after{opacity:1}
#side button:focus-visible,.mobbar button:focus-visible,.tbtn:focus-visible,.mepill:focus-visible{outline:2px solid var(--caramel);outline-offset:2px}
.foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--caramel);color:var(--navy);font-size:12px;font-weight:700;line-height:20px;text-align:center}

main{min-width:0;padding:0 28px 32px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0 20px;flex-wrap:wrap}
.topbar h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.topbar h1.lc{font-size:32px;letter-spacing:-.035em}
/* Page names are written lower case in the code; show them in sentence case (Time board, All records) */
.topbar h1.lc::first-letter,.ptitle::first-letter{text-transform:uppercase}
.topbar .tsub{color:var(--mute);font-size:13.5px;margin-top:2px}
.tbtns{display:flex;align-items:center;gap:8px}
.tbtn{position:relative;width:42px;height:42px;padding:0;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;line-height:0}
.tbtn:hover{background:var(--soft2)}
.tbtn.on{background:var(--navy);color:var(--buttermilk);border-color:var(--navy)}
.tbtn .badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;line-height:18px;font-size:11px;padding:0 5px;border:2px solid var(--shell)}
.mepill{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px 0 4px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:500;line-height:1;text-align:left}
.mepill:hover{background:var(--soft2)}
.mepill .avatar{width:34px;height:34px;font-size:13px}
.avatar{flex:none;width:34px;height:34px;border-radius:50%;background:var(--caramel);color:var(--navy);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.mepill .who{display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0;max-width:160px;line-height:1.1}.mepill .who b{display:block;margin:0;font-weight:600;font-size:13.5px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mepill .role{display:block;margin:0;color:var(--mute);font-size:11.5px;font-weight:500;line-height:1.1;text-transform:capitalize}
.mobbar,.scrim{display:none}
@media (max-width:820px){
  body{background:var(--shell)}
  #app{display:block;margin:0;border-radius:0;box-shadow:none;min-height:100vh}
  .mobbar{display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:5;background:var(--navy);color:var(--buttermilk);padding:10px 12px 10px 16px}
  .mlogo{flex:1;min-width:0;display:block}
  .mobbar button{background:none;padding:8px;line-height:0;position:relative;color:var(--buttermilk);border-radius:10px}.mobbar button:hover{background:rgba(249,246,240,.1)}
  .mobbar .badge{position:absolute;top:2px;right:0;min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}
  /* the rail becomes a drawer with labels */
  #side{position:fixed;left:0;top:0;bottom:0;z-index:20;width:264px;height:auto;margin:0;border-radius:0 22px 22px 0;border:0;padding:22px 16px;align-items:stretch;transform:translateX(-100%);transition:transform .2s}
  #app.open #side{transform:none;box-shadow:0 0 40px rgba(16,23,30,.4)}
  #app.open .scrim{display:block;position:fixed;inset:0;z-index:15;background:rgba(27,37,47,.45)}
  .rmark{display:none}.rlogo{display:block;margin:0 2px 22px}
  .items,.navsec,.foot{align-items:stretch}
  .navh{display:block;font-size:12px;font-weight:600;color:var(--mute);margin:0 8px 2px;text-transform:uppercase;letter-spacing:.06em}
  .item,.rbtn{width:100%;height:44px;justify-content:flex-start;gap:12px;padding:0 12px;font-size:15px;color:var(--ink)}
  .item .lbl2{position:static;width:auto;height:auto;clip:auto}
  .rbtn .lbl2{display:inline}
  .item::after,.rbtn::after{content:none}
  main{padding:0 16px 32px}
  .topbar{padding:18px 0 14px}
  .topbar h1{font-size:23px}.topbar h1.lc{font-size:28px}
  .tbtns{display:none}
}

/* ---------- common ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 22px;margin-bottom:16px;box-shadow:0 6px 24px rgba(27,37,47,.04)}
.card > h2:first-child,.chead h2{font-size:17px}
.chead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}.chead h2{margin:0}
h1,h2,h3{font-weight:600;letter-spacing:-.01em}
h2{margin:0 0 12px;font-size:18px}
.ptitle{margin:0;font-size:36px;font-weight:600;line-height:1.05;letter-spacing:-.035em}
.view > .head .ptitle{display:none} /* page titles live in the header bar now */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:16px}.head h2{margin:0}
.view > .head{justify-content:flex-end;margin-top:-6px}
input,select,textarea{font:inherit;padding:10px 12px;border:1px solid var(--line2);border-radius:12px;width:100%;background:var(--card);color:var(--ink)}
textarea{resize:vertical;min-height:110px}
input:disabled,select:disabled{background:var(--soft2);color:var(--mute)}
label{display:block;font-size:13px;font-weight:500;color:var(--mute);margin:10px 0 4px}
button{font:inherit;font-weight:600;cursor:pointer;border:0;border-radius:12px;padding:10px 18px;background:var(--pri);color:var(--onPri)}
button:hover{background:var(--pri2)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2);font-weight:500}
button.ghost:hover{background:var(--soft2)}
.lg-or{display:flex;align-items:center;gap:12px;margin:12px 0 4px;color:var(--mute,var(--ink));font-size:13px;opacity:.7}.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:var(--line2)}
button.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--card);padding:12px 18px;border-radius:999px;font-size:15px}
button.gbtn:hover{background:var(--soft2)}
button.gbtn svg{flex:none}
button.danger{background:transparent;color:var(--bad);border:1px solid currentColor;font-weight:500}
button.danger:hover{background:var(--badSoft)}
:root[data-theme="dark"] button.danger{color:var(--badInk)}
button.sm{padding:5px 11px;font-size:13px;border-radius:10px}
button:disabled{background:var(--dis);color:var(--disInk);cursor:not-allowed}
button.busy{cursor:progress;position:relative}
button.busy:not(.ibtn):not(.tbtn)::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;vertical-align:-1px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}
@media (prefers-reduced-motion:no-preference){button.busy::after{animation:spin .7s linear infinite}}
@keyframes spin{to{transform:rotate(360deg)}}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.row>div{flex:1;min-width:130px}
.wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}th{color:var(--mute);font-weight:600}
.err{color:var(--bad);min-height:20px;margin-top:8px;font-size:14px}.ok{color:var(--priInk)}
:root[data-theme="dark"] .err:not(.ok){color:var(--badInk)}
.over{color:var(--priInk);font-weight:700}

.hide{display:none!important}
.mute{color:var(--mute);font-size:13px}.num{font-variant-numeric:tabular-nums}.sub{display:block;color:var(--mute);font-size:12px}
.hint{font-size:12px;color:var(--mute);margin-top:4px}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.p-active,.p-resolved{background:var(--priSoft);color:var(--priInk)}
.p-review{background:var(--warnSoft);color:var(--warnInk)}
.p-working{background:var(--goSoft);color:var(--goInk)}
.p-lunch,.p-bio,.p-pause{background:var(--waitSoft);color:var(--waitInk)}
.p-progress,.p-new{background:var(--ink);color:var(--bg)}
.p-done,.p-inactive,.p-closed,.p-submitted,.p-draft{background:var(--soft2);color:var(--mute)}
.p-out{background:var(--stopSoft);color:var(--stopInk)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px}
.d-working{background:var(--go)}.d-lunch,.d-bio,.d-pause{background:var(--wait)}.d-out{background:var(--stop)}.d-done{background:var(--mute)}
tr.off td:not(:last-child){color:var(--mute)}
.empty{color:var(--mute);text-align:center;padding:28px 10px}
/* Login: two columns — headline + form on the left, a large app mark on the right (stacks on phones) */
#login{position:relative;z-index:1;min-height:100vh;min-height:100dvh;max-width:1320px;margin:0 auto;padding:40px clamp(24px,5vw,64px) calc(clamp(90px,16vh,150px) + 24px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(32px,5vw,80px)}
.lg-main{width:100%;max-width:400px;justify-self:center}
.lg-head{margin:0 0 30px;font-size:clamp(40px,5.2vw,66px);line-height:1.02;font-weight:800;letter-spacing:-.045em;color:var(--ink)}
.lg-sub{margin:0 0 26px;font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
@media (max-height:900px){.applock.lg{margin-bottom:18px}.lg-head{font-size:clamp(32px,4.4vw,50px);margin-bottom:22px}.lg-sub{margin-bottom:14px}#login .check{margin-top:10px!important}}
@media (max-height:820px){.lg-head{font-size:clamp(30px,4vw,42px);margin-bottom:18px}.applock.lg{margin-bottom:12px}.lg-sub{margin-bottom:10px}.gbtn{padding:10px 18px!important}#login form button[type="submit"]{padding:11px 18px}}
#login form button[type="submit"]{margin-top:6px;padding:13px 18px;border-radius:999px;font-size:15px}
/* Split login: form on the left, the portal coin on the right */
@media (min-width:821px){
  #login{max-width:none;margin:0;padding:0;gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  #login:not(.hide) ~ .decor{display:none}
}
.lg-left{display:flex;flex-direction:column;padding:28px clamp(28px,4vw,56px);background:var(--card);min-width:0}
.lg-top{display:flex;align-items:center;gap:13px;align-self:flex-start}
.lg-top .awm{width:118px;margin:0;color:var(--ink)}
.lgsep{width:2px;height:24px;background:var(--line2);flex:none}
.lgpn{font-size:15.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.lg-left .lg-main{margin:auto;max-width:360px;padding:24px 0}
.lg-foot{font-size:12px;color:var(--mute)}
.lg-art{display:flex;align-items:center;justify-content:center;background:var(--soft);position:relative;overflow:hidden;min-height:100%}
.lg-stage{display:flex;flex-direction:column;align-items:center;gap:30px;width:min(270px,34vw)}
.lg-spin{width:100%;aspect-ratio:1;perspective:1000px;animation:coinLift 8.1s ease-in-out infinite}
.lg-coin{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:coinSpin 8.1s infinite}
.lg-coin .face,.lg-coin .rim i{position:absolute;inset:0}
.lg-coin .face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lg-coin .face svg{width:100%;height:100%;display:block}
.lg-coin .face svg.orbit{position:absolute;inset:0;overflow:visible}
.orbg{transform-origin:50px 50px;animation:starOrbit 8.1s infinite}
.rmk{animation:ringDraw 8.1s infinite}
.twk{transform-box:fill-box;transform-origin:center;animation:twinkle 8.1s infinite}
@keyframes twinkle{0%,89.38%{transform:scale(1) rotate(0);filter:none}92.35%{transform:scale(1.9) rotate(45deg);filter:drop-shadow(0 0 2.5px #fff3d9) drop-shadow(0 0 6px #e6b574)}94.57%{transform:scale(.8) rotate(90deg);filter:drop-shadow(0 0 1px #fff3d9)}96.79%{transform:scale(1.3) rotate(90deg);filter:drop-shadow(0 0 3px #fff3d9)}99.75%,100%{transform:scale(1) rotate(90deg);filter:none}}
.lg-coin .face.f{transform:translateZ(8px)}
.lg-coin .face.b{transform:rotateY(180deg) translateZ(8px)}
.lg-coin .rim{position:absolute;inset:0;transform-style:preserve-3d}
.lg-coin .rim i{border-radius:50%;background:linear-gradient(90deg,#8f6330,#e6b574 50%,#8f6330)}
.lg-shadow{width:62%;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(27,37,47,.3),rgba(27,37,47,0));filter:blur(5px);animation:coinShadow 8.1s ease-in-out infinite}
@keyframes coinSpin{0%,18.52%{transform:rotateY(0);animation-timing-function:cubic-bezier(.4,.05,.2,1)}39.26%,100%{transform:rotateY(720deg)}}
@keyframes starOrbit{0%,56.05%{transform:rotate(0);animation-timing-function:cubic-bezier(.5,0,.3,1)}90.12%,100%{transform:rotate(360deg)}}
@keyframes ringDraw{0%,51.6%{stroke-dasharray:400 400;stroke-dashoffset:0;animation-timing-function:cubic-bezier(.45,0,.55,1)}58.27%{stroke-dasharray:400 400;stroke-dashoffset:-332}58.28%{stroke-dasharray:.001 400;stroke-dashoffset:0;animation-timing-function:cubic-bezier(.5,0,.3,1)}90.12%,100%{stroke-dasharray:349 400;stroke-dashoffset:0}}
@keyframes coinLift{0%,18.52%{transform:translateY(0);animation-timing-function:ease-out}28.15%{transform:translateY(-18px);animation-timing-function:ease-in}39.26%,100%{transform:translateY(0)}}
@keyframes coinShadow{0%,18.52%{transform:scale(1);opacity:1}28.15%{transform:scale(.72);opacity:.55}39.26%,100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.lg-spin,.lg-coin,.lg-shadow,.orbg,.rmk,.twk{animation:none}}
/* Liquify brandmark, animated: the fill melts away, a ribbon slithers around the outline like a snake,
   then it closes back into the full outline and the brandmark fills in again. Loops every 9s. */
.lgsnake{display:block;width:100%;height:auto;overflow:visible;animation:snkFloat 9s ease-in-out infinite}
.snk-fill{fill:var(--snkFill);animation:snkFill 9s ease-in-out infinite}
.snk-line{fill:none;stroke:var(--snkLine);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 0;stroke-dashoffset:0;opacity:0;animation:snkLine 9s cubic-bezier(.45,.05,.4,1) infinite}
.s2 .snk-fill,.s2 .snk-line{animation-delay:.35s}
@keyframes snkFill{0%,18%{opacity:1}28%,74%{opacity:0}86%,100%{opacity:1}}
@keyframes snkLine{
  0%,16%{opacity:0;stroke-dasharray:100 0;stroke-dashoffset:0;stroke:var(--snkFill)}
  22%{opacity:1;stroke-dasharray:100 0;stroke-dashoffset:0;stroke:var(--snkLine)}
  32%{opacity:1;stroke-dasharray:24 76;stroke-dashoffset:0}
  66%{opacity:1;stroke-dasharray:30 70;stroke-dashoffset:-200}
  76%{opacity:1;stroke-dasharray:100 0;stroke-dashoffset:-200;stroke:var(--snkLine)}
  86%,100%{opacity:0;stroke:var(--snkFill);stroke-dasharray:100 0;stroke-dashoffset:-200}}
@keyframes snkFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-1.5deg)}}
@media (prefers-reduced-motion:reduce){.lgsnake,.snk-fill,.snk-line{animation:none}.snk-line{opacity:0}}
@media (max-width:820px){
  #login{grid-template-columns:minmax(0,1fr);align-items:start;padding:40px 22px 160px;gap:0}
  .lg-left{display:block;padding:0;background:none}
  .lg-top{margin:0 0 30px}
  .lg-left .lg-main{margin:0;max-width:440px;padding:0}
  .lg-foot{display:none}
  .lg-art{display:none}
  .lg-head{font-size:40px}
}
#login:not(.hide) ~ .decor{height:clamp(90px,16vh,150px);min-height:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.amark,.rmark{background:none!important;padding:0;border-radius:0!important}
/* App icon: an alarm clock with the Liquify brandmark as its face (brandmark unaltered) */
.clockmark{display:block;width:100%!important;height:100%!important;overflow:visible}
.clockmark .al-face{fill:none;stroke:var(--icoLine);stroke-width:6.5}
.clockmark .al-line{stroke:var(--icoLine);stroke-width:6.5;stroke-linecap:round}
.clockmark .al-fill{fill:var(--icoLine)}
:root{--icoLine:#1b252f}
:root[data-theme="dark"]{--icoLine:#f9f6f0}
.applock.mob{--icoLine:#f9f6f0}
/* App lockup: the app's name leads; Liquify Studio endorses it (brandmark + "by Liquify Studio").
   Reusable for other Liquify apps: change only the name. */
.applock{display:flex;align-items:center;gap:10px;color:var(--ink);min-width:0}
.amark{flex:none;width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--buttermilk);display:flex;align-items:center;justify-content:center}
.amark svg{width:24px;height:auto;display:block}
.amark{background:none!important;overflow:visible}.amark svg.clockmark{width:100%!important;height:100%!important;border-radius:50%}
.applock.mob .amark svg.clockmark{box-shadow:0 0 0 1px rgba(249,246,240,.28)}
:root[data-theme="dark"] .amark svg.clockmark{box-shadow:0 0 0 1px rgba(249,246,240,.22)}
:root[data-theme="dark"] .amark{background:var(--buttermilk);color:var(--navy)}
.aname{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.aname b{font-size:17px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.aname small{font-size:11.5px;font-weight:500;color:var(--mute);margin:0 0 3px;white-space:nowrap}
.applock.lg{gap:12px;margin:0 0 clamp(28px,5vh,48px)}
.applock.lg .amark{width:44px;height:44px}
.applock.lg .aname b{font-size:19px;letter-spacing:-.025em}
.applock.lg .awm{width:104px;margin:0 0 5px}.applock.lg .aname b{font-size:17px;font-weight:600}
.aby{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;font-weight:500;color:var(--mute)}
.awm{display:block;width:78px;color:var(--ink)}.awm svg{display:block;width:100%;height:auto}
.applock.mob{color:var(--buttermilk)}
.applock.mob .amark{width:34px;height:34px;background:var(--buttermilk);color:var(--navy)}.applock.mob .amark svg{width:20px}
.applock.mob .aname b{font-size:16px}.applock.mob .aname small{color:rgba(249,246,240,.7);margin:0 0 2px}
.decor{display:none;position:fixed;left:0;right:0;bottom:0;width:100%;height:30vh;min-height:150px;z-index:0;pointer-events:none}
#login:not(.hide) ~ .decor{display:block}
.decor .w1{fill:var(--w1)}.decor .w2{fill:var(--w2)}.decor .w3{fill:var(--w3)}

/* ---------- loading skeletons ----------
   While a page's data is on its way (and permissions are being checked), the areas that show people's data
   are covered by soft placeholders, so nothing from a previous login or a stale state is visible. */
:root{--sk1:rgba(27,37,47,.045);--sk2:rgba(27,37,47,.085)}
:root[data-theme="dark"]{--sk1:rgba(249,246,240,.04);--sk2:rgba(249,246,240,.08)}
.is-loading :is(.big,.kmeta,.viz,#status,.btns,#punches,#recentList,#annMini,#lstats,#deptList,.wrap,.minis,#annFeed,#repFeed,.items){position:relative;color:transparent!important;pointer-events:none;user-select:none}
.is-loading :is(.big,.kmeta,.viz,#status,.btns,#punches,#recentList,#annMini,#lstats,#deptList,.wrap,.minis,#annFeed,#repFeed,.items) > *{visibility:hidden}
.is-loading :is(.big,.kmeta,.viz,#status,.btns,#punches,#recentList,#annMini,#lstats,#deptList,.wrap,.minis,#annFeed,#repFeed,.items)::after{content:"";position:absolute;inset:0;z-index:2;border-radius:10px;background:linear-gradient(90deg,var(--sk1) 30%,var(--sk2) 50%,var(--sk1) 70%);background-size:300% 100%;animation:shimmer 1.8s ease-in-out infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.is-loading :is(.big,.kmeta,.viz,#status,.btns,#punches,#recentList,#annMini,#lstats,#deptList,.wrap,.minis,#annFeed,#repFeed,.items)::after{animation:none}}
.is-loading .big{max-width:190px}
.is-loading .kmeta{max-width:240px;min-height:22px;max-height:22px;overflow:hidden}
.is-loading .viz{min-height:84px}.is-loading .viz::after{top:16px}
.is-loading #status{max-width:260px;min-height:22px}
.is-loading #punches{min-height:66px}
.is-loading #recentList{min-height:200px}.is-loading #annMini{min-height:110px}
.is-loading #lstats{min-height:34px}.is-loading #deptList{min-height:180px}
.is-loading .wrap{min-height:240px}.is-loading .minis{min-height:80px}
.is-loading #annFeed,.is-loading #repFeed{min-height:200px}
.is-loading .items{min-height:210px;width:46px;margin:0 auto}
.is-loading #annBanner{display:none}
/* shaped placeholders: rows for lists/tables, tiles for summary boxes */
.is-loading .wrap::after{-webkit-mask:repeating-linear-gradient(to bottom,#000 0 18px,transparent 18px 46px);mask:repeating-linear-gradient(to bottom,#000 0 18px,transparent 18px 46px);top:14px;border-radius:6px}
.is-loading .minis::after{-webkit-mask:repeating-linear-gradient(to right,#000 0 calc(25% - 9px),transparent calc(25% - 9px) 25%);mask:repeating-linear-gradient(to right,#000 0 calc(25% - 9px),transparent calc(25% - 9px) 25%);border-radius:18px}
.is-loading :is(#recentList,#deptList)::after{-webkit-mask:repeating-linear-gradient(to bottom,#000 0 40px,transparent 40px 56px);mask:repeating-linear-gradient(to bottom,#000 0 40px,transparent 40px 56px)}
.is-loading #annMini::after{-webkit-mask:repeating-linear-gradient(to bottom,#000 0 38px,transparent 38px 52px);mask:repeating-linear-gradient(to bottom,#000 0 38px,transparent 38px 52px)}
.is-loading :is(#annFeed,#repFeed)::after{-webkit-mask:repeating-linear-gradient(to bottom,#000 0 120px,transparent 120px 136px);mask:repeating-linear-gradient(to bottom,#000 0 120px,transparent 120px 136px);border-radius:20px}
.is-loading #lstats::after{-webkit-mask:repeating-linear-gradient(to right,#000 0 96px,transparent 96px 104px);mask:repeating-linear-gradient(to right,#000 0 96px,transparent 96px 104px);border-radius:999px}
.is-loading .btns::after{-webkit-mask:repeating-linear-gradient(to right,#000 0 calc(20% - 8px),transparent calc(20% - 8px) 20%);mask:repeating-linear-gradient(to right,#000 0 calc(20% - 8px),transparent calc(20% - 8px) 20%);border-radius:14px}
#v-hist .row + .wrap{margin-top:16px}
/* Liquify loader: the brandmark slowly fills with "liquid" (caramel waves rising inside the mark) */
.view,.setp{position:relative}
.lsloader{position:fixed;left:calc(50% + 52px);top:50%;z-index:6;transform:translate(-50%,-50%);display:block;line-height:0;opacity:.85;pointer-events:none;animation:lsIn .3s ease .3s both}
.lsloader .liq{width:40px;height:36px;display:block}
@media (max-width:820px){.lsloader{left:50%}}
.liq .lq-base{fill:var(--lqBase)}.liq .lq-a{fill:var(--caramel)}.liq .lq-b{fill:var(--lqBack)}
.liq .lq-fill{animation:lsRise 2.4s ease-in-out infinite alternate}
.liq .lq-a{animation:lsWave 1.5s linear infinite}.liq .lq-b{animation:lsWave 2.3s linear infinite reverse}
:root{--lqBase:#e9e0d4;--lqBack:#d9b889}
:root[data-theme="dark"]{--lqBase:#2a3642;--lqBack:#7a5a35}
@keyframes lsIn{from{opacity:0;transform:translate(-50%,calc(-50% + 8px))}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes lsWave{to{transform:translateX(-68px)}}
@keyframes lsRise{from{transform:translateY(112px)}to{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.lsloader{animation:none}.liq .lq-fill,.liq .lq-a,.liq .lq-b{animation:none}.liq .lq-fill{transform:translateY(50px)}}
/* ---------- profile pictures ---------- */
.pav{flex:none;width:32px;height:32px;border-radius:50%;background:var(--soft2);color:var(--ink);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;letter-spacing:.02em}
.pav img,.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.avatar{overflow:hidden}
.pav.sm{width:22px;height:22px;font-size:9px}
.pav.xl{width:84px;height:84px;font-size:26px;background:var(--caramel);color:var(--navy)}
table.rec .whoin{display:flex;align-items:flex-start;gap:10px;min-width:0}
table.rec .whoin .pnm{min-width:0}
.names > span{display:inline-flex;align-items:center;gap:6px}.names > span:has(.pav){padding-left:3px}
.avrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.avrow .acts{display:flex;gap:8px;flex-wrap:wrap}
/* photo adjuster */
.cropbox{position:relative;width:min(320px,100%);aspect-ratio:1;margin:4px auto 14px;border-radius:18px;overflow:hidden;background:var(--soft2);touch-action:none;user-select:none}
.cropbox canvas{display:block;width:100%;height:100%;cursor:grab}
.cropbox canvas:active{cursor:grabbing}
.cropbox canvas:focus-visible{outline:none}.cropbox:focus-within{box-shadow:0 0 0 2px var(--focus)}
.cropmask{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle closest-side at center,transparent calc(100% - 1px),rgba(27,37,47,.55) 100%)}
.cropmask::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(249,246,240,.9)}
.croptools{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:6px}
.croptools input[type=range]{width:180px;padding:0;border:0;accent-color:var(--caramel);background:none}
/* ---------- KPI cards (My Day, Dashboard) ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
@media (max-width:680px){.kpis{grid-template-columns:1fr}}
.kpi{display:flex;flex-direction:column;min-width:0;min-height:226px;padding:18px 20px;border-radius:20px;border:1px solid var(--tEdge);color:var(--ink)}
.kpi.car{background:var(--tCar)}.kpi.tau{background:var(--tTau)}.kpi.nav{background:var(--tNav)}
.kh{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:600;font-size:14.5px}
.kh .ki{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--tEdge);color:var(--ink);flex:none}
.big{font-size:44px;font-weight:600;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;margin-top:12px}
.big small{font-size:18px;letter-spacing:-.01em;font-weight:600;margin-left:2px}
.kmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--mute)}
.tpill{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:var(--tEdge);color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap}
.tpill svg{flex:none}
.viz{margin-top:auto;padding-top:16px}
/* single-series bar chart: thin rounded bars on a shared baseline, today highlighted */
.bars{display:flex;align-items:flex-end;gap:8px;height:96px}
.bars .b{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.bars i{display:block;width:100%;max-width:30px;min-height:4px;border-radius:8px 8px 4px 4px;background:var(--bar)}
.bars i.hi{background:var(--barHi)}.bars i.none{background:var(--barMute)}
.bars span{font-size:11px;font-weight:600;color:var(--mute);line-height:1}
.bars .b.today span{color:var(--ink)}
/* part-to-whole strip with 2px gaps */
.comp{display:flex;gap:2px;height:22px}
.comp i{display:block;height:100%;border-radius:6px;min-width:4px}
.comp .s1{background:var(--bar)}.comp .s2{background:var(--barHi)}.comp .s3{background:var(--bar3)}.comp .s0{background:var(--barMute);flex:1}
.klegend{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--mute)}
.klegend span{display:inline-flex;align-items:center;gap:6px}.klegend b{color:var(--ink);font-weight:600}
.klegend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.klegend .s1{background:var(--bar)}.klegend .s2{background:var(--barHi)}.klegend .s3{background:var(--bar3)}
/* meters (value against a limit) */
.meters{display:flex;flex-direction:column;gap:10px}
.mrow{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;font-size:13px}
.mrow b{font-weight:600;font-variant-numeric:tabular-nums}
.mbar{grid-column:1/-1;height:6px;border-radius:3px;background:var(--barMute);overflow:hidden}
.mbar i{display:block;height:100%;border-radius:3px;background:var(--bar)}
.mbar i.over{background:var(--stop)}
.mrow .over{color:var(--stopInk)}
.names{display:flex;flex-wrap:wrap;gap:6px}
.names > span{background:var(--tEdge);border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:500}

/* ---------- two-column area: main card + side panel ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media (max-width:1180px){.split{grid-template-columns:minmax(0,1fr)}}
.panel h3{margin:0 0 10px;font-size:15.5px}
.panel h3{margin-top:0}.panel > div + div{margin-top:22px}
@media (max-width:1180px) and (min-width:681px){.panel.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}.panel.two > div + div{margin-top:0}}
@media (max-width:1180px) and (min-width:681px){#deptList{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}#deptList li:nth-child(2){border-top:0}}
.ilist{list-style:none;margin:0;padding:0}
.ilist li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0}
.ilist li + li{border-top:1px solid var(--line)}
.daybadge{width:40px;height:40px;border-radius:12px;background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;font-size:10.5px;font-weight:600;color:var(--mute);text-transform:uppercase}
.daybadge b{font-size:15px;color:var(--ink)}
.daybadge.today{background:var(--navy);color:rgba(249,246,240,.75)}.daybadge.today b{color:var(--buttermilk)}
:root[data-theme="dark"] .daybadge.today{background:var(--buttermilk);color:rgba(27,37,47,.7)}:root[data-theme="dark"] .daybadge.today b{color:var(--navy)}
.ilist .nm{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ilist .mbar{margin-top:6px}
.ilist .val{font-weight:600;font-size:13px;font-variant-numeric:tabular-nums}
.annlist{list-style:none;margin:0;padding:0}
.annlist li + li{border-top:1px solid var(--line)}
.annlist button{display:block;width:100%;text-align:left;background:none;color:var(--ink);padding:10px 4px;border-radius:10px;font-weight:600;font-size:13.5px}
.annlist button:hover{background:var(--soft)}
.annlist .sub{font-weight:400}
.udot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--caramel);margin-right:6px;vertical-align:2px}

/* ---------- my day: time clock ---------- */
.lbl{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.clock{font-variant-numeric:tabular-nums}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--caramel);margin-right:6px;vertical-align:1px}
@media (prefers-reduced-motion:no-preference){.live-dot{animation:pulse 1.6s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.25}}
.nowtime{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--mute)}
.status{color:var(--mute);margin:0 0 4px}
.btns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:14px 0 18px}
.btns button{padding:15px 8px;font-size:15px;border-radius:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btns .go{background:var(--go);color:#fffdf9}.btns .wait{background:var(--wait);color:var(--navy)}.btns .stop{background:var(--stop);color:#fffdf9}
.btns .go:hover,.btns .wait:hover,.btns .stop:hover{filter:brightness(.92)}
.btns .wait.active{box-shadow:inset 0 0 0 3px var(--navy)}
.btns button:disabled{background:var(--dis);color:var(--disInk);filter:none}
@media (max-width:560px){.btns{grid-template-columns:1fr 1fr}.btns button:last-child:nth-child(odd){grid-column:1/-1}}
/* phones: the time clock comes first, then the cards */
@media (max-width:680px){
  #v-today:not(.hide){display:flex;flex-direction:column}
  #v-today .split{display:contents}
  #annBanner{order:0}#v-today .tclock{order:1}#v-today .kpis{order:2}#v-today .panel{order:3}
}
/* punches as a row of tinted cells (in → lunch → out) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:560px){.steps{grid-template-columns:1fr 1fr}}
.stepc{border-radius:14px;padding:10px 12px;background:var(--soft);min-width:0}
.stepc.on.nav{background:var(--tNav)}.stepc.on.car{background:var(--tCar)}.stepc.on.tau{background:var(--tTau)}
.stepc span{display:block;font-size:12px;font-weight:600;color:var(--mute)}
.stepc b{display:block;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.stepc:not(.on) b{color:var(--disInk)}
.punchinfo{font-size:13.5px;margin-top:10px}
.chk{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.c-ok{background:var(--goSoft);color:var(--goInk)}.c-outside{background:var(--stopSoft);color:var(--stopInk)}
.c-none{background:var(--waitSoft);color:var(--waitInk)}.c-remote,.c-recorded{background:var(--soft2);color:var(--ink)}
.sub a{color:inherit;text-decoration:underline}
.offrow{display:grid;grid-template-columns:1.3fr 1.6fr .8fr auto;gap:8px;align-items:end;margin-top:8px}
@media (max-width:620px){.offrow{grid-template-columns:1fr 1fr}}
.locline{font-size:13.5px;margin-top:12px;color:var(--mute)}
.locline a{color:inherit}
.banner{display:flex;gap:14px;align-items:center;background:var(--tCar);border:1px solid var(--tEdge);border-radius:18px;padding:12px 16px;margin-bottom:16px;color:var(--ink)}
.banner .ico{width:36px;height:36px;border-radius:50%;background:var(--tEdge);display:flex;align-items:center;justify-content:center;flex:none}
.banner ul{margin:2px 0 0;padding-left:18px;font-size:13.5px}.banner li{margin:1px 0}
.banner button{margin-left:auto;flex:none}

/* ---------- dashboard ---------- */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--soft);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:500}
.chip:hover{background:var(--soft2)}
.chip b{font-variant-numeric:tabular-nums;font-weight:700}
.chip .dot{margin:0}
.chip.zero{color:var(--mute)}.chip.zero b{color:var(--disInk)}
.chip.on{background:var(--navy);border-color:var(--navy);color:var(--buttermilk)}.chip.on b{color:var(--buttermilk)}
:root[data-theme="dark"] .chip.on{background:var(--buttermilk);border-color:var(--buttermilk);color:var(--navy)}:root[data-theme="dark"] .chip.on b{color:var(--navy)}
.ltools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end;margin:14px 0 6px}
.ltools label{margin-top:0}
@media (max-width:560px){.ltools{grid-template-columns:1fr 1fr}.ltools .go{grid-column:1/-1}.ltools .go button{width:100%}}
/* records summary tiles */
.minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.mini{border-radius:18px;padding:14px 16px;border:1px solid var(--tEdge)}
.mini.car{background:var(--tCar)}.mini.tau{background:var(--tTau)}.mini.nav{background:var(--tNav)}
.mini span{display:block;font-size:12.5px;font-weight:600;color:var(--mute)}
.mini b{display:block;font-size:26px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
/* Records tables (My Records, All Records): fit the page width; cards on phones */
.recfilters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.recfilters label{margin-top:0}
@media (max-width:900px){.recfilters{grid-template-columns:1fr 1fr}.recfilters .go{grid-column:1/-1}.recfilters .go button{width:100%}}
.rectools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 4px;min-height:40px}
.btnset{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
table.rec th,table.rec td{white-space:normal;vertical-align:top;padding:10px 6px}
table.rec .nw{white-space:nowrap}
table.rec th{font-size:13px}
table.rec td:first-child{white-space:nowrap}
table.rec th.num,table.rec td.num{text-align:right}
table.rec td.who{min-width:110px;white-space:normal}
table.rec .sub{font-size:12px}
table.rec .clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:220px;margin-top:2px}
table.rec td.acts-cell{width:1%;padding-left:10px}
table.rec .acts-cell button{display:block;width:100%;margin:0 0 6px}
table.rec tbody tr:hover td{background:var(--soft)}
table.rec .cdate{display:none}
/* When a table doesn't fit its box (narrow screens), fitTable() adds .cards and each row becomes a card */
  table.rec.cards thead{display:none}
  table.rec.cards,table.rec.cards tbody{display:block}
  table.rec.cards tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px 16px;padding:14px 16px;margin-bottom:10px;background:var(--soft);border:1px solid var(--line);border-radius:16px}
  table.rec.cards tbody tr:hover td{background:none}
  table.rec.cards td{border:0;padding:0;width:auto}
  table.rec.cards td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);margin-bottom:2px}
  table.rec.cards td.num{text-align:left}
  /* Card header: name + department on the left, date on the right (All Records) */
  table.rec.cards td.who{grid-column:1/-1;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 0 10px;border-bottom:1px solid var(--line)}
  table.rec.cards .whoin{flex:1;min-width:0}
  table.rec.cards td.who::before{content:none}
  table.rec.cards td.who .nm{font-weight:600;font-size:15px}
  table.rec.cards .cdate{display:block;flex:0 1 auto;min-width:0;max-width:50%;font-weight:600;color:var(--mute);font-size:13px;text-align:right}
  table.rec.cards .chk{white-space:normal}
  table.rec.cards .cdate b{display:block;color:var(--ink);font-size:14px;margin-top:2px}
  #aTable.cards td.dcell,#aTable.cards td.wcell,#lTable.cards td.scell{display:none}
  #lTable.cards .cdate .sub{margin-top:4px;display:block;white-space:normal;overflow-wrap:anywhere}
  table.rec.cards td.acts-cell{grid-column:1/-1;width:auto;padding:0}
  table.rec.cards .acts-cell button{display:inline-block;width:auto;margin:0 6px 0 0}
  table.rec.cards td.empty{grid-column:1/-1}
  table.rec.cards tr:has(td.empty){background:none;border:0}
  table.rec.cards .clamp{max-width:none}

/* ---------- announcements & reports ---------- */
.feed{display:flex;flex-direction:column;gap:12px}
.post{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 22px}
.post.unread{border-left:4px solid var(--caramel)}
.post h3{margin:0 0 4px;font-size:16.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.post .meta{color:var(--mute);font-size:13px;margin-bottom:8px}
.post .body{white-space:pre-wrap;word-wrap:break-word}
.body.fmt{white-space:normal;overflow-wrap:anywhere;line-height:1.55}
.fmt .fgap{height:.7em}.fmt ul{margin:2px 0;padding-left:22px}.fmt li{margin:2px 0}
.fmt .fm1{font-size:1.45em;font-weight:700;line-height:1.25;margin:4px 0 2px;letter-spacing:-.01em}
.fmt .fm2{font-size:1.18em;font-weight:650;line-height:1.3;margin:3px 0 1px}
.fmt .fms{font-size:.82em;color:var(--mute)}
.fmt a{color:var(--caramel);text-decoration:underline;text-underline-offset:2px}
.titlerow{display:flex;gap:8px}.titlerow input{flex:1}
.editor{border:1px solid var(--line2);border-radius:12px;background:var(--card);overflow:hidden}
.editor:focus-within{border-color:var(--caramel)}
.editor textarea{border:0;border-radius:0;outline:none;min-height:180px}
.ftools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:6px 8px;border-bottom:1px solid var(--line);background:var(--soft)}
.ftools select{width:auto;padding:6px 8px;font-size:13.5px;border-radius:8px}
.fbtn{min-width:36px;height:36px;padding:0 8px;border-radius:8px;background:transparent;color:var(--ink);border:1px solid transparent;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex:none}
.fbtn:hover{background:var(--card);border-color:var(--line2)}
.titlerow .fbtn{height:auto;min-width:44px;border-color:var(--line2);border-radius:12px}
.fsep{width:1px;height:20px;background:var(--line2);margin:0 4px}.fgrow{flex:1}
.fmode{display:flex;background:var(--card);border:1px solid var(--line2);border-radius:9px;padding:2px}
.fmode button{background:transparent;color:var(--mute);border:0;padding:5px 10px;font-size:13px;border-radius:7px;font-weight:500}
.fmode button.on{background:var(--ink);color:var(--card)}
.annprev{padding:12px 14px;min-height:180px;max-height:50vh;overflow:auto}
.fhelp{font-size:12.5px;color:var(--mute);margin-top:6px}
.fhelp code{background:var(--soft);border-radius:4px;padding:0 4px;font-size:12px}
#annDlg .dlg{position:relative}
.emojipop{position:absolute;z-index:20;width:316px;max-width:calc(100% - 16px);max-height:240px;overflow:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;background:var(--card);border:1px solid var(--line2);border-radius:14px;box-shadow:0 12px 32px rgba(27,37,47,.22)}
.emojipop.hide{display:none}
.emojipop button{background:transparent;border:0;padding:4px 0;font-size:21px;line-height:1.3;border-radius:8px;color:inherit}
.emojipop button:hover,.emojipop button:focus-visible{background:var(--soft)}
@media (max-width:520px){.fmode{margin-left:auto}.fgrow{display:none}}
.post .acts{display:flex;gap:8px;margin-top:12px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;font-size:13.5px;margin:8px 0}
.kv dt{color:var(--mute)}.kv dd{margin:0}
.note{background:var(--soft);border-radius:6px;padding:10px 12px;margin-top:10px;font-size:14px;white-space:pre-wrap}
.note b{display:block;font-size:12px;color:var(--mute);font-weight:600;margin-bottom:2px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.filters select{width:auto}

/* ---------- settings page ---------- */
.setwrap{display:grid;grid-template-columns:184px 1fr;gap:20px;align-items:start}
.subnav{position:sticky;top:20px}
.subnav h4{margin:0 0 6px;padding:0 10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.subnav .grp{margin-bottom:18px}
.subnav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;color:var(--ink);padding:9px 12px;border-radius:12px;font-size:14.5px;font-weight:500}
.subnav button:hover{background:var(--soft2)}
.subnav button.on{background:var(--navy);color:var(--buttermilk);font-weight:600}
:root[data-theme="dark"] .subnav button.on{background:var(--buttermilk);color:var(--navy)}
.subnav svg{flex:none;opacity:.8}
.setpage{min-width:0}
@media (max-width:820px){
  .setwrap{grid-template-columns:1fr;gap:12px}
  .subnav{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
  .subnav .grp{display:flex;gap:6px;margin:0;flex:none}
  .subnav h4{display:none}
  .subnav button{width:auto;white-space:nowrap;background:var(--soft2)}
}

/* ---------- theme picker ---------- */
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;max-width:520px}
.theme{display:block;margin:0;border:2px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;color:var(--ink);font-size:15px;font-weight:600;position:relative}
.theme input{position:absolute;opacity:0;pointer-events:none}
.theme.on{border-color:var(--caramel)}
.theme:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.swatch{height:64px;border-radius:6px;margin-bottom:10px;display:flex;overflow:hidden;border:1px solid var(--line)}
.swatch i{width:30%}.swatch span{flex:1}

/* ---------- report button + dialogs ---------- */
.pwwrap{position:relative}.pwwrap input{padding-right:44px}
.eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;color:var(--mute);padding:7px;line-height:0;border-radius:6px;font-weight:400}
.eye:hover{background:var(--soft2);color:var(--ink)}
.match{font-size:13px;min-height:20px;margin-top:5px}.match.bad{color:var(--bad)}.match.good{color:var(--priInk)}
:root[data-theme="dark"] .match.bad{color:var(--badInk)}
input[aria-invalid="true"]{border-color:var(--bad)}
button.solid-danger{background:var(--bad);color:var(--card)}button.solid-danger:hover{filter:brightness(.92);background:var(--bad)}
.ufilters{display:grid;grid-template-columns:minmax(200px,2fr) repeat(3,minmax(130px,1fr)) auto;gap:10px;align-items:end;margin-bottom:6px}
@media (max-width:900px){.ufilters{grid-template-columns:1fr 1fr}.ufilters .search{grid-column:1/-1}}
.delwho{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:4px 0 12px}
.delwho b{display:block;font-size:16px}.delwho span{color:var(--mute);font-size:13.5px}
.delnotes{margin:0;padding-left:20px;font-size:14px}.delnotes li{margin:4px 0}
.punchwhen{display:flex;gap:12px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.punchwhen>div{flex:1;min-width:140px}.punchwhen b{display:block;font-size:22px;font-weight:600;margin-top:2px}
.warnbox{background:var(--badSoft);color:var(--badInk);border-radius:8px;padding:10px 12px;margin:0 0 8px;font-size:14px}
.acts-row{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

.mydevs{display:flex;flex-direction:column;margin:0 0 14px;border-top:1px solid var(--line)}
.mydevs .md{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.mydevs .mdi{flex:none;width:38px;height:38px;border-radius:12px;background:var(--soft2);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.mydevs .mdt{flex:1;min-width:0}
.mydevs .sub{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.mydevs .tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--goSoft);color:var(--goInk);vertical-align:1px}
.mydevs button{flex:none;white-space:nowrap}
/* System settings: one card per topic, label + hint on the left, the control on the right */
.sysw{max-width:760px}
.offbtns{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.scard{padding:22px 24px}
.sch{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px}
.sch h2{margin:0;font-size:17px}.sch p{margin:3px 0 0;color:var(--mute);font-size:13.5px}
.sico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--soft2);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.sch + .srow{margin-top:12px}
.srow label{margin:0;font-weight:600;font-size:14.5px;color:var(--ink)}
.srow .hint{margin-top:3px}
.srow.col{grid-template-columns:1fr}
.srh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.uin{display:flex;align-items:center;gap:8px;justify-self:end}
.uin input{width:84px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.uin span{color:var(--mute);font-size:13.5px;min-width:48px}
.switch{position:relative;display:inline-block;width:48px;height:28px;justify-self:end;cursor:pointer;margin:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--soft2);border:1px solid var(--line);transition:background .2s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch input:checked + span{background:var(--caramel);border-color:var(--caramel)}
.switch input:checked + span::after{transform:translateX(20px)}
.switch input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.sysbar{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;padding:10px 10px 10px 18px;box-sizing:border-box;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(27,37,47,.12);margin-top:4px}
.sysbar .err{margin:0;flex:1;min-width:0}.sysbar button{margin:0;flex:none}
.sysbar #sDirty:not(:empty){color:var(--waitInk);font-weight:600;font-size:13px}
@media (max-width:600px){.srow{grid-template-columns:1fr}.uin,.switch{justify-self:start}.scard{padding:18px}}
/* Schedules */
.p-off{background:var(--soft2);color:var(--mute)}.d-off{background:var(--taupe)}
.pill.late{background:var(--stopSoft);color:var(--stopInk)}
.tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:600;vertical-align:1px;background:var(--soft2);color:var(--mute);white-space:nowrap}
.tag.ok{background:var(--goSoft);color:var(--goInk)}.tag.late{background:var(--stopSoft);color:var(--stopInk)}.tag.chg{background:var(--waitSoft);color:var(--waitInk)}
td .tag{margin:4px 0 0;display:inline-block}
.shiftline{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:-4px 0 12px;font-size:13.5px;color:var(--ink)}
.shiftline svg{opacity:.7}
.schedtop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.segs{display:inline-flex;background:var(--soft2);border-radius:999px;padding:4px;gap:2px}
.seg{background:none;color:var(--ink);border:0;border-radius:999px;padding:7px 16px;font-weight:600;font-size:14px;box-shadow:none}
.seg.on{background:var(--card);box-shadow:0 1px 4px rgba(27,37,47,.12)}
.weeknav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.weeknav span{font-weight:600;min-width:150px;text-align:center}
.wkdays{display:flex;flex-direction:column}
.wkday{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 16px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)}
.wkday:last-child{border-bottom:0}
.wkday .dn b{display:block;font-size:15px}.wkday .dn span{color:var(--mute);font-size:13px}
.wkday.today{background:var(--soft);border-radius:12px;padding-left:12px;padding-right:12px}
.wkday .sv{font-size:15px;font-weight:600}.wkday .sv.off{color:var(--mute);font-weight:500}
.wkday .sn{color:var(--mute);font-size:13px;margin-top:2px}
/* My schedule: compact week list + month calendar */
.mysched{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:start}
.mywk .wkcap:empty{display:none}.mywk .wkcap{margin-bottom:6px}
.mywk .wkday{grid-template-columns:52px minmax(0,1fr) auto;gap:4px 12px;padding:9px 10px;border-radius:12px;border-bottom:1px solid var(--line)}
.mywk .wkday:last-of-type{border-bottom:0}
.mywk .wkday .dn{display:flex;flex-direction:column;line-height:1.15}.mywk .wkday .dn b{font-size:13px;color:var(--mute);font-weight:600}.mywk .wkday .dn span{font-size:17px;font-weight:700;color:var(--ink)}
.mywk .wkday .sv{font-size:14px;font-weight:600;justify-self:start;padding:5px 10px;border-radius:10px;background:var(--kb,var(--soft));color:var(--ki,var(--ink))}
.mywk .wkday .sv.off{background:transparent;color:var(--mute);font-weight:500;padding-left:0}
.mywk .wkday .sx{display:flex;gap:6px;align-items:center;justify-content:flex-end;min-width:0}
.mywk .wkday .sx .sn{color:var(--mute);font-size:12.5px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mywk .wkday.today{background:var(--soft)}
.mycal{border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.calhead b{font-size:15px}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cdh{text-align:center;font-size:11.5px;color:var(--mute);font-weight:600;padding-bottom:4px}
.cday{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-height:54px;padding:5px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--ink);box-shadow:none;text-align:left;font-size:12px}
.cday b{font-size:12.5px;font-weight:700;padding-left:2px}
.cday i{font-style:normal;font-size:10.5px;font-weight:600;border-radius:6px;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cday .cw{background:var(--kb,var(--soft2));color:var(--ki,var(--ink))}.cday .co{color:var(--mute)}.cday .cn{color:var(--mute);opacity:.6}
.cday.out{opacity:.4}.cday:hover{border-color:var(--line);background:var(--soft)}
.cday.inwk{background:var(--soft)}.cday.td b{background:var(--ink);color:var(--card);border-radius:999px;padding:0 6px;align-self:flex-start}
.cday.chg{box-shadow:inset 0 0 0 1.5px var(--caramel)}
.callegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--mute)}
.callegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.callegend .lw{background:var(--soft2)}.callegend .lo{border:1px solid var(--line)}.callegend .lc{box-shadow:inset 0 0 0 1.5px var(--caramel)}
@media (max-width:980px){.mysched{grid-template-columns:1fr}}
@media (max-width:600px){.mywk .wkday{grid-template-columns:44px minmax(0,1fr)}.mywk .wkday .sx{grid-column:2;justify-content:flex-start}.cday{min-height:46px;padding:4px 3px}.cday i{font-size:9.5px;padding:1px 2px}}
/* team schedule: shift palette + grid (CSS grid rows) */
:root{--k0:#f3e3cf;--k0i:#7a4d16;--k1:#dde6ef;--k1i:#24425e;--k2:#dcebdf;--k2i:#2b5a39;--k3:#ead9ea;--k3i:#5e2f5e;--k4:#d6ecec;--k4i:#1f5555;--k5:#f3dcdc;--k5i:#7a2e2e;--k6:#e6e6d3;--k6i:#4f4f22;--k7:#e3e0ec;--k7i:#3b3466}
:root[data-theme="dark"]{--k0:#4a3620;--k0i:#f3cf9f;--k1:#253a4f;--k1i:#b9d3ec;--k2:#22402c;--k2i:#a9dcb6;--k3:#43284a;--k3i:#e7bde7;--k4:#1f4444;--k4i:#a8e0e0;--k5:#4a2626;--k5i:#f0b4b4;--k6:#3c3c22;--k6i:#dcdca2;--k7:#33304a;--k7i:#cdc6f0}
.c0{--kb:var(--k0);--ki:var(--k0i)}.c1{--kb:var(--k1);--ki:var(--k1i)}.c2{--kb:var(--k2);--ki:var(--k2i)}.c3{--kb:var(--k3);--ki:var(--k3i)}.c4{--kb:var(--k4);--ki:var(--k4i)}.c5{--kb:var(--k5);--ki:var(--k5i)}.c6{--kb:var(--k6);--ki:var(--k6i)}.c7{--kb:var(--k7);--ki:var(--k7i)}
.shiftbar{border:1px solid var(--line);border-radius:18px;padding:16px 18px;margin-bottom:18px;background:var(--soft)}
.sbtitle{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px}
.step{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--card);font-size:12.5px;font-weight:700;flex:none}
.schips{display:flex;flex-wrap:wrap;gap:10px}
.schip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-width:150px;padding:10px 14px;border-radius:14px;border:2px solid transparent;background:var(--kb,var(--card));color:var(--ki,var(--ink));box-shadow:none;font-size:14px;line-height:1.25}
.schip b{font-weight:700}.schip span{font-size:12px;opacity:.85;font-weight:500}
.schip.off{background:var(--card);color:var(--mute);border-color:var(--line)}
.schip.clear{background:var(--card);color:var(--mute);border:2px dotted var(--line)}
.schip.cust{background:var(--card);color:var(--ink);border:2px dashed var(--line)}
.schip.add{background:transparent;color:var(--ink);border:2px dashed var(--caramel)}
.schip:hover{transform:translateY(-1px)}
.schip.on{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 15%,transparent)}
.sbhint{margin-top:12px;font-size:14px;color:var(--mute);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sbhint:empty{display:none}
.sbhint .ht{flex:1;min-width:200px}
.sbhint.on{color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.scfilters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.scfilters .search{flex:1;min-width:200px}.scfilters select{width:auto;min-width:170px}
.editbanner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;border:1.5px dashed var(--caramel,#c8893a);background:var(--soft);margin-bottom:12px;font-size:14px}
#scEditBtn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}#scEditBtn.hide{display:none}
.scnotice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:var(--waitSoft);color:var(--waitInk);margin-bottom:12px;font-size:14px}
.selbar{position:sticky;top:8px;z-index:4;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:14px;background:var(--ink);color:var(--card);margin-bottom:12px;box-shadow:0 8px 24px rgba(27,37,47,.18)}
.selbar .mute{color:inherit;opacity:.75}.selbar .ghost{color:inherit;border-color:color-mix(in srgb,var(--card) 40%,transparent)}
button.give{background:var(--caramel);color:#1b252f;border:0}
.sg{display:grid;grid-template-columns:28px minmax(170px,240px) repeat(7,minmax(0,1fr)) 64px;gap:8px;align-items:center}
.sghead{padding:0 6px 8px;font-size:12.5px;color:var(--mute);font-weight:600;border-bottom:1px solid var(--line)}
.sghead .td{color:var(--ink)}.sghead .td b{background:var(--ink);color:var(--card);border-radius:999px;padding:1px 7px}
.sgdept{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 6px 8px;font-size:14px}
.sgdept .give{margin-left:auto}
.linkb{background:none;border:0;padding:0;color:var(--caramel);font-weight:600;font-size:13px;box-shadow:none;text-decoration:underline;text-underline-offset:3px}
.sgrow{padding:8px 6px;border-radius:14px}
.sgrow:hover{background:var(--soft)}.sgrow.sel{background:color-mix(in srgb,var(--caramel) 12%,transparent)}
.sgrow .ck input,.pcard input[type=checkbox]{width:18px;height:18px;margin:0}
.pwho{display:flex;align-items:center;gap:10px;min-width:0;background:none;border:0;padding:0;text-align:left;color:var(--ink);box-shadow:none;font:inherit}
.pwho .pn{display:flex;flex-direction:column;min-width:0;gap:3px}
.pwho .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pwho.tap{cursor:pointer;border-radius:12px;padding:4px;margin:-4px}
.pwho.tap:hover{background:var(--card);outline:2px dashed var(--caramel)}
.ptag{align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--kb,var(--soft2));color:var(--ki,var(--mute))}
.ptag.none{background:var(--waitSoft);color:var(--waitInk)}
.sc{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:52px;padding:6px 10px;border-radius:12px;border:1px solid transparent;background:var(--kb,var(--soft));color:var(--ki,var(--ink));text-align:left;font-size:13px;line-height:1.25;box-shadow:none}
.sc b{font-weight:700}.sc small{font-size:11.5px;opacity:.85}
.sc b,.sc small{white-space:nowrap}
.sc.k-off{background:transparent;border:1px dashed var(--line);color:var(--mute)}
.sc.k-none{background:transparent;border:1px dashed var(--line);color:color-mix(in srgb,var(--mute) 70%,transparent)}
.sc.chg{box-shadow:inset 0 0 0 2px var(--caramel)}
.sc.chg::after{content:"one-time";font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--caramel);margin-top:2px}
button.sc{cursor:pointer}button.sc:hover{filter:brightness(.97);border-color:var(--ink)}
.brushing button.sc:hover{outline:2px dashed var(--caramel);outline-offset:2px}
.icob{width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:transparent;border:1px solid var(--line);color:var(--ink);box-shadow:none;justify-self:end}
.icob:hover{background:var(--card)}
.sgrow .give{justify-self:end;padding:8px 12px}
.pcard{border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px}
.pcard .ph{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pcard .ph .pwho{flex:1}
.pcard .pd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.pcard .pd .dl{font-size:11px;color:var(--mute);text-align:center;margin-bottom:3px}
.pcard .pd .dl.today{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.pcard .sc{padding:6px 2px;text-align:center;align-items:center;font-size:11px;min-height:48px}
.pcard .sc.chg::after{content:"•";font-size:14px;line-height:.6}
@media (max-width:760px){.schip{min-width:0;flex:1 1 calc(50% - 10px)}.scfilters select{flex:1}.shiftbar{padding:14px}}
.wkrows{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.wkrow{display:grid;grid-template-columns:110px 1fr 1fr;gap:8px;align-items:center}
.wkrow.flex{grid-template-columns:1fr}
.wkrow input[type=time]{padding:7px 8px}
.wkrow input:disabled{opacity:.4}
.radios{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
@media (max-width:600px){.wkday{grid-template-columns:1fr}.weeknav span{min-width:0;flex:1}.wkrow{grid-template-columns:90px 1fr 1fr}}
/* Logo = home + refresh (like Facebook) */
.rmark,.rlogo,.mlogo{cursor:pointer;-webkit-tap-highlight-color:transparent}
.rmark:focus-visible,.rlogo:focus-visible,.mlogo:focus-visible{outline:2px solid var(--caramel);outline-offset:3px;border-radius:14px}
/* Logo click: the login coin animation, played once (coin flip, short pause, star orbit + twinkle) */
.clockmark .hring{transform-box:view-box;transform-origin:50px 50px}
.clockmark .htwk{transform-box:fill-box;transform-origin:center}
.homespin .clockmark{animation:homeFlip 1.95s linear}
.homespin .clockmark .hring{animation:homeOrbit 1.95s linear}
.homespin .clockmark .htwk{animation:homeTwinkle 1.95s linear}
@keyframes homeFlip{0%{transform:perspective(260px) rotateY(0) translateY(0);animation-timing-function:cubic-bezier(.4,.05,.2,1)}46%,100%{transform:perspective(260px) rotateY(720deg)}}
@keyframes homeOrbit{0%,54%{transform:rotate(0);animation-timing-function:cubic-bezier(.5,0,.3,1)}88%,100%{transform:rotate(360deg)}}
@keyframes homeTwinkle{0%,86%{transform:scale(1) rotate(0);filter:none}91%{transform:scale(1.9) rotate(45deg);filter:drop-shadow(0 0 2px #fff3d9) drop-shadow(0 0 4px #e6b574)}94%{transform:scale(.8) rotate(90deg)}97%{transform:scale(1.3) rotate(90deg)}100%{transform:scale(1) rotate(90deg);filter:none}}
@media (prefers-reduced-motion:reduce){.homespin .clockmark,.homespin .clockmark .hring,.homespin .clockmark .htwk{animation:none}}
/* Saving indicator on the time clock (actions show instantly; this confirms the save) */
.savenote{margin:-4px 0 10px;font-size:12.5px;font-weight:600;color:var(--mute)}
/* ---- survey card inside an announcement ---- */
.sv{margin-top:14px;padding:16px 16px 18px;border-radius:16px;background:var(--soft);border:1px solid var(--line);white-space:normal}
.sv-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.sv-t{font-weight:700}.sv-due{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--priSoft);color:var(--priInk)}
.sv-ed{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}.sv-ed b{color:var(--ink)}
.sv-done{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}.sv-done>div{flex:1;min-width:180px}
.sv-ok{width:30px;height:30px;border-radius:50%;background:#2f9a6c;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.sv-note{margin-top:12px;padding:8px 12px;border-radius:10px;background:var(--warnSoft);font-size:13px}
.sv-prog{height:6px;border-radius:99px;background:var(--soft2);margin-top:12px;overflow:hidden}.sv-prog span{display:block;height:100%;background:var(--pri);border-radius:99px;transition:width .2s}
.sv-pl{font-size:12.5px;color:var(--mute);margin-top:6px}
.sv-sec{margin:20px 0 4px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
fieldset.sv-q{border:0;margin:14px 0 0;padding:0;min-width:0}
.sv-q legend{font-weight:600;padding:0;margin-bottom:8px;font-size:15px}
.sv-q.miss legend{color:var(--bad)}.sv-q.miss{box-shadow:-4px 0 0 var(--bad);padding-left:10px}
.sv-opts{display:flex;flex-wrap:wrap;gap:8px}
button.sv-opt{background:var(--card);color:var(--ink);border:1.5px solid var(--line2);font-weight:500;padding:9px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;text-align:left}
button.sv-opt:hover{background:var(--soft2)}
button.sv-opt.on{background:var(--pri);border-color:var(--pri);color:var(--onPri);font-weight:700}
button.sv-opt i{width:16px;height:16px;border-radius:5px;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-style:normal}
.sv-rate{display:flex;gap:8px}
button.sv-n{flex:1;max-width:58px;min-height:46px;padding:0;background:var(--card);color:var(--ink);border:1.5px solid var(--line2);font-weight:700;font-size:17px;border-radius:12px}
button.sv-n:hover{background:var(--soft2)}button.sv-n.on{background:var(--pri);border-color:var(--pri);color:var(--onPri)}
.sv-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-top:5px;max-width:330px}
.sv-grid{display:flex;flex-direction:column;gap:2px}
.sv-gr{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,230px);align-items:center;gap:10px;padding:5px 0}
.sv-gh{font-size:12px;color:var(--mute);padding:2px 0 6px}
.sv-gr{border-top:1px solid var(--line)}.sv-gl{font-size:14px}
.sv-gb{display:flex;gap:5px}button.sv-n.sm{min-height:38px;font-size:14px;border-radius:10px;max-width:none}
.sv-q textarea{width:100%;box-sizing:border-box;resize:vertical}
.sv-anon{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:14px}
.sv-send{display:flex;gap:10px;margin-top:14px}.sv-send button:first-child{padding:12px 22px}
@media (max-width:520px){.sv{padding:14px 12px 16px}.sv-gr{grid-template-columns:1fr;gap:6px}.sv-ed{margin-left:0;width:100%}.sv-rate button.sv-n{max-width:none}}
/* results */
#svDlg{width:min(640px,calc(100vw - 32px))}
#svDlg .svb{padding:22px 24px 26px;max-height:min(88dvh,860px);overflow:auto}
.svr-top{display:flex;justify-content:space-between;align-items:center}.svr-top h2{margin:0;font-size:18px}
.svr-top .x{width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--ink);border:1px solid var(--line);padding:0;font-size:19px;line-height:1}
.svr-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.svr-sum div{background:var(--soft);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column}.svr-sum b{font-size:22px}.svr-sum span{font-size:12.5px;color:var(--mute)}
.svr-acts{display:flex;gap:8px;flex-wrap:wrap}.svr-ny{margin-top:12px;font-size:14px}.svr-ny summary{cursor:pointer;font-weight:600}
.svr-q{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}.svr-q h4{margin:0 0 2px;font-size:15px}.svr-c{font-size:12.5px;margin-bottom:8px}
.svr-b{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:10px;align-items:center;padding:3px 0;font-size:13.5px}
.svr-t{display:block;height:10px;border-radius:99px;background:var(--soft2);overflow:hidden}.svr-t i{display:block;height:100%;background:var(--pri);border-radius:99px}.svr-t i.low{background:var(--bad)}
.svr-n{font-weight:700;white-space:nowrap;text-align:right}.svr-n small{font-weight:500;color:var(--mute)}
.svr-avg{font-size:26px;font-weight:800;margin:2px 0 6px}.svr-avg small{font-size:13px;font-weight:600;color:var(--mute)}
table.svr-g{width:100%;border-collapse:collapse;font-size:13.5px}table.svr-g td{padding:4px 0}.svr-gt{width:40%;padding:0 10px!important}
.svr-txt{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:8px}.svr-txt li{background:var(--soft);border-radius:12px;padding:9px 12px;font-size:14px;white-space:pre-wrap;word-break:break-word}.svr-txt b{display:block;font-size:12px;color:var(--mute);margin-bottom:2px}
.sv-anon input{width:auto;flex:none;margin:0}.sv-anon{text-align:left}

/* ---- profile drawer + day overview ---- */
[data-pf],[data-day]{cursor:pointer}
.pav[data-pf]{transition:box-shadow .15s}
.pav[data-pf]:hover{box-shadow:0 0 0 3px var(--caramel)}
tr[data-day]:hover td{background:var(--soft)}
.ilist li[data-day]{border-radius:12px;transition:background .15s}.ilist li[data-day]:hover{background:var(--soft)}
.wkday[data-day]:hover{background:var(--soft)}
.kpis.slim .kpi[data-pf]{transition:transform .15s,box-shadow .15s}.kpis.slim .kpi[data-pf]:hover{transform:translateY(-2px);box-shadow:0 8px 22px var(--shadow)}
.sc.vlink{font:inherit;border:0;cursor:pointer}.sc.vlink:hover{filter:brightness(.96);box-shadow:inset 0 0 0 2px var(--line2)}
.pwho[data-pf] .nm{text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .15s}.pwho[data-pf]:hover .nm,.whoin[data-pf]:hover .nm{text-decoration-color:currentColor}
dialog.drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;max-width:100vw;width:min(540px,100vw);border-radius:22px 0 0 22px;animation:pfIn .22s ease}
@keyframes pfIn{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
dialog.drawer .pfb{height:100%;overflow:auto;padding:22px 24px 28px}
#dovDlg{width:min(480px,calc(100vw - 32px))}
#dovDlg .pfb{padding:22px 24px 24px;max-height:min(86dvh,760px);overflow:auto}
.pf-load{padding:40px 0;text-align:center;color:var(--mute)}
.pf-top{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.pf-top .x{flex:none;width:36px;height:36px;border-radius:50%;background:var(--soft);color:var(--ink);border:1px solid var(--line);font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;box-shadow:none}.pf-top .x:hover{background:var(--soft2)}
.pf-id{display:flex;align-items:center;gap:14px;min-width:0}
.pav.pf-av{width:58px;height:58px;font-size:19px;background:var(--caramel);color:var(--navy)}
#dovDlg .pav.pf-av{width:44px;height:44px;font-size:15px}
.pf-nm{display:flex;flex-direction:column;min-width:0}.pf-nm b{font-size:19px;line-height:1.2}.pf-nm span{color:var(--mute);font-size:13.5px;margin-top:2px}
.pf-now{margin:14px 0 4px}
.pf-st{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;background:var(--soft);color:var(--ink)}
.pf-st.work{background:rgba(47,154,108,.14);color:#1f7a53}.pf-st.work i{width:8px;height:8px;border-radius:50%;background:#2f9a6c}
.pf-st.lunch{background:rgba(215,155,34,.18);color:#97680b}.pf-st.brk{background:rgba(212,121,58,.16);color:#a2511a}.pf-st.done{background:rgba(63,127,191,.14);color:#2a6198}
:root[data-theme="dark"] .pf-st.work{color:#9fe0c2}:root[data-theme="dark"] .pf-st.lunch{color:#f3cf7e}:root[data-theme="dark"] .pf-st.brk{color:#f2b98d}:root[data-theme="dark"] .pf-st.done{color:#b4d3f0}
.pf-rng{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--soft);margin:16px 0 14px}
.pf-rng button{flex:1;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--mute);font-weight:700;font-size:13px}
.pf-rng button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px var(--shadow)}
.pf-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pf-tiles .mini{padding:10px 12px}.pf-tiles .mini b{font-size:17px}
.mini.bad{background:rgba(207,75,55,.12)}
@media (max-width:520px){.pf-tiles{grid-template-columns:1fr 1fr}}
.pf-chart{margin:14px 0 4px;padding:14px 12px 10px;border:1px solid var(--line);border-radius:16px}
.pf-chart .bars{height:90px}.pf-chart .bars.dense{gap:3px}.pf-chart .bars.dense span{font-size:9px}
.pf-chart .b:hover i{filter:brightness(.9)}
.pf-note{font-size:13px;margin:8px 0 0}
.pf-h{font-size:14.5px;margin:20px 0 8px}
.pf-days{display:flex;flex-direction:column}
.pf-day{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:12px;border-bottom:1px solid var(--line)}
.pf-day:last-child{border-bottom:0}
.pf-day:not(.nolink):hover{background:var(--soft)}
.pf-day.nolink{cursor:default}
.pf-dm{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.pf-dm b{font-size:14px;font-variant-numeric:tabular-nums}.pf-dm span{display:flex;flex-wrap:wrap;gap:4px}
.pf-day .val{font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}
.pf-day .chev{color:var(--mute);font-size:20px;line-height:1}
.pf-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.dov-sh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:16px 0 0;padding:10px 14px;border-radius:14px;background:var(--soft);font-size:14px}
.dov-sh .sn{color:var(--mute);font-size:13px;width:100%}
.dov-empty{margin:18px 0 6px;padding:22px;border:1px dashed var(--line2);border-radius:16px;text-align:center;color:var(--mute)}
.dov-sum{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;margin:14px 0 6px}
.dov-sum>div{padding:10px 12px;border-radius:14px;background:var(--soft);display:flex;flex-direction:column}
.dov-sum span{font-size:12px;color:var(--mute);font-weight:600}.dov-sum b{font-size:19px;font-variant-numeric:tabular-nums}.dov-sum em{font-style:normal;font-size:11.5px;color:#1f7a53;font-weight:700}
.dov-tl{list-style:none;margin:14px 0 0;padding:0 0 0 8px;position:relative}
.dov-tl:before{content:"";position:absolute;left:82px;top:8px;bottom:8px;width:2px;background:var(--line)}
.dov-tl li{display:grid;grid-template-columns:66px 1fr;gap:18px;padding:7px 0;position:relative;font-size:14px;align-items:baseline}
.dov-tl li:before{content:"";position:absolute;left:68px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--line2);border:2px solid var(--card)}
.dov-tl .tm{font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.dov-tl li div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.dov-tl .sn{width:100%;font-size:12.5px;color:var(--mute)}
.dov-tl .k-in:before{background:#2f9a6c}.dov-tl .k-out:before{background:#cf4b37}.dov-tl .k-lunch:before{background:#d79b22}.dov-tl .k-bio:before{background:#d4793a}.dov-tl .k-pause:before{background:#6f7d89}
.dov-loc{font-size:13.5px}
@media (max-width:560px){dialog.drawer{border-radius:0;width:100vw}dialog.drawer .pfb{padding:18px 16px 24px}}

/* ---- Time clock card ---- */
.tclock{padding:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.tc-now{position:relative;padding:22px 24px 24px;background:linear-gradient(135deg,var(--tcA1) 0%,var(--tcA2) 60%,var(--card) 100%);border-right:1px solid var(--line);overflow:hidden;min-width:0}
.tc-now:after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--tcGlow),transparent 70%);pointer-events:none}
.tc-now>*{position:relative;z-index:1}
.tc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tc-head h2{margin:0;font-size:15px}
.tc-tag{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px;background:var(--tcSoft);color:var(--tcInk)}
.tc-dot{width:9px;height:9px;border-radius:50%;background:var(--tc);animation:tcp 1.6s infinite}
@keyframes tcp{0%{box-shadow:0 0 0 0 var(--tcGlow)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tc-bigrow{display:flex;align-items:baseline;gap:10px;margin:12px 0 6px;flex-wrap:wrap}
#tcBig{font-size:56px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
#tcBig.words{font-size:34px;letter-spacing:-.01em}
#tcOf{font-size:18px;color:var(--mute);font-weight:600;font-variant-numeric:tabular-nums}
.tc-bar{height:10px;border-radius:8px;background:var(--tcTrack);overflow:hidden;margin:14px 0 8px}
.tc-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--tc),var(--tcInk));border-radius:8px;transition:width .6s ease}
#tcSub{font-size:14px;color:var(--mute);min-height:20px}
#tcSub .hl,.tc-now .hl{color:var(--tcInk)}
.tc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tc-acts button{flex:1 1 120px;padding:12px 14px;font-size:14px;border-radius:12px;background:var(--tcGhost);color:var(--ink);border:1px solid var(--line);font-weight:700}
.tc-acts button.tc-pri{flex:1 1 100%;order:-1;padding:17px 20px;font-size:17px;font-weight:800;border-radius:16px;background:var(--tc);color:var(--tcOn);border:0;box-shadow:0 10px 26px var(--tcGlow)}
.tc-acts button.tc-pri:hover{filter:brightness(1.05)}
.tc-acts button:disabled{opacity:.6;cursor:not-allowed}
.tc-today{padding:22px 24px;min-width:0}
.tc-today h3{margin:0 0 10px;font-size:15px}
.tc-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.tc-row:last-child{border-bottom:0}
.tc-row>span:first-child{flex:1;color:var(--mute)}
.tc-row>b{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.tc-row.tc-col{display:block}.tc-row.tc-col>span:first-child{display:block;margin-bottom:4px}
.tc-loc{font-size:13px;margin:3px 0}.tc-loc a{color:inherit}
.tc-note{font-size:13px;color:var(--ink)}
.tc-today .shiftline{margin:0 0 6px}
.sk{margin:0 0 14px;padding:14px 14px 12px;border-radius:18px;background:var(--priSoft);border:1px solid var(--line);color:var(--ink);--skBand:rgba(190,136,74,.24)}
:root[data-theme="dark"] .sk{--skBand:rgba(190,136,74,.30)}
.sk{position:relative;overflow:hidden;margin:0 0 12px;padding:10px 16px 12px}
.sk-l,.sk-r{min-width:0}
@media (min-width:760px){.sk{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.15fr);gap:6px 28px;align-items:center}.sk-days{margin-top:0!important}}
.sk-top{display:flex;align-items:center;gap:12px}
.sk-badge{position:relative;flex:none;width:38px;height:38px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--pri);color:var(--onPri);display:grid;place-items:center;box-shadow:0 0 0 3px var(--skBand);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.sk-badge:hover{transform:scale(1.08)}.sk-badge:active{transform:scale(.94)}
.sk-badge{width:44px;height:44px}
.sk-badge svg{width:25px;height:29px;display:block;overflow:visible}
.sk-fire{position:relative;display:block;width:26px;height:38px;margin-top:-1px;filter:hue-rotate(var(--fh,0deg)) saturate(var(--fs,1)) brightness(var(--fb,1)) drop-shadow(0 0 calc(3px + var(--f,0) * 4px) var(--fc,rgba(255,140,40,.55)))}
.sk-fire svg{width:100%;height:100%;overflow:visible;transform:none!important}
.sk-badge.zero .sk-fire{filter:grayscale(1) opacity(.5)}
/* flame tiers (unlocked silently as the streak grows): 30 blue, 50 violet, 100 gold, 200 aurora */
.sk-badge{isolation:isolate}
.sk-badge.t1{--fh:190deg;--fc:rgba(70,150,255,.6);--skRing:rgba(80,160,255,.4)}
.sk-badge.t2{--fh:255deg;--fc:rgba(170,90,255,.65);--skRing:rgba(170,90,255,.0)}
.sk-badge.t3{--fh:22deg;--fs:1.3;--fb:1.18;--fc:rgba(255,205,70,.8);--skRing:rgba(255,200,60,0)}
.sk-badge.t4{--fc:rgba(255,255,255,.7);--skRing:rgba(255,255,255,0)}
.sk-badge.t4 .sk-fire{animation:skAur 6s linear infinite}
@keyframes skAur{to{filter:hue-rotate(360deg) saturate(1.25) brightness(1.1) drop-shadow(0 0 calc(4px + var(--f,0) * 4px) rgba(255,255,255,.7))}}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.sk-badge.t2,.sk-badge.t3,.sk-badge.t4{border:3px solid transparent;animation:skAng 6s linear infinite}
.sk-badge.fire.t2{background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--ang),#a45cff,#ff6ad5,#6a7bff,#a45cff) border-box}
.sk-badge.fire.t3{background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--ang),#ffd54a,#fff3b0,#ff9f1c,#ffd54a) border-box}
.sk-badge.fire.t4{background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--ang),#ff5e5e,#ffd34d,#5eff9a,#4dc3ff,#b05eff,#ff5e5e) border-box;animation-duration:4s}
.sk-badge.t2.stoke,.sk-badge.t3.stoke{animation:skStoke .3s cubic-bezier(.3,1.6,.5,1),skAng 6s linear infinite}
.sk-badge.t4.stoke{animation:skStoke .3s cubic-bezier(.3,1.6,.5,1),skAng 4s linear infinite}
@keyframes skAng{to{--ang:360deg}}
.sk-badge.t3::after{content:"";position:absolute;inset:-9px;border-radius:50%;z-index:-1;background:radial-gradient(circle at 50% 4%,#fff6c4 0 2.5px,transparent 3px),radial-gradient(circle at 50% 96%,#fff6c4 0 2px,transparent 2.5px);animation:skRingSpin 5s linear infinite reverse}
.sk-badge.t4::after{content:"";position:absolute;inset:-10px;border-radius:50%;z-index:-1;background:radial-gradient(circle at 50% 4%,#fff 0 2.5px,transparent 3px),radial-gradient(circle at 96% 50%,#fff 0 2px,transparent 2.5px),radial-gradient(circle at 4% 50%,#fff 0 2px,transparent 2.5px);animation:skRingSpin 4s linear infinite reverse}
@keyframes skRingSpin{to{transform:rotate(360deg)}}
.sk-badge.t1,.sk-badge.t2,.sk-badge.t3,.sk-badge.t4{box-shadow:0 0 calc(4px + var(--f,0) * 12px) calc(var(--f,0) * 3px) var(--fc)}
.sk-badge.t1{box-shadow:0 0 0 3px var(--skRing),0 0 calc(4px + var(--f,0) * 12px) calc(var(--f,0) * 3px) var(--fc)}
/* milestone moment */
.sk.cele{animation:skCele 1.8s ease-out}
@keyframes skCele{0%{box-shadow:0 0 0 0 rgba(255,140,40,0)}20%{box-shadow:0 0 0 6px rgba(255,140,40,.35),0 0 38px 8px rgba(255,140,40,.45)}100%{box-shadow:0 0 0 0 rgba(255,140,40,0)}}
.sk-ring{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid var(--fcs,#ff8a1f);pointer-events:none;animation:skRing 1s ease-out forwards;z-index:3}
@keyframes skRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.sk-mile{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;background:linear-gradient(90deg,#ff8a1f,#ffc233);color:#3a1d00;animation:skMile .7s cubic-bezier(.3,1.6,.5,1) both}
.sk-mile.t1{background:linear-gradient(90deg,#3d8bff,#6fd3ff);color:#001b3a}.sk-mile.t2{background:linear-gradient(90deg,#9b5cff,#ff6ad5);color:#fff}
.sk-mile.t3{background:linear-gradient(90deg,#ffb300,#fff0a0);color:#3a2a00}.sk-mile.t4{background:linear-gradient(90deg,#ff5e5e,#ffd34d,#5eff9a,#4dc3ff,#b05eff);color:#111}
@keyframes skMile{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}
.sk-badge.fire .sk-fire{transform:scale(calc(1 + var(--f,0) * .16));transform-origin:50% 90%;transition:transform .35s cubic-bezier(.3,1.5,.5,1),filter .35s}
.sk-badge.fire{--f:0;background:var(--card);color:var(--ink);box-shadow:0 0 0 3px var(--skRing,var(--skBand)),0 0 calc(var(--f) * 14px) calc(var(--f) * 3px) var(--fc,rgba(255,140,40,.5));transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .35s}
.sk-badge.fire svg{transform:scale(calc(1 + var(--f) * .14));transform-origin:50% 90%;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.sk-badge.stoke{animation:skStoke .3s cubic-bezier(.3,1.6,.5,1)}
.sk-fl-out{transform-origin:12px 25px;animation:flA calc(1.5s / (1 + var(--f,0) * .45)) ease-in-out infinite alternate}
.sk-fl-in{transform-origin:12px 25px;animation:flB calc(1s / (1 + var(--f,0) * .45)) ease-in-out infinite alternate}
.sk-fl-glow{filter:drop-shadow(0 0 5px rgba(255,140,40,.75));animation:flG calc(1.8s / (1 + var(--f,0) * .35)) ease-in-out infinite alternate}
.sk-badge.zero .sk-fl-out{fill:#9a9ea2}.sk-badge.zero .sk-fl-in{fill:#c4c7c9}
.sk-badge.zero .sk-fl-out,.sk-badge.zero .sk-fl-in,.sk-badge.zero .sk-fl-glow{animation:none;filter:none}
@keyframes flA{0%{transform:scale(1,1) skewX(0)}30%{transform:scale(.95,1.07) skewX(2.5deg)}60%{transform:scale(1.04,.96) skewX(-2deg)}100%{transform:scale(.97,1.05) skewX(1deg)}}
@keyframes flB{0%{transform:scale(.92,.9)}50%{transform:scale(1.06,1.1) skewX(-3deg)}100%{transform:scale(.95,.96) skewX(2deg)}}
@keyframes flG{0%{filter:drop-shadow(0 0 calc(3px + var(--f,0) * 3px) rgba(255,140,40,.5))}100%{filter:drop-shadow(0 0 calc(8px + var(--f,0) * 5px) rgba(255,150,40,.95))}}
@keyframes skStoke{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}
.sk-ember{position:absolute;left:50%;bottom:55%;width:5px;height:5px;margin-left:-2px;border-radius:50%;pointer-events:none;background:#ffb21f;box-shadow:0 0 6px 1px rgba(255,140,40,.8);animation:skEmber var(--t,.9s) ease-out forwards}
@keyframes skEmber{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
.sk-badge.spin svg{animation:skSpin .8s cubic-bezier(.3,1.4,.5,1)}
.sk-badge.zero{background:var(--soft2);color:var(--mute);box-shadow:0 0 0 4px var(--soft)}
.sk-head{min-width:0;flex:1}
.sk-title{font-size:17px;font-weight:700;line-height:1.15;letter-spacing:-.01em;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.sk-best{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--skBand);color:var(--priInk)}
.sk-title .n{display:inline-block;min-width:1ch;font-variant-numeric:tabular-nums}
.sk-sub{font-size:12.5px;color:var(--mute);margin-top:2px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sk-sub b{color:var(--ink)}
.sk-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:8px}
.sk-d{border:0;background:none;padding:0;margin:0;font:inherit;color:var(--mute);font-size:11.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;border-radius:12px;outline-offset:2px;font-size:10.5px}
.sk-d.today{color:var(--ink)}
.sk-d:hover,.sk-d:focus,.sk-d:active{background:none;color:var(--ink)}
.sk-d:focus-visible{outline:2px solid var(--pri)}
.sk-cw{position:relative;width:100%;height:34px;display:grid;place-items:center}
.sk-cw::before{content:"";position:absolute;top:2px;bottom:2px;left:50%;right:50%;border-radius:99px;background:var(--skBand);opacity:0;transition:opacity .3s}
.sk-d.ontime .sk-cw::before{left:calc(50% - 17px);right:calc(50% - 17px);opacity:1}
.sk-d.ontime.jl .sk-cw::before{left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.sk-d.ontime.jr .sk-cw::before{right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.sk-c{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;border:2px solid var(--line2);background:var(--card);display:grid;place-items:center;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.sk-c svg{width:17px;height:15px;display:block}
.sk-d:hover .sk-c,.sk-d.sel .sk-c{transform:translateY(-2px) scale(1.07)}
.sk-d.sel .sk-c{box-shadow:0 0 0 3px var(--skBand)}
.sk-d.ontime .sk-c{background:var(--pri);border-color:var(--pri);color:var(--onPri)}
.sk-d.late .sk-c{border-color:var(--bad);color:var(--bad);background:var(--badSoft)}
.sk-d.missed .sk-c{border-color:var(--bad);border-style:dashed;color:var(--bad);opacity:.8}
.sk-d.missed .sk-c svg,.sk-d.late .sk-c svg{opacity:.55}
.sk-d.today .sk-c{border-color:var(--pri);animation:skPulse 2s ease-out infinite}
.sk-d.off .sk-c{border-style:dashed;opacity:.55}
.sk-d.future .sk-c{opacity:.5}
.sk-d .pop{opacity:0;animation:skPop .5s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(var(--i) * 70ms + 120ms)}
.sk-dot{display:none}
.sk-detail{margin-top:10px;padding:8px 12px;border-radius:12px;background:var(--card);font-size:13px;line-height:1.35;min-height:20px;transition:background .2s}
.sk-detail b{font-weight:700}
.sk-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--skBand);overflow:hidden}
.sk-bar i{display:block;height:100%;background:var(--pri);width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.sk-next{font-size:12px;color:var(--mute);margin-top:5px}
.sk-spark{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3px;border-radius:50%;background:var(--pri);pointer-events:none;animation:skSpark .7s ease-out forwards}
@keyframes skPop{0%{opacity:0;transform:scale(.3) rotate(-25deg)}100%{opacity:1;transform:none}}
@keyframes skPulse{0%{box-shadow:0 0 0 0 rgba(190,136,74,.55)}70%,100%{box-shadow:0 0 0 8px rgba(190,136,74,0)}}
@keyframes skSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(200deg) scale(1.35)}100%{transform:rotate(360deg) scale(1)}}
@keyframes skSpark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
@media (prefers-reduced-motion:reduce){.sk *,.sk *::before,.sk *::after,.sk-spark,.sk.cele{animation:none!important;transition:none!important}.sk-d .pop{opacity:1}}
.tclock .savenote{margin:10px 0 0}
.tclock #perr{margin:0 24px 16px}.tclock #perr:empty{display:none}
@media (max-width:900px){.tclock{grid-template-columns:1fr}.tc-now{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:560px){.tc-now,.tc-today{padding:18px}#tcBig{font-size:48px}#tcBig.words{font-size:30px}}
/* state colours (light) */
.tclock{--tc:#2f9a6c;--tcInk:#1f7a53;--tcOn:#fff;--tcA1:#e2f3ea;--tcA2:#f2f9f5;--tcSoft:rgba(47,154,108,.14);--tcGlow:rgba(47,154,108,.28);--tcTrack:rgba(27,37,47,.08);--tcGhost:rgba(255,255,255,.6)}
.tclock[data-st=work]{--tc:#2f9a6c;--tcInk:#1f7a53;--tcOn:#fff;--tcA1:#e2f3ea;--tcA2:#f2f9f5;--tcSoft:rgba(47,154,108,.14);--tcGlow:rgba(47,154,108,.28)}
.tclock[data-st=lunch]{--tc:#d79b22;--tcInk:#97680b;--tcOn:#1b252f;--tcA1:#fbefd2;--tcA2:#fcf6e7;--tcSoft:rgba(215,155,34,.18);--tcGlow:rgba(215,155,34,.32)}
.tclock[data-st=bio]{--tc:#d4793a;--tcInk:#a2511a;--tcOn:#fff;--tcA1:#fbe6d6;--tcA2:#fcf2ea;--tcSoft:rgba(212,121,58,.16);--tcGlow:rgba(212,121,58,.30)}
.tclock[data-st=over]{--tc:#cf4b37;--tcInk:#a8301f;--tcOn:#fff;--tcA1:#fbe0db;--tcA2:#fcefec;--tcSoft:rgba(207,75,55,.15);--tcGlow:rgba(207,75,55,.30)}
.tclock[data-st=pause]{--tc:#6f7d89;--tcInk:#4b5863;--tcOn:#fff;--tcA1:#e8ecef;--tcA2:#f3f5f7;--tcSoft:rgba(111,125,137,.16);--tcGlow:rgba(111,125,137,.25)}
.tclock[data-st=done]{--tc:#3f7fbf;--tcInk:#2a6198;--tcOn:#fff;--tcA1:#e1ecf7;--tcA2:#f1f6fb;--tcSoft:rgba(63,127,191,.14);--tcGlow:rgba(63,127,191,.25)}
/* state colours (dark) */
:root[data-theme="dark"] .tclock{--tc:#4fb286;--tcInk:#9fe0c2;--tcOn:#10241a;--tcA1:#163428;--tcA2:#1b2a2a;--tcSoft:rgba(79,178,134,.18);--tcGlow:rgba(79,178,134,.30);--tcTrack:rgba(255,255,255,.08);--tcGhost:rgba(255,255,255,.06)}
:root[data-theme="dark"] .tclock[data-st=work]{--tc:#4fb286;--tcInk:#9fe0c2;--tcOn:#10241a;--tcA1:#163428;--tcA2:#1b2a2a;--tcSoft:rgba(79,178,134,.18);--tcGlow:rgba(79,178,134,.30)}
:root[data-theme="dark"] .tclock[data-st=lunch]{--tc:#e0ad45;--tcInk:#f3cf7e;--tcOn:#1b1608;--tcA1:#3a2a14;--tcA2:#2b2217;--tcSoft:rgba(224,173,69,.18);--tcGlow:rgba(224,173,69,.32)}
:root[data-theme="dark"] .tclock[data-st=bio]{--tc:#d98a4e;--tcInk:#f2b98d;--tcOn:#1f1209;--tcA1:#3a2416;--tcA2:#2b2018;--tcSoft:rgba(217,138,78,.18);--tcGlow:rgba(217,138,78,.30)}
:root[data-theme="dark"] .tclock[data-st=over]{--tc:#e0614c;--tcInk:#ffb3a6;--tcOn:#fff;--tcA1:#3e1c18;--tcA2:#2c1a19;--tcSoft:rgba(224,97,76,.18);--tcGlow:rgba(224,97,76,.32)}
:root[data-theme="dark"] .tclock[data-st=pause]{--tc:#9aa7b2;--tcInk:#d0d8de;--tcOn:#141c24;--tcA1:#2a3138;--tcA2:#232b33;--tcSoft:rgba(154,167,178,.18);--tcGlow:rgba(154,167,178,.22)}
:root[data-theme="dark"] .tclock[data-st=done]{--tc:#6aa3d9;--tcInk:#b4d3f0;--tcOn:#0f1d2b;--tcA1:#1b2c40;--tcA2:#1d2836;--tcSoft:rgba(106,163,217,.18);--tcGlow:rgba(106,163,217,.25)}
@media (prefers-reduced-motion:reduce){.tc-dot{animation:none}.tc-bar i{transition:none}}
/* Clock in = green (the card colour before you start), Clock out = always red */
.tclock #bOut{background:#fbe9e6;color:#a8301f;border-color:#f0c4bc}
.tclock #bOut.tc-pri{background:#cf4b37;color:#fff;box-shadow:0 10px 26px rgba(207,75,55,.30)}
:root[data-theme="dark"] .tclock #bOut{background:rgba(224,97,76,.14);color:#ffb3a6;border-color:rgba(224,97,76,.35)}
:root[data-theme="dark"] .tclock #bOut.tc-pri{background:#e0614c;color:#fff;box-shadow:0 10px 26px rgba(224,97,76,.30)}
/* ---- My Day layout: clock on top, slim number tiles, panels side by side ---- */
#v-today .tclock{margin-bottom:16px}
.kpis.slim .kpi{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h big" "m big" "v v";align-content:start;column-gap:12px;min-height:0;padding:16px 20px}
.kpis.slim .kh{grid-area:h}.kpis.slim .kh .ki{display:none}
.kpis.slim .big{grid-area:big;margin:0;font-size:32px;align-self:center;text-align:right}
.kpis.slim .big small{font-size:15px}
.kpis.slim .kmeta{grid-area:m;margin-top:4px}
.kpis.slim .viz{grid-area:v;padding-top:12px}
.kpis.slim .bars{height:44px;gap:6px}.kpis.slim .bars span{font-size:10px}
.kpis.slim .meters{gap:6px}
.panel.two.daypanels{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.panel.two.daypanels > div + div{margin-top:0}
@media (max-width:900px) and (min-width:681px){.kpis.slim .big{font-size:26px}}
/* Narrow windows (e.g. side menu open on a small laptop): the three cards wrap instead of squashing,
   and a card that is still narrow puts its big number under the heading instead of beside it. */
@media (min-width:681px){.kpis.slim{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}
.kpis.slim{container-type:inline-size}
@container (min-width:500px) and (max-width:900px){
  .kpis.slim .kpi{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "big" "m" "v"}
  .kpis.slim .big{text-align:left;align-self:start;margin-top:6px;font-size:28px}
}
@media (max-width:680px){.panel.two.daypanels{grid-template-columns:1fr;gap:18px}}

/* Login extras */
.capsnote{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--waitInk);background:var(--waitSoft);display:inline-block;padding:3px 10px;border-radius:999px}
/* Login form: options row (keep me logged in + forgot password), Google button under Log in */
.lg-opts{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 18px;flex-wrap:wrap}
#login .lg-opts .check{margin:0!important;font-size:13.5px}
#login .lg-opts .linkb{text-decoration:none;font-size:13.5px}
#login .lg-opts .linkb:hover{text-decoration:underline}
button.gbtn.lg-g{margin-top:12px}
#lbtn:disabled{opacity:.7;cursor:default}
/* Security page */
.alog .ev{display:inline-block;margin-left:4px;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600;vertical-align:1px}
.alog .ev-in{background:var(--goSoft);color:var(--goInk)}
.alog .ev-out{background:var(--soft2);color:var(--mute)}
.alog .ev-adm{background:var(--stopSoft);color:var(--stopInk)}
.alog .ev-exp{background:var(--waitSoft);color:var(--waitInk)}
#loginHist{max-height:520px;overflow-y:auto}
#sTable td.dev{white-space:normal}
#sTable .tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--soft2);color:var(--mute);vertical-align:1px}
#sTable .tag.now{background:var(--goSoft,rgba(46,125,50,.12));color:var(--goInk,#2e7d32)}
.alog{display:flex;flex-direction:column}
.alog .ai{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 16px;padding:11px 2px;border-bottom:1px solid var(--line)}
.alog .ai:last-child{border-bottom:0}
.alog .ai time{color:var(--mute);font-size:13px;font-variant-numeric:tabular-nums}
.alog .ai b{font-weight:600}
.alog .ai .d{grid-column:2;color:var(--mute);font-size:13.5px;overflow-wrap:anywhere}
#sTable td{white-space:normal}#sTable .sub{white-space:normal}#sTable button,#sTable .tag{white-space:nowrap}
@media (max-width:600px){.alog .ai{grid-template-columns:1fr}.alog .ai .d{grid-column:1}#sTable th:nth-child(n+2):nth-child(-n+4),#sTable td:nth-child(n+2):nth-child(-n+4){display:none}#sTable .acts-row{flex-direction:column;align-items:flex-end}}
.is-loading .alog{min-height:160px}
#npDlg::backdrop{background:rgba(27,37,47,.55)}

.mobonly{display:none}
@media (max-width:600px){.mobonly{display:inline}#uTable th:nth-child(2),#uTable td:nth-child(2),#uTable th:nth-child(3),#uTable td:nth-child(3){display:none}}
 #uTable td{white-space:normal}#uTable td:last-child,#uTable th{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 12px;align-items:end}
.formgrid .go{display:flex;align-items:flex-end}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);
  background:var(--navy);color:var(--buttermilk);padding:12px 14px 12px 18px;border-radius:12px;box-shadow:0 10px 30px var(--shadow);font-size:14px}
:root[data-theme="dark"] .toast{background:var(--buttermilk);color:var(--navy)}
dialog{border:0;border-radius:22px;padding:0;width:min(580px,calc(100vw - 32px));box-shadow:0 20px 60px var(--shadow);color:var(--ink);background:var(--card)}
dialog::backdrop{background:rgba(27,37,47,.55)}
.dlg{padding:22px 24px}
.dlg h2{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dlg .x{background:none;color:var(--mute);padding:4px 8px;font-size:22px;line-height:1}.dlg .x:hover{background:var(--soft2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.dlgfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.dlgfoot .left{margin-right:auto}
.check{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:14px;color:var(--ink);cursor:pointer}
.check input{width:auto;margin:0;accent-color:var(--caramel);transform:scale(1.2)}
@media (prefers-reduced-motion:no-preference){button{transition:background .15s}}
/* ---------- permissions ---------- */
.permtable th,.permtable td{white-space:normal;vertical-align:middle}.permtable select{width:auto;min-width:160px}
.permtable tr.pg th{background:var(--soft);color:var(--mute);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding-top:10px}
.permtable td.fixed{color:var(--mute);font-size:13px}
@media (max-width:620px){
  .permtable tr.ph{display:none}
  .permtable tr.pr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
  .permtable tr.pr th{grid-column:1/-1;padding:0;border:0;color:var(--ink)}
  .permtable tr.pr td{padding:0;border:0}.permtable td[data-l]::before{content:attr(data-l);display:block;font-size:12px;color:var(--mute);margin-bottom:2px}
  .permtable select{width:100%;min-width:0}
}
details.permbox{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:10px 14px}
details.permbox summary{cursor:pointer;font-weight:600}
.bulkbox textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}.bulkerr{color:var(--bad,#b3412f);font-weight:600;font-size:13px}
.permrow{display:grid;grid-template-columns:1fr 210px;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.permrow:last-child{border-bottom:0}.permrow select{padding:6px 8px}.permrow.ov span{font-weight:600}
.permgh{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:12px 0 0}
@media (max-width:520px){.permrow{grid-template-columns:1fr}}
.savebar{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--bg);padding:12px 0;border-top:1px solid var(--line)}

/* ---- schedule editing: scope switch, selected days, floating action bar ---- */
#scEditBanner{flex-direction:column;align-items:stretch;gap:0}
.scbtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.scbtop .push{flex:1}
.scbsub{margin-top:8px;font-size:13.5px;color:var(--mute);line-height:1.45}
.scseg{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.scseg button{height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--mute);font-weight:700;font-size:13.5px;cursor:pointer;box-shadow:none}
.scseg button:hover{filter:none;color:var(--ink)}
.scseg button span{font-weight:500;opacity:.85}
.scseg button[aria-pressed=true]{background:var(--ink);color:var(--card)}
.scfloat{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:40;display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:min(1100px,calc(100vw - 24px));padding:12px 16px;border-radius:18px;background:var(--ink);color:var(--card);box-shadow:0 14px 40px rgba(27,37,47,.35)}
.scfloat .sfi{display:flex;flex-direction:column;min-width:150px}
.scfloat .sfi span{font-size:12.5px;opacity:.8}
.scfloat .scseg{background:color-mix(in srgb,var(--card) 12%,transparent);border-color:transparent}
.scfloat .sflab{padding:0 8px 0 10px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.scfloat .scseg button{color:inherit;opacity:.85;height:32px;padding:0 12px}
.scfloat .scseg button[aria-pressed=true]{background:var(--card);color:var(--ink);opacity:1}
.scfloat .sfb{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.scfloat .sfb .ghost{color:inherit;border-color:color-mix(in srgb,var(--card) 35%,transparent);background:transparent}
.scmenuwrap{position:relative}
.scmenu{position:absolute;bottom:calc(100% + 10px);right:0;min-width:270px;max-height:50vh;overflow:auto;padding:6px;border-radius:14px;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 14px 40px rgba(27,37,47,.3);display:flex;flex-direction:column;gap:2px}
.scmenu button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;border:0;background:transparent;color:var(--ink);padding:9px 12px;border-radius:10px;cursor:pointer;font-weight:500;box-shadow:none}
.scmenu button:hover{background:var(--soft);filter:none}
.scmenu button b{font-weight:700}.scmenu button span{font-size:12px;color:var(--mute)}
.scmenuhint{padding:8px 12px 4px;font-size:12px;color:var(--mute)}
#scTeamGrid.hassel{padding-bottom:140px}
#scTeamGrid.editing{user-select:none;-webkit-user-select:none}
#scTeamGrid.editing button.sc[data-ci]{cursor:pointer}
.sc.selc,.sc.selc.chg{box-shadow:inset 0 0 0 3px var(--ink)}
.sc.selc{position:relative}
.sc.selc::before{content:"✓";position:absolute;top:3px;right:6px;font-size:11px;font-weight:800;color:var(--ink)}
.wknote{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:var(--soft);font-size:13px;color:var(--mute);line-height:1.45}
.apsum{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,#3a8a4a 10%,var(--card));border:1px solid color-mix(in srgb,#3a8a4a 30%,var(--line));font-size:13.5px;line-height:1.5;margin:12px 0}
.apsum.warn{background:color-mix(in srgb,var(--caramel) 12%,var(--card));border-color:color-mix(in srgb,var(--caramel) 40%,var(--line))}
@media (max-width:760px){
  .scfloat{left:8px;right:8px;bottom:calc(72px + env(safe-area-inset-bottom));transform:none;max-width:none;gap:10px}
  .scfloat .sfb button{flex:1 1 calc(50% - 8px)}.scfloat .scmenuwrap{flex:1 1 calc(50% - 8px)}.scfloat .scmenuwrap>button{width:100%}
  .scmenu{left:0;right:auto;min-width:100%}
  .scseg button{padding:0 10px;font-size:12.5px}
  #scTeamGrid.hassel{padding-bottom:260px}
}
.wkh{display:flex;align-items:center;gap:8px;margin:2px 0 10px;font-size:14.5px}.wkh svg{color:var(--pri2,var(--caramel))}.wkh .mute{margin-left:auto;font-size:12.5px}
.wksep{border:0;border-top:1px solid var(--line);margin:16px 0 14px}
.wkchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;min-height:34px;align-items:center}
.wkchip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 4px;border-radius:999px;background:var(--priSoft,var(--soft));border:1px solid var(--line);font-size:13px;font-weight:600}
.wkchip .pav{width:24px;height:24px;font-size:10px}
.wkchip button{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--mute);font-size:15px;line-height:1;cursor:pointer;box-shadow:none}.wkchip button:hover{background:var(--line);filter:none;color:var(--ink)}
.wkempty{font-size:13px}
.wksearch{position:relative;display:flex;gap:8px;align-items:center}
.wksearch .wksi{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mute);display:flex;pointer-events:none}
.wksearch input{flex:1;padding-left:38px}
.wkpicklist{margin-top:8px;max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:14px;padding:4px;background:var(--card);box-shadow:0 8px 24px rgba(27,37,47,.08)}
.wkres{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;box-shadow:none;font-weight:500}
.wkres+.wkres{border-top:1px solid var(--line);border-radius:0}
.wkres:hover{background:var(--soft);filter:none}.wkres.on{background:var(--priSoft,var(--soft))}
.wkres .pav{flex:none}.wkrt{flex:1;display:flex;flex-direction:column;min-width:0}.wkrt b{font-weight:700}.wkrt small{color:var(--mute);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkrc{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line2);color:var(--mute);font-weight:700}.wkres.on .wkrc{background:var(--ink);border-color:var(--ink);color:var(--card)}
.wkflex{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:4px 0 14px;padding:11px 14px;border-radius:12px;border:1px dashed var(--line2);background:var(--soft)}
.wkflex:has(input:checked){border-style:solid;border-color:var(--caramel);background:color-mix(in srgb,var(--caramel) 12%,var(--card))}
.sc.cohol{background:color-mix(in srgb,var(--caramel) 14%,transparent);border:1px dashed var(--caramel);color:var(--ink)}
.sc.cohol b{font-size:12px}
.cdh{display:block;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--caramel);line-height:1.2}
.sghead .cdh,.pcard .dl .cdh{font-weight:800}
.cdkinds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.cdkind{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;margin:0;background:var(--card)}
.cdkind:has(input:checked){border-color:var(--caramel);background:color-mix(in srgb,var(--caramel) 12%,var(--card))}
.cdkind span{display:flex;flex-direction:column}.cdkind small{color:var(--mute);font-size:12px;font-weight:500}
.cdlist{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:14px;padding:4px;margin-bottom:10px}
.cdrow{display:flex;align-items:center;gap:10px;padding:9px 10px}.cdrow+.cdrow{border-top:1px solid var(--line)}
.cdk{flex:none;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--caramel) 18%,var(--card));color:var(--caramel)}
.cdk.suspended{background:var(--soft);color:var(--ink)}
.cdt{flex:1;min-width:0;display:flex;flex-direction:column}.cdt small{color:var(--mute);font-size:12px}
@media (max-width:520px){.cdkinds{grid-template-columns:1fr}}
.scview{margin-bottom:14px}.scview button{display:inline-flex;align-items:center;gap:6px}
.sdhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}.sdhead .mute{font-size:13px;margin-top:2px}
.sdh{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin:18px 0 8px}
.sdlist{max-height:none;background:var(--card)}
.schedtop .scview{margin-left:auto;margin-bottom:0}
.adlist{border:1px solid var(--line);border-radius:14px;padding:4px;margin:12px 0 8px}
.adrow{display:flex;align-items:center;gap:12px;padding:10px 12px}.adrow+.adrow{border-top:1px solid var(--line)}
.adt{flex:1;min-width:0;display:flex;flex-direction:column}.adt small{color:var(--mute);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adwarn{display:flex;gap:12px;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--bad) 9%,var(--card));border:1px solid color-mix(in srgb,var(--bad) 35%,var(--line));font-size:14px;line-height:1.5}
.adwarn>span{font-size:20px;color:var(--bad)}.adwarn p{margin:0 0 8px}.adwarn ul{margin:0 0 8px;padding-left:18px}.adwarn>div>:last-child{margin-bottom:0}
#adCOk.danger{background:var(--bad);color:#fff;border-color:transparent}#adCOk.danger:hover{background:var(--bad);filter:brightness(.92)}

/* Role permissions: Discord-style roles list + one role at a time */
.pmwrap{display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:start;margin-top:12px}
.pmside{display:flex;flex-direction:column;gap:2px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--soft);position:sticky;top:12px}
.pmitem{display:flex;align-items:center;gap:10px;width:100%;height:auto;min-height:38px;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--ink);font-size:13.5px;font-weight:600;text-align:left;cursor:pointer}
.pmitem:hover{background:rgba(27,37,47,.06)}
.pmitem.on{background:var(--card);box-shadow:0 0 0 1px var(--line);font-weight:800}
.pmitem span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmitem svg{color:var(--mute);flex:none}
.pmadmin{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;padding-top:12px}
.pmdot{width:12px;height:12px;border-radius:50%;flex:none;background:#9aa3ad}
.pmdot.c0{background:#be884a}.pmdot.c1{background:#c4553f}.pmdot.c2{background:#4a8f6a}.pmdot.c3{background:#4a7fbe}.pmdot.c4{background:#8a5fb0}.pmdot.c5{background:#b8a23a}.pmdot.cA{background:#1b252f}
.pmpanel{display:none}.pmpanel.on{display:block}
.pmpanel h3{margin:0;font-size:18px;font-weight:800}
.pmsub{margin:2px 0 10px;font-size:13px}
.pmgh{margin:16px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--line);color:var(--mute);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.pmrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.pmrow label{flex:1;font-size:14px;margin:0}
.pmrow select{width:auto;min-width:170px}
@media (max-width:820px){
  .pmwrap{grid-template-columns:1fr}
  .pmside{position:static;flex-direction:row;flex-wrap:wrap}
  .pmitem{width:auto}.pmadmin{margin-top:0;border-top:0;border-radius:9px;padding-top:8px}
  .pmrow{flex-direction:column;align-items:stretch;gap:6px}.pmrow select{width:100%}
}

/* ---- My calendar ---- */
.mcal{--st-work:#2f9e6e;--st-off:#aeb5bd;--st-sp:#7a4fc4;--st-late:#e0a800;--st-abs:#d6403a;--st-leave:#2b7bd6}
.mchead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;position:relative}
.mctitle{display:inline-flex;align-items:center;gap:8px;min-height:0;padding:4px 10px;border:0;border-radius:10px;background:none;color:var(--ink);font-size:22px;font-weight:800;letter-spacing:-.02em;cursor:pointer}
.mctitle:hover,.mctitle[aria-expanded=true]{background:var(--soft)}
.mcnext{margin-left:auto;min-width:0}.mcnext button{min-height:0;border:1px solid color-mix(in srgb,var(--st-sp) 40%,var(--line));background:color-mix(in srgb,var(--st-sp) 10%,var(--card));color:var(--ink);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcpick{position:absolute;top:100%;left:38px;z-index:40;width:290px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px rgba(27,37,47,.2)}
.mcpy{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.mcpy b{font-size:16px}
.mcpm{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.mcpm button{min-height:0;padding:9px 0;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-weight:600;cursor:pointer}
.mcpm button.now{border-color:var(--caramel)}.mcpm button.on{background:var(--ink);color:var(--card);border-color:var(--ink)}
.mcsum{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.mcs{background:var(--soft);border-radius:12px;padding:10px 12px;min-width:0}.mcs b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em}.mcs span{display:block;font-size:12px;color:var(--mute)}
.mcs small{display:block;margin-top:3px;font-size:11px;color:var(--mute)}.mcs small.up{color:var(--st-work)}.mcs small.dn{color:var(--st-abs)}
.mclayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.mcdow,.mcgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.mcdow span{text-align:center;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--caramel);padding:2px 0 6px}
.mc{--c:var(--line);--bg:var(--card);background:var(--bg);display:flex;flex-direction:column;align-items:stretch;gap:3px;min-height:108px;padding:8px 9px;text-align:left;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:12px;color:var(--ink);font:inherit;cursor:pointer;min-width:0;overflow:hidden;position:relative}
.mc:hover,.mc:active,.mc:focus{background:var(--bg);color:inherit}
.mc:hover{box-shadow:0 3px 12px rgba(27,37,47,.12)}.mc:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.mc.sel:not(.today){outline:2px solid var(--ink);outline-offset:0}
.mc.out{opacity:.4}.mc.dim{opacity:.22}.mc.today.dim{opacity:.6}
.mcd{display:flex;align-items:center;justify-content:space-between;gap:4px}.mcn{font-size:13px;font-weight:800}
.mch{font-size:12px;font-weight:700;line-height:1.25;overflow-wrap:anywhere;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mct{font-size:11px;color:var(--mute);line-height:1.25}
.mc.past:not(.today) .mch{font-weight:600;color:var(--mute)}.mc.past:not(.today) .mcn{color:var(--mute)}
.mcmark{color:var(--st-sp);font-size:13px}.mcnote{font-size:11px;color:var(--caramel)}
.mcc{margin-top:auto;align-self:flex-start;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:999px}
.c-ok{background:color-mix(in srgb,var(--st-work) 18%,var(--card));color:var(--st-work)}.c-la{background:color-mix(in srgb,var(--st-late) 24%,var(--card));color:#8a6500}
.c-ab{background:color-mix(in srgb,var(--st-abs) 16%,var(--card));color:var(--st-abs)}.c-sp{background:color-mix(in srgb,var(--st-sp) 18%,var(--card));color:var(--st-sp)}.c-lv{background:color-mix(in srgb,var(--st-leave) 16%,var(--card));color:var(--st-leave)}
.mc.st-work{--c:var(--st-work)}.mc.st-off{--c:var(--st-off);--bg:color-mix(in srgb,var(--st-off) 10%,var(--card));color:var(--mute)}
.mc.st-late{--c:var(--st-late);--bg:color-mix(in srgb,var(--st-late) 10%,var(--card))}.mc.st-absent{--c:var(--st-abs);--bg:color-mix(in srgb,var(--st-abs) 8%,var(--card))}
.mc.st-leave{--c:var(--st-leave);--bg:color-mix(in srgb,var(--st-leave) 9%,var(--card))}
.mc.st-special{--c:var(--st-sp);--bg:color-mix(in srgb,var(--st-sp) 13%,var(--card));border-color:var(--st-sp);border-left-width:5px}.mc.st-special .mch{color:var(--st-sp);font-size:13px}
.mc.chg{box-shadow:inset 0 0 0 1.5px var(--caramel)}
.mc.today,.mc.today:hover,.mc.today:focus{--bg:var(--ink);background:var(--ink);color:var(--card);border-color:var(--ink);box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--caramel),0 10px 26px rgba(27,37,47,.35);z-index:2;transform:scale(1.04)}
.mc.today .mct,.mc.today .mch{color:inherit}.mc.today .mct{opacity:.75}
.mc.today .mctd{background:var(--caramel);color:#fff;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:800}.mc.today .mcn{font-size:16px;color:inherit}
.mc.today .mcc{background:var(--caramel);color:#fff}
.mcdot{display:none;width:7px;height:7px;border-radius:50%;background:var(--st-off);margin:0 auto}
.mcdot.d-work{background:var(--st-work)}.mcdot.d-late{background:var(--st-late)}.mcdot.d-absent{background:var(--st-abs)}.mcdot.d-special{background:var(--st-sp)}.mcdot.d-leave{background:var(--st-leave)}
.mclegend{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mcl{display:inline-flex;align-items:center;gap:7px;min-height:0;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer}
.mcl em{font-style:normal;color:var(--mute);font-weight:700}.mcl.on{background:var(--ink);color:var(--card);border-color:var(--ink)}.mcl.on em{color:inherit;opacity:.7}.mcl.clr{border-style:dashed;color:var(--mute)}
.mcl i{width:10px;height:10px;border-radius:3px;display:inline-block}
.lg-work{background:var(--st-work)}.lg-off{background:var(--st-off)}.lg-special{background:var(--st-sp)}.lg-leave{background:var(--st-leave)}.lg-late{background:var(--st-late)}.lg-absent{background:var(--st-abs)}.lg-chg{box-shadow:inset 0 0 0 1.5px var(--caramel)}
.mcside{position:sticky;top:12px;border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--card);min-height:120px}
.mcempty{color:var(--mute);font-size:13.5px;padding:8px 0}
.mcph{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.mcph h3{margin:0;font-size:18px;font-weight:800}.mcpd{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--caramel)}
.mcx{display:none;min-height:0;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:9px;background:none;color:inherit;font-size:18px;cursor:pointer}
.mcpill{display:inline-block;margin:10px 0 6px;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:800}
.p-ok{background:color-mix(in srgb,var(--st-work) 18%,var(--card));color:var(--st-work)}.p-mute{background:var(--soft);color:var(--mute)}.p-sp{background:color-mix(in srgb,var(--st-sp) 18%,var(--card));color:var(--st-sp)}
.p-lv{background:color-mix(in srgb,var(--st-leave) 16%,var(--card));color:var(--st-leave)}.p-la{background:color-mix(in srgb,var(--st-late) 24%,var(--card));color:#8a6500}.p-ab{background:color-mix(in srgb,var(--st-abs) 16%,var(--card));color:var(--st-abs)}
.mcrow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}.mcrow span{color:var(--mute);flex:none}.mcrow b{text-align:right;font-weight:700;min-width:0;overflow-wrap:anywhere}
.mcacts{display:flex;flex-direction:column;gap:6px;margin-top:12px}.mcacts button{width:100%}
@media (max-width:1100px){.mcsum{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .mclayout{grid-template-columns:1fr}
  .mc{min-height:0;aspect-ratio:1;align-items:center;justify-content:center;padding:4px;border-left-width:1px;border-bottom:3px solid var(--c);gap:5px}
  .mc .mch,.mc .mct,.mc .mcc,.mc .mcnote,.mc .mcmark{display:none}.mc .mcdot{display:block}.mcd{justify-content:center}.mc.today .mctd{display:none}
  .mc.today{transform:none;box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--caramel)}
  .mcdow,.mcgrid{gap:4px}
  .mcside{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;border-radius:22px 22px 0 0;max-height:70vh;overflow:auto;transform:translateY(105%);transition:transform .2s;box-shadow:0 -10px 30px rgba(27,37,47,.3);background:var(--ink);color:var(--card);border-color:var(--ink)}
  .mcside.open{transform:none}.mcx{display:inline-flex;align-items:center;justify-content:center;border-color:rgba(255,255,255,.3)}
  .mcside .mcrow{border-color:rgba(255,255,255,.18)}.mcside .mcrow span,.mcside .mcempty{color:rgba(255,255,255,.65)}
  .mcside .mcacts button{background:transparent;color:var(--card);border-color:rgba(255,255,255,.35)}
  .mcnext{margin-left:0;flex-basis:100%}.mcpick{left:0}
}
@media (max-width:520px){.mctitle{font-size:19px}.mcsum{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mcs{padding:8px 9px}.mcs b{font-size:17px}.mcs small{display:none}.mcs span{font-size:11px}}

/* Scrollbars: chunky rounded handle in the portal's colours */
html{scrollbar-gutter:auto}
:root{--sb1:#cfc2ad;--sb2:#bfae9b;--sbh1:#d9a566;--sbh2:#be884a}
:root[data-theme="dark"]{--sb1:#56626f;--sb2:#46525e;--sbh1:#d9a566;--sbh2:#be884a}
::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-track{background:transparent;border-left:1px solid var(--line)}
::-webkit-scrollbar:horizontal{height:16px}::-webkit-scrollbar-track:horizontal{border-left:0;border-top:1px solid var(--line)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--sb1),var(--sb2));border-radius:8px;border:4px solid transparent;background-clip:content-box;min-height:56px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--sbh1),var(--sbh2));background-clip:content-box}
::-webkit-scrollbar-thumb:active{background:var(--sbh2);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:auto;scrollbar-color:var(--sb2) transparent}}

/* ---- Update bar (Settings, admins only) ---- */
.relbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;margin:0 0 16px;border-radius:16px;background:color-mix(in srgb,var(--caramel) 14%,var(--card));border:1px solid color-mix(in srgb,var(--caramel) 45%,var(--line))}
.relbar>div{flex:1;min-width:220px}.relbar b{display:block;font-size:15px}.relbar span{font-size:13px;color:var(--mute)}
.reldot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--caramel);box-shadow:0 0 0 4px color-mix(in srgb,var(--caramel) 25%,transparent);animation:relPulse 2s ease-in-out infinite}
@keyframes relPulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--caramel) 0%,transparent)}}
.relitem{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;background:var(--card)}
.relh{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:6px}.relh b{font-size:16px}
.relitem ul{margin:6px 0 12px;padding-left:20px;font-size:14px;line-height:1.5}
.relrec{margin:18px 0 6px;font-size:13px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.relrow{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
@media (prefers-reduced-motion:reduce){.reldot{animation:none}}