/* Console additions on top of the prototype's stylesheet (app.css). Tokens only, so light and dark both hold. */

/* sign in */
.auth{min-height:100vh;display:grid;place-items:center;padding:32px 16px}
.authcard{width:100%;max-width:420px;padding:32px 28px 28px}
.authcard .brandrow{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-weight:680;font-size:16px}
.authcard h1{font-size:24px;font-weight:680;letter-spacing:-.015em}
.authcard .sub{color:var(--ink2);font-size:14.5px;margin:6px 0 20px}
.authcard form{display:flex;flex-direction:column;gap:14px}
.authcard .btn{height:44px;width:100%}
.authcard .field{height:44px;font-size:16px}
.authcard .codein{letter-spacing:.32em;font-family:var(--mono);font-size:20px;text-align:center}
.authcard .err{color:var(--red);font-size:13.5px}
.authcard .alt{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px;margin-top:16px}
.authcard .devnote{margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--surface2);color:var(--ink2);font-size:13px}
.authfoot{margin-top:18px;text-align:center;font-size:13.5px;color:var(--ink3)}
.authfoot a{color:var(--ink2)}

/* period stepper beside a page title */
.pnav{display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 2px;border:1px solid var(--line2);border-radius:var(--pill);background:var(--surface)}
.pnav .btn.icon{width:30px;height:30px}
.pnav span{padding:0 8px;font-size:13.5px;font-weight:560;white-space:nowrap}

/* rows of inputs in a drawer: punches and allocations */
.erow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;gap:8px;align-items:end;margin-top:8px}
.erow.al{grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) 90px 36px}
.erow .sel{width:100%;justify-content:space-between;height:38px}
.erow .sel span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsec+.dsec{margin-top:18px}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.formgrid .full{grid-column:1/-1}
.lbl .sel{width:100%;justify-content:space-between;height:38px}
.lbl small{font-weight:400;color:var(--ink3)}
textarea.field{height:auto;min-height:76px;padding:10px 12px;line-height:1.45;resize:vertical}
.field[type="time"],.field[type="date"]{min-width:0}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;font-size:14px}
.kv dt{color:var(--ink2)}
.kv dd{margin:0;font-weight:560}
.tierrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;gap:8px;align-items:end;margin-top:8px}
.loadcard{padding:36px 20px;text-align:center;color:var(--ink3)}
.errcard{display:flex;gap:12px;align-items:center;padding:16px 18px}
.errcard p{flex:1}
.cell-input{width:64px;text-align:right}
.findlist{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.findlist li{font-size:13px;color:var(--ink2)}
.pager{display:flex;justify-content:center;padding:14px}
.runbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.runbar .lbl{flex:0 1 180px}
.total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 20px;border-top:1px solid var(--line);font-weight:640}

@media (max-width:640px){
  .formgrid{grid-template-columns:minmax(0,1fr)}
  .erow.al{grid-template-columns:minmax(0,1fr) 80px 36px}
  .erow.al .tasksel{grid-column:1/-1;grid-row:2}
  .runbar .lbl{flex:1 1 140px}
  .authcard{padding:26px 20px 22px}
}

/* phones: a 16px side gutter, as on iOS */
@media (max-width:860px){.main{padding-left:16px;padding-right:16px}}
/* the week grid on a phone: name, total, status and Open; each day is one tap away in the person's drawer */
@media (max-width:640px){.tsweek th:nth-child(n+2):nth-child(-n+8),.tsweek td:nth-child(n+2):nth-child(-n+8){display:none}.tsweek td:first-child{min-width:130px}}
@media (max-width:640px){.xs-hide{display:none!important}}

/* board 2026-10-28: a card's description sits under its heading, never beside it */
.cardhd{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center}
.cardhd>h2{grid-column:1;grid-row:1}
.cardhd>.sub{grid-column:1;grid-row:2;margin:0}
.cardhd>.r{grid-column:2;grid-row:1/span 2;margin-left:0}
/* typed values are values, not labels; placeholders read as hints */
.field{font-weight:400}
.field::placeholder{color:var(--ink3);opacity:1;font-weight:400}
/* fields side by side line up on their boxes, whatever hint sits in the label */
.formgrid{align-items:end}
/* nested tiles in a drawer stand off the drawer in the dark */
[data-theme="dark"] .tsum>div{background:color-mix(in srgb,var(--ink) 7%,var(--surface))}
/* the week grid on a phone: tighter cells so name, total, status and Open fit */
@media (max-width:640px){
  .tsweek td:first-child{min-width:0}
  .tsweek td:first-child .faint.small{display:none}
  .tsweek th,.tsweek td{padding-left:8px;padding-right:8px}
  .tsweek th:first-child,.tsweek td:first-child{padding-left:16px}
}

/* board round two */
/* prompts in pickers ("Pick a person") read as prompts; picked values are regular weight */
.sel span{font-weight:400}
.sel.empty span,.sel[data-empty] span{color:var(--ink3)}
.kv dd{font-weight:400}
/* labels sit on one line; any hint goes under its field */
.lbl>small{order:3;font-size:12.5px}
.formgrid{align-items:start}
/* no one-word last lines */
p,.sub,.s,.empty,.notice,li,h4{text-wrap:pretty}
/* stat cards in a row keep label, value and caption on shared lines */
.statgrid{grid-auto-rows:auto}
.statgrid>.kpi{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:4px;align-content:start;min-height:0}
.statgrid>.kpi .v{align-self:end}
/* a warning reads as one */
.notice.warn{border-color:color-mix(in srgb,var(--amber,#B7791F) 45%,transparent);background:color-mix(in srgb,var(--amber,#B7791F) 10%,var(--surface))}
.notice.warn>svg{color:var(--amber,#B7791F)}
.noticeacts,.emptyacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.emptyacts{justify-content:center}
/* profile: one card per subject, both columns the same height */
.cols2.even{align-items:stretch}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
/* tables: names and customers stay on one line; long lists wrap */
.t td:first-child b{white-space:nowrap}
.wrapcell{display:block;max-width:420px}
/* the sidebar fits a 900px-tall window with every group in view */
@media (min-width:861px) and (max-height:1000px){.side .nav{padding:5px 10px}.side .nav.sub{padding:4px 10px}.side .grp{padding:9px 10px 2px}.side .kids{margin:1px 0 4px 18px}}
/* drawers hug their content, up to the window */
.drawer{top:12px;right:12px;bottom:auto;max-height:calc(100vh - 24px);border-radius:18px;border:1px solid var(--line2);transform:translateX(calc(100% + 24px))}
.drawer.on{transform:none}
/* toasts appear at the top, away from the action that raised them and the rows it changed */
.toast{top:16px;bottom:auto!important;transform:translate(-50%,-20px)}
.toast.on{transform:translate(-50%,0)}
.gochev{display:none}
.gochev svg{transform:scaleX(-1)}
@media (max-width:640px){
  .drawer{top:auto;bottom:0;right:0;width:100vw;max-height:92vh;border-radius:18px 18px 0 0;transform:translateY(100%)}
  .drawer.on{transform:none}
  .drawer .seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-radius:14px}
  .drawer .seg button{white-space:normal}
  .tab{padding:10px 9px}
  /* list rows instead of tables: name, then the few facts, then a chevron */
  .asrows thead{display:none}
  .asrows tbody tr{display:flex;align-items:center;gap:10px;padding:12px 8px 12px 16px;border-top:1px solid var(--line)}
  .asrows tbody td{padding:0!important;border:0}
  .asrows tbody td:first-child{flex:1;min-width:0}
  .asrows .rowgo{border:0;background:none;width:36px;height:44px;padding:0;justify-content:center}
  .asrows .gotxt{display:none}
  .asrows .gochev{display:inline-flex;color:var(--ink3)}
  .cmplans tbody tr{display:flex;align-items:center;gap:10px;padding:12px 8px 12px 16px;border-top:1px solid var(--line)}
  .cmplans thead{display:none}
  .cmplans tbody td{padding:0!important;border:0}
  .cmplans tbody td:first-child{flex:1;min-width:0}
  .cmplans td:first-child b{white-space:normal}
  .t td:first-child b{white-space:normal}
}
.noticeacts .btn{margin:0}
.notice.warn{align-items:flex-start}
.notice.warn>svg{margin-top:2px}
@media (max-width:640px){.asrows tbody tr:first-child,.cmplans tbody tr:first-child{border-top:0}}
.pad>.kv:first-child{margin-top:0}
/* board round three: the section list scrolls above a pinned Policies and Settings footer */
.side{overflow:hidden}
.side>.navsplit{display:flex;flex-direction:column;flex:1;min-height:0}
.navsplit>.navscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.navsplit>.navpin{flex:none}
/* a rate row uses the full width when it has no remove button */
.tierrow{display:flex;gap:8px;align-items:flex-end}
.tierrow>*{flex:1;min-width:0}
.tierrow>.btn.icon{flex:none}
/* rate rows: two equal columns across the full field; removing a rate is its own line */
.tierrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:end}
.tierrow>*{min-width:0}
.tierrow>.lbl[style*="grid-column"]{grid-column:1/-1!important}
.tierrm{margin-top:6px}
/* drawer tiles: four across, two by two on a phone */
@media (max-width:640px){.tsum{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the section list shows it scrolls: a thin bar and a fade at the cut edge */
.navsplit>.navscroll{scrollbar-width:thin;scrollbar-gutter:stable}
.navsplit>.navscroll.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
@media (min-width:861px) and (max-height:1000px){.side .nav{padding:4px 10px}.side .nav.sub{padding:3px 10px}.side .grp{padding:8px 10px 2px}.side .switcher{margin-bottom:4px}.navpin{margin-top:6px;padding-top:6px}}
.navsplit>.navscroll.less{-webkit-mask-image:linear-gradient(transparent,#000 28px);mask-image:linear-gradient(transparent,#000 28px)}
.navsplit>.navscroll.less.more{-webkit-mask-image:linear-gradient(transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(transparent,#000 28px,#000 calc(100% - 28px),transparent)}
/* a time range stays on one line */
.trange{white-space:nowrap}
/* destructive text action in drawers */
.mft .btn.ghost[data-v="deny"]{color:var(--red)}
/* phones: a drawer footer with three or more actions stacks them full width, primary first */
@media (max-width:640px){
  .drawer .mft:has(>.btn:nth-of-type(3)){flex-direction:column;align-items:stretch;gap:8px}
  .drawer .mft:has(>.btn:nth-of-type(3))>span{display:none}
  .drawer .mft:has(>.btn:nth-of-type(3))>.btn{width:100%;justify-content:center;margin:0}
}
/* My week */
.nowrap{white-space:nowrap!important}
.daycards{display:flex;flex-direction:column}
.daycard+.daycard{border-top:1px solid var(--line)}
.dayhd{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 16px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.dayhd>span:first-child{flex:1}
.dayn{font-weight:600;white-space:nowrap}
.daychev{display:inline-flex;color:var(--ink3);transform:rotate(180deg);transition:transform .2s var(--ease)}
.daycard.open .daychev{transform:rotate(-90deg)}
.daybd{display:flex;flex-direction:column;gap:10px;padding:0 16px 16px}
.dayrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dayrow .tsp{min-width:0}
.stepper{display:flex;align-items:center;gap:6px;flex:none}
.stepper .btn.icon{width:44px;height:44px;font-size:18px}
.stepper .hcell{width:56px;height:44px;text-align:center}
.daybd>.btn{align-self:flex-start}
/* phones: a time range may break after "to" (AM and PM stay with their time), so no row is pushed past its card */
@media (max-width:640px){.trange{white-space:normal}.clocktimes .t td:nth-child(2){min-width:0}.clocktimes .t td:last-child{padding-right:20px}}
/* Clock times on phones: day, then each range on its own line, then Fix times under them; no reserved column */
.clocktimes .trange{display:block;white-space:nowrap}
.xs-only{display:none}
@media (max-width:640px){
  .clocktimes .trange{white-space:nowrap}
  .xs-only{display:block;margin-top:8px}
  .clocktimes .t td:nth-child(2){padding-right:20px}
}