.tool {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-6);
  align-items: start;
}
.tool__inputs { display: grid; gap: var(--sp-6); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-2); min-width: 0; align-content: start; }
.tool__result { position: sticky; top: 84px; min-width: 0; }
@media screen and (max-width: 860px) {
  .tool { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4); gap: var(--sp-5); border-radius: var(--radius-panel); }
  .tool__inputs { padding: var(--sp-1) 0 0; gap: var(--sp-5); }
  .tool__result { position: static; }
}
@media screen and (max-width: 420px) {
  .tool--bleed { margin-left: calc(var(--sp-4) * -1); margin-right: calc(var(--sp-4) * -1); border-radius: 0; border-left: 0; border-right: 0; }
}
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field__label { font-weight: var(--fw-semibold); font-size: var(--fs-15); color: var(--color-text); display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; }
.field__label .opt { font-weight: var(--fw-regular); color: var(--color-text-muted); font-size: var(--fs-14); }
.field__hint { font-size: var(--fs-14); color: var(--color-text-muted); line-height: 1.45; }
.field__error { font-size: var(--fs-14); color: var(--color-error); font-weight: var(--fw-medium); display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; }
.field__error[hidden] { display: none; }
.field__error svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.input {
  position: relative;
  display: flex; align-items: center;
  height: var(--field-h);
  background: var(--color-field-bg);
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-field);
  transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), background-color var(--dur-ui);
}
.input:hover { border-color: var(--ink-600); }
.input:focus-within, .input.is-focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgb(11 93 69 / 0.18), inset 0 0 0 1px var(--color-brand); }
.input input, .input select {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none;
  padding: 0 var(--sp-3);
  font-size: var(--fs-18); font-weight: var(--fw-semibold); font-variant-numeric: var(--num);
  color: var(--color-text);
}
.input input::placeholder { color: var(--ink-500); font-weight: var(--fw-medium); }
.input__affix { color: var(--color-text-muted); font-weight: var(--fw-semibold); font-size: var(--fs-16); padding: 0 0 0 var(--sp-3); user-select: none; }
.input__affix--end { padding: 0 var(--sp-3) 0 0; font-weight: var(--fw-medium); font-size: var(--fs-15); }
.input__affix + input { padding-left: 6px; }
.input.is-invalid { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); background: var(--color-error-soft); }
.input.is-invalid:focus-within { box-shadow: 0 0 0 3px rgb(180 35 24 / 0.16), inset 0 0 0 1px var(--color-error); }
.input.is-disabled, .input:has(input:disabled) { background: var(--ink-50); border-color: var(--ink-200); }
.input:has(input:disabled) input { color: var(--color-text-muted); cursor: not-allowed; }
.input--select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; font-size: var(--fs-16); }
.input--select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--color-brand); border-bottom: 2px solid var(--color-brand); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--ink-100); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button {
  min-height: 40px; padding: 0 var(--sp-4); border: 0; border-radius: 9px; min-width: 0;
  background: transparent; color: var(--ink-700); font-weight: var(--fw-semibold); font-size: var(--fs-15); white-space: normal; overflow-wrap: anywhere;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui);
}
.seg button:hover { color: var(--color-brand); background: rgb(255 255 255 / 0.55); }
.seg button[aria-pressed="true"] { background: var(--white); color: var(--color-brand); box-shadow: 0 1px 2px rgb(20 35 29 / 0.12), inset 0 0 0 1px var(--green-200); }
.seg button:focus-visible { outline-offset: 0; }
.seg--block { display: grid; width: 100%; }
.seg--sm button { min-height: 32px; padding: 0 var(--sp-2); font-size: var(--fs-14); border-radius: 7px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  height: var(--chip-h); min-width: 56px; padding: 0 14px;
  border-radius: var(--radius-chip); border: 1px solid var(--color-line); background: var(--white);
  color: var(--ink-700); font-weight: var(--fw-semibold); font-size: var(--fs-14); font-variant-numeric: var(--num); white-space: nowrap;
  transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), color var(--dur-ui);
}
.chip:hover { border-color: var(--green-300); color: var(--color-brand); }
.chip[aria-pressed="true"] { background: var(--color-surface-tint); border-color: var(--color-brand); color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.chip:active { background: var(--green-100); }
.chip:disabled { color: var(--ink-400); background: var(--ink-50); border-color: var(--ink-100); cursor: not-allowed; }
.chips__label { font-size: var(--fs-14); color: var(--color-text-muted); align-self: center; margin-right: 2px; }
.btn {
  display: inline-grid; place-items: center; grid-template-areas: "s";
  min-height: 44px; padding: 0 var(--sp-5); border-radius: 10px; max-width: 100%;
  font-weight: var(--fw-semibold); font-size: var(--fs-15); white-space: normal; text-align: center; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--dur-press) var(--ease-out), border-color var(--dur-press), color var(--dur-press);
}
.btn > span { grid-area: s; display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.btn > span[aria-hidden="true"] { visibility: hidden; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--color-brand); color: var(--white); }
.btn--primary:hover { background: var(--color-brand-hover); }
.btn--primary:active { background: var(--green-900); }
.btn--secondary { background: var(--white); color: var(--color-brand); border-color: var(--green-300); }
.btn--secondary:hover { background: var(--color-surface-tint); border-color: var(--color-brand); }
.btn--secondary:active { background: var(--green-100); }
.btn--ghost { background: transparent; color: var(--ink-700); border-color: transparent; padding: 0 var(--sp-3); }
.btn--ghost:hover { background: var(--ink-50); color: var(--color-brand); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--ink-50); color: var(--ink-400); border-color: var(--ink-100); cursor: not-allowed; }
.btn.is-loading > span:first-child { visibility: hidden; }
.btn.is-loading::after { content: ""; grid-area: s; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.result {
  background: var(--color-surface-tint);
  border-radius: var(--radius-panel);
  padding: var(--sp-6);
  display: grid; gap: var(--sp-5);
  border: 1px solid var(--green-100);
}
.result__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.result__label { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-18); color: var(--green-800); letter-spacing: -0.005em; }
.tag { display: inline-grid; grid-template-areas: "s"; justify-items: center; height: 26px; align-content: center; padding: 0 10px; border-radius: 999px; font-size: var(--fs-12); font-weight: var(--fw-semibold); background: var(--white); color: var(--color-text-muted); border: 1px solid var(--green-200); white-space: nowrap; }
.tag > span { grid-area: s; }
.tag > span[aria-hidden="true"] { visibility: hidden; }
.tag--live { color: var(--color-brand); }
.result__hero { display: block; height: calc(var(--fs-hero-num) * 1.1); line-height: calc(var(--fs-hero-num) * 1.1); font-weight: var(--fw-bold); font-size: var(--fs-hero-num); letter-spacing: -0.025em; color: var(--color-brand); font-variant-numeric: var(--num); transition: opacity var(--dur-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result__hero[data-len="long"] { font-size: calc(var(--fs-hero-num) * 0.78); }
.result__hero[data-len="xlong"] { font-size: calc(var(--fs-hero-num) * 0.62); }
.result__hero.is-empty { color: var(--ink-400); }
.result__sub { margin-top: var(--sp-2); font-size: var(--fs-16); color: var(--ink-700); min-height: 1.6em; }
.result__sub b { font-weight: var(--fw-semibold); color: var(--color-text); }
.result__sub .ot { color: var(--color-ot-text); }
.result.is-stale :is(.result__hero, .result__sub, .bar, .ledger, .rr, .compare, .insight, .kpis) { opacity: 0.45; }
.result.is-stale .result__qual { visibility: hidden; } 
.result__stale { font-size: var(--fs-14); color: var(--color-error); font-weight: var(--fw-medium); min-height: 1.4em; }
.result__stale:empty { display: none; }
.bar { display: grid; gap: var(--sp-2); }
.bar__track { display: flex; gap: 2px; height: 22px; border-radius: var(--radius-bar); overflow: hidden; background: var(--white); }
.bar__seg { height: 100%; flex-basis: 0; min-width: 0; }
.bar__seg--reg { background: var(--color-regular); }
.bar__seg--ot { background: var(--color-ot); }
.bar__seg--dt { background: var(--color-dt); background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.22) 0 2px, transparent 2px 7px); }
.bar__track.is-empty { background: repeating-linear-gradient(90deg, var(--green-100) 0 6px, transparent 6px 10px); border: 1px dashed var(--green-300); }
.bar__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-14); color: var(--ink-700); margin: 0; padding: 0; list-style: none; }
.bar__legend li { display: inline-flex; align-items: center; gap: 6px; }
.bar__legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bar__legend b { font-weight: var(--fw-semibold); color: var(--color-text); }
.key-reg { background: var(--color-regular); }
.key-ot { background: var(--color-ot); }
.key-dt { background: var(--color-dt); }
.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: var(--num); font-size: var(--fs-15); }
.ledger th, .ledger td { padding: 9px 0; border-bottom: 1px solid var(--green-200); text-align: right; white-space: nowrap; }
.ledger th[scope="row"] { text-align: left; font-weight: var(--fw-semibold); color: var(--color-text); white-space: normal; }
.ledger td.amt { white-space: nowrap; }
.ledger td.calc { color: var(--color-text-muted); padding-right: var(--sp-3); }
.ledger td.amt { font-weight: var(--fw-semibold); color: var(--color-text); width: 1%; }
.ledger tr.row-ot th[scope="row"], .ledger tr.row-ot td.amt { color: var(--color-ot-text); }
.ledger tr.row-dt th[scope="row"], .ledger tr.row-dt td.amt { color: var(--color-dt); }
.ledger tr.row-zero th, .ledger tr.row-zero td { color: var(--ink-600) !important; font-weight: var(--fw-regular, 400) !important; }
.ledger tr.total th, .ledger tr.total td { border-bottom: 0; padding-top: 12px; font-size: var(--fs-16); font-weight: var(--fw-bold); color: var(--color-text); }
.mult { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: var(--fs-12); font-weight: var(--fw-semibold); background: var(--color-ot-soft); color: var(--color-ot-text); vertical-align: 1px; }
.mult--dt { background: var(--color-dt-soft); color: var(--color-dt); }
.insight { font-size: var(--fs-15); color: var(--ink-700); background: var(--white); border-radius: 10px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--green-100); min-height: 48px; display: flex; align-items: center; gap: var(--sp-3); }
.insight svg { width: 20px; height: 20px; color: var(--color-ot); flex: none; }
.insight > [data-icon] { flex: none; }
.insight b { color: var(--color-ot-text); font-weight: var(--fw-semibold); }
.rule-line { font-size: var(--fs-14); color: var(--ink-700); line-height: 1.5; padding-top: var(--sp-4); border-top: 1px solid var(--green-200); }
.rule-line strong { font-weight: var(--fw-semibold); color: var(--color-text); }
.rule-note { margin-top: 0; }
.rule-line--states { min-height: calc(1.5em * 4 + var(--sp-4) + 1px); }
.tc-side .rule-line--states { min-height: calc(1.5em * 4); }
.rule-note > summary { cursor: pointer; color: var(--color-text); font-weight: var(--fw-medium); width: fit-content; }
.rule-note > summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.rule-note > p { margin-top: var(--sp-1); }
.note { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: 10px; font-size: var(--fs-14); line-height: 1.5; background: var(--ink-50); color: var(--ink-700); border: 1px solid var(--ink-100); }
.note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--color-brand); }
.note--warn { background: var(--color-ot-soft); border-color: var(--amber-100); }
.note--warn svg { color: var(--color-ot-text); }
.note[hidden] { display: none; }
.days { display: grid; gap: 6px; }
.day { display: grid; grid-template-columns: 92px minmax(0, 1fr) 132px; align-items: center; gap: var(--sp-3); }
.day__name { font-weight: var(--fw-semibold); font-size: var(--fs-15); }
.day .input { height: 44px; }
.day .input input { font-size: var(--fs-16); }
.day__out { font-size: var(--fs-14); color: var(--color-text-muted); font-variant-numeric: var(--num); text-align: right; white-space: nowrap; }
.day__out .ot { color: var(--color-ot-text); font-weight: var(--fw-semibold); }
.day__out .dt { color: var(--color-dt); font-weight: var(--fw-semibold); }
.day__err { grid-column: 2 / -1; }
@media screen and (max-width: 420px) {
  .day { grid-template-columns: 80px minmax(0, 1fr) 104px; gap: var(--sp-2); height: 48px; }
  .day__name { font-size: var(--fs-14); white-space: nowrap; }
  .day__out { font-size: var(--fs-13); line-height: 1.15; white-space: normal; text-wrap: balance; }
  .day__out .nb { white-space: nowrap; }
}
.tc { display: grid; gap: var(--sp-6); }
.tc-settings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); align-items: end; }
@media screen and (max-width: 860px) { .tc-settings { grid-template-columns: 1fr 1fr; } }
.tc-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: var(--num); }
.tc-grid thead th { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-align: left; padding: 0 var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.tc-grid thead th.r { text-align: right; }
.tc-grid tbody td, .tc-grid tbody th { padding: 8px var(--sp-2); border-bottom: 1px solid var(--ink-100); vertical-align: middle; }
.tc-grid tbody th { text-align: left; font-weight: var(--fw-semibold); font-size: var(--fs-15); white-space: nowrap; width: 112px; }
.is-example input, .is-example td.r, .is-example .d-split, .is-example .tk-rounded { color: var(--ink-500); } 
.ex-note { margin: 0 0 var(--sp-2); font-size: var(--fs-14); color: var(--ink-500); position: sticky; left: 0; }
.ex-note.is-off { visibility: hidden; }
@media print { .is-example input, .is-example td.r, .is-example .d-split, .is-example .tk-rounded { color: var(--color-text); } }
.tag-stack { display: grid; }
.tag-stack > * { grid-area: 1 / 1; }
.tag-stack__sizer { visibility: hidden; }
@media print { .tag-stack__sizer { display: none; } }
.status-line .linkish { font: inherit; font-weight: var(--fw-semibold); display: inline; min-height: 0; line-height: inherit; }
.tc-grid tbody th small { display: block; font-weight: var(--fw-regular); color: var(--color-text-muted); font-size: var(--fs-12); min-height: 16px; }
.tc-grid tbody tr.is-ot th small { color: var(--color-ot-text); font-weight: var(--fw-semibold); }
.tc-grid td.r { text-align: right; white-space: nowrap; font-weight: var(--fw-semibold); width: 76px; }
.tc-grid td.r.muted { color: var(--color-text-muted); font-weight: var(--fw-medium); }
.tc-grid tbody tr:hover td, .tc-grid tbody tr:hover th { background: var(--ink-50); }
.tc-grid tr.err-row td { padding: 0 var(--sp-2) 10px; border-bottom: 1px solid var(--ink-100); background: transparent !important; }
.tc-grid tr.err-row[hidden] { display: none; }
.tc-grid tr.has-err td, .tc-grid tr.has-err th { border-bottom-color: transparent; }
.timefield { display: flex; gap: 6px; align-items: center; }
.timefield .input { width: 92px; height: 44px; }
.timefield .input input { font-size: var(--fs-16); text-align: center; padding: 0 6px; }
.timefield .seg { padding: 3px; gap: 2px; border-radius: 10px; }
.timefield .seg button { min-height: 36px; padding: 0 8px; font-size: var(--fs-13); border-radius: 7px; }
.timefield[data-h24="true"] .seg { visibility: hidden; }
.breakfield .input { width: 96px; height: 44px; }
.breakfield .input input { font-size: var(--fs-16); text-align: right; padding-right: 4px; }
@media screen and (max-width: 860px) {
  .tc-grid:not(.tc-grid--wide), .tc-grid:not(.tc-grid--wide) tbody, .tc-grid:not(.tc-grid--wide) tr, .tc-grid:not(.tc-grid--wide) th, .tc-grid:not(.tc-grid--wide) td { display: block; }
  .tc-grid:not(.tc-grid--wide) thead { display: none; }
  .tc-grid:not(.tc-grid--wide) tbody tr.day-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--ink-100); }
  .tc-grid:not(.tc-grid--wide) tbody tr.day-row > * { border: 0; padding: 0; background: transparent !important; }
  .tc-grid:not(.tc-grid--wide) tbody tr.day-row th { grid-column: 1 / -1; width: auto; display: flex; justify-content: space-between; align-items: baseline; }
  .tc-grid:not(.tc-grid--wide) tbody tr.day-row th small { display: inline; }
  .tc-grid:not(.tc-grid--wide) td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-13); color: var(--color-text-muted); font-weight: var(--fw-semibold); margin-bottom: 4px; }
  .tc-grid:not(.tc-grid--wide) td.r { width: auto; text-align: left; font-size: var(--fs-18); }
  .tc-grid:not(.tc-grid--wide) tr.err-row:not([hidden]) { display: block; padding: 0 0 var(--sp-3); }
  .tc-grid:not(.tc-grid--wide) tr.err-row td { padding: 0; border: 0; }
  .tc-grid:not(.tc-grid--wide) .timefield .input { flex: 1; width: auto; min-width: 0; }
  .tc-grid:not(.tc-grid--wide) .breakfield .input { width: 100%; }
}
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--green-800); border-radius: var(--radius-panel); overflow: hidden; color: var(--white); }
.kpi { padding: var(--sp-4) var(--sp-4) var(--sp-4); border-right: 1px solid rgb(255 255 255 / 0.12); min-width: 0; }
.kpi:last-child { border-right: 0; }
.kpi dt { font-size: var(--fs-13); color: var(--green-800); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi dd { margin: 4px 0 0; font-size: var(--fs-24); font-weight: var(--fw-bold); letter-spacing: -0.01em; font-variant-numeric: var(--num); white-space: nowrap; overflow-wrap: anywhere; }
.kpi dd > span { white-space: normal; }
.kpi dd small { display: block; font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--ink-600); letter-spacing: 0; white-space: normal; }
.kpi--ot dd { color: var(--color-total-ot); }
.kpi--dt dd { color: var(--color-total-dt); }
.kpi.is-na dd { color: var(--ink-600); font-weight: var(--fw-semibold); }
.kpi--gross { background: var(--green-700); }
@media screen and (max-width: 860px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpi:nth-child(3) { border-right: 0; } .kpi:nth-child(-n+3) { border-bottom: 1px solid rgb(255 255 255 / 0.12); } }
@media screen and (max-width: 420px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi:nth-child(3) { border-right: 1px solid rgb(255 255 255 / 0.12); } .kpi:nth-child(2n) { border-right: 0; } .kpi:nth-child(-n+4) { border-bottom: 1px solid rgb(255 255 255 / 0.12); } .kpi dd { font-size: var(--fs-20); } }
.week-chart { container-type: inline-size; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: min(var(--sp-2), 1.5cqi); align-items: end; height: 168px; padding: 0 0 0; position: relative; }
.week-chart__col { display: grid; grid-template-rows: 1fr auto auto; height: 100%; gap: 6px; text-align: center; min-width: 0; }
.week-chart__stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 2px; align-self: end; height: 100%; }
.week-chart__stack span { display: block; border-radius: 4px; min-height: 0; }
.week-chart__stack .reg { background: var(--color-regular); }
.week-chart__stack .ot { background: var(--color-ot); }
.week-chart__stack .dt, .key-dt { background: var(--color-dt) repeating-linear-gradient(135deg, rgb(255 255 255 / 0.28) 0 2px, transparent 2px 6px); --slop-allow: repeating-gradient-stripe; }
.week-chart__stack .none { background: transparent; border: 1px dashed var(--ink-200); height: 100%; }
.week-chart__val { font-size: min(var(--fs-13), 4.2cqi); font-weight: var(--fw-semibold); font-variant-numeric: var(--num); min-height: 18px; }
.week-chart__day { font-size: min(var(--fs-12), 4.2cqi); color: var(--color-text-muted); }
.sumbar {
  position: fixed; left: 0; right: 0; z-index: 35;
  bottom: calc(var(--anchor-h) + var(--anchor-label) + 24px + env(safe-area-inset-bottom)); 
  background: var(--green-800); color: var(--white);
  display: none; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 10px var(--sp-4); box-shadow: var(--shadow-bar);
  transform: translateY(8px); opacity: 0; pointer-events: none;
  transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
}
.sumbar.is-on { transform: none; opacity: 1; pointer-events: auto; }
.sumbar__num { font-size: var(--fs-20); font-weight: var(--fw-bold); font-variant-numeric: var(--num); line-height: 1.1; }
.sumbar__sub { font-size: var(--fs-13); color: var(--ink-600); }
.sumbar__sub .ot { color: var(--color-ot-text); font-weight: var(--fw-semibold); }
.sumbar a { color: var(--white); font-weight: var(--fw-semibold); font-size: var(--fs-14); display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3); border: 1px solid rgb(255 255 255 / 0.35); border-radius: 10px; text-decoration: none; white-space: nowrap; }
@media screen and (max-width: 860px) { .sumbar { display: flex; } html { scroll-padding-bottom: 150px; } } 
.formula { background: var(--color-surface-tint); border-radius: var(--radius-panel); padding: var(--sp-5) var(--sp-6); margin: var(--sp-4) 0; font-size: var(--fs-18); font-weight: var(--fw-semibold); color: var(--green-800); line-height: 1.5; }
.formula .ot { color: var(--color-ot-text); }
.data-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-4); font-size: var(--fs-15); font-variant-numeric: var(--num); }
.data-table caption { text-align: left; font-size: var(--fs-14); color: var(--color-text-muted); padding-bottom: var(--sp-2); }
.data-table th, .data-table td { text-align: left; padding: 10px var(--sp-3) 10px 0; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.data-table thead th { font-weight: var(--fw-semibold); color: var(--color-text-muted); font-size: var(--fs-14); }
.data-table td.n, .data-table th.n { text-align: right; padding-right: 0; padding-left: var(--sp-3); white-space: nowrap; }
.data-table tfoot td, .data-table tfoot th { font-weight: var(--fw-bold); border-bottom: 0; }
.table-scroll { overflow-x: auto; }
.faq { border-top: 1px solid var(--color-line); }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; min-height: 56px; font-weight: var(--fw-semibold); font-size: var(--fs-18); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--color-brand); border-bottom: 2px solid var(--color-brand); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--dur-ui) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--color-brand); }
.faq details > div { padding: 0 0 var(--sp-5); }
.toc { align-self: start; position: sticky; top: 88px; font-size: var(--fs-14); }
.toc h2 { font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-semibold); letter-spacing: 0; margin-bottom: var(--sp-3); color: var(--color-text); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-line); }
.toc a { display: block; padding: 6px 0 6px var(--sp-3); margin-left: -2px; border-left: 2px solid transparent; color: var(--color-text-muted); text-decoration: none; line-height: 1.4; }
.toc a:hover { color: var(--color-brand); }
.toc a.is-active { color: var(--color-brand); border-left-color: var(--color-brand); font-weight: var(--fw-regular); }
@media screen and (max-width: 960px) {
  .toc { position: static; margin-bottom: var(--sp-8); }
  .toc details { border: 1px solid var(--color-line); border-radius: 10px; padding: 0 var(--sp-4); }
  .toc summary { min-height: 48px; display: flex; align-items: center; font-weight: var(--fw-semibold); cursor: pointer; }
  .toc ol { margin-bottom: var(--sp-3); }
}
.trust { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-radius: var(--radius-panel); background: var(--ink-50); border: 1px solid var(--ink-100); font-size: var(--fs-15); }
.trust dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); overflow-wrap: anywhere; gap: 6px var(--sp-5); margin: 0; }
.trust dt { color: var(--color-text-muted); }
.trust dd { margin: 0; font-weight: var(--fw-medium); }
.disclaimer { font-size: var(--fs-14); color: var(--color-text-muted); }
.sources { font-size: var(--fs-15); }
.sources li { overflow-wrap: anywhere; }
.related { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-8); margin-top: var(--sp-4); border-top: 1px solid var(--color-line); }
.related a { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--color-line); text-decoration: none; color: var(--color-text); min-height: 76px; }
.related a:hover .related__name { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.related__name { font-weight: var(--fw-semibold); display: block; }
.related__desc { font-size: var(--fs-14); color: var(--color-text-muted); display: block; line-height: 1.4; }
.related .arrow { width: 18px; height: 18px; color: var(--ink-400); }
.related a { grid-template-columns: minmax(0, 1fr) auto; min-height: 64px; }
.related .icon-tile { display: none; }
@media screen and (max-width: 760px) { .related { grid-template-columns: 1fr; } }
.icon-tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.icon-tile svg { width: 22px; height: 22px; }
.icon-tile, .cat-pay .icon-tile, .cat-time .icon-tile, .cat-convert .icon-tile, .cat-rules .icon-tile { background: var(--green-50); color: var(--green-700); }
.status-line { font-size: var(--fs-14); color: var(--color-brand); min-height: 20px; }
.linkish { background: none; border: 0; padding: 0; color: var(--color-link); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
.linkish:hover { text-decoration-thickness: 2px; }
.tc-card { padding: var(--sp-6); }
.tc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--color-line); }
.tc-tools .chips { gap: 6px; }
.tc-tools .chip { height: 32px; padding: 0 12px; min-width: 0; font-size: var(--fs-13); }
.tc-tools .btn { margin-left: auto; }
.tc-bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.tc-h { font-family: var(--font-display); font-size: var(--fs-18); font-weight: var(--fw-semibold); margin-bottom: var(--sp-4); }
.tc-side { display: grid; gap: var(--sp-4); }
.print-val { display: none; }
@media screen and (max-width: 860px) {
  .tc-card { padding: var(--sp-4); }
  .tc-bottom { grid-template-columns: 1fr; gap: var(--sp-6); }
  .tc-tools .btn { margin-left: 0; }
}
@media screen and (min-width: 521px) { .data-table td.n + td, .data-table th.n + th { padding-left: var(--sp-8); border-left: 1px solid var(--color-line); } }
.field { grid-template-columns: minmax(0, 1fr); }
.tc-grid tbody th { vertical-align: middle; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-10); align-items: start; padding: var(--sp-10) 0 var(--sp-12); }
.home-hero h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem); line-height: 1.06; letter-spacing: -0.018em; max-width: 20ch; }
.home-hero .answer { margin-top: var(--sp-5); font-size: var(--fs-18); line-height: 1.55; color: var(--ink-700); max-width: 46ch; }
.proof { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-3); font-size: var(--fs-15); color: var(--ink-700); }
.proof li { gap: var(--sp-3); align-items: flex-start; }
.proof svg { width: 20px; height: 20px; color: var(--color-brand); margin-top: 1px; }
.quick { background: var(--white); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--sp-6); display: grid; gap: var(--sp-4); }
.quick__h { font-size: var(--fs-20); }
.quick__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.quick__result { background: var(--color-surface-tint); border: 1px solid var(--green-100); border-radius: var(--radius-panel); padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-2); }
.quick__label { font-size: var(--fs-14); color: var(--green-800); font-weight: var(--fw-semibold); }
.quick__num { font-size: 2.5rem; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.02em; color: var(--color-brand); font-variant-numeric: var(--num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick__num.is-empty { color: var(--ink-400); }
.quick__result .bar__track { height: 14px; margin-top: 4px; }
.quick__line { font-size: var(--fs-14); color: var(--ink-700); font-variant-numeric: var(--num); min-height: 1.5em; }
.quick__line .ot { color: var(--color-ot-text); font-weight: var(--fw-semibold); }
.quick__go { width: 100%; }
@media screen and (max-width: 860px) {
  .home-hero { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6) 0 var(--sp-10); }
  .proof { display: none; }
  .quick { padding: var(--sp-4); }
}
.dir__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-bottom: var(--sp-6); }
.dir__head p { color: var(--color-text-muted); }
.dir__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.cat { border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: var(--sp-5) var(--sp-5) var(--sp-2); background: var(--white); }
.cat__head { display: flex; gap: var(--sp-4); align-items: center; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--color-line); }
.cat__head h3 { font-size: var(--fs-20); }
.cat__head p { font-size: var(--fs-14); color: var(--color-text-muted); }
.cat__list { list-style: none; margin: 0; padding: 0; }
.cat__list li + li { border-top: 1px solid var(--ink-100); }
.cat__list a { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; min-height: 60px; text-decoration: none; color: var(--color-text); }
.cat__list b { display: block; font-weight: var(--fw-semibold); }
.cat__list small { display: block; font-size: var(--fs-14); color: var(--color-text-muted); }
.cat__list a:hover b { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.cat__list .arrow { width: 18px; height: 18px; color: var(--ink-400); flex: none; }
.cat__list a:hover .arrow { color: var(--color-brand); }
.cat-pay .cat__head { border-bottom-color: var(--amber-100); }
.cat-time .cat__head { border-bottom-color: var(--green-200); }
@media screen and (max-width: 760px) { .dir__grid { grid-template-columns: 1fr; } }
.method { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-10); align-items: center; padding: var(--sp-10); border-radius: var(--radius-card); background: var(--color-surface-tint); }
.method h2 { margin-bottom: var(--sp-3); }
.method__card { margin: 0; background: var(--white); border-radius: var(--radius-panel); padding: var(--sp-5); border: 1px solid var(--green-100); box-shadow: var(--shadow-card); }
.method__card figcaption { margin-top: var(--sp-3); font-size: var(--fs-13); color: var(--color-text-muted); }
@media screen and (max-width: 860px) { .method { grid-template-columns: 1fr; padding: var(--sp-6) var(--sp-5); gap: var(--sp-6); } }
.quick__result.is-stale .quick__num, .quick__result.is-stale .bar__track, .quick__result.is-stale .quick__line { opacity: 0.45; }
.home-hero { position: relative; }
.home-hero::before { content: ""; position: absolute; z-index: -1; inset: var(--sp-5) calc(var(--sp-6) * -1) var(--sp-6); background: var(--color-surface-tint); border-radius: 28px; }
.home-hero { padding: var(--sp-12) 0 var(--sp-16); margin-bottom: var(--sp-6); isolation: isolate; }
.home-hero::before { z-index: -1; }
@media screen and (max-width: 860px) { .home-hero { padding: var(--sp-8) 0 var(--sp-10); } .home-hero::before { inset: var(--sp-3) calc(var(--sp-4) * -1) 0; border-radius: 0; } }
.input input, .input select { width: 100%; }
@media screen and (max-width: 860px) {
  .tc-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .tc-grid:not(.tc-grid--wide) tbody tr.day-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); }
  .tc-grid:not(.tc-grid--wide) tbody tr.day-row > td:nth-of-type(1), .tc-grid:not(.tc-grid--wide) tbody tr.day-row > td:nth-of-type(2) { grid-column: span 3; }
  .tc-grid:not(.tc-grid--wide) tbody tr.day-row > td:nth-of-type(n+3) { grid-column: span 2; }
  .tc-grid:not(.tc-grid--wide) td.r { align-self: end; padding-bottom: 10px !important; }
  .tc-tools { gap: var(--sp-3); }
  .tc-tools .chips__label { width: 100%; }
}
@media screen and (max-width: 760px) {
  html { scroll-padding-bottom: 150px; }
  .page-head .answer { font-size: var(--fs-16); }
  .byline { font-size: var(--fs-13); gap: 2px 12px; }
}
.tool { padding: 0; gap: 0; overflow: clip; box-shadow: none; align-items: stretch; background: transparent; }
.tool__inputs { padding: var(--sp-8) var(--sp-8) var(--sp-8); }
.tool__result { position: static; background: var(--color-surface-tint); border-left: 1px solid var(--green-100); }
.result { position: sticky; top: 64px; background: transparent; border: 0; border-radius: 0; padding: var(--sp-8); }
@media screen and (max-width: 860px) {
  .tool { padding: 0; gap: 0; }
  .tool__inputs { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
  .tool__result { border-left: 0; border-top: 1px solid var(--green-100); }
  .result { position: static; padding: var(--sp-6) var(--sp-4); }
}
@media screen and (max-width: 22.5em) {
  .result { grid-template-columns: minmax(0, 1fr); }
  .ledger th[scope="row"], .ledger td.calc { white-space: normal; }
  .result .ledger:not(:has(thead th + th + th + th)), .result .ledger:not(:has(thead th + th + th + th)) tbody { display: block; }
  .result .ledger:not(:has(thead th + th + th + th)) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .result .ledger:not(:has(thead th + th + th + th)) tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); padding: 8px 0; border-bottom: 1px solid var(--green-200); }
  .result .ledger:not(:has(thead th + th + th + th)) tr:last-child { border-bottom: 0; }
  .result .ledger:not(:has(thead th + th + th + th)) :is(th, td) { padding: 0; border-bottom: 0; text-align: left; }
  .result .ledger:not(:has(thead th + th + th + th)) td.amt { grid-column: 2; grid-row: 1; width: auto; text-align: right; }
  .result .ledger:not(:has(thead th + th + th + th)) td.calc { grid-column: 1 / -1; grid-row: 2; font-size: var(--fs-13); line-height: 1.5; font-weight: var(--fw-regular, 400); }
  .result .ledger:not(:has(thead th + th + th + th)) td.calc:empty { display: none; }
  .result .ledger:not(:has(thead th + th + th + th)) td.calc, .result #ledger:not(:has(thead th + th + th + th)) td.calc { text-align: left; }
  .result .ledger:not(:has(thead th + th + th + th)) tr.total { padding-top: 12px; }
  .result .btn-row { flex-wrap: wrap; }
  .tool__inputs .field-pair { grid-template-columns: minmax(0, 1fr); }
  .tool__inputs .seg--block button { white-space: normal; overflow-wrap: normal; line-height: 1.2; padding: 0 var(--sp-1); }
  .addrows .addrow { grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) 32px; gap: 4px; }
  .addrows .addrow .seg button { width: 34px; }
  .addrows .addrow .input input { padding-left: 8px; padding-right: 4px; }
}
.insight { background: transparent; border: 0; padding: 0; min-height: 0; border-radius: 0; align-items: flex-start; }
.insight svg { margin-top: 2px; }
.tag { background: transparent; }
.quick, .method__card { box-shadow: none; }
.tc-card { border: 0; border-radius: 0; padding: 0 !important; background: transparent; overflow: visible; }
.quick { padding: 0; gap: 0; overflow: clip; }
.quick > .quick__h, .quick > .quick__inputs, .quick > .field__error { margin: 0 var(--sp-6); }
.quick > .quick__h { margin-top: var(--sp-6); margin-bottom: var(--sp-4); }
.quick > .field__error { margin-top: var(--sp-2); }
.quick__result { border: 0; border-radius: 0; border-top: 1px solid var(--green-100); margin-top: var(--sp-5); padding: var(--sp-5) var(--sp-6) var(--sp-3); }
.quick__go { border-radius: 0; height: 52px; width: 100%; }
@media screen and (max-width: 860px) { .quick { padding: 0; } .quick > .quick__h, .quick > .quick__inputs, .quick > .field__error { margin-left: var(--sp-4); margin-right: var(--sp-4); } .quick__result { padding: var(--sp-4); } }
.method { background: transparent; padding: var(--sp-10) 0 0; border-top: 1px solid var(--color-line); border-radius: 0; }
.method__card { background: var(--color-surface-tint); border: 0; }
@media screen and (max-width: 860px) { .method { padding: var(--sp-8) 0 0; } }
.trust, .note { border: 0; }
.cat { background: transparent; }
.bar__track.is-empty { background: var(--green-100); border: 0; }
.bar__seg--dt { --slop-allow: repeating-gradient-stripe; }
h2, h3, .tc-h, .result__label, .quick__h, .cat__head h3 { font-weight: var(--fw-bold); }
.input input::placeholder { color: var(--ink-500); }
.result__hero.is-empty, .quick__num.is-empty { color: var(--ink-500); }
.tc-grid tbody th small { min-height: 0; }
.dir__head { display: block; }
.dir__head p { margin-top: var(--sp-2); }
.data-table td.n:not(:last-child), .data-table th.n:not(:last-child) { padding-right: var(--sp-4); }
.toc summary { list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
@media screen and (min-width: 961px) { .toc summary { pointer-events: none; font-weight: var(--fw-semibold); font-size: var(--fs-14); margin-bottom: var(--sp-3); } }
@media screen and (max-width: 960px) { .toc summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--color-brand); border-bottom: 2px solid var(--color-brand); transform: rotate(45deg); } .toc details[open] summary::after { transform: rotate(-135deg); } }
.kpi dd[data-len="long"] { font-size: var(--fs-20); }
.kpi dd[data-len="xlong"] { font-size: var(--fs-16); line-height: 1.9; }
.kpi dd { min-height: 54px; }
.tc-card.tool--bleed { margin-left: 0; margin-right: 0; }
.byline--line { display: block; font-size: var(--fs-14); color: var(--color-text-muted); }
.byline--line a { color: inherit; }
@media screen and (max-width: 760px) { .byline--line { font-size: var(--fs-13); } }
.btn--flush { margin-inline-start: calc(var(--sp-3) * -1); }
.seg button[aria-checked="true"] { background: var(--white); color: var(--color-brand); box-shadow: 0 1px 2px rgb(20 35 29 / 0.12), inset 0 0 0 1px var(--green-200); }
.tc-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); align-items: end; }
.tc-head > .tc-settings, .tc-head > .tc-meta { display: contents; }
@media screen and (max-width: 860px) {
  .tc-head { display: contents; }
  .tc-head > .tc-settings, .tc-head > .tc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: end; }
  .tc-page .tc > .tc-tools { order: 2; }
  .tc-page .tc > .tc-head > .tc-settings { order: 1; }
  .tc-page .tc > .table-wrap { order: 3; }
  .tc-page .tc > .tc-head > .tc-meta { order: 4; }
  .tc-page .tc > .kpis { order: 5; }
  .tc-page .tc > .tc-bottom, .tc-page .tc > output { order: 6; }
}
.tc-grid--wide { table-layout: fixed; }
.tc-grid--wide col.c-day { width: 18%; }
.tc-grid--wide col.c-in, .tc-grid--wide col.c-out { width: 21%; }
.tc-grid--wide col.c-brk { width: 14%; }
.tc-grid--wide col.c-h, .tc-grid--wide col.c-dec { width: 13%; }
.tc-grid--wide tbody th { width: auto; }
.tc-grid--wide td.r { width: auto; }
.tc-grid--wide .d-date { display: none; }
@media screen and (min-width: 761px) and (max-width: 960px) {
  .tc-grid--wide col.c-day { width: 17%; }
  .tc-grid--wide col.c-in, .tc-grid--wide col.c-out { width: 21.5%; }
  .tc-grid--wide col.c-brk { width: 14%; }
  .tc-grid--wide col.c-h, .tc-grid--wide col.c-dec { width: 13%; }
  .tc-grid--wide tbody td, .tc-grid--wide tbody th, .tc-grid--wide thead th { padding-left: 6px; padding-right: 6px; }
  .tc-grid--wide tbody th { font-size: var(--fs-14); }
  .tc-grid--wide .timefield { gap: 4px; }
  .tc-grid--wide .timefield .input { width: 78px; }
  .tc-grid--wide .timefield .seg button { padding: 0 6px; }
  .tc-grid--wide .breakfield .input { width: 80px; }
}
@media screen and (max-width: 760px) {
  .tc-grid--wide, .tc-grid--wide tbody, .tc-grid--wide tr, .tc-grid--wide th, .tc-grid--wide td { display: block; }
  .tc-grid--wide colgroup, .tc-grid--wide thead { display: none; }
  .tc-grid--wide tbody tr.day-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); padding: var(--sp-4) 0; border-bottom: 1px solid var(--ink-100); }
  .tc-grid--wide tbody tr.day-row > * { border: 0; padding: 0; background: transparent !important; }
  .tc-grid--wide tbody tr.day-row th { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
  .tc-grid--wide tbody tr.day-row > td:nth-of-type(1), .tc-grid--wide tbody tr.day-row > td:nth-of-type(2) { grid-column: span 3; }
  .tc-grid--wide tbody tr.day-row > td:nth-of-type(n+3) { grid-column: span 2; }
  .tc-grid--wide td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-13); color: var(--color-text-muted); font-weight: var(--fw-semibold); margin-bottom: 4px; text-align: left; }
  .tc-grid--wide td.r { text-align: right; font-size: var(--fs-18); align-self: end; line-height: 44px; }
  .tc-grid--wide td.r::before { text-align: right; line-height: var(--lh-body); }
  .tc-grid--wide .timefield .input { flex: 1; width: auto; min-width: 0; }
  .tc-grid--wide .timefield .input input, .tc-grid--wide .breakfield .input input { text-align: right; padding-right: 10px; }
  .tc-grid--wide .breakfield .input { width: 100%; }
  .tc-grid--wide tr.err-row:not([hidden]) { display: block; padding: 0 0 var(--sp-3); }
  .tc-grid--wide tr.err-row td { padding: 0; border: 0; }
}
.tc-actions { display: grid; gap: var(--sp-3); }
.tc-actions__main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.tc-actions__main .btn { width: 100%; padding: 0 var(--sp-3); }
.tc-actions__main .btn--primary { grid-column: 1 / -1; }
.tc-actions__aux { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); min-height: 44px; border-top: 1px solid var(--color-line); padding-top: var(--sp-2); }
.tc-actions__aux .status-line { min-height: 0; }
.tc-actions__aux .btn--ghost { margin-inline-end: calc(var(--sp-3) * -1); color: var(--ink-600); flex: none; white-space: nowrap; } 
.toast { position: fixed; z-index: 45; left: 50%; bottom: var(--sp-6); transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-4); padding: 8px 8px 8px var(--sp-4); border-radius: 12px; background: var(--ink-900); color: var(--white); font-size: var(--fs-15); box-shadow: 0 8px 24px -8px rgb(20 35 29 / 0.5); max-width: calc(100vw - 2 * var(--sp-4)); }
.toast[hidden] { display: none; }
.toast .btn { height: 36px; background: var(--white); color: var(--ink-900); padding: 0 var(--sp-4); }
.toast .btn:hover { background: var(--green-50); }
@media screen and (max-width: 860px) { .toast { bottom: calc(var(--sp-4) + 64px + env(safe-area-inset-bottom)); } }
.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: 10px; background: var(--color-ot-soft); font-size: var(--fs-14); color: var(--ink-900); }
.confirm[hidden] { display: none; }
.confirm .btn { height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-14); }
.page-ot .insight { min-height: 3em; }
.chips__end { margin-left: auto; align-self: center; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); margin-top: var(--sp-4); }
.compare .data-table { margin-top: 0; }
.compare .data-table caption { font-weight: var(--fw-semibold); color: var(--color-text); }
@media screen and (max-width: 640px) { .compare { grid-template-columns: 1fr; gap: var(--sp-5); } }
.paid-diff { font-size: var(--fs-15); font-weight: var(--fw-semibold); }
.paid-diff .short { color: var(--color-error); }
.cat__list .cat__soon { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; min-height: 60px; color: var(--color-text-muted); }
.cat__list .cat__soon b { color: var(--ink-700); font-weight: var(--fw-semibold); display: block; }
.cat--rules .cat__list { min-height: 0; }
.quick__err { min-height: 1.4em; }
.ad--rail .ad__label { visibility: hidden; }
[data-ads="fill"] .ad--rail .ad__label { visibility: visible; }
@media screen and (max-width: 860px) {
  .tc-page .tc { gap: var(--sp-4); }
  .tc-page .tc-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); padding-top: var(--sp-4); }
  .tc-page .tc-tools > .chips, .tc-page .tc-tools > .confirm { grid-column: 1 / -1; }
  .tc-page .tc-tools .seg { grid-row: 1; grid-column: 1; justify-self: start; }
  .tc-page .tc-tools #copy-mon { grid-row: 1; grid-column: 2; justify-self: end; }
  .tc-page .tc-grid--wide tbody tr.day-row:first-child { padding-top: var(--sp-2); }
}
@media screen and (max-width: 420px) { .byline--line { font-size: var(--fs-12); } }
@media screen and (max-width: 760px) { .crumbs { margin: var(--sp-3) 0 var(--sp-1); } }
.tc-tools__main { display: contents; }
@media screen and (max-width: 760px) {
  .tc-page .tc-tools { display: contents; }
  .tc-page .tc-tools__main { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--color-line); order: 2; flex-wrap: wrap; row-gap: var(--sp-2); }
  .tc-page .tc-tools > .confirm { order: 2; }
  .tc-page .tc > .table-wrap { order: 3; }
  .tc-page .tc-tools > .chips { order: 4; }
  .tc-page .tc > .tc-head > .tc-meta { order: 5; }
  .tc-page .tc > .kpis { order: 6; }
  .tc-page .tc > .tc-bottom, .tc-page .tc > output { order: 7; }
  .tc-page .tc-tools .chips__label { width: 100%; }
}
.tc-page .tc { grid-template-columns: minmax(0, 1fr); }
@media screen and (max-width: 760px) { .tc-grid tbody tr.day-row > * { min-width: 0; } }
@media screen and (max-width: 420px) {
  .tc-page .tc-tools__main #copy-mon { white-space: normal; line-height: 1.2; font-size: var(--fs-14); text-align: left; padding: 0; flex: 1 1 100%; margin-left: 0; justify-content: flex-start; text-align: left; min-width: 0; }
  .tc-page .tc-tools__main .seg { flex: none; }
}
.page-ot #daily-note { min-height: 72px; }
@media screen and (max-width: 860px) { .page-ot #daily-note { min-height: calc(3 * 1.5em + 2 * var(--sp-3)); } }
@media screen and (max-width: 400px) { .page-ot #daily-note { min-height: calc(4 * 1.5em + 2 * var(--sp-3)); } }
.btn, .field__label, .chip, .seg button, .linkish, .crumbs, .chips__label, .tag, .sumbar a, .menu-btn { font-weight: var(--fw-ui); }
h2, h3, .tc-h, .result__label, .quick__h, .cat__head h3 { font-weight: var(--fw-semibold); }
.btn { border-radius: var(--radius-field); }
.seg { border-radius: 10px; }
.seg button { border-radius: 7px; }
.input input, .result__hero, .ledger, .kpi dd, .tc-grid, .data-table, .quick__num, .quick__line, .day__out, .sumbar__num, .print-totals dd, .tc-grid td.r { font-variant-numeric: var(--num); }
.linkish { text-decoration: none; color: var(--color-link); }
.linkish:hover { color: var(--color-brand-hover); text-decoration: none; }
.tool__result { border-left: 0; }
@media screen and (max-width: 860px) { .tool__result { border-top: 0; } }
.quick__result { border-top: 0; }
.icon-tile, .cat-pay .icon-tile, .cat-time .icon-tile, .cat-convert .icon-tile, .cat-rules .icon-tile { background: transparent; width: auto; height: auto; border-radius: 0; color: var(--green-700); }
.icon-tile svg { width: 22px; height: 22px; }
.home-hero::before { inset: 0 calc(50% - 50vw); border-radius: 0; }
@media screen and (max-width: 860px) { .home-hero::before { inset: 0 calc(50% - 50vw); } }
@media screen and (min-width: 961px) {
  .dir__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .dir__grid .cat--rules { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-6); align-items: center; padding-bottom: var(--sp-5); }
  .dir__grid .cat--rules .cat__head { border-bottom: 0; padding-bottom: 0; }
}
.dir__grid { align-items: start; }
.kpis { background: var(--color-total-bg); color: var(--ink-900); border-radius: var(--radius-panel); }
.kpi { border-right: 1px solid var(--color-total-line); }
.kpi dt { color: var(--green-800); }
.kpi dd { color: var(--color-total-num); }
.kpi dd small { color: var(--ink-600); }
.kpi--ot dd { color: var(--color-total-ot); }
.kpi--dt dd { color: var(--color-total-dt); }
.kpi.is-na dd { color: var(--ink-600); }
.kpi--gross { background: transparent; }
.kpi--gross dd { color: var(--color-total-num); }
@media screen and (max-width: 860px) { .kpi:nth-child(-n+3) { border-bottom: 1px solid var(--color-total-line); } }
@media screen and (max-width: 420px) { .kpi:nth-child(3) { border-right: 1px solid var(--color-total-line); } .kpi:nth-child(-n+4) { border-bottom: 1px solid var(--color-total-line); } }
.sumbar { background: var(--color-total-bg); color: var(--ink-900); box-shadow: none; border-top: 1px solid var(--color-total-line); }
.sumbar__num { color: var(--color-total-num); }
.sumbar__sub { color: var(--ink-600); }
.sumbar__sub .ot { color: var(--color-ot-text); }
.sumbar a { color: var(--white); border-color: var(--color-brand); background: var(--color-brand); }
.result__qual { display: grid; grid-template-areas: "s"; margin-top: 2px; font-size: var(--fs-13); color: var(--ink-600); }
.result__qual > span { grid-area: s; }
.result__qual > span[aria-hidden="true"] { visibility: hidden; }
.timefield--in { display: block; }
.timefield--in .input { width: 156px; height: 44px; }
.timefield--in .input input { text-align: right; padding: 0 6px 0 10px; font-size: var(--fs-16); }
.timefield--in .seg { display: inline-flex; flex: none; background: transparent; padding: 0 4px 0 2px; gap: 0; border-radius: 0; }
.timefield--in .seg button { height: 32px; padding: 0 6px; font-size: var(--fs-13); border-radius: 6px; color: var(--ink-500); background: transparent; box-shadow: none; }
.timefield--in .seg button:hover { color: var(--color-brand); background: transparent; }
.timefield--in .seg button[aria-checked="true"] { color: var(--color-brand); background: var(--green-50); box-shadow: none; }
@media screen and (min-width: 761px) and (max-width: 960px) {
  .tc-grid--wide .timefield--in .input { width: 132px; }
  .tc-grid--wide .timefield--in .seg button { padding: 0 4px; }
}
@media screen and (max-width: 760px) { .tc-grid--wide .timefield--in .input { width: 100%; } }
@media screen and (min-width: 861px) {
  .tool__inputs { padding: var(--sp-6) var(--sp-7, 28px); gap: 18px; }
  .result { padding: var(--sp-6) var(--sp-7, 28px); gap: var(--sp-4); --fs-hero-num: 2.75rem; }
  .page-head { margin-bottom: var(--sp-5); }
  .crumbs { margin-top: var(--sp-4); }
}
@media screen and (min-width: 861px) and (pointer: fine) {
  :root { --field-h: 40px; --chip-h: 32px; }
  .field__label { font-size: var(--fs-14); font-weight: var(--fw-medium); }
  .field__label .opt { font-size: var(--fs-13); }
  .input input, .input select { font-weight: var(--fw-medium); }
  .input--select select { font-size: var(--fs-16); }
  .btn { height: 40px; font-size: var(--fs-14); }
  .seg button { height: 32px; font-size: var(--fs-14); }
  .tc-grid tbody td, .tc-grid tbody th { padding-top: 5px; padding-bottom: 5px; }
  .tc-grid tbody th { font-size: var(--fs-14); font-weight: var(--fw-medium); }
  .tc-grid tbody th small { line-height: 16px; } 
  .tc-grid thead th { font-size: var(--fs-13); font-weight: var(--fw-medium); }
  .tc-grid td.r { font-weight: var(--fw-medium); }
  .timefield .input, .tool .timefield .input { height: var(--field-h); }
  .tool .timefield .seg button { height: 28px; }
  .kpi { padding: var(--sp-3) var(--sp-4); }
  .kpi dd { font-size: var(--fs-20); font-weight: var(--fw-semibold); min-height: 48px; }
  .kpi dd[data-len="long"] { font-size: var(--fs-18); }
  .kpi dd[data-len="xlong"] { font-size: var(--fs-15); }
  html #k-total, html #pt-total, html #k-paid { font-size: var(--fs-24); line-height: 1.3334; }
  html #k-total small, html #pt-total small, html #k-paid small { line-height: 1.6; }
  html #k-total[data-len="long"], html #pt-total[data-len="long"], html #k-paid[data-len="long"] { font-size: var(--fs-20); }
  html #k-total[data-len="xlong"], html #pt-total[data-len="xlong"], html #k-paid[data-len="xlong"] { font-size: var(--fs-18); }
  html .input input, html .tool .timefield .input input { font-size: var(--fs-16); }
  html .day .input, html .d-row .input, html .d-day .timefield .input, html .pr-grid .input,
  html .tk-day, html .finish__num, html .breakfield .input { height: var(--field-h); }
  html .icon-btn, html .d-iconbtn { width: 40px; height: 40px; }
  html .shift__hours { height: 40px; }
  html .addrow .seg button { height: 32px; width: 32px; font-size: var(--fs-16); }
  html .d-seg-wrap button, html .seg--wrap button { height: 44px; }
}
[data-ads="none"] .sumbar { bottom: env(safe-area-inset-bottom); }
.seg button { white-space: nowrap; }
.ps-top, .ps-foot { display: none; }
.shift__read { margin: var(--sp-2) 0 0; font-size: var(--fs-14); color: var(--color-text-muted); min-height: calc(2 * 1.5em); line-height: 1.5; }
.shift__read .linkish { font-size: inherit; display: inline; padding: 0; line-height: inherit; min-height: 0; }
@media print { .shift__read { display: none !important; } }
.sumbar__sub .err { color: var(--color-error); font-weight: var(--fw-semibold); }
@media screen and (max-width: 15em) {
  h2, h3, .day__name, .tc-grid .d-name, .tc-grid tbody th small, .field__label {
    overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;
  }
  h1, .home-hero h1 { font-size: min(1.5rem, 10.5vw); hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
  .ws-settings { grid-template-columns: minmax(0, 1fr) !important; }
  .ws-weekof { width: auto !important; max-width: 100%; }
  .ws-weekof .ws-in, .ws-weekof input { min-width: 0 !important; max-width: 100%; }
  .result { min-width: 0; }
  .result__hero { font-size: min(var(--fs-hero-num, 2.75rem), 11vw) !important; }
  .ledger, .ledger tbody, .ledger tfoot, .ledger tr { display: block; width: 100%; }
  .ledger thead, .ledger caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger tr { padding: 6px 0; border-bottom: 1px solid var(--green-200); }
  .ledger th, .ledger td, .ledger td.calc, .ledger td.amt { display: block; width: auto !important; text-align: left !important; white-space: normal !important; border: 0 !important; padding: 2px 0 !important; overflow-wrap: anywhere; }
  .bar + *, .result .btn-row, .result .insight, .result .rule-line { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
  p.byline, .byline--line, .byline--line a { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .trust dl { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .field__label { flex-wrap: wrap; }
  .tc-settings, .tc-settings--6, .tk-settings { grid-template-columns: minmax(0, 1fr) !important; }
  .tc-grid tbody tr.day-row { grid-template-columns: minmax(0, 1fr) !important; }
  .tc-grid tbody tr.day-row > td { grid-column: 1 / -1 !important; }
  .tc-grid tbody tr.day-row th small { white-space: normal; }
  .tc-grid td.tk-rounded { white-space: normal; }
  .tc-grid.tk-grid tbody tr.day-row { grid-template-columns: minmax(0, 1fr) !important; }
  .tc-grid.tk-grid tbody tr.day-row > th, .tc-grid.tk-grid tbody tr.day-row > td { grid-column: 1 !important; grid-row: auto !important; }
  .kpis, .pr .kpis { grid-template-columns: minmax(0, 1fr) !important; }
  .kpi { border-right: 0 !important; border-bottom: 1px solid var(--color-total-line); }
  .kpi:last-child { border-bottom: 0; }
  .kpi dt, .kpi dd small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .kpi dd { height: auto !important; display: block !important; line-height: 1.3 !important; overflow: visible; }
  .kpi dd, .kpi dd[data-len] { font-size: min(1.25rem, 11vw) !important; }
  form.tool, form.tool *:not(input):not(select):not(.input):not(.input__affix) { min-width: 0; }
  form.tool :is(span, small, time, th, td, p, button, a, label, div, dt, dd):not(.result__hero):not(.kpi dd) { white-space: normal !important; overflow-wrap: anywhere; }
  form.tool :is(.loc-note, .hw-hero, .result__top, .btn-row, .seg, .addrow, .tl__row, .tl, .row, .field) { flex-wrap: wrap; }
  form.tool .loc-note { overflow: visible; height: auto; }
  form.tool .loc-note button { white-space: normal; }
  form.tool .data-table, form.tool .data-table tbody, form.tool .data-table tr, form.tool .data-table td, form.tool .data-table th { max-width: 100%; }
  form.tool input, form.tool select { max-width: 100%; }
  html form.tool select { width: 100%; }
  html form.tool .d-inline { grid-template-columns: minmax(0, 1fr); }
  html form.tool .pr-grid tbody tr.emp-row { grid-template-columns: minmax(0, 1fr); }
  html form.tool .pr-grid tbody tr.emp-row > td.c-name, html form.tool .pr-grid tbody tr.emp-row > td.x, html form.tool .pr-grid tbody tr.emp-row > td.c-rate, html form.tool .pr-grid tbody tr.emp-row > td.c-week, html form.tool .pr-grid tbody tr.emp-row > td.r { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; }
  html form.tool .pr-grid td[data-label]::before { white-space: normal; }
  html form.tool .pr-grid td.r { flex-wrap: wrap; }
}
.rule-custom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; contain: inline-size; }
.rule-custom[hidden] { display: none; }
.rule-custom > .field { min-width: 0; }
.rule-custom .input { width: 100%; }
.tc-head + .rule-custom { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tc-settings--6 + .rule-custom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media screen and (max-width: 860px) { .tc-head + .rule-custom, .tc-settings--6 + .rule-custom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 560px) { .rule-custom, .tc-head + .rule-custom, .tc-settings--6 + .rule-custom { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } }
@media screen and (max-width: 860px) { .tc-page .tc > .rule-custom { order: 1; } }
@media screen and (max-width: 480px) {
  .tc-settings > .field:has(#state), .tc-settings > .field:has(#state) + .field { grid-column: 1 / -1; }
}
@media screen and (max-width: 420px) {
  .tc-head > .tc-settings:not(.tc-settings--6) { display: contents; }
  .tc-settings:not(.tc-settings--6) > .field:has(#state) { order: 1; }
  .tc-settings:not(.tc-settings--6) > .field:has(#rate) { order: 5; }
  .tc-page .tc:has(> .tc-head > .tc-settings:not(.tc-settings--6)) { row-gap: var(--sp-2); }
  .tc-page .tc:has(> .tc-head > .tc-settings:not(.tc-settings--6)) > .table-wrap .ex-note { margin-bottom: 6px; }
  .tc-page .tc:has(> .tc-head > .tc-settings:not(.tc-settings--6)) > :is(.kpis, .tc-bottom) { margin-top: var(--sp-2); }
  .tc-settings > .field:has(#emp), .tc-settings > .field:has(#employer), .tc-meta > .field { grid-column: 1 / -1; }
  p.byline.byline--line { white-space: normal; overflow: visible; text-overflow: clip; min-height: 2lh; }
}
@media screen and (max-width: 860px) { .tc-head + .rule-custom, .tc-settings--6 + .rule-custom { column-gap: var(--sp-3); } }
.tool__result .ledger td.calc { white-space: normal; }
.tc-bottom > .rule-line { grid-column: 1 / -1; max-width: 72ch; min-height: calc(1.5em * 3); }
.tc:has(#rule-custom:not([hidden])) .loc-note:not(.is-on) { display: none; }