/* DAYSHIFT app.css — tokens, one page frame, rule classes, motion. Build width 1920: --u = 1 design px. */
:root{
  --u:calc(100vw / 1920);
  --paper:#F5B4A1; --surface:#F9C2AD; --surface-hi:#FACBB6; --surface-deep:#F6B6A2; --footer:#EAA78F; --nav:#F3B6A0;
  --ink:#0B1828; --ink-soft:#686563; --ink-mute:#A58176; --teal:#007C89; --yellow:#FFD23F; --yellow-ink:#8C6D00;
  --font-display:'Roboto',system-ui,sans-serif; --font-body:'Open Sans',system-ui,sans-serif; --font-mono:'Roboto Mono',ui-monospace,monospace;
  /* page frame @1920 (frame.json + USER_FIXES) */
  --gutter-l:calc(75 * var(--u)); --gutter-r:calc(71 * var(--u));
  /* rule tokens: width + colour per rule kind (BORDER_TABLE) */
  --rw-hair:max(1px, calc(1.1 * var(--u))); --rw-frame:max(1px, calc(2.3 * var(--u))); --rw-chip:max(1px, calc(2.2 * var(--u)));
  --rc-panel:#E1AC9E; --rc-card:#E6AA95; --rc-input:#CDB0A4; --rc-chip:#A58F83; --rc-row:#E0AEA0; --rc-row-strong:#C5A395; --rc-divider:#D2AC9D; --rc-nav:#D7B0A1;
  --rc-assigned:#F6C665; --rc-cta:#DDAE31;
  /* motion family: punch-clock — short, settled, one easing */
  --ease:cubic-bezier(.2,.8,.2,1); --dur:260ms; --dur-route:200ms;
  --nav-h:calc(93 * var(--u));
}
*,*::before,*::after{box-sizing:border-box}
:where(button,input,select,textarea){border:0;font:inherit;color:inherit;background:none;margin:0}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 max(12px, calc(16 * var(--u)))/1.45 var(--font-body);min-height:100vh;display:flex;flex-direction:column}
img,svg,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---- ONE page frame: main owns ground + gutters; routes never set their own ---- */
main{flex:1;width:100%;padding:0 var(--gutter-r) 0 var(--gutter-l);background:var(--paper);min-width:0}
main.is-leaving{opacity:0;transition:opacity var(--dur-route) var(--ease)}
main:not(.is-leaving){animation:route-in var(--dur-route) var(--ease)}
@keyframes route-in{from{opacity:0;transform:translateY(calc(6 * var(--u)))}to{opacity:1;transform:none}}

/* ---- rule classes (border/outline live ONLY here) ---- */
.rule-nav{border-bottom:var(--rw-hair) solid var(--rc-nav)}
.rule-foot{border-top:var(--rw-hair) solid var(--rc-nav)}
.rule-panel{border:var(--rw-frame) solid var(--rc-panel);border-radius:calc(24 * var(--u))}
.rule-card{border:var(--rw-hair) solid var(--rc-card);border-radius:calc(10 * var(--u))}
.rule-card-assigned{border:var(--rw-frame) solid var(--rc-assigned);border-radius:calc(10 * var(--u))}
.rule-input{border:var(--rw-frame) solid var(--rc-input);border-radius:calc(12 * var(--u))}
.rule-chip{border:var(--rw-chip) solid var(--rc-chip);border-radius:calc(10 * var(--u))}
.rule-cta{border:var(--rw-frame) solid var(--rc-cta);border-radius:calc(10 * var(--u))}
.rule-table{border:var(--rw-frame) solid var(--rc-panel);border-radius:calc(14 * var(--u))}
.rule-row{border-top:var(--rw-hair) solid var(--rc-row)}
.rule-row-strong{border-top:var(--rw-frame) solid var(--rc-row-strong)}
.rule-col{border-left:var(--rw-frame) solid var(--rc-divider)}
.rule-dashed{border:max(1px, calc(1.5 * var(--u))) dashed var(--rc-chip);border-radius:calc(14 * var(--u))}

/* ---- nav N6: folder tabs — the rota binder's index tabs rise off its top edge; the open tab is the page ---- */
.nav{--tab:#EFAB95;--tab-hi:#F2B09B;height:var(--nav-h);background:var(--footer);color:var(--ink);position:relative;z-index:20;display:flex;align-items:flex-end;gap:calc(40 * var(--u));padding:0 var(--gutter-r) 0 var(--gutter-l)}
.brand{display:flex;align-items:center;gap:calc(12 * var(--u));font:700 max(16px, calc(28 * var(--u)))/1 var(--font-display);letter-spacing:.01em}
.brand img{width:max(30px, calc(46 * var(--u)));height:max(30px, calc(46 * var(--u)));object-fit:contain}
.nav .brand{align-self:center}
.tabs{display:flex;align-items:flex-end;gap:calc(6 * var(--u));height:100%;margin-left:calc(18 * var(--u))}
.tab{position:relative;display:flex;align-items:center;gap:calc(10 * var(--u));height:calc(50 * var(--u));padding:0 calc(26 * var(--u));background:var(--tab);color:#4B4642;border-radius:calc(14 * var(--u)) calc(14 * var(--u)) 0 0;font:500 max(12px, calc(17 * var(--u)))/1 var(--font-display);white-space:nowrap;transition:height var(--dur) var(--ease),background var(--dur) var(--ease)}
.tab i{font:500 max(11px, calc(12 * var(--u)))/1 var(--font-mono);font-style:normal;color:var(--ink-mute);letter-spacing:.04em}
.tab b{font-weight:inherit}
.tab::before{content:"";width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%;background:var(--ink-mute);opacity:.45}
.tab:hover{background:var(--tab-hi);height:calc(54 * var(--u))}
.tab.is-active,.tab[aria-current="page"]{height:calc(62 * var(--u));background:var(--paper);color:var(--ink);font-weight:700;z-index:1;margin-bottom:calc(-1 * var(--rw-hair))}
.tab.is-active::before,.tab[aria-current="page"]::before{background:var(--teal);opacity:1}
.tab.is-active i,.tab[aria-current="page"] i{color:var(--teal)}
/* concave feet so the open tab flows into the page ground */
.tab.is-active::after,.tab[aria-current="page"]::after{content:"";position:absolute;bottom:0;left:calc(-14 * var(--u));right:calc(-14 * var(--u));height:calc(14 * var(--u));pointer-events:none;
  background:radial-gradient(circle at 0 0,transparent calc(14 * var(--u)),var(--paper) calc(14.5 * var(--u))) left bottom/calc(14 * var(--u)) calc(14 * var(--u)) no-repeat,radial-gradient(circle at 100% 0,transparent calc(14 * var(--u)),var(--paper) calc(14.5 * var(--u))) right bottom/calc(14 * var(--u)) calc(14 * var(--u)) no-repeat}
.nav-spacer{flex:1}
/* X / Telegram hang from the top edge like clip tags on the binder */
.clips{display:flex;align-self:flex-start;gap:calc(10 * var(--u))}
.clip{display:flex;align-items:center;gap:calc(8 * var(--u));height:calc(46 * var(--u));padding:calc(6 * var(--u)) calc(20 * var(--u)) 0;background:var(--surface);border-radius:0 0 calc(12 * var(--u)) calc(12 * var(--u));font:600 max(12px, calc(15 * var(--u)))/1 var(--font-body);color:var(--ink);white-space:nowrap;transition:transform var(--dur) var(--ease)}
.clip::before{content:"";width:calc(6 * var(--u));height:calc(6 * var(--u));border-radius:50%;background:var(--yellow-ink)}
.clip:hover{transform:translateY(calc(3 * var(--u)))}
a.is-soon{cursor:default}

/* ---- footer F9: the rota index — one card per route, then sources + boundary ---- */
.foot{background:var(--footer);color:var(--ink);padding:calc(22 * var(--u)) var(--gutter-r) calc(30 * var(--u)) var(--gutter-l)}
.foot p{margin:0}
.foot-index{display:grid;grid-template-columns:1.15fr repeat(5,1fr);gap:calc(16 * var(--u));align-items:stretch}
.foot-cover{display:flex;flex-direction:column;justify-content:space-between;gap:calc(14 * var(--u));padding:calc(4 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)) 0}
.foot-cover p{font:400 max(12px, calc(14 * var(--u)))/1.4 var(--font-body);color:#5E5652}
.foot-social{display:flex;gap:calc(18 * var(--u));font:600 max(12px, calc(15 * var(--u)))/1 var(--font-body)}
.foot-social a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:max(1px, calc(1.1 * var(--u)))}
.icard{display:flex;flex-direction:column;gap:calc(10 * var(--u));padding:calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));background:var(--surface);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.icard:hover{transform:translateY(-2px);box-shadow:0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(120,60,40,.12)}
.icard-top{display:flex;align-items:center;gap:calc(9 * var(--u));font:700 max(13px, calc(19 * var(--u)))/1 var(--font-display)}
.icard-top::before{content:"";width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:50%;background:var(--ink-mute)}
.icard-top i{margin-left:auto;font:500 max(11px, calc(12 * var(--u)))/1 var(--font-mono);font-style:normal;color:var(--ink-mute)}
.icard p{font:400 max(12px, calc(14 * var(--u)))/1.4 var(--font-body);color:#5E5652}
.icard.is-active,.icard[aria-current="page"]{background:var(--paper)}
.icard.is-active .icard-top::before,.icard[aria-current="page"] .icard-top::before{background:var(--teal)}
.icard.is-active .icard-top i,.icard[aria-current="page"] .icard-top i{color:var(--teal)}
.foot-base{display:grid;grid-template-columns:auto 1fr auto;gap:calc(32 * var(--u));align-items:center;margin-top:calc(26 * var(--u));padding-top:calc(20 * var(--u))}
.foot-line{font:600 max(12px, calc(16 * var(--u)))/1.35 var(--font-display)}
.foot-src{font:400 max(12px, calc(14 * var(--u)))/1.4 var(--font-body);color:#5E5652}
.foot-ca{display:flex;align-items:center;gap:calc(12 * var(--u));white-space:nowrap;font:500 max(12px, calc(14 * var(--u)))/1 var(--font-body)}
.foot-ca span{font-family:var(--font-mono)}
.foot-copy{padding:calc(8 * var(--u)) calc(14 * var(--u));font:500 max(12px, calc(14 * var(--u)))/1 var(--font-body)}
.foot-copy:disabled{opacity:.6;cursor:default}
.icard{position:relative}
.icard.is-active::after,.icard[aria-current="page"]::after{content:"";position:absolute;left:calc(18 * var(--u));width:calc(56 * var(--u));top:0;height:calc(4 * var(--u));background:var(--teal);border-radius:0 0 calc(3 * var(--u)) calc(3 * var(--u))}

/* ---- MOTION: "punch the clock" — a card is stamped into its slot: drops in, settles, one soft press ---- */
.js [data-punch]{opacity:0;transform:translateY(calc(-14 * var(--u))) scale(.985)}
.js [data-punch].is-punched{opacity:1;transform:none;transition:opacity var(--dur) var(--ease),transform 320ms cubic-bezier(.2,.9,.25,1.12);transition-delay:calc(var(--i,0) * 80ms)}
/* hour ruler: a teal tick sweeps left→right once when the ruler enters view, then rests on the current hour */
[data-ruler]{position:relative;overflow:hidden}
[data-ruler]::after{content:"";position:absolute;left:0;top:0;bottom:0;width:max(2px, calc(3 * var(--u)));background:var(--teal);transform:translateX(var(--ruler-x,0));opacity:0}
[data-ruler].is-swept::after{opacity:.85;animation:ruler-sweep 1400ms var(--ease) both}
@keyframes ruler-sweep{from{transform:translateX(0);opacity:.85}to{transform:translateX(var(--ruler-w,100%));opacity:0}}
/* tick numbers: mono digits that roll to value (helper sets textContent), rates ease in with a settle */
[data-tick]{font-variant-numeric:tabular-nums}
/* hover: lift 2px like a card taken off the rota */
.lift{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.lift:hover{transform:translateY(-2px);box-shadow:0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(120,60,40,.12)}
/* grow-in: bars/timeline fills grow from the left edge like a shift being logged */
.js [data-grow]{transform-origin:left center;transform:scaleX(0)}
.js [data-grow].is-punched{transform:scaleX(1);transition:transform 520ms var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
/* live tick: a tiny dot that pulses once per read block */
[data-blockpulse]{animation:blockpulse 2400ms var(--ease) infinite}
@keyframes blockpulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-punch],.js [data-grow]{opacity:1;transform:none}
  [data-ruler]::after{display:none}
}

/* ---- mobile ---- */
@media (max-width:1023px){
  :root{--u:1px;--gutter-l:16px;--gutter-r:16px;--nav-h:auto}
  .nav{height:auto;flex-wrap:wrap;align-items:flex-end;gap:0;padding:0 12px}
  .nav .brand{order:1;height:56px}
  .nav-spacer{order:2}
  .clips{order:3;gap:6px}
  .clip{height:38px;padding:4px 12px 0;font-size:13px}
  .tabs{order:4;width:100%;height:auto;margin:6px 0 0;gap:4px}
  .tab{flex:1 1 auto;justify-content:center;height:40px;padding:0 6px;font-size:13px;gap:0;border-radius:10px 10px 0 0}
  .tab i,.tab::before{display:none}
  .tab:hover{height:40px}
  .tab.is-active,.tab[aria-current="page"]{height:46px}
  .tab.is-active::after,.tab[aria-current="page"]::after{display:none}
  .foot{padding:28px 16px 24px}
  .foot-index{grid-template-columns:1fr 1fr;gap:10px}
  .foot-cover{grid-column:1/-1}
  .foot-base{grid-template-columns:1fr;gap:12px}
  .foot-ca{flex-wrap:wrap}
}