/* pages/attendance.css — Team attendance & shift reports (#/attendance). Tokens only: lint_css.js. */
.att-banner{display:block;background:var(--warn-soft);border:0.5px solid var(--warn-line);color:var(--warn);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4);font-size:var(--fs-md);line-height:1.55}
.att-banner strong{color:var(--warn);letter-spacing:.03em}
.att-banner code,.att-empty code,.att-method code,.att-note code{font-family:var(--font-mono);font-size:var(--fs-sm);background:rgba(var(--ink-rgb),.06);padding:1px 5px;border-radius:var(--r-sm);white-space:nowrap}
.att-controls{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:flex-end}
.att-ctl{display:flex;flex-direction:column;min-width:150px;flex:1 1 150px;max-width:260px}
.att-ctl .flabel{margin-bottom:var(--sp-1)}
.att-controls .btn{margin-bottom:2px}
.att-note{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);font-size:var(--fs-md);border:1px solid var(--line);background:var(--surface-2);color:var(--ink)}
.att-note.info{background:var(--info-wash);border-color:var(--info-line);color:var(--info)}
.att-note.warn{background:var(--warn-wash);border-color:var(--warn-line);color:var(--warn)}
.att-store-h{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
.att-store-h .muted{font-size:var(--fs-sm)}
.att-summary th.num,.att-summary td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.att-summary td.who{white-space:nowrap}
.att-summary tr.tot td{background:var(--surface-2);font-weight:700;color:var(--ink-strong)}
.att-bar{display:inline-block;vertical-align:middle;width:72px;height:8px;border-radius:var(--r-pill);background:var(--surface-3);position:relative;margin-right:var(--sp-2)}
.att-bar i{display:block;height:100%;max-width:100%;background:var(--brand);border-radius:var(--r-pill);transition:width var(--dur) var(--ease)}
.att-bar::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:var(--accent);border-radius:1px}   /* the 1.0 mark */
.att-idx{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-strong)}
.att-idx.hi{color:var(--ok)}
.att-idx.lo{color:var(--danger)}
.att-late{color:var(--warn);font-weight:600}
.att-abs{color:var(--danger);font-weight:600}
.att-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-5)}
.att-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--sh-1);min-width:0}
.att-card h4{font-size:var(--fs-base);color:var(--brand);margin:0;font-weight:700}
.att-card .att-sub{font-size:var(--fs-xs);color:var(--ink-muted);margin:2px 0 var(--sp-3)}
.att-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);color:var(--ink-muted);margin-bottom:var(--sp-2)}
.att-chips b{color:var(--ink-strong);font-variant-numeric:tabular-nums}
.att-spark{width:100%;height:auto;display:block}
.att-spark .line{fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.att-spark .area{fill:rgba(var(--brand-rgb),.08)}
.att-spark .week{stroke:var(--line);stroke-width:1}
.att-spark .base{stroke:var(--line-strong);stroke-width:1}
.att-spark .pt{fill:var(--brand)}
.att-spark .pt.late{fill:var(--warn-vivid)}
.att-spark .pt.absent{fill:var(--danger-vivid)}
.att-spark .pt.leave,.att-spark .pt.vacation,.att-spark .pt.holiday{fill:var(--info-vivid)}
.att-spark .hit{fill:transparent}
.att-spark-cap{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--ink-faint);margin-top:2px}
.att-heat .hc.dark{color:var(--on-dark)}
.att-heat .hc.gap{box-shadow:inset 0 0 0 2px var(--danger-vivid)}
.att-heat .hc.idle{color:var(--ink-faint)}
.att-heat .hc.closed{color:var(--ink-muted);font-style:italic}
.att-legend{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-xs);color:var(--ink-muted);margin-top:var(--sp-2)}
.att-legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:4px;background:var(--surface-2)}
.att-legend .sw.load{background:rgba(var(--heat-rgb),.7)}
.att-legend .sw.gap{box-shadow:inset 0 0 0 2px var(--danger-vivid)}
.att-method{font-size:var(--fs-md);color:var(--ink-muted);line-height:1.6}
.att-method b{color:var(--ink)}
.att-method p{margin:0 0 var(--sp-2)}
.att-empty h3{color:var(--brand);margin-bottom:var(--sp-2)}
.att-kpis{margin:0 0 var(--sp-5)}
@media (max-width:720px){.att-ctl{max-width:none}.att-bar{width:48px}.att-cards{grid-template-columns:1fr}}

/* Exact punch times read as data, not prose — tabular figures so seconds line up column-wise. */
.att-summary td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }

/* ---- Team comparison ------------------------------------------------------------------------------
   Inline SVG, not Chart.js: this page runs under script-src 'self' and its sparkline and heatmap are
   already hand-rolled, so one rendering approach stays true for the whole page. */
.tc-ctl { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: 0 var(--sp-4) var(--sp-3); }
.tc-sep { width: 1px; height: 18px; background: var(--line); margin: 0 var(--sp-2); }
.tc-wrap { padding: 0 var(--sp-4) var(--sp-2); overflow-x: auto; }
.tc { width: 100%; height: auto; display: block; }
.tc-name { font-size: var(--fs-sm); fill: var(--ink); }
.tc-val  { font-size: var(--fs-sm); fill: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tc-bar          { fill: var(--chart-1); }
.tc-bar.hi       { fill: var(--ok); }
.tc-bar.lo       { fill: var(--warn); }
.tc-mean { stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 4 3; }
.tc-foot { padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-sm); }

/* Standing explanations collapse: data outranks its own footnotes. Native <details> so it needs no
   JS under script-src 'self'. */
.att-why { padding: var(--sp-2) var(--sp-4); }
.att-why > summary { cursor: pointer; font-weight: 600; list-style: none; padding: var(--sp-1) 0; }
.att-why > summary::-webkit-details-marker { display: none; }
.att-why > summary::before { content: "▸ "; color: var(--ink-muted); }
.att-why[open] > summary::before { content: "▾ "; }
.att-why > p { margin: var(--sp-2) 0 0; }
.att-why > p:last-child { margin-bottom: var(--sp-2); }
/* fairness ledger (Stage 4c): "count / fair share"; amber = the side to even out, blue = the side it favours */
.fair-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-2)}
.fair-top .seg{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.fair-c{font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:var(--r-sm);padding:1px 5px}
.fair-c .fair-s{color:var(--ink-muted);font-weight:400}
.fair-c.against{background:var(--warn-soft);color:var(--ink-strong);box-shadow:inset 0 0 0 1px var(--warn-line)}
.fair-c.for{background:var(--info-soft);color:var(--ink-strong);box-shadow:inset 0 0 0 1px var(--info-line)}
.fair-g{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.fair-g.ok{color:var(--ok)}
.fair-g.against{background:var(--warn-soft);border-radius:var(--r-sm);padding:1px 5px;box-shadow:inset 0 0 0 1px var(--warn-line)}
.fair-lead{margin:var(--sp-2) 0 0;line-height:1.55}
.fair-off{margin-top:var(--sp-3)}
.fair-off summary{cursor:pointer;font-weight:600;color:var(--ink)}