/*
  ChoreBoy's ⏱️ Work page (web/work.js) and its modals (the day editor, Work settings). It uses
  choreboy.css's tokens and components (panel, btn, chip, input, field-label, wd, switch-row,
  modal-box, modal-foot, ed-head, ed-sec, empty-state), so it looks like the rest of the page and
  light and dark follow the device. Every class here starts with wk-. Responsive from 320 px.
*/

/* Seven sections in the phone's nav grid: four to a row instead of three. */
@media (max-width: 600px) {
  .nav:has(> .nav-btn[data-nav="work"]:not([hidden])) { grid-template-columns: repeat(4, 1fr); }
}

.wk-page { max-width: 1180px; margin: 0 auto; }
.wk-head { align-items: center; }
.wk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.wk-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.wk-side { min-width: 0; }
@media (min-width: 1000px) {
  .wk-grid { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 1.2rem; }
}
/* On a big screen Today stays in view while the month scrolls. */
@media (min-width: 1000px) and (min-height: 760px) {
  .wk-side { position: sticky; top: 4.6rem; }
}
@media (min-width: 1000px) and (max-width: 1100px) and (min-height: 760px) {
  .wk-side { top: 7.4rem; }
}

.wk-sub { margin: 1.1rem 0 .45rem; font-size: .78rem; font-weight: 700; color: var(--text-2); letter-spacing: .04em; text-transform: uppercase; }
.wk-more { font-size: .86rem; font-weight: 650; margin: .3rem 0 0; }
.wk-loading { margin: .6rem 0 0; }

/* Notes above the page: still timed in on an earlier day, last month not invoiced, can't reach the server. */
.wk-alert { display: flex; align-items: center; gap: .5rem .8rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .6rem .9rem; border-radius: var(--radius-lg); background: var(--warn-soft); color: var(--warn); font-size: .92rem; }
.wk-alert.info { background: var(--info-soft); color: var(--info); }
.wk-alert.bad { background: var(--bad-soft); color: var(--bad); }
.wk-alert .grow { flex: 1; min-width: min(100%, 14rem); overflow-wrap: anywhere; }
.wk-alert b { font-weight: 700; }

/* ---------- Today ---------- */

.wk-today { display: flex; flex-direction: column; gap: .7rem; }
.wk-today-head { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem .6rem; flex-wrap: wrap; }
.wk-today-head .panel-title { margin: 0; }
.wk-today-date { font-size: .86rem; color: var(--text-2); display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

.wk-clock { display: flex; align-items: center; justify-content: center; gap: .65rem; width: 100%; min-height: 4.2rem; padding: .9rem 1.2rem; border: 0; border-radius: var(--radius-lg); font: 750 1.35rem var(--font); letter-spacing: -.01em; cursor: pointer; box-shadow: var(--shadow-md); transition: transform .08s, background .15s; }
.wk-clock:active:not(:disabled) { transform: scale(.985); }
.wk-clock:disabled { opacity: .6; cursor: progress; }
.wk-clock.is-out { background: var(--accent); color: var(--accent-contrast); }
.wk-clock.is-out:hover:not(:disabled) { background: var(--accent-hover); }
.wk-clock.is-in { background: var(--text); color: var(--bg); }
.wk-clock.is-in:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 85%, var(--bg)); }
.wk-clock-ico { font-size: 1.15rem; line-height: 1; }

.wk-ask { padding: .75rem .85rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.wk-ask p { margin: 0 0 .6rem; font-size: .92rem; }

.wk-state { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.wk-state-dot { flex-shrink: 0; width: .6rem; height: .6rem; border-radius: 50%; background: var(--border-strong); }
.wk-state.in .wk-state-dot { background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); animation: wk-pulse 2s infinite; }
@keyframes wk-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  70% { box-shadow: 0 0 0 .45rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.wk-still { display: flex; align-items: center; gap: .4rem .7rem; flex-wrap: wrap; }
.wk-today-sum { margin: .1rem 0 0; font-size: .9rem; color: var(--text-2); }
.wk-today-sum b { color: var(--text); font-variant-numeric: tabular-nums; }
.wk-none { margin: 0; }
.wk-today-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.wk-te + .wk-te { border-top: 1px solid var(--border); }
.wk-te-btn { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .7rem; background: var(--surface); border: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.wk-te-btn:hover { background: var(--surface-2); }
.wk-te-dot { flex-shrink: 0; width: .5rem; height: .5rem; border-radius: 50%; background: var(--border-strong); }
.wk-te.is-now .wk-te-dot { background: var(--accent); }
.wk-te.is-past .wk-te-dot { background: var(--text-3); }
.wk-te.is-later .wk-te-btn { color: var(--text-2); }
.wk-te-time { flex: 1; min-width: 0; font-weight: 550; font-variant-numeric: tabular-nums; }
.wk-te-task { flex: 2; min-width: 0; font-size: .84rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-te-len { flex-shrink: 0; font-size: .82rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.wk-edit-day { align-self: flex-start; font-size: .88rem; font-weight: 600; }
.wk-today .field-label { margin-top: .3rem; margin-bottom: 0; }
.wk-task-row { display: flex; gap: .45rem; }
.wk-task-row .input { flex: 1; }
.wk-task-note { margin: -.35rem 0 0; }

/* ---------- the month ---------- */

.wk-month-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.wk-month-nav { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.wk-month-tools { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.wk-arrow { flex-shrink: 0; padding-left: .6rem; padding-right: .6rem; box-shadow: none; }
.wk-month-title { margin: 0 .2rem; font-size: 1.2rem; font-weight: 750; letter-spacing: -.02em; white-space: nowrap; }
/* The month's sheet as its heading ("📒 TOTData Time Tracker - November 1 - 30, 2026"): long, so it wraps between the arrows. */
.wk-month-head.has-sheet .wk-month-nav { flex: 1 1 20rem; }
.wk-month-title.is-sheet { min-width: 0; font-size: 1.08rem; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.wk-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .9rem 0 .2rem; }
.wk-total { display: flex; flex-direction: column; gap: .05rem; padding: .6rem .75rem; border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.wk-total b { font-size: 1.12rem; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wk-total span { font-size: .78rem; color: var(--text-3); }
.wk-lock { margin: .7rem 0 0; padding: .55rem .8rem; border-radius: var(--radius); background: var(--info-soft); color: var(--info); font-size: .9rem; }

.wk-days { list-style: none; margin: .8rem -.4rem 0; padding: 0; container-type: inline-size; }
.wk-day { display: grid; grid-template-columns: 2.6rem 3.9rem minmax(0, 1fr) auto; grid-template-areas: "date wd main total"; align-items: center; gap: .15rem .6rem; width: 100%; padding: .45rem .5rem; background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.wk-days li:first-child .wk-day { border-top: 0; }
.wk-day:hover { background: var(--surface-2); }
.wk-date { grid-area: date; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.wk-dow { font-size: .68rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.wk-dom { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wk-wd { grid-area: wd; font-size: .8rem; font-weight: 650; color: var(--accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-day-main { grid-area: main; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.wk-day-task { font-weight: 550; overflow-wrap: anywhere; line-height: 1.3; }
.wk-day-task.faint { color: var(--text-3); font-weight: 500; font-style: italic; }
.wk-hol { font-size: .8rem; color: var(--warn); font-weight: 600; }
.wk-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.wk-chip { font: 550 .76rem var(--font); padding: .08rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-chip.running { background: var(--accent); color: var(--accent-contrast); }
.wk-chip.locked { background: var(--surface-2); color: var(--text-2); }
.wk-flag { font-size: .78rem; font-weight: 650; }
.wk-flag.bad { color: var(--bad); }
.wk-day-total { grid-area: total; display: flex; flex-direction: column; align-items: flex-end; font-weight: 650; font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-run { font-size: .74rem; font-weight: 600; color: var(--accent-text); }

/* Weekends (days off) and holidays are dimmed; today stands out; a problem from the last check is red. */
.wk-day.is-off, .wk-day.is-holiday { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.wk-day.is-off .wk-dom, .wk-day.is-off .wk-dow, .wk-day.is-holiday .wk-dom, .wk-day.is-holiday .wk-dow { color: var(--text-3); }
.wk-day.is-off:hover, .wk-day.is-holiday:hover { background: var(--surface-2); }
.wk-day.is-future .wk-day-total { color: var(--text-2); }
.wk-day.is-today { box-shadow: inset 3px 0 0 var(--accent); }
.wk-day.is-today .wk-dom { color: var(--accent-text); }
.wk-day.has-warn .wk-dom { color: var(--warn); }
.wk-day.has-error { background: var(--bad-soft); box-shadow: inset 3px 0 0 var(--bad); }
.wk-day.has-error .wk-dom, .wk-day.has-error .wk-dow { color: var(--bad); }
.wk-day.has-error:hover { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); }

/* A narrow month: the WD label and the total on the first line, the task and the times under them. */
@container (max-width: 520px) {
  .wk-day { grid-template-columns: 2.4rem minmax(0, 1fr) auto; grid-template-areas: "date wd total" "date main main"; row-gap: .2rem; }
  .wk-wd:empty { display: none; }
  .wk-day-main:empty { display: none; }
}

/* ---------- Invoice & timesheet ---------- */

.wk-invoice .panel-head { margin-bottom: .5rem; }
.wk-invoice .muted { margin: 0; }
.wk-report.is-checking { opacity: .75; }
.wk-verdict { display: flex; align-items: baseline; gap: .3rem .7rem; flex-wrap: wrap; margin: 0; padding: .6rem .8rem; border-radius: var(--radius); font-weight: 650; }
.wk-verdict.ok { background: var(--good-soft); color: var(--good); }
.wk-verdict.bad { background: var(--bad-soft); color: var(--bad); }
.wk-verdict .small-muted { font-weight: 500; }
.wk-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.wk-issue { padding: .45rem .7rem; border-radius: var(--radius-sm); font-size: .9rem; overflow-wrap: anywhere; border-left: 3px solid var(--border-strong); background: var(--surface-2); }
.wk-issues.bad .wk-issue { border-left-color: var(--bad); }
.wk-issues.warn .wk-issue { border-left-color: var(--warn); }
.wk-issue .link-btn { font-weight: 650; white-space: nowrap; }

.wk-table-wrap { overflow-x: auto; margin: 0 0 .4rem; border: 1px solid var(--border); border-radius: var(--radius); }
.wk-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.wk-table th { text-align: left; font-size: .72rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; padding: .5rem .7rem; background: var(--surface-2); white-space: nowrap; }
.wk-table td { padding: .45rem .7rem; border-top: 1px solid var(--border); vertical-align: top; }
.wk-table td:first-child { min-width: 10rem; overflow-wrap: anywhere; }
.wk-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-table tfoot td { color: var(--text-2); }
.wk-table tfoot td:first-child { text-align: right; min-width: 0; }
.wk-table tr.wk-due td { color: var(--text); font-weight: 750; }

.wk-generate { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.wk-generate > .small-muted { margin: 0; }
.wk-issue-date { display: flex; align-items: flex-end; gap: .4rem .8rem; flex-wrap: wrap; }
.wk-issue-date .field-label { flex-basis: 100%; margin: 0; }
.wk-issue-date .input { width: auto; max-width: 100%; }
.wk-issue-date .small-muted { padding-bottom: .55rem; }
.wk-ack { margin: .2rem 0 0; font-weight: 600; }

.wk-past-h { margin-top: 1.4rem; }
.wk-invs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.wk-inv { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main fig" "acts acts"; gap: .35rem .8rem; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); }
.wk-inv.big { background: var(--accent-soft); border-color: transparent; }
.wk-inv-main { grid-area: main; display: flex; flex-direction: column; gap: .1rem; min-width: 0; overflow-wrap: anywhere; }
.wk-inv-name { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.wk-inv-name .link-btn { font-size: .88rem; }
.wk-inv-fig { grid-area: fig; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.wk-inv-acts { grid-area: acts; }

/* ---------- the modals ---------- */

.modal-box.wk-modal { width: min(640px, 100%); }
.modal-box.wk-ask-box { width: min(460px, 100%); }
.wk-ask-text { margin: 0 0 1rem; color: var(--text-2); line-height: 1.5; }
.wk-modal .ed-head { margin-bottom: .2rem; }
.wk-de-sub { margin: 1rem 0 .45rem; font-size: .78rem; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.wk-de-long { margin: .35rem 0 0; }
.input.wk-de-date { width: auto; max-width: 100%; }
.wk-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.wk-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .45rem .55rem; border: 1px solid var(--border); border-radius: var(--radius); }
.wk-row.is-new { border-style: dashed; border-color: var(--accent); }
.wk-row.locked { background: var(--surface-2); }
.input.wk-time { width: 8.2rem; padding-left: .5rem; padding-right: .4rem; font-variant-numeric: tabular-nums; }
.wk-to { font-size: .85rem; color: var(--text-3); }
.wk-len { flex: 1; min-width: 6rem; font-size: .84rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wk-del { margin-left: auto; }
.input.wk-row-task { flex: 1 0 100%; width: 100%; }
.wk-de-note { margin: .5rem 0 0; }
.wk-de-btns { margin-top: .6rem; }
.wk-fill-times { font-weight: 500; color: var(--text-3); margin-left: .25rem; }
.wk-de-total { align-self: center; font-variant-numeric: tabular-nums; }

.wk-sec-first { margin-top: .8rem; padding-top: .8rem; }
.wk-hint { margin: .35rem 0 0; }
.wk-breaks { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.wk-break { display: flex; flex-direction: column; gap: .45rem; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); }
.wk-break-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.input.wk-break-label { flex: 1; min-width: 8rem; width: auto; }
.wk-switches { display: flex; flex-direction: column; gap: .2rem; margin-top: .9rem; }
.wk-switches .wk-hint { margin: -.1rem 0 .5rem 3.1rem; }

@media (max-width: 600px) {
  .wk-clock { min-height: 3.8rem; font-size: 1.2rem; }
  .wk-totals { gap: .35rem; }
  .wk-total { padding: .5rem .55rem; }
  .wk-total b { font-size: .98rem; }
  .wk-month-title { font-size: 1.08rem; }
  .wk-month-title.is-sheet { font-size: .98rem; }
  .wk-switches .wk-hint { margin-left: 0; }
  .input.wk-time { width: 7.4rem; }
}
@media (max-width: 380px) {
  .wk-totals { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wk-totals .wk-total:last-child { grid-column: 1 / -1; }
  /* An entry in the day editor: the two times side by side, its length and 🗑 under them. */
  .wk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; }
  .wk-row .wk-to { display: none; }
  .wk-row .input.wk-time { width: 100%; }
  .wk-row .wk-len { grid-column: 1; min-width: 0; }
  .wk-row .wk-del, .wk-row .chip { grid-column: 2; justify-self: end; margin-left: 0; }
  .wk-row .wk-row-task { grid-column: 1 / -1; }
  .input.wk-time { font-size: .85rem; padding-left: .4rem; padding-right: .25rem; }
  .wk-break-row .input.wk-time { width: calc(50% - 1.1rem); min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-state.in .wk-state-dot { animation: none; }
  .wk-clock { transition: none; }
}