/* ClockIn — styles. Values come from the ClockIn Style Guide; change them there first. */

:root {
  --ground: #F3F4F6;
  --surface: #FFFFFF;
  --surface-subtle: #F9FAFB;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --ink: #111827;
  --ink-secondary: #374151;
  --ink-muted: #4B5563;
  --ink-inverse: #F9FAFB;
  --ink-inverse-muted: #D1D5DB;
  --accent: #60A5FA;
  --ink-on-accent: #000000;
  --accent-strong: #1D4ED8;
  --accent-tint: #EFF6FF;
  --accent-tint-border: #BFDBFE;
  --chart-bar: #2563EB;
  --chart-bar-active: #1E3A8A;
  --chart-empty: #D1D5DB;
  --chart-grid: #F0F1F3;
  --person-1: #2563EB;
  --person-2: #DB2777;
  --person-2-active: #9D174D;
  --client-other: #6B7280;
  --attention: #FBBF24;
  --attention-tint: #FFFBEB;
  --attention-border: #FCD34D;
  --attention-ink: #92400E;
  --success: #047857;
  --success-dot: #059669;
  --danger: #B91C1C;
  --overlay: rgba(17, 24, 39, 0.45);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-9: 36px; --space-11: 44px;
  --radius-xs: 3px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px;
  --shadow-tooltip: 0 6px 16px rgba(17, 24, 39, 0.18);
  --shadow-toast: 0 10px 30px rgba(17, 24, 39, 0.25);
  --shadow-modal: 0 24px 60px rgba(17, 24, 39, 0.25);
  --control-min: 44px; --control-field: 48px; --control-tall: 52px; --row-entry: 48px; --row-client: 60px;
  --sidebar-width: 232px; --modal-width: 560px; --chart-height: 180px;
  --tabbar-height: 64px; --fab-size: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: Poppins, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 14px/1.45 var(--font); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
svg { flex: none; }

/* Type */
.page-title { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.025em; }
.stat-value { font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; }
.modal-title { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em; }
.section-title { font-size: 16px; line-height: 22px; font-weight: 600; }
.row-title { font-size: 15px; font-weight: 600; }
.caption { font-size: 12px; line-height: 17px; color: var(--ink-muted); }
.eyebrow { font-size: 12px; line-height: 17px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); }
.column-header { font-size: 12px; line-height: 17px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.strong { font-weight: 500; }
.num { text-align: right; }
.muted { color: var(--ink-muted); }
.secondary { color: var(--ink-secondary); }

/* Shell */
.app { display: flex; flex-wrap: wrap; min-height: 100%; }
.sidebar {
  flex: 1 1 var(--sidebar-width); max-width: var(--sidebar-width); background: var(--surface);
  border-right: 1px solid var(--border); padding: var(--space-6) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-8); position: sticky; top: 0; height: 100vh;
}
.wordmark { display: flex; align-items: baseline; gap: 10px; padding: 0 var(--space-3); }
.wordmark-text { font-size: 17px; font-weight: 700; letter-spacing: 0.14em; }
.wordmark-text span { color: var(--accent-strong); }
.wordmark-tag { font-size: 12px; color: var(--ink-muted); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 1px 10px; }
.nav { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-item {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-min); padding: 0 var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-lg); background: transparent; color: var(--ink-muted); text-align: left; width: 100%;
}
.nav-item .dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.nav-item .label { flex-grow: 1; }
.nav-item[aria-current="page"] { background: var(--accent-tint); border-color: var(--accent-tint-border); color: var(--ink); font-weight: 500; }
.nav-item[aria-current="page"] .dot { background: var(--accent-strong); }
.badge { font-size: 12px; font-weight: 600; background: var(--attention); color: var(--ink-on-accent); border-radius: var(--radius-pill); padding: 1px 9px; }
.account { margin-top: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.account-row { display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--ink-inverse); display: flex; align-items: center; justify-content: center; font-weight: 600; border: 0; }
.connected { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-muted); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 6px; }
.connected .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-dot); }
.link-button { min-height: var(--control-min); padding: 0; border: 0; background: transparent; color: var(--ink); text-decoration: underline; text-align: left; }
.link-button.small { font-size: 12px; }

.content { flex: 999 1 560px; min-width: 0; padding: 28px var(--space-9) var(--space-11); display: flex; flex-direction: column; gap: var(--space-6); }
.screen { display: flex; flex-direction: column; gap: var(--space-6); }
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.header-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.month-nav { display: flex; align-items: center; gap: var(--space-3); }
.month-nav .title-block { min-width: 220px; }

/* Phone-only pieces are hidden on desktop; the phone block below shows them. */
.topbar, .fab, .tabbar, .phone-only, .cell-meta { display: none; }

/* Running timer */
.timer-list { display: flex; flex-direction: column; gap: var(--space-2); }
.timer-bar { display: flex; align-items: center; gap: var(--space-4); padding: 10px var(--space-4) 10px var(--space-5); background: var(--accent-tint); border: 1px solid var(--accent-tint-border); border-radius: var(--radius-lg); }
.timer-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success-dot); flex: none; }
.timer-what { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.timer-time { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.card-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); }
.scroll-x { overflow-x: auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px var(--space-4); }

/* Buttons and pills */
.btn { min-height: var(--control-min); padding: 0 22px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.btn-primary { border: 0; background: var(--accent); color: var(--ink-on-accent); font-weight: 500; }
.btn-text { border: 0; background: transparent; color: var(--ink-muted); padding: 0 14px; }
.btn-danger { border: 0; background: transparent; color: var(--danger); padding: 0 14px; }
.btn-tall { min-height: var(--control-tall); }
.btn-field { min-height: var(--control-field); }
.icon-btn { width: var(--control-min); height: var(--control-min); padding: 0; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn.plain { border: 0; background: var(--ground); }
.segmented { display: flex; gap: var(--space-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: var(--space-1); }
.segmented button { min-height: var(--control-min); padding: 0 20px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-secondary); }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--ink-inverse); font-weight: 500; }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill { min-height: var(--control-min); padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-secondary); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap; }
.pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ink-inverse); font-weight: 500; }
.swatch { width: 10px; height: 10px; border-radius: var(--radius-xs); flex: none; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-toggle { min-width: 220px; min-height: var(--control-tall); padding: 0 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); display: flex; align-items: center; gap: 10px; width: 100%; }
.dropdown-toggle.compact { min-height: var(--control-min); border-radius: var(--radius-lg); padding: 0 12px; }
.dropdown-toggle .label { flex-grow: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 10; min-width: 260px; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(17, 24, 39, 0.15); padding: var(--space-1); }
.dropdown-option { width: 100%; min-height: var(--control-min); display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-align: left; }
.dropdown-option[aria-selected="true"] { background: var(--accent-tint); font-weight: 500; }
.dropdown-option .label { flex-grow: 1; }

/* Fields */
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field label, .field .label { font-size: 12px; color: var(--ink-muted); }
.input, .select { min-height: var(--control-field); padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); width: 100%; min-width: 0; }
.input.compact, .select.compact { min-height: var(--control-min); padding: 0 12px; }
.field-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.field-row > .field { flex: 1 1 150px; }
.stepper { display: flex; gap: 6px; }
.stepper button { width: 48px; min-height: var(--control-field); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); font-size: 12px; }
.stepper input { flex: 1 1 0; text-align: center; font-weight: 600; }
.hint { font-size: 12px; color: var(--ink-muted); }
.hint.bad { color: var(--danger); }
.filters { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 14px; }
.filters .field-row { align-items: flex-end; }

/* Chart */
.chart { padding: var(--space-4) var(--space-5) 14px; }
.chart-inner { min-width: 720px; display: flex; flex-direction: column; gap: 14px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.chart-title { display: flex; align-items: baseline; gap: var(--space-5); }
.legend { display: flex; align-items: center; gap: var(--space-4); font-size: 12px; color: var(--ink-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-body { display: flex; gap: var(--space-2); }
.y-axis { position: relative; width: 28px; height: var(--chart-height); font-size: 12px; color: var(--ink-muted); }
.y-axis span { position: absolute; right: 0; transform: translateY(50%); }
.plot-wrap { flex: 1 1 0; min-width: 0; }
.plot { position: relative; height: var(--chart-height); border-bottom: 1px solid var(--border-strong); }
.gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--chart-grid); }
.bars { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.bar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; padding: 0 1px; border: 0; background: transparent; display: flex; align-items: flex-end; }
.bar-stack { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; }
.bar-seg { display: block; width: 100%; }
.bar-seg.p1 { background: var(--chart-bar); min-height: 2px; }
.bar-seg.p2 { background: var(--person-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.bar-seg.top { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.bar-seg.empty { background: var(--chart-empty); }
.bar-seg.future { background: var(--border); }
.bar.active .p1 { background: var(--chart-bar-active); }
.bar.active .p2 { background: var(--person-2-active); }
.bar.active .empty, .bar.active .future { background: var(--chart-empty); }
.tooltip { position: absolute; z-index: 2; background: var(--ink); color: var(--ink-inverse); border-radius: var(--radius-md); padding: 6px 10px; font-size: 12px; line-height: 1.35; white-space: nowrap; text-align: left; pointer-events: none; box-shadow: var(--shadow-tooltip); }
.tooltip .dim { display: block; color: var(--ink-inverse-muted); }
.tooltip .big { display: block; font-size: 14px; font-weight: 600; }
.x-axis { display: flex; padding-top: 6px; font-size: 12px; color: var(--ink-muted); }
.x-axis span { flex: 1 1 0; min-width: 0; text-align: center; }
.x-axis .weekend { color: var(--client-other); }
.x-axis .active { color: var(--ink); }

/* Tables */
.table { min-width: 720px; }
.table-row { display: grid; align-items: center; gap: var(--space-5); padding: 0 var(--space-5); border-top: 1px solid var(--border); }
.table-row.head { padding-top: 10px; padding-bottom: 10px; }
.table-row.total { min-height: var(--row-client); border-top-color: var(--border-strong); background: var(--surface-subtle); font-weight: 600; }
.row-button { width: 100%; border: 0; background: var(--surface); color: var(--ink); text-align: left; }
.row-button:hover { background: var(--surface-subtle); }
.clients-cols { grid-template-columns: 220px minmax(0, 1fr) 80px 70px 130px; }
.client-row { min-height: var(--row-client); }
.client-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.track { height: 6px; border-radius: var(--radius-pill); background: var(--border); }
.track span { display: block; height: 6px; border-radius: var(--radius-pill); }
.entries-table { min-width: 880px; }
.entries-cols { grid-template-columns: 90px minmax(0, 1fr) 170px 70px 70px 120px 60px 24px; gap: var(--space-3); }
.entry-row { min-height: var(--row-entry); }
.cell-task { min-width: 0; overflow-wrap: anywhere; }
.cell-client, .appr-client { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-secondary); min-width: 0; }
.cell-icon { color: var(--ink-muted); display: flex; justify-content: flex-end; }
.source { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.source.ai { color: var(--accent-strong); }
.table-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-strong); background: var(--surface-subtle); }
.empty-state { padding: 28px var(--space-5); border-top: 1px solid var(--border); color: var(--ink-muted); }
.approval-row { grid-template-columns: minmax(0, 1fr) 190px 60px 300px; gap: var(--space-3); padding: 10px 12px 10px var(--space-5); }
.appr-main { min-width: 0; overflow-wrap: anywhere; }
.approval-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.client-list-cols { grid-template-columns: minmax(0, 1fr) 140px 100px 130px 100px 24px; gap: var(--space-3); }
.status-active { color: var(--success); }
.status-archived { color: var(--ink-muted); }

/* Modal and toast */
.modal-backdrop { position: fixed; inset: 0; z-index: 20; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 64px var(--space-4); overflow-y: auto; }
.modal { width: 100%; max-width: var(--modal-width); background: var(--surface); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-modal); display: flex; flex-direction: column; gap: var(--space-4); }
.modal.narrow { max-width: 480px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-4); }
.modal-actions .grow { flex-grow: 1; }
.checkbox-row { display: flex; align-items: center; gap: 10px; min-height: var(--control-min); cursor: pointer; }
.checkbox-row input { width: 18px; height: 18px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 30; background: var(--ink); color: var(--ink-inverse); border-radius: var(--radius-pill); padding: 12px 22px; box-shadow: var(--shadow-toast); max-width: calc(100% - 32px); text-align: center; }

/* Sign-in */
.signin-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); }
.signin { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: 18px; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------- Phone (ClockIn Prototype, Mobile frame) ---------- */
@media (max-width: 800px) {
  .sidebar { display: none; }
  /* Room at the bottom for the tab bar, the floating button and the safe area. */
  .content { padding: var(--space-3) var(--space-4) calc(152px + var(--safe-bottom)); gap: 14px; }
  .screen { gap: 14px; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .topbar .wordmark-text { font-size: 14px; }
  .topbar .avatar { width: var(--control-min); height: var(--control-min); }
  .page-title { font-size: 22px; line-height: 28px; }
  .page-header { gap: var(--space-3); }
  .phone-only { display: block; }
  .phone-hide, .entries-controls, .tile-clients, .tooltip { display: none; }
  .phone-secondary { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); min-height: var(--control-min); padding: 0 18px; }

  .timer-bar { gap: var(--space-3); padding: 10px var(--space-3) 10px var(--space-4); }
  .timer-time { font-size: 18px; }
  .timer-bar .btn { padding: 0 18px; }

  /* Overview */
  .month-nav { justify-content: space-between; width: 100%; gap: var(--space-2); }
  .month-nav .title-block { min-width: 0; text-align: center; }
  .header-controls { width: 100%; gap: 10px; }
  .header-controls > .btn-primary { display: none; }
  .segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .segmented button { padding: 0; }
  .dropdown { width: 100%; }
  .dropdown-toggle { min-width: 0; min-height: var(--control-field); border-radius: var(--radius-lg); padding: 0 var(--space-4); }
  .dropdown-menu { right: 0; min-width: 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 12px 14px; }
  .stat-value { font-size: 24px; line-height: 32px; }
  .chart { padding: 14px 14px 10px; }
  .chart-inner { min-width: 0; gap: 10px; }
  .chart-head { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .chart-title { justify-content: space-between; }
  .chart-head .secondary { font-size: 12px; min-height: 17px; }
  .chart-body { gap: 6px; }
  .y-axis { width: 24px; height: 120px; }
  .plot { height: 120px; }
  .x-axis { padding-top: 4px; }
  .x-axis span { white-space: nowrap; overflow: visible; }
  .x-axis span:not(.label-m) { visibility: hidden; }
  .table, .entries-table { min-width: 0; }
  .card-header { padding: 14px var(--space-4) 10px; }
  .clients-cols { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cn ch" "ct ca"; gap: 6px 14px; padding: 8px var(--space-4); min-height: 64px; }
  .clients-cols.head { display: none; }
  .clients-cols .cn { grid-area: cn; flex-wrap: wrap; gap: 8px; }
  .clients-cols .ct { grid-area: ct; align-self: center; }
  .clients-cols .ch { grid-area: ch; align-self: end; }
  .clients-cols .ca { grid-area: ca; align-self: start; font-size: 12px; font-weight: 400; color: var(--ink-muted); }
  .clients-cols .cs { display: none; }
  .clients-cols .cell-meta { display: inline; margin-left: -2px; }
  .table-row.total.clients-cols { padding: 14px var(--space-4); min-height: 0; }
  .table-row.total .ch { font-weight: 700; }

  /* Time entries */
  .filters { padding: var(--space-3) 14px; }
  .filters .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .filters .field > label, .filters .field > .label { display: none; }
  .f-month { order: 1; } .f-person { order: 2; } .f-client { order: 3; } .f-search { order: 4; }
  .f-client, .f-search { grid-column: 1 / -1; }
  .f-source { display: none; }
  .filters .select.compact { padding: 0 10px; }
  .entries-cols { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: 10px var(--space-4); }
  .entries-cols.head { display: none; }
  .entry-row { min-height: 60px; }
  .cell-date, .cell-client, .cell-who, .cell-source, .cell-time, .cell-icon, .cell-rate, .cell-status, .table-foot { display: none; }
  .cell-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 400; }
  .cell-task { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cell-dur { font-size: 16px; }

  /* Approvals: each entry is its own card */
  .appr-all { width: 100%; }
  .approvals-card { background: transparent; border: 0; border-radius: 0; }
  .approvals-card .card-header { display: none; }
  .approvals-card .empty-state { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px var(--space-4); }
  .approval-row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main dur" "client dur" "actions actions";
    gap: 4px var(--space-3); padding: 14px var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  }
  .approval-row + .approval-row { margin-top: 10px; }
  .appr-main { grid-area: main; }
  .appr-client { grid-area: client; font-size: 12px; color: var(--ink-muted); }
  .appr-dur { grid-area: dur; align-self: start; font-size: 18px; }
  .approval-actions { grid-area: actions; margin-top: var(--space-2); justify-content: stretch; }
  .approval-actions .btn-primary { flex: 1 1 0; }
  .approval-actions .btn-text { padding: 0 12px; }

  /* Clients */
  .client-list-cols { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n h" "n a"; gap: 2px var(--space-3); padding: 8px var(--space-4); min-height: 64px; }
  .client-list-cols.head { display: none; }
  .cl-name { grid-area: n; flex-wrap: wrap; gap: 2px 8px; }
  .cl-name .cell-meta { display: block; flex-basis: 100%; }
  .cl-hours { grid-area: h; align-self: end; font-size: 16px; }
  .cl-amount { grid-area: a; align-self: start; font-size: 12px; color: var(--ink-muted); }

  /* Modal as a bottom sheet: Task · Client · Duration · Date and start · Who · primary action */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 18px var(--space-4) calc(20px + var(--safe-bottom)); max-height: 92vh; overflow-y: auto; gap: 14px; }
  .modal.narrow { max-width: none; }
  .pills.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .pills.scroll .pill { flex: none; padding: 0 14px; }
  .m-when { order: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .m-when .input { padding: 0 10px; }
  .m-who { order: 2; }
  .m-actions { order: 3; }
  .stepper button { width: 64px; min-height: var(--control-tall); font-size: 14px; }
  .stepper input { min-height: var(--control-tall); font-size: 18px; }
  .pills.who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-actions { border-top: 0; padding-top: 0; }
  .modal-actions .btn-primary { order: -1; width: 100%; min-height: var(--control-tall); margin-bottom: 6px; }
  .modal.narrow .m-cancel { display: none; }

  /* Floating add button, tab bar, toast */
  .fab { position: fixed; right: var(--space-4); bottom: calc(80px + var(--safe-bottom)); z-index: 5; width: var(--fab-size); height: var(--fab-size); border: 0; border-radius: 50%; background: var(--accent); color: var(--ink-on-accent); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-toast); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: calc(var(--tabbar-height) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: var(--surface); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tab { position: relative; border: 0; background: transparent; color: var(--ink-muted); font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 2px; }
  .tab[aria-current="page"] { color: var(--ink); font-weight: 500; }
  .tab .marker { position: absolute; top: 0; left: 24px; right: 24px; height: 3px; border-radius: 0 0 3px 3px; background: transparent; }
  .tab[aria-current="page"] .marker { background: var(--accent-strong); }
  .tab .badge { position: absolute; top: 8px; right: 14px; padding: 0 7px; }
  .toast { left: var(--space-4); right: var(--space-4); bottom: calc(76px + var(--safe-bottom)); transform: none; max-width: none; padding: 12px 18px; }
}