/* Records and preferences. Page layouts only; shared controls live in design-system.css. */
body:is([data-page="focus"],[data-page="finance"],[data-page="data"],[data-page="settings"]) .page {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
}

/* One clock component, with a genuinely compact representation on the daily page. */
.pomo-panel { text-align:center; min-width:0; }
.pomo-modes { display:flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--neutral-surface); border-radius:8px; }
.pomo-modes button { flex:1 1 36px; min-width:0; min-height:32px; padding:4px 8px; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--sub); font-size:12px; line-height:20px; overflow-wrap:anywhere; }
.pomo-modes button.active { background:var(--card); color:var(--focus-color,var(--ink)); border-color:var(--line); box-shadow:0 1px 2px #20282008; }
.timer-context { display:flex; justify-content:center; align-items:center; gap:8px; margin:20px 0 0; font-size:12px; color:var(--sub); }
.timer-context strong { color:var(--focus-color,var(--ink)); font-size:13px; font-weight:500; }
.mode-indicator { width:5px; height:5px; border-radius:50%; background:var(--focus-color,var(--accent)); }
.timer-ring { position:relative; width:176px; height:176px; margin:20px auto 24px; }
.timer-ring>svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.timer-ring [data-timer-ring] { stroke:var(--focus-color,var(--timer-stroke)); transition:stroke 140ms ease; }
.timer-center { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; }
.timer-number { font:400 44px/1 var(--font-numeric,var(--font)); font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; }
.timer-center small { font-size:12px; line-height:20px; color:var(--sub); }
.timer-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
.timer-mode-note { margin:16px 0 0; font-size:12px; line-height:20px; color:var(--sub); }
.timer-preview { margin:12px auto 0; font-size:12px; }
.pomo-footer { font-size:12px; color:var(--sub); }
.compact-timer { display:inline-flex; align-items:center; width:auto; padding:0; text-align:left; }
.compact-timer .pomo-modes,
.compact-timer .pomo-footer,
.compact-timer .timer-state,
.compact-timer .timer-preview,
.compact-timer .timer-ring>svg,
.compact-timer .timer-center>small { display:none; }
.compact-timer .compact-timer-body { display:flex; align-items:center; gap:12px; min-width:0; }
.compact-timer .timer-ring { position:static; width:auto; height:auto; margin:0; }
.compact-timer .timer-center { position:static; display:block; }
.compact-timer .timer-number { font-size:20px; line-height:28px; letter-spacing:-.01em; }
.compact-timer .timer-actions { flex-wrap:nowrap; justify-content:flex-start; gap:4px; }
.compact-timer .timer-actions>.btn { min-height:28px; padding:3px 10px; border-radius:6px; font-size:12px; line-height:20px; }
.compact-timer .timer-actions>.timer-reset { width:28px; min-width:28px; padding:4px; background:transparent; border-color:transparent; color:var(--sub); box-shadow:none; }
.compact-timer .timer-reset>span { display:none; }
.compact-timer .timer-reset:hover { background:var(--neutral-surface); color:var(--ink); }

/* Focus: choose one task, work on it, then keep its result. */
.focus-layout { display:grid; grid-template-columns:minmax(320px,420px) minmax(0,1fr); align-items:start; gap:24px; min-width:0; min-height:0; }
.focus-card { min-width:0; }
.focus-card .card-head { align-items:center; gap:12px; padding-bottom:16px; }
.focus-card .card-head h2 { white-space:nowrap; }
.focus-card .card-head h2>svg { display:none; }
.focus-card-tools { display:flex; align-items:center; gap:8px; min-width:0; color:var(--sub); font-size:12px; line-height:20px; }
.focus-status { color:var(--sub); font-size:12px; line-height:20px; white-space:nowrap; }
.focus-card>.pomo-panel { padding:0 24px 20px; }
.focus-card .pomo-modes { margin:0; }
.focus-card .pomo-modes button { min-height:30px; }
.focus-card .pomo-modes:has(button[disabled]) { display:none; }
.focus-card .timer-context { display:none; }
.focus-plan { display:grid; gap:14px; margin:0 0 20px; text-align:left; min-width:0; }
.focus-plan label { display:grid; gap:7px; min-width:0; font-size:12px; line-height:20px; color:var(--sub); }
.focus-plan .field { margin:0; }
.focus-plan .field>span { margin:0; }
.focus-plan label:has(select[name="focusGoalId"]) { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; }
.focus-plan .input,.focus-plan input,.focus-plan select { width:100%; min-width:0; }
.focus-plan input[name="focusTitle"] { min-height:42px; font-size:14px; }
.focus-plan select[name="focusGoalId"] { min-height:38px; font-size:13px; }
.focus-session-task { display:grid; justify-items:start; gap:6px; min-width:0; margin-bottom:18px; padding:0 0 16px; text-align:left; border-bottom:1px solid var(--line); }
.focus-session-task small { font-size:12px; line-height:20px; color:var(--focus-color,var(--sub)); }
.focus-session-task strong { display:block; max-width:100%; font-size:18px; font-weight:500; line-height:1.55; color:var(--ink); overflow-wrap:anywhere; }
.focus-session-task>span { max-width:100%; font-size:12px; line-height:20px; color:var(--sub); overflow-wrap:anywhere; }
.focus-countdown { margin:20px 0 16px; min-width:0; }
.focus-countdown .timer-ring { width:100%; height:auto; margin:0; }
.focus-countdown .timer-ring>svg { display:none; }
.focus-countdown .timer-center { position:static; gap:6px; }
.focus-countdown .timer-number { font-size:52px; font-weight:400; line-height:1.15; letter-spacing:-.025em; }
.focus-countdown .timer-center small { display:none; }
.focus-card .focus-time-progress { width:100%; height:3px; margin:18px 0 0; overflow:hidden; background:var(--timer-track); border-radius:3px; }
.focus-card .focus-time-progress>i { display:block; height:100%; border-radius:inherit; background:var(--focus-color,var(--accent)); }
.focus-progress-meta { display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px; margin-top:8px; min-width:0; color:var(--sub); font-size:12px; line-height:20px; font-variant-numeric:tabular-nums; }
.focus-progress-meta>span { min-width:0; overflow-wrap:anywhere; }
.focus-progress-meta>span:last-child { text-align:right; }
.focus-card .timer-actions { justify-content:stretch; gap:8px; }
.focus-card .timer-actions>.primary { flex:1; min-height:40px; }
.focus-card .timer-actions>.timer-reset { min-height:40px; padding-inline:12px; }
.focus-record-policy { margin:12px 0 0; color:var(--sub); font-size:12px; line-height:20px; text-align:center; overflow-wrap:anywhere; }
.focus-result-summary { display:grid; gap:4px; margin:0 0 16px; overflow-wrap:anywhere; }
.focus-result-summary strong { font-size:14px; font-weight:500; line-height:22px; }
.focus-result-summary span { color:var(--sub); font-size:12px; line-height:20px; }
.focus-layout>.stack { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; min-width:0; min-height:0; align-items:start; }
.focus-layout>.stack>.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.focus-layout>.stack>.card { min-width:0; }
.focus-layout>.stack>.card .card-head { padding-bottom:8px; }
.focus-layout>.stack>.card .empty { padding:28px 16px; }
.stat-card { min-width:0; }
.stat-card .label { font-size:12px; line-height:20px; color:var(--sub); }
.stat-card .number { margin-top:8px; font:400 32px/1.2 var(--font-numeric,var(--font)); font-variant-numeric:tabular-nums; letter-spacing:-.02em; overflow-wrap:anywhere; }
.stat-card .number small { font:400 12px/20px var(--font); letter-spacing:0; color:var(--sub); }
.stat-card .foot { margin-top:8px; font-size:12px; line-height:20px; color:var(--sub); }
.focus-layout .stat-card { border:0; border-radius:0; background:transparent; box-shadow:none; padding:0 24px 4px; }
.focus-layout .stat-card:first-child { padding-left:0; border-right:1px solid var(--line); }
.focus-layout .stat-card:last-child { padding-right:0; }
.focus-layout .stat-card .number { margin-top:4px; font-size:28px; }
.chart-bars { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); align-items:end; gap:8px; height:152px; padding:20px 0 4px; min-width:0; }
.chart-bars>div { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:12px; min-width:0; height:100%; }
.chart-bars i { display:block; flex-shrink:0; width:min(24px,75%); min-height:2px; border-radius:3px 3px 0 0; background:var(--chart-fill,var(--accent)); }
.chart-bars span { font:400 11px/16px var(--font-numeric,var(--font)); color:var(--sub); white-space:nowrap; }
.focus-layout .chart-bars { height:134px; padding-top:8px; gap:12px; }
.focus-layout .schedule-row { display:flex; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); min-width:0; }
.focus-layout .schedule-row:first-child { padding-top:0; }
.focus-layout .schedule-row:last-child { padding-bottom:0; border-bottom:0; }
.focus-layout .schedule-row strong { display:block; font-size:13px; line-height:20px; font-weight:400; overflow-wrap:anywhere; }
.focus-layout .schedule-row p { margin:4px 0 0; font-size:12px; line-height:20px; color:var(--sub); }
.focus-layout .schedule-row>.tiny { flex-shrink:0; font-variant-numeric:tabular-nums; }
.focus-layout .tile-icon { width:32px; height:32px; background:var(--neutral-surface); color:var(--sub); border-radius:6px; }

.focus-outcomes { flex-shrink:0; min-width:0; margin-bottom:24px; padding:14px 18px 2px; border-left:2px solid var(--green); background:var(--green-soft); }
.focus-outcome-heading { display:flex; align-items:flex-start; gap:10px; min-width:0; margin-bottom:4px; }
.focus-outcome-heading>svg { color:var(--green); margin-top:2px; }
.focus-outcome-heading>div { min-width:0; }
.focus-outcome-heading h2 { font-size:14px; font-weight:500; line-height:22px; overflow-wrap:anywhere; }
.focus-outcome-heading p { margin-top:2px; color:var(--sub); font-size:13px; line-height:22px; overflow-wrap:anywhere; }
.focus-outcome-row { display:flex; align-items:center; gap:16px; min-width:0; padding:12px 0; border-bottom:1px solid var(--line); animation:focus-outcome-enter 150ms ease-out both; }
.focus-outcome-row:last-child { border-bottom:0; }
.focus-outcome-copy { flex:1; min-width:0; }
.focus-outcome-copy strong { display:block; font-size:14px; font-weight:500; line-height:22px; overflow-wrap:anywhere; }
.focus-outcome-copy>span { display:block; margin-top:3px; color:var(--sub); font-size:12px; line-height:20px; overflow-wrap:anywhere; }
.focus-outcome-row>.actions { flex-shrink:0; gap:6px; }
.focus-older-results { min-width:0; border-top:1px solid var(--line); }
.focus-older-results>summary { padding:12px 0; color:var(--sub); cursor:pointer; font-size:12px; line-height:20px; }
.focus-older-results>summary:hover { color:var(--ink); }
.focus-older-results[open]>summary { padding-bottom:2px; }
@keyframes focus-outcome-enter { from { opacity:0; } to { opacity:1; } }

/* Finance: figures establish context; the ledger owns the working space. */
body[data-page="finance"] .page>.grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0 0 24px; }
body[data-page="finance"] .page>.grid4 .stat-card { border:0; border-right:1px solid var(--line); border-radius:0; box-shadow:none; background:transparent; padding:0 20px; }
body[data-page="finance"] .page>.grid4 .stat-card:first-child { padding-left:0; }
body[data-page="finance"] .page>.grid4 .stat-card:last-child { border-right:0; padding-right:0; }
body[data-page="finance"] .page>.grid4 .number { font-size:clamp(24px,2.4vw,32px); }
body[data-page="finance"] .page>.toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
body[data-page="finance"] .page>.toolbar>label { flex-shrink:0; }
.finance-workspace { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:24px; min-width:0; min-height:0; align-items:start; }
.finance-ledger { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.finance-ledger .card-head { flex-shrink:0; }
.finance-ledger .table-wrap { min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; }
.finance-ledger table { width:100%; border-collapse:collapse; border-spacing:0; text-align:left; }
.finance-ledger th { position:sticky; top:0; z-index:1; padding:12px 16px; background:var(--neutral-surface); white-space:nowrap; color:var(--sub); font-size:12px; line-height:20px; font-weight:400; border-bottom:1px solid var(--line); }
.finance-ledger td { padding:14px 16px; font-size:13px; line-height:20px; border-bottom:1px solid var(--line); vertical-align:middle; }
.finance-ledger tbody tr:last-child td { border-bottom:0; }
.finance-ledger tbody tr:hover { background:var(--hover-surface); }
.finance-ledger .right { text-align:right; }
.finance-ledger td:nth-child(1),
.finance-ledger td:nth-child(4),
.finance-ledger td:nth-child(5) { white-space:nowrap; font-variant-numeric:tabular-nums; }
.finance-ledger td:nth-child(3) { max-width:240px; overflow-wrap:anywhere; }
.finance-ledger .table-wrap .empty { padding:32px 20px; }
.finance-insights { display:grid; gap:20px; align-content:start; min-width:0; min-height:0; }
.finance-insights .card { min-width:0; }
.finance-insights .card-head { padding-bottom:12px; }
.category-row { display:flex; align-items:center; gap:12px; min-width:0; padding:10px 0; font-size:12px; line-height:20px; }
.category-row>span { flex:0 0 48px; overflow-wrap:anywhere; }
.category-row>b { flex:0 0 76px; text-align:right; font-weight:400; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.category-row .progress-track { height:3px; }
body[data-page="finance"] .page>.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; min-width:0; min-height:0; align-content:start; }
body[data-page="finance"] .page>.grid3>.empty { grid-column:1/-1; width:100%; }
body[data-page="finance"] .goal-card { min-width:0; padding:20px; }
body[data-page="finance"] .goal-card h3 { margin:0 0 8px; font-weight:500; overflow-wrap:anywhere; }
body[data-page="finance"] .goal-card>p { color:var(--sub); font-size:12px; line-height:20px; margin:0 0 20px; }
body[data-page="finance"] .goal-card .goal-card-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:20px; padding-top:12px; border-top:1px solid var(--line); }

/* Data: four actual transfer operations, with copy kept separate from controls. */
.data-summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 24px; padding:4px 0 20px; margin-bottom:24px; border-bottom:1px solid var(--line); font-size:12px; color:var(--sub); }
.data-summary>span { display:inline-flex; align-items:baseline; gap:8px; }
.data-summary b { color:var(--ink); font:400 22px/1.2 var(--font-numeric,var(--font)); font-variant-numeric:tabular-nums; }
.data-summary>small { margin-left:auto; font-size:12px; color:var(--sub); }
body[data-page="data"] .page>.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; min-width:0; min-height:0; }
body[data-page="data"] .page>.grid2>.stack { display:grid; gap:20px; grid-template-rows:repeat(2,minmax(0,1fr)); min-width:0; min-height:0; }
body[data-page="data"] .page>.grid2 .card { display:flex; flex-direction:column; min-width:0; min-height:0; }
body[data-page="data"] .card-body { display:flex; flex:1; flex-direction:column; align-items:flex-start; min-width:0; }
body[data-page="data"] .card-body>.hint { max-width:44ch; margin-bottom:24px; font-size:13px; line-height:1.8; }
body[data-page="data"] .card-body>.actions,
body[data-page="data"] .card-body>.btn { margin-top:auto; }
body[data-page="data"] .card-body>.actions { flex-wrap:wrap; }

/* Preferences: common input columns, stable units and readable explanations. */
.settings-workspace { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; align-items:start; min-width:0; min-height:0; }
.settings-workspace>.card,
.settings-workspace>.stack,
.settings-workspace>.stack>.card { min-width:0; min-height:0; }
.settings-workspace>.stack { display:grid; gap:20px; }
.setting-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); min-width:0; }
.setting-row:first-child { padding-top:4px; }
.setting-row:last-child { border-bottom:0; }
.setting-row b { display:block; font-size:14px; line-height:22px; font-weight:500; }
.setting-row p { margin:6px 0 0; font-size:13px; line-height:1.75; color:var(--sub); overflow-wrap:anywhere; }
#settings-form .setting-row { grid-template-columns:minmax(0,1fr) 112px; }
#settings-form .setting-row>label { display:grid; grid-template-columns:80px 24px; gap:8px; justify-self:end; align-items:center; width:112px; font-size:12px; line-height:20px; }
#settings-form .setting-row .input { width:80px!important; min-width:0; text-align:right; font-variant-numeric:tabular-nums; }
#settings-form>.mt { margin-top:20px; }
.settings-workspace .actions { flex-wrap:wrap; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; }
.chip { display:inline-flex; align-items:center; min-height:24px; padding:2px 8px; border:1px solid var(--line); border-radius:5px; background:var(--neutral-surface); color:var(--sub); font-size:12px; line-height:20px; overflow-wrap:anywhere; max-width:100%; }
.settings-rules { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:start; gap:24px; min-width:0; min-height:0; }
.settings-rules>.card { min-width:0; min-height:0; }
.settings-rules>.notice { margin:0; font-size:13px; line-height:1.8; }

@media(min-width:1100px) and (min-height:680px) {
  body[data-page="focus"] .page { height:100%; overflow:hidden; }
  .focus-layout { flex:1; overflow:hidden; }
  .focus-card { max-height:100%; overflow:auto; overscroll-behavior:contain; }
  .focus-layout>.stack { max-height:100%; grid-template-rows:auto auto minmax(0,1fr); }
  .focus-layout>.stack>.card:nth-child(3) { display:flex; flex-direction:column; max-height:100%; min-height:0; }
  .focus-layout>.stack>.card:nth-child(3)>.card-body { min-height:0; overflow:auto; overscroll-behavior:contain; }
  body[data-page="focus"] .page:has(.focus-outcomes) { height:auto; min-height:100%; overflow:visible; }
  body[data-page="focus"] .page:has(.focus-outcomes) .focus-layout { flex:none; overflow:visible; }
  body[data-page="focus"] .page:has(.focus-outcomes) .focus-card { max-height:none; overflow:visible; }
  body[data-page="focus"] .page:has(.focus-outcomes) .focus-layout>.stack,
  body[data-page="focus"] .page:has(.focus-outcomes) .focus-layout>.stack>.card:nth-child(3) { max-height:none; }
}

@media(min-width:1280px) and (min-height:800px) {
  body[data-page="finance"] .page { height:100%; overflow:hidden; }
  .finance-workspace { flex:1; overflow:hidden; align-items:stretch; }
  .finance-ledger .table-wrap { flex:1; }
  .finance-insights { overflow:auto; overscroll-behavior:contain; }
  body[data-page="finance"] .page>.grid3 { flex:1; overflow:auto; overscroll-behavior:contain; }
}

@media(min-width:1100px) and (max-height:799px) {
  .finance-ledger .table-wrap { max-height:540px; }
}

@media(min-width:701px) and (max-width:1279px) {
  .focus-layout { grid-template-columns:minmax(300px,360px) minmax(0,1fr); overflow:auto; gap:20px; }
  .focus-layout>.stack { height:auto; grid-template-columns:1fr; grid-template-rows:auto; }
  .focus-layout>.stack>.grid2 { grid-column:auto; }
  .focus-layout>.stack>.card:nth-child(3) { max-height:320px; }
  .finance-workspace { grid-template-columns:minmax(0,1fr); }
  .finance-insights { grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
  .settings-workspace,.settings-rules { grid-template-columns:minmax(0,1fr); }
  .settings-workspace>.stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(min-width:701px) and (max-width:1040px) {
  .focus-layout { grid-template-columns:minmax(0,1fr); }
  .focus-card { max-width:none; }
  .focus-layout>.stack>.card:nth-child(3) { max-height:none; }
}

@media(max-width:700px) {
  .focus-layout { display:flex; flex-direction:column; gap:24px; }
  .focus-card { width:100%; }
  .focus-card>.pomo-panel { padding:0 20px 20px; }
  .focus-card .card-head { padding-inline:20px; }
  .focus-countdown { margin-top:22px; }
  .focus-countdown .timer-number { font-size:48px; }
  .focus-outcomes { margin-bottom:20px; padding-inline:14px; }
  .focus-outcome-row { align-items:flex-start; flex-direction:column; gap:10px; }
  .focus-outcome-row>.actions { width:100%; flex-wrap:wrap; }
  .focus-layout>.stack { width:100%; grid-template-columns:minmax(0,1fr); gap:20px; }
  .focus-layout>.stack>.grid2 { grid-column:auto; }
  .focus-layout .stat-card { padding:0 16px 16px; }
  .focus-layout .stat-card:first-child { padding-left:0; }
  .focus-layout .stat-card:last-child { padding-right:0; }
  .stat-card .number { font-size:28px; }
  .chart-bars { gap:6px; }
  body[data-page="finance"] .page>.grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 0; }
  body[data-page="finance"] .page>.grid4 .stat-card { border-right:0; padding:0 12px 16px 0; border-bottom:1px solid var(--line); }
  body[data-page="finance"] .page>.grid4 .stat-card:nth-child(even) { padding-left:16px; padding-right:0; }
  body[data-page="finance"] .page>.grid4 .number { font-size:25px; }
  body[data-page="finance"] .page>.toolbar { gap:12px; }
  body[data-page="finance"] .page>.toolbar>label { justify-content:space-between; width:100%; }
  .finance-workspace { grid-template-columns:minmax(0,1fr); gap:20px; }
  .finance-ledger .table-wrap { width:100%; }
  .finance-ledger th,.finance-ledger td { padding:12px; font-size:12px; }
  .finance-ledger td:nth-child(3) { min-width:120px; }
  .finance-insights { gap:20px; }
  body[data-page="finance"] .page>.grid3 { grid-template-columns:minmax(0,1fr); gap:16px; }
  .data-summary { gap:12px 20px; margin-bottom:20px; }
  .data-summary>small { margin-left:0; flex-basis:100%; }
  body[data-page="data"] .page>.grid2 { grid-template-columns:minmax(0,1fr); gap:16px; }
  body[data-page="data"] .page>.grid2>.stack { gap:16px; grid-template-rows:auto; }
  body[data-page="data"] .card-body>.hint { margin-bottom:20px; }
  .settings-workspace,.settings-rules { grid-template-columns:minmax(0,1fr); gap:20px; }
  .settings-workspace>.stack { gap:20px; }
  .setting-row { gap:12px; padding:16px 0; }
  #settings-form .setting-row { grid-template-columns:minmax(0,1fr) 92px; }
  #settings-form .setting-row>label { width:92px; grid-template-columns:60px 24px; gap:8px; }
  #settings-form .setting-row .input { width:60px!important; padding-inline:8px; }
  .setting-row p { font-size:13px; }
  .compact-timer .compact-timer-body { gap:8px; }
  .compact-timer .timer-actions>.btn { padding-inline:8px; }
  .compact-timer .timer-actions>.timer-reset { padding:4px; }
}

@media(prefers-reduced-motion:reduce) {
  .timer-ring [data-timer-ring] { transition:none; }
  .focus-card .focus-time-progress>i { transition:none; }
  .focus-outcome-row { animation:none; }
}

/* The compact clock is a secondary action on Today. */
.compact-timer .timer-actions>.btn.primary{background:var(--card);border-color:var(--control-border);color:var(--ink)}