/* RewireDev HR -- one stylesheet for the People and Delivery workspaces.
   Tokens first, then the shell, then components in the order a page is read.
   Every colour below is a token from docs/design-system.md; new rules use the
   token, never the literal. Semantic status pairs live in the "Badges" block. */

@font-face{font-family:Outfit;src:url('brand/outfit.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  /* colour */
  --ink:#1d2939;--muted:#667085;--line:#eaecf0;--brand:#0045e6;--brand-dark:#0038be;--dark:#1e1d28;
  --green:#167857;--amber:#a45a12;--rose:#b63b51;--violet:#8057a6;
  --surface:#fff;--surface-sub:#f9fbfc;--surface-hover:#f3f5f8;--control-line:#dce0e7;--icon:#7d8798;
  --danger:#b42318;--danger-dark:#912018;--th:#5f6b7d;--brand-tint:#edf2ff;--brand-line:#b2c8ff;
  /* rail */
  --rail-ink:#d4d4dc;--rail-muted:#8f8e9c;--rail-hover:#ffffff0d;--rail-active:#34333f;--rail-line:#ffffff14;
  /* rhythm */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;
  --r-sm:4px;--r-md:6px;--r-lg:8px;
  --rail-w:232px;--top-h:56px;--row-h:48px;
  --t-fast:120ms;--t-normal:180ms;--t-emph:240ms;--ease:cubic-bezier(.2,0,0,1);
  --lift:0 12px 32px #14213626,0 1px 2px #1421361a;
}

/* ---------- base ---------- */
*{box-sizing:border-box;letter-spacing:0}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--surface);font:14px/1.45 Outfit,system-ui,sans-serif;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:default}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)}
::selection{background:var(--brand-tint);color:var(--ink)}
h1,h2,h3,strong{font-weight:600}
h1,h2,h3{margin:0;line-height:1.25;text-wrap:balance}
h1{font-size:22px}
h2{font-size:16px}
h3{font-size:13px}
p{line-height:1.5;margin:6px 0}
small{font-size:12px}
.muted,.cell-sub{color:var(--muted)}
.eyebrow{display:none}
.separator{margin:0 var(--s1);color:var(--icon)}
.lucide{width:16px;height:16px;flex-shrink:0;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;top:-60px;left:16px;background:var(--surface);padding:12px;z-index:100;border:1px solid var(--line);border-radius:var(--r-md)}
.skip-link:focus{top:8px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#495b7a;background:var(--surface-sub);padding:1px 4px;border-radius:var(--r-sm);overflow-wrap:anywhere}

/* ---------- rail ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--rail-w);background:var(--dark);color:var(--rail-ink);display:flex;flex-direction:column;padding:14px 12px 12px;z-index:20}
.workspace{display:flex;gap:10px;align-items:center;padding:4px 6px 14px}
.workspace-symbol{display:grid;place-items:center;background:var(--brand);color:#fff;width:30px;height:30px;border-radius:var(--r-md);flex-shrink:0}
.workspace-symbol .lucide{width:16px;height:16px}
.workspace strong{display:block;font-size:15px;color:#fff;line-height:1.2}
.workspace small{display:block;color:var(--rail-muted);font-size:11px;margin-top:2px}
.sidebar nav{flex:1;overflow-y:auto;scrollbar-width:thin;min-height:0}
.nav-label{color:var(--rail-muted);font-size:10.5px;font-weight:600;margin:14px 10px 4px}
.nav-item{display:flex;align-items:center;gap:10px;min-height:34px;padding:6px 10px;margin:1px 0;border-radius:var(--r-md);font-size:13.5px;color:var(--rail-ink);transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.nav-item .lucide{width:16px;height:16px;color:var(--rail-muted)}
.nav-item:hover{background:var(--rail-hover);color:#fff}
.nav-item.active{background:var(--rail-active);color:#fff;font-weight:600}
.nav-item.active .lucide{color:#a8c4ff}
.sidebar :focus-visible{outline-color:#a8c4ff}
.nav-sub{margin:2px 0 6px 16px;padding-left:8px;border-left:1px solid var(--rail-line)}
.nav-item.sub{min-height:30px;padding:5px 8px;font-size:13px;color:var(--rail-muted)}
.nav-item.sub .lucide{width:14px;height:14px}
.nav-item.sub.active{background:var(--rail-hover);color:#fff;font-weight:600}
.sidebar nav.workspace-switch{flex:none;overflow:visible;display:flex;gap:2px;padding:3px;margin:0 2px 6px;background:#ffffff0a;border-radius:var(--r-lg)}
.workspace-switch a{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;min-height:30px;min-width:0;padding:4px 5px;border-radius:var(--r-md);font-size:12px;font-weight:600;color:var(--rail-muted);white-space:nowrap}
.workspace-switch a span{overflow:hidden;text-overflow:ellipsis}
.workspace-switch a:hover{color:#fff}
.workspace-switch a.active{background:var(--brand);color:#fff}
.workspace-switch .lucide{width:14px;height:14px}
.sidebar-bottom{border-top:1px solid var(--rail-line);display:flex;gap:8px;align-items:center;padding:12px 4px 0;margin-top:8px}
.account-avatar{width:30px;height:30px;background:#46445a;display:grid;place-items:center;border-radius:50%;flex-shrink:0;color:#fff;font-size:12px;font-weight:600}
.account-name{min-width:0;flex:1}
.account-name strong{display:block;font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-name small{color:var(--rail-muted);font-size:11px}
.account-name small a{color:inherit}
.icon-button.light{color:var(--rail-ink)}
.icon-button.light:hover{background:var(--rail-hover);border-color:transparent}

/* ---------- top bar and page ---------- */
.app-shell{margin-left:var(--rail-w);min-height:100dvh;display:flex;flex-direction:column}
.topbar{height:var(--top-h);padding:0 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:16px;background:var(--surface)}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:13px;min-width:0}
.breadcrumb>span{color:var(--muted)}
.breadcrumb>.lucide{width:14px;color:var(--icon)}
.breadcrumb>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-tools{display:flex;align-items:center;gap:12px;margin-left:auto}
.official-brand{display:flex;align-items:center;background:var(--dark);padding:9px 14px;border-radius:var(--r-md);flex-shrink:0}
.official-brand img{width:132px;height:auto;display:block}
.content{width:100%;max-width:1480px;margin:0 auto;padding:20px 24px 32px;flex:1}
#main:focus{outline:none}
#main[aria-busy='true']{opacity:.6;transition:opacity var(--t-fast) var(--ease)}
.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.page-heading>div:first-child{min-width:0}
.page-heading h1{overflow-wrap:anywhere}
.page-heading p{font-size:13px;margin:3px 0 0}
.heading-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}
.back-link{margin-bottom:10px}
.page-footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:12px;margin-top:var(--s8);font-size:11px;color:var(--muted)}

/* ---------- buttons ---------- */
.button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--control-line);background:var(--surface);color:var(--ink);border-radius:var(--r-md);min-height:34px;padding:6px 12px;font-weight:600;font-size:13px;white-space:nowrap;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.button:hover,.icon-button:hover{background:var(--surface-hover);border-color:#c3cad6}
.button:active,.icon-button:active{transform:translateY(1px)}
.button.primary{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:inset 0 -1px 0 #00000026}
.button.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.button.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.button.ghost:hover{color:var(--ink);background:var(--surface-hover)}
.button.small{position:relative;min-height:28px;padding:3px 10px;font-size:12px}
.icon-button{position:relative;width:32px;height:32px;min-height:32px;padding:0;flex-shrink:0;background:transparent;border-color:transparent;color:var(--muted)}
.icon-button:hover{color:var(--ink);border-color:var(--line)}
/* A 32px icon button and a 28px small button sit under the 44px minimum: the transparent
   pseudo-element grows the pointer target without moving a pixel of the dense rows they live in. */
.icon-button::after,.button.small::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px;min-width:44px}
.button .lucide{width:15px;height:15px}
.danger{color:var(--danger)}
.danger-solid{background:var(--danger);color:#fff;border-color:var(--danger)}
.danger-solid:hover{background:var(--danger-dark);border-color:var(--danger-dark)}
.text-link{display:inline-flex;align-items:center;gap:4px;color:var(--brand);font-size:13px;font-weight:600}
.text-link .lucide{width:14px;height:14px}
.text-link:hover{text-decoration:underline;text-underline-offset:3px}
.section-actions,.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.row-actions{flex-wrap:nowrap}
.spacer{flex:1}

/* ---------- metrics ---------- */
.overview-date{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}
.overview-date form{display:flex;align-items:center;gap:4px}
.overview-date input{min-height:34px}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:20px;background:var(--surface);overflow:hidden}
.metric{display:block;padding:14px 18px;min-height:0;text-decoration:none;color:inherit;border-left:1px solid var(--line);min-width:0}
.metric:first-child{border-left:0}
a.metric:hover{background:var(--surface-sub)}
.metric>div{display:flex;align-items:center;justify-content:space-between;gap:8px}
.metric span{font-size:12px;font-weight:600;color:var(--muted)}
.metric>strong{display:block;font-size:26px;line-height:1.15;margin:6px 0 2px;letter-spacing:0}
.metric>strong small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.metric>small{color:var(--muted);font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metric-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-sm)}
.metric-icon .lucide{width:14px;height:14px}
.blue{color:var(--brand);background:var(--brand-tint)}
.green{color:var(--green);background:#eaf7f0}
.violet{color:var(--violet);background:#f5effa}
.amber{color:var(--amber);background:#fff5e7}
.case-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- sections ---------- */
.band{margin-bottom:24px;min-width:0}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 0 10px;margin-bottom:0;border-bottom:1px solid var(--line)}
.section-heading>div{min-width:0}
.section-heading p{font-size:12.5px;margin:3px 0 0}
.section-heading .section-actions,.section-heading .row-actions{flex-shrink:0;align-self:center}
.overview-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:32px}
.attention-band{min-width:0}
#review-queue{scroll-margin-top:72px}
.legend{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.legend span{width:8px;height:8px;background:var(--brand);border-radius:2px}
.chart{height:184px;display:flex;gap:12px;padding:16px 4px 0}
.chart-column{flex:1;min-width:0;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;gap:6px;font-size:11px;border-radius:var(--r-sm)}
.chart-column:hover{background:var(--surface-sub)}
.chart-column>strong{color:var(--ink);font-size:12px}
.chart-column>span{color:var(--muted);width:100%;text-align:center;padding:6px 0 4px;border-top:1px solid var(--line)}
.bar-track{height:112px;width:100%;max-width:36px;position:relative;background:var(--surface-sub);border-radius:3px;overflow:hidden}
.bar-track meter{appearance:none;transform:rotate(-90deg);transform-origin:0 0;position:absolute;left:0;bottom:-36px;width:112px;height:36px;border:0;background:transparent}
.bar-track meter::-webkit-meter-bar{background:transparent;border:0;box-shadow:none}
.bar-track meter::-webkit-meter-optimum-value{background:var(--brand);border-radius:0}
.bar-track meter::-moz-meter-bar{background:var(--brand)}
.review-sub+.review-sub{margin-top:20px}
.review-sub-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 4px}
.review-sub-heading h3{font-size:13px;margin:0}
.queue-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);transition:background-color var(--t-fast) var(--ease)}
.queue-row:hover strong{color:var(--brand)}
.queue-row>div{flex:1;min-width:0}
.queue-row strong{display:block;font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.queue-row small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.queue-icon{width:28px;height:28px;display:grid;place-items:center;background:#fff5e7;border-radius:var(--r-md);color:var(--amber);flex-shrink:0}
.queue-icon .lucide{width:14px;height:14px}
.queue-row>.lucide{width:14px;color:var(--icon)}
.request-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:8px}
.request-item{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;min-width:0;transition:border-color var(--t-fast) var(--ease)}
.request-item:hover{border-color:var(--brand-line)}
.request-item strong{font-size:13px;overflow-wrap:anywhere}
.request-item>span:not(.badge){font-size:12px;color:var(--muted)}
.quiet-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:140px;padding:24px;text-align:center;color:var(--muted);white-space:normal}
.quiet-empty>.lucide{width:22px;height:22px;color:var(--icon);margin-bottom:4px}
.quiet-empty strong{color:var(--ink);font-size:13.5px}
.quiet-empty span{font-size:12.5px;max-width:48ch}
.quiet-empty .button{margin-top:10px}
.quiet-empty.compact{min-height:72px;padding:12px}
.quiet-empty.compact>.lucide{width:18px;height:18px}
.data-note{font-size:12px;color:var(--muted);line-height:1.55;max-width:88ch;margin:10px 0 0}
.facts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;padding:16px 0}
.facts-grid strong{font-size:13px}
.facts-grid p{font-size:12.5px;color:var(--muted);max-width:52ch;margin-top:3px}
.device-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;margin:0}
.device-facts>div{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
.device-facts dd{margin-top:3px}
.case-facts{margin-bottom:20px}

/* ---------- tables ---------- */
.table-caption{display:flex;gap:8px;align-items:center;padding:4px 0 10px;font-size:13.5px}
.table-caption>span{font-size:11px;color:var(--muted);background:var(--surface-hover);padding:2px 7px;border-radius:999px;font-weight:600}
.table-wrap{overflow:auto;max-width:100%;position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(90deg,var(--surface) 30%,transparent),linear-gradient(270deg,var(--surface) 30%,transparent) 100% 0,radial-gradient(farthest-side at 0 50%,#1421362e,transparent),radial-gradient(farthest-side at 100% 50%,#1421362e,transparent) 100% 0;background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
.table-wrap+.table-wrap{margin-top:12px}
.section-heading+.table-wrap,.section-heading+.table-caption,.section-heading+.filters,.section-heading+form{margin-top:12px}
table{border-collapse:collapse;width:100%;text-align:left;font-size:13px}
th{background:var(--surface-sub);color:var(--th);font-size:11.5px;font-weight:600;padding:9px 12px;white-space:nowrap;box-shadow:inset 0 -1px 0 var(--line);text-align:left}
th:first-child,td:first-child{padding-left:16px}
th:last-child,td:last-child{padding-right:16px}
td{padding:8px 12px;height:var(--row-h);border-top:1px solid var(--line);line-height:1.35;white-space:nowrap;vertical-align:middle}
tbody tr:first-child td{border-top:0}
tbody tr{transition:background-color var(--t-fast) var(--ease)}
tbody tr:hover{background:var(--surface-sub)}
.numeric{text-align:right}
.wrap{white-space:normal;min-width:170px;max-width:360px;overflow-wrap:anywhere}
.cell-sub{display:block;font-size:11.5px;margin-top:2px;white-space:normal}
.person{display:flex;align-items:center;gap:10px;min-width:0}
.person>span:last-child{min-width:0}
.person strong{display:block;font-size:13px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person:hover strong{color:var(--brand)}
.avatar{width:28px;height:28px;display:grid;place-items:center;flex-shrink:0;background:var(--brand-tint);color:#3563ad;border-radius:50%;font-size:12px;font-weight:600}
.color-1{background:#f8eef3;color:#8f4460}
.color-2{background:#edf6f0;color:#3f6f51}
.color-3{background:#f4effb;color:#6f4f92}
.avatar.large{width:52px;height:52px;font-size:20px}
.arrival-value{font-size:15px;font-weight:600;color:var(--brand)}
.empty{padding:32px;text-align:center;color:var(--muted);white-space:normal}
tr.row-flagged td:first-child{box-shadow:inset 3px 0 0 var(--rose)}
.cell-short{color:#b34454;background:#fdf1f2;font-weight:600}
.cell-met{color:#23784e}
.cell-off{color:#9aa1ab;background:#f6f7f9}
.pill{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px;background:#fff5e5;color:#9e6414;vertical-align:middle}
.pagination{display:flex;justify-content:space-between;align-items:center;padding:10px 0 0;color:var(--muted);font-size:12px;gap:8px}
.pagination>div{display:flex;gap:4px}
.pagination .icon-button{border-color:var(--line)}
@media (min-width:1000px){
  .table-wrap:has(tbody tr:nth-child(12)){max-height:calc(100vh - 200px)}
  .table-wrap:has(tbody tr:nth-child(12)) thead th{position:sticky;top:0;z-index:1}
}
.sticky-lead th:first-child,.sticky-lead td:first-child{position:sticky;left:0;background:var(--surface);z-index:1}
.sticky-lead th:first-child{background:var(--surface-sub);z-index:2}
.sticky-lead tbody tr:hover td:first-child{background:var(--surface-sub)}
.roster-table td{vertical-align:top;min-width:132px;white-space:normal}
.roster-table th:first-child,.roster-table td:first-child{min-width:200px}
.roster-table strong{font-size:12.5px}
.roster-status{margin-top:4px}

/* ---------- badges: text plus a tint; never colour alone ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;line-height:1.2;padding:3px 8px;border-radius:999px;background:#f1f3f6;color:#5b6472;white-space:nowrap;border:1px solid #0000000d}
.badge:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge.active,.badge.present,.badge.success,.badge.approved,.badge.done,.badge.configured,.badge.create,.badge.resolved,.badge.context-recorded,.badge.exact-email-match,.badge.already-linked,.badge.productive,.badge.enabled,.badge.on-track,.badge.paid,.badge.internal{background:#eaf7ef;color:#23784e}
.badge.late,.badge.pending,.badge.open,.badge.awaiting-punch,.badge.onboarding,.badge.correction,.badge.paused,.badge.hr-review,.badge.would-ask,.badge.at-risk,.badge.not-invoiced,.badge.normal{background:#fff5e5;color:#9e6414}
.badge.on-leave,.badge.admin,.badge.in-progress,.badge.transactional,.badge.pending-wfh{background:#f2edfa;color:#8056a7}
.badge.failed,.badge.no-punches,.badge.rejected,.badge.delete,.badge.unproductive,.badge.blocked,.badge.suspicious{background:#feeff0;color:#b34454}
.badge.device,.badge.manager,.badge.available-locally,.badge.awaiting-arrival,.badge.notice-recorded,.badge.invoiced,.badge.client,.badge.important,.badge.remote,.badge.wfh{background:var(--brand-tint);color:#3b64b4}
.badge.disabled,.badge.written-off,.badge.newsletter,.badge.low,.badge.unclassified{background:#f1f3f6;color:#5b6472}

/* ---------- filters and forms ---------- */
.filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 10px;padding:0 0 14px;margin-bottom:4px}
.filters>label{gap:4px}
label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:#4b5567}
/* 16px inputs are not a taste call: iOS Safari force-zooms a focused input below it. Desktop
   gets 14px through the media query at the end of this block. */
input,select,textarea{border:1px solid var(--control-line);border-radius:var(--r-md);padding:6px 10px;color:var(--ink);min-height:38px;background:var(--surface);max-width:100%;min-width:0;font-size:16px;font-weight:400;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
input:hover,select:hover,textarea:hover{border-color:#c3cad6}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #0045e61f;outline:none}
input::placeholder,textarea::placeholder{color:#98a2b3;opacity:1}
input{caret-color:var(--brand)}
textarea{resize:vertical;line-height:1.5}
select{padding-right:28px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
select[multiple]{background-image:none}
input[type=date],input[type=time],input[type=datetime-local]{min-width:0}
.filters input[type=date]{width:150px}
.filters select{max-width:200px;min-width:140px}
.filters .search-field{flex:1;min-width:180px;max-width:280px}
.search-field{display:flex;flex-direction:row;align-items:center;position:relative}
.search-field>.lucide{position:absolute;left:10px;color:var(--icon);width:15px;pointer-events:none}
.search-field input{width:100%;padding-left:32px;font-weight:400}
.filter-actions{display:flex;gap:4px;align-self:flex-end}
.filter-actions .icon-button{border-color:var(--control-line)}
.filter-shortcuts{display:flex;gap:6px;margin:-4px 0 14px;flex-wrap:wrap}
.shortcut{border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:12.5px;color:var(--muted);background:var(--surface);transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.shortcut:hover{color:var(--ink);border-color:#c3cad6}
.shortcut.current{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)}
.filter-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 14px}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:3px 9px;font-size:12px;color:var(--ink);background:var(--surface-sub)}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip .lucide{width:12px;height:12px}
@media (hover:hover) and (pointer:fine){input,select,textarea{font-size:14px}}
.stack{display:flex;flex-direction:column;gap:14px}
.form-footer{display:flex;justify-content:flex-end;padding-top:16px}
.settings-form{max-width:820px}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.setting-row strong{font-size:13.5px}
.setting-row p{font-size:12.5px;margin:2px 0 0;color:var(--muted);max-width:60ch}
.setting-row>input,.setting-row>select{flex-shrink:0}
.switch{position:relative;width:36px;height:22px;flex-shrink:0;gap:0}
.switch input{position:absolute;width:36px;height:22px;min-height:0;margin:0;opacity:0;z-index:2;cursor:pointer}
.switch span{position:absolute;inset:0;background:#cfd4dd;border-radius:999px;transition:background-color var(--t-fast) var(--ease)}
.switch span:after{content:'';width:16px;height:16px;position:absolute;top:3px;left:3px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform var(--t-fast) var(--ease)}
.switch input:checked+span{background:var(--brand)}
.switch input:checked+span:after{transform:translateX(14px)}
.switch input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.switch input:disabled+span{opacity:.5}
.number-input{width:88px}
.weekday-field{border:0;padding:0;margin:0;display:flex;gap:6px;flex-wrap:wrap}
.weekday-field legend{font-size:12px;font-weight:600;color:#4b5567;margin-bottom:6px;padding:0}
.weekday-field label{position:relative}
.weekday-field label input{position:absolute;opacity:0;width:40px;height:32px;margin:0;min-height:0;cursor:pointer}
.weekday-field label span{display:grid;place-items:center;width:40px;height:32px;border:1px solid var(--control-line);border-radius:var(--r-md);font-size:11.5px;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.weekday-field input:checked+span{background:var(--brand-tint);color:var(--brand);border-color:var(--brand-line);font-weight:600}
.weekday-field input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.checkbox-field{flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:10px;align-self:end;min-height:38px}
.form-grid .checkbox-field input,.checkbox-field input,.mapping-checkbox{width:18px;height:18px;min-height:0;accent-color:var(--brand);margin:0;flex:none}
/* Shift editor: the live overnight preview. Text, not colour, says "next day". */
.shift-preview{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-sub);min-height:40px}
.shift-preview strong{color:var(--ink)}
.shift-preview .lucide{color:var(--icon)}
.shift-preview.overnight{border-color:#fae9c5;background:#fffaf0}
.shift-preview.invalid{border-color:#f3d6d2;background:#fff2f1;color:var(--danger)}

/* ---------- notices and toast ---------- */
.notice{display:flex;gap:8px;align-items:center;background:#eff4ff;color:#365b9a;border:1px solid #dbe6fe;border-radius:var(--r-md);padding:10px 14px;margin-bottom:16px;font-size:13px;line-height:1.45}
.notice>span{flex:1}
.notice>.lucide{flex-shrink:0}
.notice a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.notice.warning{background:#fff9ee;color:#946422;border-color:#fae9c5}
.notice.error{background:#fff2f1;color:var(--danger);border-color:#f3d6d2}
.notice.success{background:#effaf3;color:#24744b;border-color:#d3ebdc}
p.notice{margin:0 0 12px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 18px;border-radius:var(--r-lg);max-width:calc(100% - 32px);background:var(--dark);color:#fff;box-shadow:var(--lift);font-size:13.5px;z-index:100}

/* ---------- dialogs ---------- */
dialog{border:1px solid var(--line);border-radius:10px;padding:0;width:600px;max-width:calc(100% - 24px);max-height:calc(100dvh - 32px);box-shadow:var(--lift);color:var(--ink);background:var(--surface)}
dialog::backdrop{background:#171d2a73;backdrop-filter:blur(2px)}
dialog[open]{display:flex;flex-direction:column}
dialog[open]>form,dialog[open]>div{display:flex;flex-direction:column;min-height:0;flex:1}
.dialog-heading{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);flex-shrink:0}
.dialog-heading h2{font-size:16px}
.dialog-body{padding:20px;overflow-y:auto;flex:1;min-height:0}
.dialog-footer{display:flex;gap:8px;align-items:center;justify-content:flex-end;border-top:1px solid var(--line);padding:12px 20px;background:var(--surface-sub);flex-shrink:0;border-radius:0 0 10px 10px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 14px}
.form-grid .wide{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea{width:100%}
.decision-summary{margin:0 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-sub)}
.decision-summary dl.summary-list{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0;padding:0}
.decision-summary dt{font-size:12px;font-weight:600;color:var(--muted);margin:0}
.decision-summary dd{margin:0;font-size:13px;overflow-wrap:anywhere}
dl{margin:0}
dl>div{display:flex;justify-content:space-between;gap:16px;padding:7px 0}
dt{font-size:12px;color:var(--muted)}
dd{margin:0;font-size:13px;overflow-wrap:anywhere}

/* ---------- profile ---------- */
.profile-band{display:flex;gap:20px;align-items:center;padding:4px 0 20px;flex-wrap:wrap}
.profile-band>div{flex:1;min-width:220px}
.profile-band h2{font-size:18px}
.profile-band p{font-size:13px;color:var(--muted);margin:3px 0 8px}
.profile-band dl{min-width:260px;flex:1 1 320px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.profile-band dd{max-width:260px;text-align:right}

/* ---------- integrations and settings pages ---------- */
.integration-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.integration{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;min-width:0}
.integration-heading{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.integration-heading>div{flex:1;min-width:0}
.integration-heading h2{font-size:15px}
.integration-heading p{font-size:12px;margin:2px 0 0}
.integration-symbol{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-md);flex-shrink:0}
.integration-symbol .lucide{width:18px;height:18px}
.integration-symbol.slack{background:#f6eff7;color:#6a3568}
.integration-symbol.claude{background:#f9efea;color:#95523a}
.integration-symbol.tracker{background:var(--brand-tint);color:#3b64b4}
.integration-enroll{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:4px 0 12px}
.integration dl>div{border-bottom:1px solid var(--line);padding:8px 0}
.integration dd{text-align:right}
.integration-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.integration .table-wrap{margin-top:12px}
details{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:16px;border-top:1px solid var(--line);padding-top:10px}
summary{cursor:pointer;color:var(--ink);font-weight:600}
.capture-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:16px 0}
.capture{margin:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.capture img{display:block;width:100%;height:auto;background:#f2f3f6}
.capture figcaption{font-size:12px;color:var(--muted);padding:6px 10px;border-top:1px solid var(--line)}
.capture-missing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:16/10;color:var(--muted);background:#f7f8fa;font-size:12px}
.capture-missing .lucide{width:20px;height:20px;color:#8da2bb}

/* ---------- cases ---------- */
.case-mode{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:12px}
.case-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:32px}
.case-layout>section{min-width:0}
.review-form{padding-top:14px}
.case-layout .form-footer{padding-top:0}
.case-timeline{list-style:none;padding:0;margin:0}
.case-timeline>li{border-bottom:1px solid var(--line);padding:14px 0}
.timeline-heading{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;font-size:13.5px}
.timeline-heading time{font-size:12px;color:var(--muted)}
.case-timeline p{font-size:12px;overflow-wrap:anywhere;margin:2px 0 4px}
.case-timeline dl>div{padding:3px 0}
.case-timeline dt{flex:0 0 110px}
.case-timeline dd{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0;text-align:right}

/* ---------- Slack mapping ---------- */
.slack-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.slack-field small{overflow-wrap:anywhere;font-size:12px}
.slack-search-row{display:flex;align-items:center;gap:6px;min-width:0}
.slack-search-row>input,.slack-search-row>.search-field{flex:1;min-width:0;max-width:none}
.slack-search-row>.icon-button{border-color:var(--control-line)}
.slack-member-results{height:300px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--r-md)}
.slack-member-option{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;width:100%;padding:10px 12px;border:0;border-bottom:1px solid var(--line);background:var(--surface);overflow-wrap:anywhere}
.slack-member-option:hover:not(:disabled){background:var(--brand-tint)}
.slack-member-option:disabled{opacity:.55;cursor:not-allowed}
.slack-member-option strong{font-size:13px}
.slack-member-option span{font-size:12.5px}
.slack-member-option small{font-size:12px;color:var(--muted)}
.mapping-footer{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:16px;background:var(--surface);border-top:1px solid var(--line);padding:10px 0;margin-top:12px;font-size:13px;flex-wrap:wrap}

/* ---------- auth and onboarding ---------- */
.auth-shell{min-height:100dvh;background:var(--surface-sub);padding:48px 24px}
.auth-brand{background:var(--dark);padding:14px 22px;width:max-content;max-width:100%;margin:0 auto 40px;border-radius:var(--r-md)}
.auth-brand img{display:block;max-width:100%;height:auto}
.auth-form{max-width:400px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:28px}
.auth-form h1{font-size:22px}
.auth-form>p{margin:6px 0 20px}
.auth-form .button{margin-top:4px;width:100%}
.auth-form .stack{gap:12px}
.slack-button{margin-top:8px}
.slack-button img{width:18px;height:18px}
.auth-footer{text-align:center;font-size:12px;color:var(--muted);margin-top:28px}
.onboarding-page{max-width:560px;margin:0 auto}
.onboarding-page h1{font-size:22px}
#tracker-download{min-width:0;overflow:hidden}
#tracker-download span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onboarding-step{min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin:0 0 16px}
.onboarding-step input,.onboarding-step textarea,.profile-form input,.profile-form textarea{width:100%;min-width:0}
.onboarding-step legend{float:none;display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:var(--ink);padding:0 8px;margin-left:-4px}
.onboarding-step .step-number{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;font-weight:600;line-height:1}
.onboarding-step>p{margin:4px 0 16px;font-size:12.5px;color:var(--muted)}
.onboarding-step label,.profile-form label{display:flex;flex-direction:column;gap:5px;margin:0 0 16px}
.onboarding-step label:last-child,.profile-form label:last-child{margin-bottom:0}
.onboarding-step label small,.profile-form label small{order:3;margin-top:2px;font-weight:400;font-size:12px;color:var(--muted)}
.onboarding-page .onboarding-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.profile-form .band{margin-bottom:16px}
.profile-form .band label{padding-top:12px}
.sidebar-bottom a.account-avatar{text-decoration:none}
.empty-state{padding:48px 0;max-width:640px}
.empty-state p{margin:16px 0}

/* ---------- mail triage ---------- */
.inline-form-toggle{margin:0;padding:0;border:0;font-size:13px;color:var(--ink)}
.inline-form-toggle>summary{list-style:none}
.inline-form-toggle>summary::-webkit-details-marker{display:none}
.inline-form-toggle[open]{position:relative}
.inline-form-toggle .settings-form{position:absolute;right:0;z-index:20;margin-top:8px;width:420px;max-width:80vw;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift);padding:4px 16px 14px}
.row-menu{margin:0;padding:0;border:0;position:relative;font-size:13px;color:var(--ink)}
.row-menu>summary{list-style:none;display:inline-grid}
.row-menu>summary::-webkit-details-marker{display:none}
.row-menu .label-form{position:absolute;right:0;z-index:20;margin-top:6px;display:flex;gap:6px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--lift);padding:10px}
.row-menu .label-form select{min-width:120px}
.rule-add-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 12px}
.rule-add-form input[name=pattern]{flex:1;min-width:220px}
.mail-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:20px}
.mail-stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.mail-stat-card h3{font-size:12.5px;margin:0 0 8px;color:var(--muted)}
.stat-row{display:grid;grid-template-columns:minmax(90px,auto) 1fr 40px;gap:10px;align-items:center;padding:3px 0;font-size:12px}
.stat-row .stat-count{text-align:right;color:var(--muted)}
.stat-row progress{height:6px;width:100%;appearance:none;-webkit-appearance:none;border:0;background:var(--surface-hover);border-radius:3px;overflow:hidden}
.stat-row progress::-webkit-progress-bar{background:var(--surface-hover);border-radius:3px}
.stat-row progress::-webkit-progress-value{background:var(--brand);border-radius:3px}
.stat-row progress::-moz-progress-bar{background:var(--brand);border-radius:3px}
.password-reveal{padding:24px}
.password-reveal h2{margin:0 0 8px;font-size:17px}
.password-reveal .password-value{display:block;margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-sub);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.04em;user-select:all;overflow-wrap:anywhere}
.password-reveal .reveal-warning{color:var(--amber)}
dialog[open].password-reveal>.reveal-actions{display:flex;flex-direction:row;flex:0 0 auto;gap:8px;justify-content:flex-end;margin-top:16px}
.password-reveal .reveal-actions .button{width:auto}

/* ---------- attachments ---------- */
.attachments{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.attachments h3{font-size:13px;margin:0 0 10px}
.attachment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-bottom:10px}
.attachment-tile{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;background:var(--surface)}
.attachment-open{border:0;background:var(--surface-sub);aspect-ratio:1;display:grid;place-items:center;padding:0;cursor:pointer;width:100%}
.attachment-open img{width:100%;height:100%;object-fit:cover}
.attachment-open .lucide{width:24px;height:24px;color:var(--icon)}
.attachment-tile .attachment-name{font-size:11px;padding:5px 7px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachment-tile .icon-button{align-self:flex-end;width:28px;height:28px;min-height:28px}
.dropzone{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px dashed var(--control-line);border-radius:var(--r-md);padding:12px 14px;color:var(--muted);font-size:12.5px}
.dropzone .lucide{width:16px;color:var(--icon)}
#attachment-preview{width:auto;max-width:calc(100% - 24px)}
#attachment-preview-body{padding:0;display:flex;justify-content:center;background:#12141c}
#attachment-preview-body img{max-width:80vw;max-height:80vh;display:block}
#attachment-preview-body embed{width:80vw;height:80vh}
#attachment-preview-body a{padding:40px;color:#fff}

/* ---------- Delivery boards ---------- */
/* Columns scroll sideways inside the board; the page never does. A card is title first,
   then who and when; the blocker reason sits inside the card in words. */
.board,.lanes{display:flex;gap:12px;overflow-x:auto;position:relative;padding:2px 2px 12px;align-items:flex-start;scrollbar-width:thin;scroll-snap-type:x proximity}
.column,.lane{flex:0 0 272px;background:var(--surface-sub);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px;min-width:0;scroll-snap-align:start}
.lane:has(.empty){flex-basis:200px}
.column>header,.lane>header{display:flex;align-items:center;gap:6px;padding:4px 6px 8px;font-size:13px;min-height:32px}
.column>header strong,.lane>header{font-weight:600}
.column>header .count,.lane>header .count{font-size:11px;color:var(--muted);background:#e9edf3;padding:1px 7px;border-radius:999px;font-weight:600}
.column>header .icon-button{margin-left:auto;width:28px;height:28px;min-height:28px}
.lane>header .pill{margin-left:auto}
.column.over-limit{border-color:#e6c98a;background:#fffaf0}
.column>.pill{display:block;margin:0 6px 8px}
.drop{display:flex;flex-direction:column;gap:6px;min-height:48px}
.drop.drop-target{outline:2px dashed var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 10px 8px;font-size:13px;cursor:grab;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.card:hover{border-color:#c3cad6;box-shadow:0 1px 2px #1421360f}
.card.dragging{opacity:.45}
.card.blocked{border-color:#f3d6d2;background:#fffafa}
.card-top{display:flex;align-items:flex-start;gap:6px}
.card-top strong{flex:1;min-width:0;line-height:1.35;overflow-wrap:anywhere;font-weight:500}
.card-top .icon-button{width:26px;height:26px;min-height:26px;margin:-4px -4px 0 0;opacity:.55}
.card:hover .card-top .icon-button,.card:focus-within .card-top .icon-button{opacity:1}
.card-meta{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:6px;font-size:11.5px;color:var(--muted)}
.card-meta .unassigned{color:#9e6414;font-weight:600}
.blocker{display:flex;gap:6px;align-items:flex-start;margin:8px 0 0;padding:6px 8px;border-radius:var(--r-sm);background:#feeff0;font-size:12px;color:#b34454;line-height:1.4;overflow-wrap:anywhere}
.blocker .lucide{width:13px;height:13px;flex-shrink:0;margin-top:2px}
.pri{font-size:10.5px;font-weight:600;color:var(--muted);padding:1px 6px;border-radius:999px;background:#eceff4}
.pri-1{color:#b34454;background:#feeff0}
.pri-2{display:none}
.card-block{display:flex;gap:6px;margin-top:8px}
.card-block input{font-size:12px;min-height:30px;padding:4px 8px;flex:1;min-width:0}
.card-block .button,.move-form .button{flex:none}
.blocker-disclosure{margin:4px 0 0;border:0;padding:0;font-size:12px}
.blocker-disclosure summary{cursor:pointer;font-size:11.5px;font-weight:600;color:var(--muted);padding:4px 0 0;list-style:none;display:inline-block}
.blocker-disclosure summary:hover{color:var(--ink)}
.blocker-disclosure summary::-webkit-details-marker{display:none}
.blocker-disclosure .card-block{flex-direction:column}
.blocker-disclosure label{display:block;font-size:12px;font-weight:600}
.card>form.card-block{margin-top:6px}
.move-form{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.move-form select{font-size:12px;min-height:30px;padding:4px 26px 4px 8px;flex:1;min-width:0;background-color:var(--surface)}
.lane .card{cursor:default}
.lane .empty{padding:12px 4px;font-size:12px}
.lane>.quiet-empty.compact{min-height:56px}

/* ---------- Executive lead ---------- */
.lead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px;margin-bottom:16px;background:var(--surface)}
.lead-alarm{border-color:#f3d6d2}
.lead-calm{border-color:#d3ebdc}
.lead-main{min-width:0;flex:1 1 320px}
.lead-label{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;font-weight:600;color:var(--muted)}
.lead-label .lucide{width:15px;height:15px}
.lead-alarm .lead-label{color:var(--rose)}
.lead-calm .lead-label{color:var(--green)}
.lead-figure{margin:6px 0 2px;font-size:36px;line-height:1.1;font-weight:600;letter-spacing:0}
.lead-figure small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.lead-detail{margin:4px 0 0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.lead-detail strong{color:var(--ink)}
.lead-detail .text-link{font-size:13px}
.lead-side{display:flex;gap:28px;margin:0;flex:0 1 auto}
.lead-side dt{font-size:12px;color:var(--muted)}
.lead-side dd{margin:3px 0 0;font-size:18px;font-weight:600}

/* ---------- mobile stacked records (decision tables) ---------- */
@media (max-width:640px){
  .stack-records table,.stack-records tbody{display:block}
  .stack-records thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .stack-records tr{display:block;padding:12px 14px;border-top:1px solid var(--line)}
  .stack-records tr:first-child{border-top:0}
  .stack-records td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:0;padding:3px 0;height:auto;white-space:normal;text-align:left}
  .stack-records td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:12px;flex-shrink:0}
  .stack-records td.wrap{display:block;max-width:none;min-width:0}
  .stack-records td.wrap::before{display:block;margin-bottom:2px}
  .stack-records .record-lead{padding:0 0 6px;font-size:14px}
  .stack-records .row-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:8px}
  .stack-records tbody tr:hover{background:none}
  .stack-records{background:none}
}

/* ---------- responsive ---------- */
.mobile-menu{display:none}
@media (max-width:1180px){
  :root{--rail-w:208px}
  .content{padding:16px 20px 28px}
  .topbar{padding:0 20px}
  .overview-grid{grid-template-columns:minmax(0,1.25fr) minmax(250px,1fr);gap:20px}
  .heading-actions{max-width:320px}
  .device-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .integration-list{grid-template-columns:1fr}
}
@media (max-width:850px){
  :root{--rail-w:196px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric:nth-child(3){border-left:0}
  .metric:nth-child(n+3){border-top:1px solid var(--line)}
  .case-metrics .metric:nth-child(3){border-left:1px solid var(--line);border-top:0}
  .overview-grid{grid-template-columns:1fr;gap:8px}
  .page-heading{flex-direction:column;gap:12px}
  .heading-actions{max-width:none;justify-content:flex-start}
  .official-brand img{width:112px}
  .breadcrumb>span,.breadcrumb>.lucide{display:none}
  .facts-grid{grid-template-columns:1fr}
  .case-layout{grid-template-columns:1fr;gap:8px}
}
@media (max-width:640px){
  :root{--rail-w:232px}
  .sidebar{transform:translateX(-100%);transition:transform var(--t-emph) var(--ease);top:52px;padding-top:8px}
  .nav-open .sidebar{transform:translateX(0);box-shadow:var(--lift)}
  .app-shell{margin-left:0}
  .topbar{height:52px;padding:0 12px;position:sticky;top:0;z-index:30;gap:8px}
  .mobile-menu{display:inline-flex;color:var(--ink)}
  .breadcrumb{gap:4px}
  .breadcrumb>strong{font-size:14px}
  .official-brand{padding:7px 10px}
  .official-brand img{width:96px}
  #tracker-download{display:none}
  .content{padding:16px 16px 28px}
  .page-heading{gap:10px;margin-bottom:12px}
  h1{font-size:20px}
  .page-heading p{font-size:12.5px}
  .metrics{margin-bottom:16px}
  .metric{padding:12px 14px}
  .metric>strong{font-size:22px}
  .metric>small{white-space:normal}
  .metric-icon{display:none}
  .case-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .case-metrics .metric{padding:10px 8px}
  .overview-date input{width:140px}
  .filters{gap:8px}
  .filters>label{flex:1;min-width:calc(50% - 8px)}
  .filters select,.filters input{width:100%;max-width:none}
  .filters .search-field{max-width:none;flex-basis:100%}
  .form-grid{grid-template-columns:1fr}
  .form-grid .wide{grid-column:auto}
  .dialog-body{padding:16px}
  .dialog-heading,.dialog-footer{padding:12px 16px}
  .chart{gap:8px}
  .bar-track{max-width:28px}
  .bar-track meter{height:28px;bottom:-28px}
  .profile-band dl{grid-template-columns:1fr}
  .profile-band dd{max-width:200px}
  .request-grid{grid-template-columns:1fr}
  .device-facts{gap:0 12px}
  .device-facts dd{font-size:12px}
  .integration{padding:14px}
  .page-footer{flex-direction:column;font-size:11px}
  .notice{align-items:flex-start;font-size:12.5px}
  .notice a{white-space:normal}
  .setting-row{gap:12px}
  .auth-shell{padding:28px 16px}
  .auth-brand{margin-bottom:28px}
  .auth-form{padding:20px}
  .lead{padding:16px;gap:14px}
  .lead-figure{font-size:30px}
  .lead-side{gap:18px}
  .case-timeline dt{flex-basis:90px}
  .column,.lane{flex-basis:248px}
  .table-wrap{border-radius:var(--r-md)}
  .section-heading{flex-wrap:wrap;align-items:flex-start}
  .section-heading>div{flex:1 1 100%}
  .section-heading .section-actions,.section-heading .row-actions{align-self:auto}
  .section-heading>.badge,.section-heading>.button,.section-heading>form{margin-left:auto}
  .stack-records tr{padding:10px 12px}
}
@media (min-width:1600px){
  .content{padding-top:24px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.sidebar,.topbar,.filters,.heading-actions,.pagination{display:none}.app-shell{margin:0}}

/* ---------- finance ---------- */
.chart-column.over meter::-webkit-meter-optimum-value{background:var(--rose)}
.cat-row{display:grid;grid-template-columns:minmax(110px,150px) 1fr 90px;gap:var(--s3);align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.cat-row:last-child{border-bottom:0}
.cat-row .amount{text-align:right}
.util{display:flex;align-items:center;gap:var(--s2);min-width:160px}
.util progress{flex:1}
.cat-row progress,.util progress{height:8px;width:100%;appearance:none;-webkit-appearance:none;border:0;background:var(--surface-sub);border-radius:var(--r-sm);overflow:hidden}
.cat-row progress::-webkit-progress-bar,.util progress::-webkit-progress-bar{background:var(--surface-sub);border-radius:var(--r-sm)}
.cat-row progress::-webkit-progress-value,.util progress::-webkit-progress-value{background:var(--brand);border-radius:var(--r-sm)}
.cat-row progress::-moz-progress-bar,.util progress::-moz-progress-bar{background:var(--brand);border-radius:var(--r-sm)}
.util strong{width:38px;text-align:right;font-size:12.5px}
.what-if-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);padding:var(--s3) 0 0}
.what-if-form .filter-actions{grid-column:1/-1}
@media (max-width:640px){.stack-records .util{min-width:0;width:100%}.what-if-form{grid-template-columns:1fr}}
.staff-flag{display:flex;gap:var(--s3);align-items:flex-start;border:1px solid #fae9c5;background:#fff9ee;color:#946422;border-radius:var(--r-lg);padding:14px 16px;margin:var(--s3) 0 var(--s4)}
.staff-flag>.lucide{flex-shrink:0;width:18px;height:18px;margin-top:2px}
.staff-flag>div{min-width:0;flex:1}
.staff-flag strong{color:#7a5118}
.staff-flag p{margin:4px 0 0;font-size:13px}
.staff-flag .blocker-disclosure{margin-top:var(--s2)}
.staff-flag .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s3);margin:var(--s2) 0}
.staff-flag .form-grid label.wide{grid-column:1/-1}
.staff-flag .form-grid textarea{width:100%;min-height:56px}
@media (max-width:640px){.staff-flag .form-grid{grid-template-columns:1fr}}
.copyable{display:inline-block;margin-top:4px;padding:6px 10px;font-size:12.5px;user-select:all}
/* Monthly attendance (employee overview): status pairs from tokens, always with a text label. */
.month-stats .on_time{--swatch:var(--rd-status-confirmed-bg);--swatch-ink:var(--rd-status-confirmed-ink)}
.month-stats .early{--swatch:var(--rd-status-source-bg);--swatch-ink:var(--rd-status-source-ink)}
.month-stats .late{--swatch:var(--rd-status-attention-bg);--swatch-ink:var(--rd-status-attention-ink)}
.month-stats .wfh{--swatch:var(--rd-status-info-bg);--swatch-ink:var(--rd-status-info-ink)}
.month-stats .leave{--swatch:var(--rd-status-neutral-bg);--swatch-ink:var(--rd-status-neutral-ink)}
.month-stats .no_punch{--swatch:var(--rd-status-error-bg);--swatch-ink:var(--rd-status-error-ink)}
.month-stats .extra,.month-stats .holiday{--swatch:transparent;--swatch-ink:var(--muted);--swatch-line:var(--muted)}
.month-stats .off,.month-stats .pending{--swatch:transparent;--swatch-ink:var(--muted)}
.month-nav{display:flex;gap:6px}
.month-counts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 16px}
.month-count{display:block;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;margin:0;min-width:0}
.month-count dt{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.month-count dt::before,.month-legend span[class]::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--swatch-ink)}
.month-count dd{margin:4px 0 0;font-size:22px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.month-weekdays,.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;list-style:none;padding:0;margin:0}
.month-weekdays{margin-bottom:4px;font-size:11px;font-weight:600;color:var(--muted);text-align:center}
.month-day{min-height:58px;min-width:0;padding:6px;border-radius:var(--r-sm);display:flex;flex-direction:column;justify-content:space-between;background:var(--swatch,transparent);color:var(--swatch-ink,var(--muted));border:1px solid var(--line)}
.month-day.extra,.month-day.holiday{border-style:dashed;border-color:var(--swatch-line)}
.month-day.blank{border:0;background:none}
.month-date{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.month-label{font-size:11px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.month-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;font-size:12px}
.month-legend span{display:inline-flex;align-items:center;gap:6px}
@media (max-width:720px){.month-counts{grid-template-columns:repeat(3,minmax(0,1fr))}.month-day{min-height:50px;padding:4px}.month-label{font-size:10px}}
/* Employee overview: three tiles (first punch, last punch, pending time off) instead of four. */
.metrics.metrics-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.metrics.metrics-3{grid-template-columns:1fr}.metrics.metrics-3 .metric{border-left:0;border-top:1px solid var(--line)}.metrics.metrics-3 .metric:first-child{border-top:0}}
/* Employee check-in prompt (overview). */
.checkin-dialog{width:440px;padding:24px}
.checkin-dialog h2{margin:0 0 8px;font-size:17px}
.checkin-dialog p{margin:0 0 18px;color:var(--muted)}
dialog[open].checkin-dialog>.checkin-actions{flex-direction:row;justify-content:flex-end;flex-wrap:wrap;gap:8px;flex:none}
/* Day detail in the monthly calendar: a compact dark tooltip above the day on hover, keyboard
   focus or tap (CSS only). The day square is unchanged; a transparent button carries focus. */
.month-day { position: relative; }
.month-cell { position: absolute; inset: 0; width: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: default; }
.month-cell:focus-visible { outline: 2px solid var(--rd-color-brand); outline-offset: 1px; }
.month-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 30; width: max-content; max-width: 230px; padding: 8px 10px; border-radius: var(--rd-radius-md); background: var(--rd-color-navigation); color: #fff; font-size: 11.5px; line-height: 1.4; text-align: left; box-shadow: 0 6px 18px rgba(16, 24, 40, 0.22); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.12s ease, visibility 0s linear 0.12s; }
.month-pop::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--rd-color-navigation); }
.month-day.pop-start .month-pop { left: 0; transform: none; }
.month-day.pop-start .month-pop::after { left: 18px; }
.month-day.pop-end .month-pop { left: auto; right: 0; transform: none; }
.month-day.pop-end .month-pop::after { left: auto; right: 13px; }
.month-day:hover .month-pop, .month-day:focus-within .month-pop { visibility: visible; opacity: 1; transition: opacity 0.12s ease 0.15s, visibility 0s linear 0.15s; }
.month-pop strong { font-weight: 600; }
.month-pop dl { display: grid; gap: 1px; margin: 5px 0 0; }
.month-pop dl div { display: flex; justify-content: space-between; gap: 14px; margin: 0; padding: 0; border: 0; min-height: 0; }
.month-pop dt { color: rgba(255, 255, 255, 0.7); font-size: 11.5px; }
.month-pop dd { margin: 0; color: #fff; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.month-pop p { margin: 5px 0 0; max-width: 210px; color: rgba(255, 255, 255, 0.75); }
@media (prefers-reduced-motion: reduce) { .month-pop, .month-day:hover .month-pop, .month-day:focus-within .month-pop { transition: none; } }