/* ============================================================
   Tally - Time card calculator (MagpieToolbox DS). Reuses
   invoice.css for inputs (.iinput), content layer, toast.
   ============================================================ */
.ttool-head__cat{ color:var(--cat-time, var(--blue-500)); font-weight:700; }
.itool-head{ max-width:1180px; }
.ttool{ padding-bottom:clamp(2.5rem,5vw,4rem); display:flex; flex-direction:column; gap:var(--space-5); max-width:1180px; }

/* controls */
.tctrl__field.tctrl__field--inline{ flex-direction:row; align-items:center; gap:6px; }
.tctrl{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px;
  border:1px solid var(--border-default); border-radius:var(--r-ctrl); background:var(--surface); padding:9px var(--space-4); box-shadow:var(--shadow-xs); }
.tctrl__ctl{ display:inline-flex; align-items:center; gap:8px; }
.tctrl__mini{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); white-space:nowrap; }
.tctrl__grow{ flex:1 1 8px; min-width:0; }
.tctrl__date{ max-width:140px; }
.tctrl .tseg button{ padding:6px 9px; }
.tctrl .iinput{ min-height:42px; }
.iinput--sm{ min-height:38px; padding-top:7px; padding-bottom:7px; }
.tseg--icon button{ padding-inline:9px; }
.tseg--icon .tvlab{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:560px){ .tctrl__grow{ display:none; } }

/* switch */
.tswitch{ display:inline-flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; font:inherit; font-size:var(--text-sm); font-weight:600; color:var(--text-muted); padding:8px 0; }
.tswitch__track{ width:40px; height:24px; border-radius:999px; background:var(--border-strong); position:relative; transition:background var(--dur-base); flex:0 0 auto; }
.tswitch__thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform var(--dur-base); box-shadow:var(--shadow-xs); }
.tswitch[aria-checked="true"]{ color:var(--text-strong); }
.tswitch[aria-checked="true"] .tswitch__track{ background:var(--brand); }
.tswitch[aria-checked="true"] .tswitch__thumb{ transform:translateX(16px); }
.tswitch:focus-visible{ outline:none; box-shadow:var(--ring-focus); border-radius:var(--radius-pill); }

/* segmented */
.tseg{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--border-default); border-radius:var(--radius-pill); background:rgba(0,0,0,.04); }
[data-theme="dark"] .tseg{ background:rgba(255,255,255,.05); }
.tseg button{ appearance:none; border:none; background:transparent; cursor:pointer; color:var(--text-muted); font:inherit; font-size:var(--text-sm); font-weight:600; padding:6px 14px; border-radius:var(--radius-pill); transition:var(--transition-colors); }
.tseg button[aria-pressed="true"]{ background:var(--surface); color:var(--text-strong); box-shadow:var(--shadow-xs); }
[data-theme="dark"] .tseg button[aria-pressed="true"]{ background:#26344f; }

/* quick actions */
.tquick{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.tquick__status{ font-size:var(--text-sm); color:var(--text-muted); margin-left:auto; }
/* colored quick actions - subtle surface so they read as buttons in both themes */
.tquick .btn{ font-weight:600; background:var(--surface); border:1px solid var(--border-default); }
.tquick .btn:hover{ background:var(--surface-sunken); }
#qCopy{ color:var(--blue-500); }
#qCopy:hover{ color:color-mix(in srgb, var(--blue-500) 70%, var(--text-strong)); }
#qSample{ color:var(--brand); }
#qSample:hover{ color:color-mix(in srgb, var(--brand) 70%, var(--text-strong)); }
#qClear{ color:var(--danger); }
#qClear:hover{ color:color-mix(in srgb, var(--danger) 70%, var(--text-strong)); }
#qCopy:focus-visible, #qSample:focus-visible, #qClear:focus-visible{ outline:none; box-shadow:var(--ring-focus); }

/* day grid */
.tgrid{ display:flex; flex-direction:column; gap:var(--space-3); }
.tday{ position:relative; overflow:hidden; border:1px solid var(--border-default); border-radius:var(--r-frame); background:var(--surface);
  padding:var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 4px); box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.tday::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg, var(--border-strong), color-mix(in srgb, var(--border-strong) 35%, transparent)); opacity:.55; transition:background var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.tday:hover{ border-color:color-mix(in srgb, var(--brand) 30%, var(--border-default)); box-shadow:var(--shadow-sm); }
.tday.is-filled::before{ background:linear-gradient(180deg, var(--green-500), var(--teal-400)); opacity:1; }
.tday:focus-within{ border-color:color-mix(in srgb, var(--brand) 45%, var(--border-default)); box-shadow:var(--shadow-sm); }
.tday:focus-within::before{ background:var(--sheen); opacity:1; }
.tday.is-error{ border-color:color-mix(in srgb, var(--danger) 55%, var(--border-default)); }
.tday.is-error::before{ background:linear-gradient(180deg, var(--danger), #e8895b); opacity:1; }
.tday__top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); padding-bottom:var(--space-3); margin-bottom:var(--space-4); border-bottom:1px solid var(--border-default); }
.tday__id{ display:flex; align-items:baseline; gap:9px; }
.tday__day{ font-family:var(--font-display); font-size:var(--text-md); font-weight:600; letter-spacing:-0.01em; color:var(--text-strong); }
.tday__date{ font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-subtle); letter-spacing:.04em; }
.tday__end{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:0 0 auto; text-align:right; }
.tday__totrow{ display:flex; align-items:baseline; gap:6px; }
.tday__totnum{ font-family:var(--font-mono); font-size:var(--text-lg); font-weight:700; color:var(--text-strong); font-variant-numeric:tabular-nums; }
.tday.is-error .tday__totrow{ display:none; }
.tday__mid{ display:flex; align-items:flex-start; gap:var(--space-4); flex-wrap:wrap; min-width:0; }
.tday__mid > .tday__field{ flex:1 1 0; min-width:128px; }
.tday__mid .ttime{ width:100%; }
.tday__mid .ttime .iinput{ flex:1 1 auto; min-width:0; }
.tday__brk .iinput{ width:100%; }
.tday__arrow{ flex:0 0 auto; color:var(--text-subtle); align-self:flex-start; margin-top:36px; }
.tday__arrow svg{ width:18px; height:18px; }
.tday__field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.tday__field > span{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); }
.ttime{ display:flex; align-items:center; gap:5px; }
.ttime .iinput{ min-height:40px; padding-inline:8px; }
.tstep{ width:36px; height:36px; flex:0 0 auto; border:1.5px solid var(--border-strong); background:var(--surface); border-radius:50%; color:var(--text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out); }
.tstep svg{ width:15px; height:15px; transition:transform var(--dur-fast) var(--ease-spring); }
.tstep:hover{ transform:translateY(-1px); box-shadow:var(--shadow-xs); }
.tstep:hover svg{ transform:scale(1.2); }
.tstep:active{ transform:scale(.85); box-shadow:none; }
.tstep:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.tstep--plus:hover{ color:var(--brand); border-color:var(--brand); background:var(--brand-soft); }
.tstep--minus:hover{ color:var(--blue-500); border-color:var(--blue-500); background:color-mix(in srgb, var(--blue-500) 12%, transparent); }
.tchips{ display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.tchip{ border:1.5px solid var(--border-strong); background:var(--surface); border-radius:var(--radius-pill); padding:4px 10px; font-size:var(--text-xs); font-weight:600; color:var(--text-muted); cursor:pointer; }
.tchip:hover{ border-color:var(--text-strong); color:var(--text-strong); }
.tchip[aria-pressed="true"]{ background:var(--text); color:var(--surface); border-color:var(--text); }
.tday__unit{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); }
.tday__msg{ font-size:var(--text-2xs); color:var(--text-subtle); }
.tday__msg:empty{ display:none; }
.tday__msg--error{ color:var(--danger); font-weight:600; }
.tday__msg--warn{ color:var(--warning, #d9882b); }
.tday__msg--info{ color:var(--blue-500); }
.tday.is-overnight:not(.is-error):not(.is-filled){ border-color:color-mix(in srgb, var(--blue-500) 40%, var(--border-default)); }

/* views */
.tgrid[data-view="cards"]{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
.tgrid[data-view="cards"] .tday{ grid-template-columns:1fr; }
.tgrid[data-view="cards"] .tday__total{ text-align:left; padding-left:0; border-left:none; padding-top:var(--space-3); margin-top:var(--space-2); border-top:1px solid var(--border-default); flex-direction:row; align-items:baseline; gap:8px; }
.tgrid[data-view="compact"] .tday{ padding-top:var(--space-3); padding-bottom:var(--space-3); gap:var(--space-3); }
.tgrid[data-view="compact"] .tchips, .tgrid[data-view="compact"] .tday__field > span, .tgrid[data-view="compact"] .tstep, .tgrid[data-view="compact"] .tday__arrow, .tgrid[data-view="compact"] .tday__msg{ display:none; }
.tgrid[data-view="compact"] .tday{ padding-bottom:var(--space-3); }
.tgrid[data-view="compact"] .tday__head{ margin-bottom:var(--space-2); }
.tgrid[data-view="compact"] .tday__mid{ gap:var(--space-3); }
.tgrid[data-view="compact"] .tday__total b{ font-size:var(--text-lg); }

/* weekly banner */
.tbanner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-5);
  border-radius:var(--r-frame); background:var(--gradient-ink); color:var(--text-on-dark); padding:var(--space-7); position:relative; overflow:hidden; }
.tbanner::after{ content:""; position:absolute; inset:0; background:var(--sheen-soft); opacity:.5; pointer-events:none; }
.tbanner__main{ display:flex; align-items:baseline; gap:var(--space-3); position:relative; z-index:1; flex-wrap:wrap; }
.tbanner__k{ flex-basis:100%; font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:6px; }
.tbanner__total{ font-family:var(--font-display); font-weight:700; font-size:clamp(3rem, 2.2rem + 4vw, 5rem); line-height:.95; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.tbanner__unit{ font-family:var(--font-body); font-size:var(--text-lg); font-weight:500; color:rgba(255,255,255,.7); }
.tbanner__split{ display:flex; gap:var(--space-7); position:relative; z-index:1; padding-left:var(--space-7); border-left:1px solid var(--border-inverse); }
.tbanner__split div{ display:flex; flex-direction:column; gap:4px; }
.tbanner__sk{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.tbanner__sk--ot{ color:var(--teal-300, #5eead4); }
.tbanner__split span:last-child{ font-family:var(--font-mono); font-size:var(--text-2xl); font-weight:700; color:#fff; font-variant-numeric:tabular-nums; line-height:1; }
@media (max-width:560px){ .tbanner__split{ padding-left:0; border-left:none; } }

/* chart */
.tchart{ border:1px solid var(--border-default); border-radius:var(--r-frame); background:var(--surface); padding:var(--space-5); box-shadow:var(--shadow-xs); }
.tchart__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-5); }
.tchart__title{ font-weight:700; font-size:var(--text-sm); color:var(--text-strong); }
.tchart__leg{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.06em; color:var(--text-subtle); }
.tchart__leg::before{ content:""; width:20px; border-top:1.5px dashed var(--border-strong); }
.tchart__plot{ position:relative; display:flex; align-items:flex-end; gap:var(--space-3); height:158px; }
.tchart__ref{ position:absolute; left:0; right:0; border-top:1px dashed var(--border-strong); pointer-events:none; z-index:1; }
.tbar{ position:relative; flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center; }
.tbar__stack{ position:relative; width:100%; max-width:46px; height:0; min-height:3px; transition:height var(--dur-slow) var(--ease-out); z-index:2; }
.tbar.is-empty .tbar__stack{ min-height:0; }
.tbar__fillwrap{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; border-radius:6px 6px 0 0; overflow:hidden; }
.tbar__fill{ width:100%; background:var(--brand); flex:1 0 auto; }
.tbar__fill--ot{ width:100%; background:var(--teal-300, #5eead4); flex:0 0 auto; }
.tbar__val{ position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:6px; font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:600; color:var(--text-strong); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbar.is-over .tbar__val{ color:var(--brand); }
.tchart__labs{ display:flex; gap:var(--space-3); margin-top:8px; }
.tchart__labs span{ flex:1; text-align:center; font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--text-subtle); }

/* results table */
.tresults{ border:1px solid var(--border-default); border-radius:var(--r-frame); background:var(--surface); padding:var(--space-5) var(--space-6); box-shadow:var(--shadow-xs); }
.tresults__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); flex-wrap:wrap; }
.tresults__head h2{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:600; margin:0; color:var(--text-strong); }
.rtable{ width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.rtable th{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); text-align:right; padding:8px 10px; border-bottom:1.5px solid var(--border-default); white-space:nowrap; }
.rtable th:first-child{ text-align:left; }
.rtable td{ padding:10px; border-bottom:1px solid var(--border-default); text-align:right; color:var(--text-body); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rtable td:first-child{ text-align:left; color:var(--text-strong); font-weight:600; }
.rtable tfoot td{ font-weight:700; color:var(--text-strong); border-bottom:none; border-top:2px solid var(--text-strong); }
.rtag{ display:inline-block; font-family:var(--font-mono); font-size:var(--text-2xs); color:var(--blue-500); }
.rempty{ color:var(--text-muted); font-size:var(--text-sm); padding:var(--space-5) 0; text-align:center; }

@media (max-width:860px){
  .tday{ grid-template-columns:1fr 1fr; }
  .tgrid[data-view="cards"]{ grid-template-columns:1fr; }
  .tday__name{ grid-column:1/-1; }
  .tday__total{ grid-column:1/-1; text-align:left; padding-top:var(--space-2); border-top:1px solid var(--border-default); }
  .tgrid[data-view="compact"] .tday{ grid-template-columns:1fr 1fr; }
  .rtable{ font-size:var(--text-xs); }
}
@media (prefers-reduced-motion: reduce){ .tbar__fill, .tbar__stack, .tswitch__thumb, .tstep{ transition:none; } }

/* daily-overtime example line */
.tctrl__otfield{ display:flex; flex-direction:column; gap:4px; }
.tctrl__otrow{ display:inline-flex; align-items:center; gap:6px; }
.tot-ex{ font-size:var(--text-2xs); line-height:1.35; color:var(--text-subtle); max-width:34ch; }

/* view toggle: icons + hover preview tooltip */
#viewSeg button{ position:relative; display:inline-flex; align-items:center; gap:6px; }
#viewSeg button svg{ width:15px; height:15px; }
.tview-tip{ position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(5px); width:132px; padding:10px; background:var(--surface); border:1px solid var(--border-default); border-radius:10px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); z-index:30; }
#viewSeg button:hover .tview-tip, #viewSeg button:focus-visible .tview-tip{ opacity:1; transform:translateX(-50%) translateY(0); }
.tview-tip__cap{ display:block; margin-top:8px; font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.04em; text-transform:uppercase; color:var(--text-subtle); text-align:center; }
.tvp{ display:flex; flex-direction:column; gap:3px; }
.tvp__row{ height:9px; border-radius:3px; background:color-mix(in srgb, var(--brand) 24%, var(--surface-sunken)); border:1px solid color-mix(in srgb, var(--brand) 22%, var(--border-default)); }
.tvp--cards{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.tvp--cards .tvp__row{ height:17px; }
.tvp--compact{ gap:2px; }
.tvp--compact .tvp__row{ height:4px; }