/* Shared refinement layer: web and companion use the same components and tokens. */
:root {
  --bg:#f5f6fa; --paper:#fff; --text:#242936; --muted:#626c7f;
  --line:#e1e5ee; --accent:#5c50c7; --tint:#efedfb;
  --radius:14px; --shadow:0 3px 12px #24293604;
}
body { -webkit-font-smoothing:antialiased; }
h1 { letter-spacing:-.6px; }
.workspace { max-width:1200px; padding-top:32px; }
.topbar { background:var(--paper); }
.sidebar { background:#fdfdff; }
.brand { padding-bottom:22px; }
.nav { min-height:44px; border-radius:10px; color:var(--muted); }
.nav.active { color:var(--accent); font-weight:600; }
.page-head { margin-bottom:24px; }
.subtitle { line-height:1.6; }
.btn { min-height:40px; padding:9px 14px; border-radius:9px; font-size:12px; font-weight:550; }
.btn.small { min-height:34px; }
.btn.icon { width:40px; min-width:40px; padding:8px; }
.btn.ghost:not(.danger) { background:var(--paper); }
.btn.primary:hover { background:#4b40b2; }
.btn:focus-visible,.nav:focus-visible,.tab:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.today-summary,.table,.entity-card,.metrics,.entity-list,.paused-panel { border-radius:var(--radius); box-shadow:var(--shadow); }
.today-summary { padding:26px 28px; }
.summary-label { font-size:13px; }
.big-time { font-size:40px; line-height:1.35; margin:10px 0; font-variant-numeric:tabular-nums; }
.summary-note { font-size:12px; }
.distribution { height:6px; }
.entry-title { font-size:14px; line-height:1.5; }
.entry-path { line-height:1.65; overflow-wrap:anywhere; }
.entry-row { min-height:92px; }
.entry-row:hover { background:#fafaff; }
.table-head { color:var(--muted); font-size:11px; }
.row-actions { gap:4px; }
.row-actions button { min-width:34px; min-height:36px; border-radius:8px; }
.row-actions svg { width:16px; height:16px; }
.entity-card { padding:24px; }
.entity-card p { font-size:12px; line-height:1.7; }
.metric { padding:24px; }
.metric strong,.entry-duration,.stats-line strong { font-variant-numeric:tabular-nums; }
.tabs { background:#eaeaf3; padding:3px; border-radius:10px; }
.tab { min-height:36px; border-radius:8px; }
.tab.active { background:white; color:var(--accent); box-shadow:0 1px 4px #24293608; }
.timer-panel {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) 240px;
  gap:16px 28px; padding:24px 28px; background:var(--tint); align-items:start;
  border:1px solid #dcd7f4; border-radius:var(--radius); box-shadow:var(--shadow);
}
.timer-panel::before { content:none; }
.timer-work { min-width:0; }
.timer-task-heading { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.timer-task-heading .timer-description { margin:0; }
.timer-task-heading .btn.icon { width:32px; min-width:32px; min-height:32px; padding:6px; background:transparent; border-color:transparent; }
.timer-task-heading .btn.icon:hover { background:var(--paper); border-color:var(--line); }
.timer-task-heading .btn.icon svg { width:16px; height:16px; }
.timer-path { display:flex; align-items:center; color:var(--accent); font-size:12px; margin-bottom:10px; }
.timer-description { font-size:18px; line-height:1.5; overflow-wrap:anywhere; margin-bottom:6px; }
.timer-panel .entry-path { font-size:12px; }
.timer-right { display:contents; }
.timer-right > div:first-child { grid-column:1; }
.timer-right > div > small { display:block; color:var(--muted); font-size:12px; }
.timer-clock { font-size:40px; line-height:1.3; letter-spacing:-1.2px; font-variant-numeric:tabular-nums; margin:6px 0; }
.timer-segment [data-timer-clock] { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.timer-segment [data-timer-context]:empty + .timer-context-divider { display:none; }
.timer-right .actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); width:240px; max-width:100%; gap:8px; grid-column:2; grid-row:1/3; align-self:center; }
.timer-right .actions [data-action="stop-timer"] { grid-column:1/-1; width:100%; }
/* Today follows the user's two-row sketch; companion retains its vertical layout. */
body:not(.companion) .timer-panel { grid-template-columns:minmax(0,1fr) auto; gap:20px 28px; }
body:not(.companion) .timer-panel .timer-right { display:contents; }
body:not(.companion) .timer-panel .timer-right > div:first-child { grid-column:2; grid-row:1; align-self:center; }
body:not(.companion) .timer-panel .timer-right .actions { grid-column:1/-1; grid-row:2; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr); width:100%; max-width:none; gap:12px; margin-top:0; }
body:not(.companion) .timer-panel .timer-right .actions [data-action="stop-timer"] { grid-column:auto; }
.timer-strip { display:flex; align-items:center; gap:16px; width:100%; min-width:0; padding:20px 24px; margin:0 0 24px; border:1px solid #dcd7f4; border-radius:10px; background:var(--tint); }
.timer-strip-work { display:flex; align-items:center; gap:10px; min-width:0; flex:1; color:var(--text); text-decoration:none; }
.timer-strip-work > span:last-child { min-width:0; width:100%; }
.timer-strip-work small,.timer-strip-time small { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.timer-strip-work small { color:var(--accent); }
.timer-strip-work .live-dot { display:inline-block; margin-right:7px; }
.timer-strip-work strong { display:block; overflow-wrap:anywhere; font-size:14px; }
.timer-strip-work .entry-path { display:block; font-size:11px; }
.timer-strip-time { flex-shrink:0; }
.timer-strip-time [data-task-clock] { font-family:var(--mono); color:var(--accent); font-size:28px; font-variant-numeric:tabular-nums; }
.timer-strip .actions { flex-shrink:0; gap:8px; }
.timer-strip-work:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
.live-dot { animation:none; width:6px; height:6px; }
.paused-panel { padding:20px 24px; margin-bottom:24px; }
.paused-panel h3 { font-size:14px; }
.paused-task { padding:16px 0; }
.paused-task strong { font-size:14px; line-height:1.5; }
.paused-task small { color:var(--muted); font-size:11px; }
.paused-task .actions [data-action="resume-task"] { background:var(--tint); border-color:#dcd7f4; color:var(--accent); }
.paused-panel > .fineprint { line-height:1.7; }
dialog { border-radius:16px; box-shadow:0 16px 60px #24293626; }
.modal-head { padding:20px 24px; }
.modal-body { padding:22px 24px; }
.modal-foot { padding:16px 24px; background:#fafbfe; }
.field input,.field select,.field textarea { min-height:44px; border-radius:9px; }
.field label { font-size:12px; color:#4c576a; }
.form-hint { color:var(--muted); line-height:1.75; background:var(--bg); border-radius:10px; }
.picker-trigger { min-height:44px; color:var(--text); }
.picker-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-chevron { color:var(--muted); font-size:16px; margin-left:12px; flex-shrink:0; }
.picker-list { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40; margin-top:0; padding:6px; border-color:var(--line); border-radius:10px; background:white; box-shadow:0 8px 24px #24293618; }
.field .picker-search { min-height:36px; padding:7px 10px; border-radius:6px; margin-bottom:6px; font-size:12px; }
.field .picker-search:focus { outline:none; border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.picker-list [role="listbox"] { max-height:200px; }
.picker-list [role="option"] { min-height:36px; padding:7px 10px; border-radius:6px; font-size:13px; }
.picker-list [role="option"]:hover { outline:none; background:#f5f4fb; }
.picker-list [role="option"]:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.picker-list [role="option"][aria-selected="true"]::after { content:'✓'; float:right; margin-left:10px; }
.switch-task { padding:16px; border-radius:12px; }
.switch-task strong { font-size:14px; }
.switch-task small { color:var(--muted); }
.switch-new { min-height:44px; border-style:solid; border-color:#dcd7f4; }
.auth-card { box-shadow:0 12px 40px #24293605; }
.auth-card > small { display:block; font-size:12px; }
.fineprint { line-height:1.7; }
.companion { background:var(--bg); }
.companion-main { padding:20px; }
.companion-head { margin-bottom:2px; }
.companion-head strong { font-family:var(--display); font-size:20px; }
.companion-head small { display:none; }
.companion-status { font-size:11px; margin:10px 0 18px; }
.companion-status .btn { min-height:32px; font-size:11px; padding:5px 8px; }
.companion .timer-panel { display:block; padding:22px; margin-bottom:16px; }
.companion .timer-right { display:block; margin-top:20px; min-width:0; }
.companion .timer-clock { font-size:40px; margin:6px 0; letter-spacing:-1.5px; }
.companion .timer-right .actions { width:100%; margin-top:20px; }
.companion .paused-panel { padding:18px 20px; margin-bottom:16px; }
.companion .paused-task { display:block; }
.companion .paused-task .actions { margin-top:10px; }
.companion .paused-panel > .fineprint { font-size:10px; margin-top:8px; }
.companion-recent h2 { font-size:13px; margin:20px 0 10px; color:var(--muted); }
.recent-task { padding:14px 16px; border-radius:12px; border-color:var(--line); }
.recent-task > small { color:var(--muted); font-size:11px; }
.companion-main > .fineprint { font-size:10px; }
.companion .auth-card { width:calc(100% - 32px); padding:24px; }
.companion dialog .modal-body { padding:20px; }
@media(max-width:1100px) and (min-width:781px) {
  .timer-panel { gap:16px 20px; }
}
@media(max-width:780px) {
  .timer-strip { width:100%; box-sizing:border-box; flex-wrap:wrap; gap:12px; padding:14px; }
  .timer-strip-work { flex-basis:calc(100% - 120px); }
  .timer-strip .actions { width:100%; }
  .timer-strip .actions .btn { min-height:44px; }
  .timer-strip .actions .btn.primary { flex:1; }
  .timer-strip-time [data-task-clock] { font-size:22px; }
  .workspace { padding:24px 16px 36px; }
  .page-head { gap:12px; }
  .topbar { background:var(--paper); }
  .topbar .btn,.topbar .search-trigger { min-height:44px; min-width:44px; }
  .sidebar { height:calc(72px + env(safe-area-inset-bottom,0px)); padding-bottom:calc(5px + env(safe-area-inset-bottom,0px)); }
  .content { padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
  .sidebar .nav { min-height:48px; font-size:11px; }
  .timer-panel { display:block; padding:22px; }
  .timer-description { font-size:16px; }
  .timer-right { display:block; margin-top:20px; min-width:0; }
  .timer-clock { font-size:34px; }
  .timer-right .actions { width:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:16px; gap:8px; }
  .timer-right .btn { min-height:44px; }
  .timer-right .btn.icon,.modal-head .btn.icon { min-width:44px; width:44px; min-height:44px; }
  .companion .timer-right .actions { grid-template-columns:1fr 1fr; }
  .today-summary { padding:22px; }
  .big-time { font-size:40px; }
  .summary-top { flex-wrap:wrap; }
  .summary-top > .actions { flex-direction:row; width:100%; margin-top:8px; }
  .summary-top > .actions .btn { flex:1; min-height:44px; }
  .entry-row { grid-template-columns:minmax(0,1fr) auto; padding:18px; gap:10px; }
  .entry-row > div:first-child { grid-column:1/-1; min-width:0; }
  .entry-title { font-size:14px; }
  .entry-path { font-size:11px; }
  .entry-duration { grid-column:1; font-size:14px; }
  .row-actions { grid-column:2; }
  .row-actions button { min-width:44px; min-height:44px; }
  .paused-panel { padding:18px 20px; }
  .paused-task { display:block; }
  .paused-task .actions { margin-top:10px; }
  .paused-task .actions .btn { min-height:40px; }
  .section-head h2 { font-size:16px; }
  .modal-head,.modal-foot { padding:16px 18px; }
  .modal-body { padding:18px; }
  .form-grid { gap:14px; }
  .metric { padding:20px; }
  .companion .timer-clock { font-size:38px; }
  body:not(.companion) #toast { bottom:calc(88px + env(safe-area-inset-bottom,0px)); }
}
@media(max-width:360px) {
  .timer-right .actions [data-action="stop-timer"] { width:100%; }
  .companion-main { padding:16px; }
  .companion .timer-panel { padding:18px; }
  .companion .timer-clock { font-size:34px; }
  .filters .range { flex-wrap:wrap; }
}
@media(max-width:780px) {
  body:not(.companion) .timer-panel { display:grid; gap:18px; }
}
@media(max-width:480px) {
  body:not(.companion) .timer-panel { grid-template-columns:minmax(0,1fr); }
  body:not(.companion) .timer-panel .timer-right > div:first-child { grid-column:1; grid-row:2; }
  body:not(.companion) .timer-panel .timer-right .actions { grid-row:3; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  body:not(.companion) .timer-panel .timer-right .actions [data-action="stop-timer"] { grid-column:1/-1; }
}