/* ============ Tokens ============ */
:root{
  --bg: #F6F6F8;
  --surface: #FFFFFF;
  --surface-2: #FBFBFC;
  --border: #ECECEF;
  --text: #17171B;
  --text-soft: #6E6E76;
  --text-faint: #A8A8B0;

  --accent: #FF9142;        /* focus / primary orange */
  --accent-strong: #F2661A;
  --accent-soft: #FFE7D2;
  --stop-color: #F0472A;

  --other: #F3C9D4;         /* rose */
  --other-strong: #E88BA0;
  --breaks: #CBB9AC;        /* taupe */
  --breaks-strong: #A98F7C;

  --green: #4CAF7D;
  --blue: #4C8BF5;
  --purple: #9B7EDE;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(20,20,30,0.04), 0 10px 24px -12px rgba(20,20,30,0.10);
  --shadow-pop: 0 12px 40px -8px rgba(20,20,30,0.25);

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
html{
  /* Stops iOS from silently bumping up text size on rotation, and is a
     cheap safety net against any stray element pushing the page wider
     than the viewport (the actual overflow sources are fixed below too). */
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body{
  margin:0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
/* Applied while a modal is open, see openModal()/closeModal() in app.js.
   Locks background scroll on iOS (where overflow:hidden on body alone
   is ignored) by pinning body in place with position:fixed. */
body.modal-open{
  position: fixed;
  left: 0; right: 0;
  width: 100%;
}
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; letter-spacing:-0.01em; }
button{ font-family: inherit; }
a{ text-decoration:none; color:inherit; }
input,select,textarea{ font-family: inherit; }
::selection{ background: var(--accent-soft); }

.tabular{ font-variant-numeric: tabular-nums; }

/* ============ Layout ============ */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width: 232px;
  flex-shrink:0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding: 20px 14px;
  position: sticky;
  top:0;
  height:100vh;
}
.brand{ display:flex; align-items:center; gap:9px; padding: 6px 10px 22px; }
.brand-mark{ font-size:20px; color:var(--accent-strong); }
.brand-name{ font-family: var(--font-display); font-weight:700; font-size:17px; }

.nav{ display:flex; flex-direction:column; gap:2px; }
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text-soft); font-weight:600; font-size:14px;
  transition: background .15s, color .15s;
}
.nav-item:hover{ background: var(--surface-2); color: var(--text); }
.nav-item.active{ background: var(--accent-soft); color: var(--accent-strong); }
.nav-icon{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-icon svg{ width:100%; height:100%; }

.sidebar-footer{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.running-indicator{
  display:flex; align-items:center; gap:10px;
  background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--radius-md); padding:10px 12px;
}
.running-indicator[hidden]{ display:none; }
.pulse-dot{ width:9px; height:9px; border-radius:50%; background: var(--stop-color); flex-shrink:0; box-shadow:0 0 0 rgba(240,71,42,.5); animation: pulse 1.6s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(240,71,42,.45); }
  70%{ box-shadow:0 0 0 8px rgba(240,71,42,0); }
  100%{ box-shadow:0 0 0 0 rgba(240,71,42,0); }
}
.sr-label{ font-size:12.5px; font-weight:600; color:var(--text); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-time{ font-size:12px; color:var(--text-soft); }

.main{ flex:1; min-width:0; padding: 26px 34px 60px; }
.topbar{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; }
.topbar h1{ font-size: 24px; font-weight:800; }
.today-date{ color:var(--text-soft); font-size:13.5px; font-weight:500; }

.view{ display:flex; flex-direction:column; gap:20px; min-width:0; }

/* ============ Cards ============ */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  /* Grid/flex items default to min-width:auto (their content's min-content
     size), which lets a wide child force this card - and the whole row -
     wider than the viewport instead of shrinking. This is what was pushing
     the page into horizontal scroll on phones (Mobile Safari sizes native
     form controls and long labels differently than desktop Chrome, which
     is why the same layout looked fine in a resized desktop window). */
  min-width: 0;
  max-width: 100%;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.card-head h3{ font-size:15px; font-weight:700; }
.card-sub{ color:var(--text-soft); font-size:12.5px; margin-top:2px; }

.grid-2{ display:grid; grid-template-columns: 1.3fr 1fr; gap:20px; align-items:start; min-width:0; }
.grid-2 > *{ min-width:0; }
.grid-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:16px; }
@media (max-width: 980px){ .grid-2{ grid-template-columns:1fr; } .grid-stats{ grid-template-columns: repeat(2, 1fr); } }

/* ============ Timer Bar ============ */
.timer-bar{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  padding: 8px 8px 8px 6px;
  display:flex; align-items:center; gap:10px;
  min-width:0;
}
.timer-picker-btn{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:9px;
  background: var(--surface-2);
  border:1px dashed var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  color: var(--text-faint); font-weight:600; font-size:13.5px;
  cursor:pointer; text-align:left;
}
.timer-picker-btn:hover{ border-color:var(--accent); color:var(--accent-strong); }
.timer-picker-btn .chip-dot{ width:9px; height:9px; border-radius:50%; }

.timer-active-info{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  padding: 6px 16px;
}
.timer-active-info .cat-icon{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.timer-active-info .cat-icon svg{ width:17px; height:17px; }
.timer-active-desc{ font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.timer-active-tags{ color:var(--text-soft); font-size:12px; margin-top:1px; }

.timer-mid{ display:flex; align-items:center; gap:8px; color:var(--text-soft); font-size:13px; font-weight:600; flex-shrink:0; }
.timer-elapsed{ font-family: var(--font-display); font-size:16px; font-weight:700; color:var(--text); min-width:96px; text-align:right; }
.timer-range{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; }
.timer-range .arrow{ color:var(--text-faint); font-weight:400; }

.timer-toggle{
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background: var(--stop-color); color:#fff;
  box-shadow: 0 6px 16px -4px rgba(240,71,42,.55);
  transition: transform .12s;
}
.timer-toggle.play{ background: var(--accent-strong); box-shadow: 0 6px 16px -4px rgba(242,102,26,.5); }
.timer-toggle:hover{ transform: scale(1.06); }
.timer-toggle svg{ width:16px; height:16px; }

/* recent quick-start chips */
.recent-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.recent-chip{
  display:flex; align-items:center; gap:7px;
  background: var(--surface-2); border:1px solid var(--border);
  padding:6px 12px 6px 8px; border-radius: var(--radius-pill);
  font-size:12.5px; font-weight:600; color:var(--text-soft); cursor:pointer;
}
.recent-chip:hover{ border-color:var(--accent); color:var(--text); }
.recent-chip .dot{ width:8px; height:8px; border-radius:50%; }

/* ============ Summary widget ============ */
.big-number{ font-family: var(--font-display); font-size:38px; font-weight:800; letter-spacing:-0.02em; }

.stack-bar{ display:flex; height:12px; border-radius:99px; overflow:hidden; margin: 14px 0 10px; background:#F0F0F3; }
.stack-seg{ height:100%; }
.legend-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.legend-item{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-soft); font-weight:600; }
.legend-dot{ width:9px; height:9px; border-radius:3px; }

.detail-list{ display:flex; flex-direction:column; }
.detail-row{
  display:flex; align-items:center; gap:12px; padding:10px 4px; border-top:1px solid var(--border);
  width:100%; background:none; border-left:none; border-right:none; border-bottom:none; font:inherit;
  text-align:left; cursor:pointer; border-radius:8px; transition:background .12s;
}
.detail-row:first-child{ border-top:none; }
.detail-row:hover{ background:var(--surface-2); }
.detail-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.detail-icon{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.detail-icon svg{ width:17px; height:17px; }
.detail-main{ flex:1; min-width:0; }
.detail-title{ font-weight:700; font-size:13.5px; }
.detail-sub{ font-size:12px; color:var(--text-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-time{ font-weight:700; font-size:13px; flex-shrink:0; }
.detail-tag{
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; flex-shrink:0;
}
.detail-start-ico{
  width:0; overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--accent-strong);
  flex-shrink:0; transition:width .12s;
}
.detail-row:hover .detail-start-ico{ width:16px; }
.detail-start-ico svg{ width:14px; height:14px; flex-shrink:0; }

/* ============ Timeline ============ */
.timeline-wrap{ position:relative; }
.timeline{
  position:relative; height:46px; border-radius: var(--radius-md); overflow:hidden;
  background: repeating-linear-gradient(90deg, #F1F1F4 0 1px, #F8F8FA 1px 100%);
}
.timeline-seg{ position:absolute; top:3px; height:calc(100% - 6px); border-radius:6px; }
.timeline-labels{ display:flex; justify-content:space-between; margin-top:6px; }
.timeline-labels span{ font-size:11px; color:var(--text-faint); font-weight:600; }

/* ============ Habit tracker ============ */
.habit-card .card-head select{ min-width:180px; }
.habit-stats{
  display:flex; border:1px solid var(--border); border-radius: var(--radius-md); overflow:hidden;
  margin-bottom:18px;
}
.habit-stat{ flex:1; padding:13px 10px; text-align:center; border-right:1px solid var(--border); }
.habit-stat:last-child{ border-right:none; }
.habit-stat-val{ font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--text); }
.habit-stat-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); margin-top:3px; }
@media (max-width:760px){ .habit-stats{ flex-wrap:wrap; } .habit-stat{ flex:1 1 50%; border-bottom:1px solid var(--border); } }
.habit-scroll{ overflow-x:auto; padding-bottom:2px; }
.habit-grid{ display:grid; gap:3px; width:max-content; }
.habit-cell{ width:11px; height:11px; border-radius:2.5px; background:#EBEDF0; }
.habit-month-label{ grid-row:1; align-self:end; font-size:11px; color:var(--text-faint); font-weight:600; padding-bottom:2px; }
.habit-day-label{ font-size:10px; color:var(--text-faint); font-weight:600; display:flex; align-items:center; padding-right:4px; }
.habit-footer{ display:flex; justify-content:flex-end; margin-top:10px; }
.habit-legend{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-faint); font-weight:600; }
.habit-legend-cell{ width:10px; height:10px; }

.habit-tooltip{
  position:fixed; transform:translate(-50%,-100%);
  background:#1c1c1e; color:#fff; font-size:12px; font-weight:600;
  padding:6px 10px; border-radius:8px; white-space:nowrap; pointer-events:none;
  z-index:500; box-shadow:0 6px 16px rgba(0,0,0,.28);
}
.habit-tooltip::after{
  content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#1c1c1e;
}



/* ============ Planned tasks ============ */
.planned-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--border); }
.planned-row:first-child{ border-top:none; }
.planned-badge{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--purple); background:#EFE9FB; padding:3px 8px; border-radius:6px; }
.start-btn{
  display:flex; align-items:center; gap:6px;
  background: var(--accent-soft); color: var(--accent-strong); border:none;
  padding:7px 13px; border-radius: var(--radius-pill); font-weight:700; font-size:12.5px; cursor:pointer;
}
.start-btn:hover{ background: var(--accent); color:#fff; }
.start-btn svg{ width:12px; height:12px; flex-shrink:0; }
.icon-btn{
  width:30px; height:30px; border-radius:9px; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-soft); flex-shrink:0;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--text); }
.icon-btn svg{ width:15px; height:15px; }

.empty-state{ text-align:center; padding: 34px 10px; color:var(--text-soft); }
.empty-state .em-icon{ width:42px; height:42px; margin: 0 auto 10px; display:flex; align-items:center; justify-content:center; color:var(--text-faint); background:var(--surface-2); border-radius:12px; }
.empty-state .em-icon svg{ width:22px; height:22px; }
.empty-state h4{ font-size:14px; margin-bottom:4px; color:var(--text); }
.empty-state p{ font-size:12.5px; margin:0 0 14px; }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  padding: 9px 16px; border-radius: var(--radius-sm); border:1px solid transparent;
  font-weight:700; font-size:13px; cursor:pointer; transition:.15s;
}
.btn-primary{ background: var(--text); color:#fff; }
.btn-primary:hover{ background:#000; }
.btn-accent{ background: var(--accent-strong); color:#fff; }
.btn-accent:hover{ filter:brightness(1.06); }
.btn-ghost{ background: var(--surface-2); border-color:var(--border); color:var(--text); }
.btn-ghost:hover{ background:#F0F0F3; }
.btn-danger{ background:#FDEDEA; color:#D9432A; }
.btn-danger:hover{ background:#FBDFDA; }
.btn-sm{ padding:6px 11px; font-size:12px; }
.btn svg{ width:14px; height:14px; }

/* ============ Filters / toolbar ============ */
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.toolbar .spacer{ flex:1; }
.entries-search{ position:relative; width:220px; max-width:100%; }
.entries-search .input{ width:100%; padding-left:32px; }
.entries-search-ico{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-faint); display:flex; pointer-events:none; }
.entries-search-ico svg{ width:14px; height:14px; }
.select, .input{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:8px 11px; font-size:13px; color:var(--text); outline:none;
}
.select:focus, .input:focus{ border-color: var(--accent); }
.seg-control{ display:flex; background:var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-pill); padding:3px; }
.seg-btn{ padding:6px 14px; border-radius:99px; font-size:12.5px; font-weight:700; color:var(--text-soft); cursor:pointer; }
.seg-btn.active{ background:var(--surface); color:var(--text); box-shadow: var(--shadow-card); }

/* ============ Entries list ============ */
.date-group{ display:flex; flex-direction:column; gap:0; }
.date-heading{ display:flex; justify-content:space-between; align-items:center; padding: 20px 2px 10px; color:var(--text-soft); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.date-group:first-child .date-heading{ padding-top:2px; }
.date-heading .dh-total{ color:var(--text); font-weight:800; }
.entry-row{
  display:flex; align-items:center; gap:14px; padding:13px 16px 13px 13px;
  background: var(--surface); border:1px solid var(--border); border-left:3px solid var(--border);
  border-radius: var(--radius-md); transition: box-shadow .15s, border-color .15s;
}
.entry-row + .entry-row{ margin-top:8px; }
.entry-row:hover{ box-shadow: var(--shadow-card); }
.entry-icon{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.entry-icon svg{ width:18px; height:18px; }
.entry-main{ flex:1; min-width:0; }
.entry-desc{ font-weight:700; font-size:13.5px; margin-bottom:5px; }
.entry-meta{ display:flex; align-items:center; gap:10px; }
.entry-badges{ flex:1; min-width:0; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.entry-badge{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; white-space:nowrap; }
.entry-badge.plain{ background:var(--surface-2); color:var(--text-soft); }
.entry-time{ font-size:12px; color:var(--text-soft); font-weight:600; flex-shrink:0; white-space:nowrap; }
.entry-right{ flex-shrink:0; min-width:60px; text-align:right; }
.entry-dur{ font-weight:700; font-size:13.5px; }
.entry-actions{ display:flex; gap:6px; flex-shrink:0; align-items:center; }
.entry-actions .icon-btn.hover-reveal{ opacity:0; transition:opacity .12s; }
.entry-row:hover .entry-actions .icon-btn.hover-reveal{ opacity:1; }
.status-pill{ font-size:10.5px; font-weight:800; text-transform:uppercase; padding:3px 8px; border-radius:6px; letter-spacing:.03em; }
.status-planned{ background:#EFE9FB; color:var(--purple); }
.status-running{ background:#FDEDEA; color:var(--stop-color); }

/* ============ Goals page ============ */
.goal-list{ display:flex; flex-direction:column; gap:14px; }
.goal-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding:18px 20px;
}
.goal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.goal-head-left{ display:flex; align-items:center; gap:12px; }
.goal-icon{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.goal-icon svg{ width:18px; height:18px; }
.goal-title{ font-weight:800; font-size:14px; }
.goal-sub{ font-size:12px; color:var(--text-soft); font-weight:600; margin-top:2px; }
.goal-progress-track{ background:#EFEFF2; border-radius:99px; height:9px; overflow:hidden; }
.goal-progress-fill{ height:100%; border-radius:99px; transition:width .2s; }
.goal-progress-caption{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-soft); font-weight:700; margin-top:9px; }
.goal-complete{ color: var(--green); }

/* ============ Category management ============ */
.broad-block{ border:1px solid var(--border); border-radius: var(--radius-md); overflow:hidden; }
.broad-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; background:var(--surface-2); }
.broad-head-left{ display:flex; align-items:center; gap:10px; }
.broad-dot{ width:11px; height:11px; border-radius:4px; }
.broad-title{ font-weight:800; font-size:13.5px; }
.broad-count{ color:var(--text-soft); font-size:12px; font-weight:600; }
.cat-list{ padding: 4px 10px 10px; }
.cat-item{ display:flex; align-items:center; gap:11px; padding:10px 8px; border-radius: var(--radius-sm); }
.cat-item:hover{ background: var(--surface-2); }
.cat-item .cat-icon-badge{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cat-item .cat-icon-badge svg{ width:16px; height:16px; }
.cat-item-main{ flex:1; min-width:0; }
.cat-item-name{ font-weight:700; font-size:13px; }
.tag-pills{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.tag-pill{ font-size:11px; font-weight:600; background:var(--surface-2); border:1px solid var(--border); color:var(--text-soft); padding:2px 8px; border-radius:99px; display:flex; align-items:center; gap:5px; }
.tag-pill button{ border:none; background:none; cursor:pointer; color:var(--text-faint); font-size:12px; line-height:1; padding:0; display:flex; align-items:center; }
.tag-pill button svg{ width:11px; height:11px; }
.tag-pill button:hover{ color:var(--stop-color); }
.add-tag-inline{ display:flex; align-items:center; gap:6px; margin-top:6px; }
.add-tag-inline input{ font-size:11.5px; padding:4px 9px; border-radius:99px; border:1px dashed var(--border); background:transparent; width:120px; }

/* ============ Modal ============ */
.modal-overlay{
  position:fixed; inset:0; background: rgba(20,20,25,.42); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay[hidden]{ display:none; }
.modal{
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  width: 540px; max-width:100%; max-height:92vh;
  /* Overflow lives on .modal-body (below), not here. Setting overflow-y:auto
     directly on .modal also makes its overflow-x compute to "auto" per the
     CSS overflow spec, which was clipping the category/tag combo-popover
     dropdowns anywhere they render near the modal's edge - the "search is
     broken in modals" bug. Keeping .modal itself unclipped avoids that. */
  overflow: visible;
}
.modal-body{ max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:26px; border-radius:inherit; }
.modal h2{ font-size:17px; font-weight:800; margin-bottom:16px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12px; font-weight:700; color:var(--text-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em; }
.field .input, .field .select, .field textarea{ width:100%; }
.field textarea{ resize:vertical; min-height:60px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px; outline:none; }
.field-row{ display:flex; gap:12px; }
.field-row .field{ flex:1; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.color-row{ display:flex; gap:8px; flex-wrap:wrap; }
.color-swatch{ width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; padding:0; appearance:none; }
.color-swatch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.color-swatch.selected{ border-color: var(--text); }
.icon-search{ position:relative; margin-bottom:8px; }
.icon-search input{ width:100%; padding-left:32px; }
.icon-search-ico{ position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--text-faint); display:flex; pointer-events:none; }
.icon-search-ico svg{ width:14px; height:14px; }
.icon-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; max-height:168px; overflow-y:auto; padding:6px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.icon-opt{ display:flex; align-items:center; justify-content:center; padding:8px 0; border-radius:8px; cursor:pointer; color:var(--text-soft); background:none; border:none; font:inherit; appearance:none; }
.icon-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.icon-opt svg{ width:18px; height:18px; }
.icon-opt:hover{ background:var(--surface-2); color:var(--text); }
.icon-opt.selected{ background: var(--accent-soft); color:var(--accent-strong); }
.icon-grid-empty{ grid-column:1/-1; text-align:center; color:var(--text-faint); font-size:12px; padding:14px 0; }
.check-toggle{ display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.check-toggle input{ width:16px; height:16px; }

/* Category / tag combo pickers */
.combo-field{ position:relative; }
.combo-btn{
  width:100%; min-height:40px; box-sizing:border-box; display:flex; align-items:center; gap:9px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:8px 12px; font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer; text-align:left;
}
.combo-btn:hover{ border-color:var(--accent); }
.combo-btn .combo-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.combo-btn .combo-icon{ width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:var(--text-soft); flex-shrink:0; }
.combo-btn .combo-icon svg{ width:16px; height:16px; }
.combo-btn .combo-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.combo-btn .combo-placeholder{ flex:1; color:var(--text-faint); font-weight:500; }
.combo-btn svg:last-child{ width:15px; height:15px; color:var(--text-faint); flex-shrink:0; }

.combo-popover{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-pop); padding:8px;
}
.combo-search{ position:relative; margin-bottom:6px; }
.combo-search input{ width:100%; padding-left:30px; }
.combo-search-ico{ position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--text-faint); display:flex; pointer-events:none; }
.combo-search-ico svg{ width:13px; height:13px; }
.combo-list{ max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
.combo-group-label{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); padding:8px 8px 4px; }
.combo-row{ display:flex; align-items:center; gap:9px; padding:9px 8px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--text); width:100%; background:none; border:none; font-family:inherit; text-align:left; appearance:none; }
.combo-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.combo-row:hover{ background:var(--surface-2); }
.combo-row.selected{ background:var(--accent-soft); color:var(--accent-strong); }
.combo-row-icon{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.combo-row-icon svg{ width:14px; height:14px; }
.combo-row-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.combo-row-check{ width:15px; height:15px; flex-shrink:0; color:var(--accent-strong); }
.combo-row-check svg{ width:100%; height:100%; }
.combo-row.combo-create{ color:var(--accent-strong); }
.combo-row.combo-create svg{ width:13px; height:13px; flex-shrink:0; }
.combo-empty{ text-align:center; color:var(--text-faint); font-size:12px; padding:16px 8px; }

.tag-input-box{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:6px 8px; min-height:40px;
}
.tag-chip{
  display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--text); font-size:12px; font-weight:600; padding:4px 6px 4px 10px; border-radius:99px;
}
.tag-chip button{ border:none; background:none; cursor:pointer; color:var(--text-faint); display:flex; padding:0; }
.tag-chip button svg{ width:12px; height:12px; }
.tag-chip button:hover{ color:var(--stop-color); }
.tag-add-btn{
  display:flex; align-items:center; gap:5px; background:none; border:1px dashed var(--border);
  color:var(--text-soft); font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px; cursor:pointer;
}
.tag-add-btn:hover{ border-color:var(--accent); color:var(--accent-strong); }
.tag-add-btn svg{ width:9px; height:9px; }

/* Modern start/end date+time pair and duration inputs */
.datetime-row{ display:flex; gap:8px; align-items:center; }
.datetime-row .input{ flex:1; min-width:0; font-weight:600; }
.time-select-row{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.time-box{
  width:48px; padding:8px 4px; font-size:14px; font-weight:600; text-align:center;
  border:1px solid var(--border); border-radius: var(--radius-sm); background:var(--surface); color:var(--text);
  -moz-appearance:textfield;
}
.time-box::-webkit-inner-spin-button, .time-box::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.time-box:focus{ border-color:var(--accent); outline:none; }
.time-sep{ color:var(--text-faint); font-weight:700; font-size:14px; }
.duration-input{ position:relative; }
.duration-input input{ width:100%; padding-right:36px; font-weight:600; }
.duration-input span{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  color:var(--text-faint); font-size:12px; font-weight:700; pointer-events:none;
}

/* Estimated-time range slider */
.slider-value{ float:right; text-transform:none; font-weight:700; color:var(--accent-strong); font-size:12.5px; }
.range-slider{
  width:100%; margin-top:4px; appearance:none; height:6px; border-radius:99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong)); outline:none; cursor:pointer;
}
.range-slider::-webkit-slider-thumb{
  appearance:none; width:18px; height:18px; border-radius:50%; background:#fff;
  border:3px solid var(--accent-strong); box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer;
}
.range-slider::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--accent-strong);
  box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:pointer;
}

.divider-label{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin: 4px 0 8px; }

/* ============ Stats page ============ */
.stat-tile{ text-align:left; }
.stat-tile .stat-label{ font-size:12px; color:var(--text-soft); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.stat-tile .stat-val{ font-family:var(--font-display); font-size:26px; font-weight:800; margin-top:6px; }
.stat-tile .stat-delta{ font-size:12px; font-weight:600; margin-top:4px; }
.stat-trend{ font-size:11.5px; font-weight:700; margin-top:6px; }
.stat-trend.up{ color: var(--green); }
.stat-trend.down{ color: var(--stop-color); }
.chart-box{ position:relative; height:280px; }
.chart-box.compact{ height:210px; }
.chart-box.small{ position:relative; height:200px; flex-shrink:0; }
.stats-split{ display:flex; align-items:center; gap:20px; }
.stats-split .chart-box.small{ width:180px; height:180px; }
.stats-split .rank-list{ flex:1; min-width:0; }
@media (max-width:700px){ .stats-split{ flex-direction:column; } .stats-split .chart-box.small{ width:100%; } }
.stats-period-nav{ display:flex; align-items:center; gap:8px; }
.stats-period-label{ font-size:13px; font-weight:700; color:var(--text); min-width:130px; text-align:center; }
.stats-period-nav .icon-btn:disabled{ opacity:.35; cursor:default; }
.stats-period-nav .icon-btn:disabled:hover{ background:var(--surface); color:var(--text-soft); }
.stats-filter-field{ width:220px; max-width:100%; }
.bar-chart{ display:flex; align-items:flex-end; gap:5px; height:200px; padding-top:6px; overflow-x:auto; }
.bar-chart-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; flex:1 0 auto; min-width:12px; }
.bar-chart-bar{ width:100%; max-width:20px; border-radius:5px 5px 2px 2px; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); min-height:2px; }
.bar-chart-label{ font-size:9.5px; color:var(--text-faint); font-weight:600; margin-top:6px; white-space:nowrap; height:12px; }
.rank-list{ display:flex; flex-direction:column; gap:10px; }
.rank-row{ display:flex; align-items:center; gap:10px; }
.rank-row .rank-dot{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.rank-row .rank-name{ font-size:13px; font-weight:700; flex:0 0 auto; width:110px; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-row .rank-bar-track{ flex:1; height:7px; border-radius:99px; background:#F0F0F3; overflow:hidden; }
.rank-row .rank-bar-fill{ height:100%; border-radius:99px; }
.rank-row .rank-val{ font-size:12.5px; font-weight:700; color:var(--text-soft); width:52px; text-align:right; flex-shrink:0; }

/* ============ Toast ============ */
/* ============ Login screen ============ */
.login-screen{
  position:fixed; inset:0; background: var(--bg); display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:20px;
}
.login-screen[hidden]{ display:none; }
.login-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding:32px; width:340px; max-width:100%;
}
.login-brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:19px; margin-bottom:6px; }
.login-brand .brand-mark{ color:var(--accent-strong); }
.login-sub{ color:var(--text-soft); font-size:13px; margin:0 0 18px; }
.login-error{ background:#FDEDEA; color:#D9432A; font-size:12.5px; font-weight:600; padding:9px 12px; border-radius:9px; margin-bottom:14px; }

.sync-status{
  display:flex; align-items:center; justify-content:center; gap:7px;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm);
  font-size:11px; font-weight:700; color:var(--text-faint); padding:8px 10px;
}
.sync-status::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--text-faint); flex-shrink:0; }
.sync-status.syncing{ color:var(--accent-strong); }
.sync-status.syncing::before{ background:var(--accent-strong); }
.sync-status.error{ color:var(--stop-color); }
.sync-status.error::before{ background:var(--stop-color); }
.logout-btn{
  width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text-soft);
  font-weight:700; font-size:12.5px; padding:8px; border-radius: var(--radius-sm); cursor:pointer;
}
.logout-btn:hover{ background:#F0F0F3; color:var(--text); }

.toast{
  position:fixed; bottom:24px; left:50%; transform: translateX(-50%);
  background: var(--text); color:#fff; padding:11px 20px; border-radius: var(--radius-pill);
  font-size:13px; font-weight:600; box-shadow: var(--shadow-pop); z-index:200;
}
.toast.has-action{ display:flex; align-items:center; gap:14px; }
.toast-undo-btn{
  background:none; border:none; color: var(--accent); font-weight:800; font-size:13px;
  cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px;
}
.toast-undo-btn:hover{ color:#fff; }

/* ============ Misc ============ */
.hint{ font-size:12px; color:var(--text-faint); margin-top:4px; }
.link-btn{ background:none; border:none; color:var(--accent-strong); font-weight:700; font-size:12.5px; cursor:pointer; padding:0; }

/* ============ Mobile sidebar drawer ============ */
.topbar-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.menu-btn{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:34px; height:34px; padding:0; border-radius:9px; border:1px solid var(--border);
  background:var(--surface); cursor:pointer; flex-shrink:0;
}
.menu-btn span{ display:block; width:16px; height:2px; background:var(--text); margin:0 auto; border-radius:2px; }
.topbar-brand{ display:none; align-items:center; gap:7px; font-family:var(--font-display); font-weight:800; font-size:15px; flex-shrink:0; }
.topbar-brand .brand-mark{ color:var(--accent-strong); font-size:17px; }
.topbar-heading{ min-width:0; }
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(20,20,25,.45); z-index:150;
}
.sidebar-backdrop[hidden]{ display:none !important; }
.sidebar-close-btn{
  display:none; margin-left:auto; width:28px; height:28px; border-radius:8px; border:none;
  background:var(--surface-2); color:var(--text-soft); cursor:pointer; font-size:14px; flex-shrink:0;
}

@media (max-width: 760px){
  .menu-btn{ display:flex; }
  .topbar-brand{
    display:flex; font-size:20.5px; font-weight:800;
    letter-spacing:.04em; color:var(--text-faint); gap:4px; margin-bottom:1px;
  }
  .topbar-brand .brand-mark{ font-size:20px; }
  .topbar-heading{ display:flex; flex-direction:column; }
  .topbar h1{ font-size:18px; }
  /* The date was floating alone on the right once the brand/title moved
     into a stacked block on the left - it read as an unrelated fragment
     rather than part of the header, so it's dropped on small screens. */
  .topbar-right{ display:none; }

  /* Sidebar becomes a slide-in drawer instead of vanishing entirely, so
     every page (Entries, Statistics, Goals, Categories) stays reachable. */
  .sidebar{
    position:fixed; top:0; left:0; height:100dvh; z-index:200;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-pop);
    width: min(78vw, 280px);
  }
  .sidebar.open{ transform: translateX(0); }
  .sidebar .brand{ padding-right:0; }
  .sidebar-close-btn{ display:flex; align-items:center; justify-content:center; }
  .sidebar-backdrop:not([hidden]){ display:block; }

  .main{ padding: 16px 14px 60px; }
  .topbar{ gap:10px; }
  .grid-2{ grid-template-columns:1fr; }

  /* iOS Safari auto-zooms the whole page when a focused input's computed
     font-size is under 16px - that's the "modal zooms in when I open it"
     effect, since the description field autofocuses at 13px. 16px across
     the board fixes it without changing how anything reads once typed. */
  input, select, textarea, .time-box{ font-size:16px !important; }

  /* Timer bar: the running-timer layout has 4 flex children (info, mid
     clock range, elapsed time, play/stop button) that together are wider
     than a phone screen. flex-wrap alone just breaks them onto a second
     line mid-content, which is what produced the overlapping text /
     "60%-width bar" - so instead we stack it into two clean rows. */
  .timer-bar{
    flex-wrap:wrap; border-radius: var(--radius-lg); row-gap:10px;
  }
  .timer-active-info, .timer-picker-btn{ flex-basis:100%; order:1; }
  /* timer-mid grows to fill the second row so whatever follows it
     (elapsed time + stop button, or just the play button when idle)
     is pushed flush to the right edge instead of sitting bunched up
     against the left-aligned text next to it. */
  .timer-mid{ order:2; flex:1; justify-content: flex-end;}
  .timer-elapsed{ order:3; min-width:0; }
  .timer-toggle{ order:4; }
  .timer-mid .timer-range{ display:none; } /* redundant with the live elapsed counter on a narrow bar */

  /* Card headers: title + action button on one line was forcing width */
  .card-head{ row-gap:8px; }
  .planned-row, .entry-row{ flex-wrap:wrap; row-gap:8px; }
  .planned-row .detail-main, .entry-row .entry-main{ flex-basis:100%; }
}

@media (max-width: 480px){
  /* Modal becomes a full-screen sheet instead of a floating card - a
     540px-wide card with 16px zoom-triggering inputs and side-by-side
     date/time fields is what made "any search/modal" unusable on a phone. */
  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal{
    width:100%; max-width:100%; max-height:100dvh; height:100dvh;
    border-radius:0; padding:0; display:flex; flex-direction:column;
  }
  .modal-body{ flex:1; max-height:none; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); }
  .field-row{ flex-direction:column; gap:0; }
  .datetime-row{ flex-wrap:wrap; }
  .time-select-row{ flex:1 1 auto; justify-content:flex-end; }

  /* Category/tag pickers become a bottom sheet pinned to the viewport
     instead of an absolutely-positioned dropdown. The dropdown version
     was getting visually clipped by the modal's own scroll container
     whenever it opened near the bottom of the visible area - fixed
     positioning escapes that clipping entirely and is the standard
     mobile pattern for this kind of picker anyway. */
  .combo-popover{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height:70vh; padding-bottom: calc(8px + env(safe-area-inset-bottom));
    z-index:400;
  }
  .combo-list{ max-height:50vh; }
}