/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
@supports (height: 100dvh) {
  #app, #auth-screen { height: 100dvh; }
}
body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #1a202c;
  background: #f7fafc;
}
button { font: inherit; }

#app { display: flex; height: 100vh; }

.btn {
  background: #fff;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  color: #2d3748;
}
.btn:hover { background: #edf2f7; }
.btn.active { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }

/* ---------- sidebar ---------- */
#sidebar {
  width: 240px;
  flex: 0 0 240px;
  padding: 16px 14px;
  border-right: 1px solid #e2e8f0;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
#sidebar h1 { font-size: 17px; margin: 0 0 4px; }

.calendar-list { display: flex; flex-direction: column; gap: 8px; }
.cal-item { display: flex; align-items: flex-start; gap: 2px; }
.cal-drag {
  cursor: grab;
  color: #cbd5e0;
  font-size: 11px;
  padding: 3px 3px 0 0;
  user-select: none;
  touch-action: none; /* the handle drags; it must not scroll the page */
  flex: 0 0 auto;
}
.cal-drag:hover { color: #718096; }
.cal-item.dragging { opacity: 0.65; background: #ebf8ff; border-radius: 6px; }
.cal-main { flex: 1; display: flex; align-items: flex-start; gap: 8px; cursor: pointer; min-width: 0; }
.cal-item input[type="checkbox"] { margin-top: 3px; cursor: pointer; }
.cal-edit {
  border: none; background: none;
  color: #a0aec0; cursor: pointer;
  font-size: 13px; padding: 2px 5px; border-radius: 4px;
}
.cal-edit:hover { color: #2b6cb0; background: #edf2f7; }
.cal-swatch {
  width: 12px; height: 12px; border-radius: 3px;
  flex: 0 0 12px; margin-top: 4px;
}
.cal-info { min-width: 0; }
.cal-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-sync { font-size: 11px; color: #718096; }
.cal-sync.error { color: #c53030; font-weight: 600; }

.sidebar-note { font-size: 11px; color: #a0aec0; margin: 0; }
.cal-empty { font-size: 12px; color: #718096; margin: 0; }
.btn-subtle {
  background: none; border: none;
  color: #718096; font-size: 12px;
  cursor: pointer; text-align: left; padding: 2px 0;
  text-decoration: underline dotted;
}
.btn-subtle:hover { color: #2b6cb0; }

#user-row {
  margin-top: auto;
  display: flex; align-items: center; gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
#user-name {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#user-row .btn { font-size: 12px; padding: 3px 9px; }

/* ---------- landing / auth screen ---------- */
#auth-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ebf4ff, #f7fafc 55%, #fefcbf22);
  padding: 20px;
  overflow-y: auto;
}
.landing {
  display: flex; align-items: center; gap: 48px;
  max-width: 900px; flex-wrap: wrap; justify-content: center;
}
.landing-hero { flex: 1 1 400px; max-width: 470px; }
.landing-hero h1 { font-size: 26px; margin: 0 0 6px; }
.hero-tag { font-size: 17px; color: #4a5568; margin: 0 0 18px; line-height: 1.4; }
.hero-points { list-style: none; padding: 0; margin: 0 0 20px; }
.hero-points li { margin: 9px 0; font-size: 14px; color: #2d3748; line-height: 1.45; }
.hero-demo {
  display: inline-block; text-decoration: none;
  font-size: 15px; padding: 9px 18px;
  border: 2px solid #2b6cb0; color: #2b6cb0; font-weight: 600;
}
.hero-demo:hover { background: #ebf8ff; }
.hero-note { font-size: 12px; color: #a0aec0; margin: 10px 0 0; }
.auth-title { font-size: 17px; margin: 0 0 4px; }
.auth-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  padding: 28px 30px 22px;
  width: 100%; max-width: 360px;
}
.auth-card h1 { font-size: 19px; margin: 0 0 4px; }
.auth-sub { color: #718096; font-size: 13px; margin: 0 0 16px; }
.auth-card .ce-field { margin-bottom: 12px; }
.auth-submit { width: 100%; padding: 8px 0; margin-top: 2px; }
.auth-toggle { font-size: 13px; color: #718096; text-align: center; margin: 14px 0 0; }
.auth-toggle a { color: #2b6cb0; }
.auth-error {
  background: #fed7d7; color: #822727;
  border-radius: 6px; padding: 7px 10px;
  font-size: 12px; margin-bottom: 12px;
}
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  color: #a0aec0; font-size: 11px; margin: 14px 0 12px;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; border-top: 1px solid #e2e8f0;
}
.auth-demo { display: block; text-align: center; text-decoration: none; padding: 7px 0; }
.auth-demo-note { font-size: 11px; color: #a0aec0; text-align: center; margin: 6px 0 0; }

/* ===== Onboarding: welcome popups, demo strip, spotlight tour, checklist ===== */

/* Slim, persistent demo strip (CTA + replay tour + mobile "Try it") */
.demo-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 14px; font-size: 13px; color: #2a4365;
  background: linear-gradient(90deg, #ebf8ff, #e6fffa);
  border-bottom: 1px solid #bee3f8;
}
.demo-strip-txt { min-width: 0; }
/* Actions sit just after the label (not far-right) so they never slip behind
   the top-right alarm widget on desktop. */
.demo-strip-actions { display: flex; align-items: center; gap: 8px; }
.demo-strip-try, .demo-strip-tour {
  border: 1px solid #90cdf4; background: #fff; color: #2b6cb0; cursor: pointer;
  border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600;
}
.demo-strip-try { display: none; } /* mobile only (see media query) */
.demo-strip-try.all-done { border-color: #9ae6b4; color: #2f855a; }
.demo-strip-try:hover, .demo-strip-tour:hover { background: #ebf8ff; }
.demo-strip-cta {
  background: #2b6cb0; color: #fff !important; text-decoration: none;
  border-radius: 999px; padding: 4px 14px; font-weight: 600; white-space: nowrap;
}
.demo-strip-cta:hover { background: #2c5282; }

/* ---------- Welcome popup carousel ---------- */
.wpop-ov {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0; transition: opacity 0.18s ease;
}
.wpop-ov.in { opacity: 1; }
.wpop-card {
  position: relative; width: 100%; max-width: 420px;
  background: #fff; color: #1a202c;
  border-radius: 18px; padding: 26px 24px 18px; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(8px) scale(0.98); transition: transform 0.18s ease;
}
.wpop-ov.in .wpop-card { transform: none; }
.wpop-x {
  position: absolute; top: 10px; right: 12px;
  border: none; background: none; font-size: 22px; line-height: 1;
  color: #a0aec0; cursor: pointer;
}
.wpop-x:hover { color: #1a202c; }
.wpop-icon { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.wpop-title { font-size: 19px; margin: 0 0 8px; }
.wpop-body { font-size: 14px; line-height: 1.5; color: #4a5568; }
.wpop-tips { font-size: 12.5px; color: #718096; }
.wpop-cta {
  display: block; width: 100%; margin: 16px 0 2px;
  background: #2b6cb0; color: #fff; border: none; cursor: pointer;
  border-radius: 10px; padding: 11px; font-size: 14px; font-weight: 600;
}
.wpop-cta:hover { background: #2c5282; }
.wpop-choice { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.wpop-ghost {
  background: none; border: none; color: #718096; cursor: pointer;
  font-size: 13px; padding: 6px;
}
.wpop-ghost:hover { color: #2b6cb0; text-decoration: underline; }
.wpop-dots { display: flex; justify-content: center; gap: 6px; margin: 18px 0 12px; }
.wpop-dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e0; transition: all 0.15s; }
.wpop-dot.on { background: #2b6cb0; width: 20px; border-radius: 4px; }
.wpop-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wpop-back {
  background: none; border: none; color: #718096; cursor: pointer;
  font-size: 13px; padding: 8px 4px;
}
.wpop-back:hover { color: #2b6cb0; }
.wpop-skip { background: none; border: none; color: #a0aec0; cursor: pointer; font-size: 12px; padding: 8px 4px; margin-left: auto; }
.wpop-skip:hover { color: #2b6cb0; }
html.dark .wpop-skip { color: #718096; }
.wpop-next {
  background: #2b6cb0; color: #fff; border: none; cursor: pointer;
  border-radius: 9px; padding: 9px 20px; font-size: 14px; font-weight: 600;
}
.wpop-next:hover { background: #2c5282; }

/* ---------- iPhone setup checklist ---------- */
.ios-card { max-width: 460px; text-align: left; }
.ios-card .wpop-icon, .ios-card .wpop-title { text-align: center; }
.ios-steps { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 10px; }
.ios-step { display: flex; gap: 10px; align-items: flex-start; }
.ios-step-n {
  flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; background: #edf2f7; color: #4a5568;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ios-step.done .ios-step-n { background: none; font-size: 15px; }
.ios-step.blocked .ios-step-n { background: none; font-size: 15px; }
.ios-step.done .ios-step-main > b { color: #718096; font-weight: 600; }
.ios-step-main { min-width: 0; flex: 1; }
.ios-step-main > b { font-size: 14px; }
.ios-step-body { font-size: 12.5px; line-height: 1.5; color: #4a5568; margin-top: 2px; }
.ios-step .btn { margin-top: 8px; }
.ios-note { color: #718096; font-size: 11.5px; }
.ios-key { font-family: -apple-system, system-ui, sans-serif; }
.ios-ack { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12.5px; cursor: pointer; }
.ios-foot { border-top: 1px solid #e2e8f0; padding-top: 10px; margin-top: 4px; }
html.dark .ios-step-n { background: #2d3748; color: #cbd5e0; }
html.dark .ios-step-body { color: #a0aec0; }
html.dark .ios-foot { border-top-color: #2d3748; }

/* Screen-reader-only / off-screen (the jump-to-date input lives behind the 📅). */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Optional UI the user hid via Settings → Display. Body classes are set by
   chrome.js (applyChrome); keys must match chrome.js CHROME_GROUPS. */
body.hide-view-toggle   #view-toggle,
body.hide-today-btn     #today-btn,
body.hide-nav-arrows    #toolbar .nav-group,
body.hide-range-label   #range-label,
body.hide-jump-btn      #jump-btn,
body.hide-quickadd-btn  #quickadd-btn,
body.hide-search        #search-wrap,
body.hide-shortcuts-btn #shortcuts-btn,
body.hide-cmdk          #cmdk-btn,
body.hide-theme-btn     #theme-btn,
body.hide-add-cal-btn   #add-cal-btn,
body.hide-import-btn    #import-pdf-btn,
body.hide-export-btn    #export-ics-btn,
body.hide-refresh-btn   #refresh-btn,
body.hide-tutorial-btn  #tutorial-btn,
body.hide-sidebar-note  #sidebar .sidebar-note,
body.hide-sidebar-title #sidebar > h1,
body.hide-user-name     #user-name,
body.hide-now-line      .now-line,
body.hide-work-shade    .off-hours,
body.hide-upnext        #upnext,
body.hide-momentum      #momentum,
body.hide-momentum      #streak,
body.hide-alarm-widget  #alarm-widget {
  display: none !important;
}

/* Juicy micro-interactions (kept cheap + jank-free) */
.btn:active { transform: scale(0.97); }
.agenda-check:active { transform: scale(0.9); }
#momentum.mo-pulse .mo-ring { animation: mo-pulse 0.4s ease; }
@keyframes mo-pulse { 0%, 100% { transform: rotate(-90deg) scale(1); } 45% { transform: rotate(-90deg) scale(1.18); } }
#streak.streak-bump { animation: streak-bump 0.45s ease; }
@keyframes streak-bump { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { #momentum.mo-pulse .mo-ring, #streak.streak-bump { animation: none; } }

/* Focus-session timer pill */
.focus-pill {
  position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 20px); z-index: 9997;
  display: flex; align-items: center; gap: 10px; background: #1a202c; color: #fff;
  padding: 9px 12px 9px 15px; border-radius: 999px; box-shadow: 0 10px 34px rgba(0,0,0,0.32);
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
}
.focus-pill.in { opacity: 1; transform: translate(-50%, 0); }
.focus-emoji { font-size: 15px; }
.focus-label { font-size: 13px; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-time { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: #90cdf4; min-width: 46px; text-align: center; }
.focus-stop { background: rgba(255,255,255,0.16); border: none; color: #fff; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; }
.focus-stop:hover { background: rgba(255,255,255,0.3); }
/* The focus pill owns the bottom-centre slot for the whole session, and a toast
   claims the same 40px strip (both are #1a202c, so they merge into one unreadable
   blob). Lift toasts clear of it while a session runs. startFocus() sets the exact
   height in --toast-bottom; 74px is the fallback (pill: 20px up + 40px tall + gap). */
body.focus-running { --toast-bottom: 74px; }

/* Weekly-recap card (reuses .daybrief) */
.daybrief.recap .daybrief-msg { line-height: 1.9; }

/* Quiet-hours / focus-block indicator */
#quiet {
  display: inline-block; vertical-align: middle; cursor: pointer;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: #b7791f; background: #fefcbf; border: 1px solid #f6e05e;
}
#quiet:hover { background: #faf089; }
html.dark #quiet { color: #f6e05e; background: #3d3a1a; border-color: #5c5720; }

/* Morning "your day" brief */
.daybrief {
  position: fixed; top: 14px; left: 50%; transform: translate(-50%, -18px); z-index: 9998;
  width: min(440px, 92vw); background: #fff; border-radius: 14px; padding: 16px 18px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22); border: 1px solid #edf2f7; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
}
.daybrief.in { opacity: 1; transform: translate(-50%, 0); }
.daybrief-x { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 20px; line-height: 1; color: #a0aec0; cursor: pointer; }
.daybrief-greet { font-size: 13px; font-weight: 700; color: #2b6cb0; margin-bottom: 3px; }
.daybrief-msg { font-size: 14.5px; color: #2d3748; line-height: 1.45; }
.daybrief-go { margin-top: 11px; background: #2b6cb0; color: #fff; border: none; border-radius: 9px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.daybrief-go:hover { background: #2c5282; }
html.dark .daybrief { background: #1a202c; border-color: #2d3748; }
html.dark .daybrief-msg { color: #e2e8f0; }
html.dark .daybrief-greet { color: #63b3ed; }

/* Command-palette button + overlay */
.cmdk-btn { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
.cmdk-ov {
  position: fixed; inset: 0; z-index: 10001; display: flex; justify-content: center; align-items: flex-start;
  padding-top: 12vh; background: rgba(15, 23, 42, 0.38); opacity: 0; transition: opacity 0.12s ease;
}
.cmdk-ov.in { opacity: 1; }
.cmdk {
  width: min(560px, 92vw); max-height: 66vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); overflow: hidden;
  transform: translateY(-8px); transition: transform 0.14s ease;
}
.cmdk-ov.in .cmdk { transform: translateY(0); }
.cmdk-input { border: none; border-bottom: 1px solid #edf2f7; padding: 16px 18px; font-size: 16px; outline: none; font-family: inherit; color: #1a202c; }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #2d3748; }
.cmdk-item.active { background: #ebf3fb; }
.cmdk-ic { width: 18px; text-align: center; flex: none; }
.cmdk-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-hint { font-size: 11px; color: #a0aec0; font-weight: 600; border: 1px solid #e2e8f0; border-radius: 5px; padding: 1px 6px; }
.cmdk-empty { padding: 18px; text-align: center; color: #a0aec0; font-size: 13px; }
html.dark .cmdk { background: #1a202c; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
html.dark .cmdk-input { background: #1a202c; color: #e2e8f0; border-color: #2d3748; }
html.dark .cmdk-item { color: #e2e8f0; }
html.dark .cmdk-item.active { background: #2a3958; }
html.dark .cmdk-hint { color: #718096; border-color: #2d3748; }

/* Day-progress ring + streak flame (momentum.js) */
#momentum { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 2px 4px; vertical-align: middle; }
.mo-ring { width: 24px; height: 24px; transform: rotate(-90deg); }
.mo-ring-bg { fill: none; stroke: #e2e8f0; stroke-width: 3.5; }
.mo-ring-fg { fill: none; stroke: #2b6cb0; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 0.55s cubic-bezier(.4,0,.2,1); }
#momentum.mo-complete .mo-ring-fg { stroke: #38a169; }
.mo-ring-label { font-size: 11.5px; font-weight: 700; color: #718096; font-variant-numeric: tabular-nums; }
#momentum.mo-complete .mo-ring-label { color: #38a169; }
#streak { font-size: 12.5px; font-weight: 700; vertical-align: middle; cursor: default; }
html.dark .mo-ring-bg { stroke: #2d3748; }
html.dark .mo-ring-label { color: #a0aec0; }

/* Confetti (day cleared) */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 10000; overflow: hidden; }
.confetti-piece { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; opacity: 0.95; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translate(var(--dx, 0), 106vh) rotate(var(--rot, 540deg)); opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .confetti-piece { display: none; } }

/* Checked-off events: the check circle + strikethrough */
.agenda-check {
  flex: none; width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--cal, #cbd5e0); background: transparent; padding: 0; position: relative;
  transition: background 0.15s ease, transform 0.12s ease;
}
.agenda-check:hover { transform: scale(1.12); }
.agenda-row.done .agenda-check { background: var(--cal, #38a169); border-color: var(--cal, #38a169); }
.agenda-check::after {
  content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800; opacity: 0; transform: scale(0.5); transition: opacity 0.15s ease, transform 0.15s ease;
}
.agenda-row.done .agenda-check::after { opacity: 1; transform: scale(1); }
.agenda-row.done .agenda-title { text-decoration: line-through; color: #a0aec0; }
/* Auto-checked (the clock did it, not you) — same ✓, quieter, so a tick you
   earned still stands out from one that just elapsed. */
.agenda-row.done .agenda-check.auto { opacity: 0.5; }
.event-chip.done { opacity: 0.55; }
.event-chip.done .chip-title { text-decoration: line-through; }
html.dark .agenda-row.done .agenda-title { color: #718096; }

/* "Up next" toolbar chip */
#upnext {
  display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; line-height: 1.2;
  color: #2b6cb0; background: #ebf3fb; border: 1px solid #cfe0f3;
}
#upnext:hover { background: #dcebf9; }
html.dark #upnext { color: #90cdf4; background: #22304a; border-color: #2f4a6b; }

/* Keyboard-shortcuts help */
.ks-list { display: flex; flex-direction: column; gap: 8px; }
.ks-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.ks-row kbd {
  flex: 0 0 auto; min-width: 62px; text-align: center;
  font-family: Consolas, Menlo, monospace; font-size: 12px;
  background: #edf2f7; border: 1px solid #cbd5e0; border-bottom-width: 2px;
  border-radius: 5px; padding: 3px 7px; color: #2d3748;
}
html.dark .ks-row kbd { background: #2d3748; border-color: #4a5568; color: #e2e8f0; }

/* ---------- Spotlight tour ---------- */
.tour-catch { position: fixed; inset: 0; z-index: 290; }
.tour-spot {
  position: fixed; z-index: 300; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62);
  transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.tour-tip {
  position: fixed; z-index: 310; width: min(310px, calc(100vw - 24px));
  background: #fff; color: #1a202c; border-radius: 12px; padding: 14px 15px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.tour-tip-title { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.tour-tip-body { font-size: 13px; line-height: 1.45; color: #4a5568; }
.tour-tip-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 8px; }
.tour-count { font-size: 12px; color: #a0aec0; font-weight: 600; }
.tour-btns { display: flex; gap: 6px; }
.tour-skip { background: none; border: none; color: #a0aec0; cursor: pointer; font-size: 12px; padding: 6px 8px; }
.tour-skip:hover { color: #718096; }
.tour-back {
  background: #edf2f7; border: none; color: #4a5568; cursor: pointer;
  border-radius: 7px; font-size: 12px; padding: 6px 10px;
}
.tour-next {
  background: #2b6cb0; color: #fff; border: none; cursor: pointer;
  border-radius: 7px; font-size: 12px; font-weight: 600; padding: 6px 14px;
}
.tour-next:hover { background: #2c5282; }

/* ---------- Demo "try it" checklist ---------- */
.dtask-pill {
  position: fixed; z-index: 250; right: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 7px;
  background: #2b6cb0; color: #fff; border: none; cursor: pointer;
  border-radius: 999px; padding: 9px 15px; font-size: 14px;
  box-shadow: 0 8px 22px rgba(43, 108, 176, 0.4);
}
.dtask-pill .dtask-pill-tag { font-size: 12px; opacity: 0.9; font-weight: 600; }
.dtask-pill.all-done { background: #2f855a; box-shadow: 0 8px 22px rgba(47, 133, 90, 0.4); }
.dtask-scrim { position: fixed; inset: 0; z-index: 249; background: rgba(15, 23, 42, 0.45); }
.dtask-panel {
  position: fixed; z-index: 250; right: 16px; bottom: 16px;
  width: 290px; max-width: calc(100vw - 32px);
  background: #fff; color: #1a202c; border: 1px solid #e2e8f0;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.dtask-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: #f7fafc; border-bottom: 1px solid #edf2f7; font-size: 14px;
}
.dtask-prog { color: #2b6cb0; font-weight: 700; font-size: 12px; }
.dtask-min {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: #a0aec0; padding: 0 4px;
}
.dtask-min:hover { color: #1a202c; }
.dtask-list { padding: 6px; }
.dtask-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: 9px; }
.dtask-box {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px;
  border: 2px solid #cbd5e0; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.dtask-row.done { opacity: 0.6; }
.dtask-row.done .dtask-box { border-color: transparent; }
.dtask-row.done .dtask-txt b { text-decoration: line-through; }
.dtask-txt { display: flex; flex-direction: column; font-size: 13px; }
.dtask-hint { font-size: 11.5px; color: #a0aec0; }
.dtask-foot { padding: 10px 14px 13px; border-top: 1px solid #edf2f7; }
.dtask-win { font-size: 12.5px; color: #2f855a; font-weight: 600; margin-bottom: 8px; }
.dtask-cta {
  display: block; text-align: center; text-decoration: none;
  background: #2b6cb0; color: #fff; border-radius: 9px; padding: 9px; font-size: 13px; font-weight: 600;
}
.dtask-cta:hover { background: #2c5282; }
@keyframes dtaskPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.dtask-pill.pulse, .demo-strip-try.pulse { animation: dtaskPulse 0.5s ease 2; }

/* ---------- toolbar ---------- */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}
.nav-group { display: flex; gap: 4px; }
#range-label { font-weight: 600; font-size: 15px; flex: 1; }
.view-toggle { display: flex; gap: 0; }
.view-toggle .btn { border-radius: 0; }
.view-toggle .btn:first-child { border-radius: 6px 0 0 6px; }
.view-toggle .btn:last-child { border-radius: 0 6px 6px 0; border-left: none; }

/* ---------- grid ---------- */
:root { --hour-h: 72px; --axis-w: 56px; }

#grid-header {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  padding-right: 8px; /* approx scrollbar width so columns line up */
}
#grid-header .axis-spacer { flex: 0 0 var(--axis-w); }
.day-head {
  flex: 1; text-align: center; padding: 6px 0 4px;
  border-left: 1px solid #edf2f7;
  font-size: 12px; color: #4a5568;
}
.day-head .day-num { font-size: 18px; font-weight: 600; color: #1a202c; display: block; }
.day-head.today .day-num {
  background: #2b6cb0; color: #fff; border-radius: 50%;
  width: 28px; height: 28px; line-height: 28px; margin: 0 auto;
}

#allday-row {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  min-height: 0;
  padding-right: 8px;
}
#allday-row.has-events { min-height: 26px; }
#allday-row .axis-spacer {
  flex: 0 0 var(--axis-w);
  font-size: 10px; color: #a0aec0; text-align: right; padding: 4px 6px 0 0;
}
.allday-cell { flex: 1; border-left: 1px solid #edf2f7; padding: 2px; min-width: 0; cursor: cell; }
.allday-chip {
  font-size: 11px; border-radius: 4px; padding: 1px 6px; margin: 1px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#grid-scroll { flex: 1; overflow-y: auto; position: relative; }
#grid { display: flex; position: relative; min-height: calc(var(--hour-h) * 24); }

.hour-axis { flex: 0 0 var(--axis-w); position: relative; }
.hour-label {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-size: 11px; color: #a0aec0;
}

.day-col {
  flex: 1; position: relative;
  border-left: 1px solid #edf2f7;
  cursor: cell; /* empty slot → click to create an event */
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--hour-h) - 1px),
      #edf2f7 calc(var(--hour-h) - 1px), #edf2f7 var(--hour-h));
}
.day-col.today-col { background-color: #fbfdff; }

/* Event editor: date + time-range row */
.ev-allday-row { flex-direction: row; align-items: center; gap: 7px; }
.ev-allday { width: auto; margin: 0; }
.ev-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-when .ev-date { width: auto; }
.ev-times { display: inline-flex; align-items: center; gap: 6px; }
.ev-times .ce-input { width: auto; }
.ev-dash { color: #718096; }

.event-chip {
  position: absolute;
  border-radius: 4px;
  border-left: 3px solid;
  padding: 4px 7px;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
  line-height: 1.35;
  /* Each chip is its own query container, so it can shed detail when
     overlapping meetings squeeze it thin (see the @container rules below). */
  container-type: inline-size;
}
.event-chip:hover, .allday-chip:hover { filter: brightness(0.96); }
.allday-chip { cursor: pointer; }
/* Wrap at word boundaries (and only break a word when it genuinely can't fit),
   then clamp with an ellipsis — never shatter "Incident" into "Inci de nt". */
.event-chip .chip-title {
  font-weight: 600;
  overflow-wrap: break-word;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.event-chip .chip-time { display: block; font-size: 10px; opacity: 0.75; }

.imp-busy { display: flex; align-items: center; gap: 8px; }
.imp-spin {
  display: inline-block; width: 13px; height: 13px; flex: 0 0 auto;
  border: 2px solid #cbd5e0; border-top-color: #2b6cb0; border-radius: 50%;
  animation: imp-spin 0.7s linear infinite;
}
@keyframes imp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .imp-spin { animation-duration: 2s; } }

.pref-hours-row { display: flex; align-items: center; gap: 8px; }
.pref-hours-row .ce-input { flex: 1; }
.pref-hours-to { color: #718096; font-size: 13px; }

/* Show / hide-controls checklist (Settings → Display) */
.pref-chrome-mount { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 8px; }
.pref-chrome-group { display: flex; flex-direction: column; gap: 5px; }
.pref-chrome-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #718096; }
.pref-chrome-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; }
.pref-chrome-row input { margin-top: 2px; flex: none; }
.pref-chrome-label { display: flex; flex-direction: column; gap: 1px; }
.pref-chrome-hint { font-size: 11px; color: #718096; }
html.dark .pref-chrome-h, html.dark .pref-chrome-hint, html.dark .pref-hours-to { color: #a0aec0; }

/* Hours outside the working window are faintly shaded (display pref). */
.off-hours {
  position: absolute; left: 0; right: 0; z-index: 0;
  background: rgba(15, 23, 42, 0.035); pointer-events: none;
}
html.dark .off-hours { background: rgba(0, 0, 0, 0.22); }

/* ==================== month view ==================== */
#grid-header.month-head {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 0; border-bottom: 1px solid #e2e8f0;
}
.mon-dow {
  text-align: center; padding: 7px 0; font-size: 12px; font-weight: 600;
  color: #718096; text-transform: uppercase; letter-spacing: 0.4px;
}
#grid.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  height: 100%; min-height: 560px;
  background: #e2e8f0; gap: 1px;
}

/* Agenda (list) view */
#grid-header.agenda-head { display: none; }
#grid.agenda-grid { display: block; position: static; min-height: 0; height: auto; background: none; }
.agenda { max-width: 720px; margin: 0 auto; padding: 4px 14px 48px; }
.agenda-day { margin-top: 18px; }
.agenda-date {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: #718096; padding: 4px 4px 8px; border-bottom: 1px solid #e2e8f0;
}
.agenda-today .agenda-date { color: #2b6cb0; }
.agenda-row {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid #f1f4f8; border-radius: 6px;
  padding: 10px 8px; cursor: pointer; font-size: 14px; font-family: inherit;
}
.agenda-row:hover { background: #f7fafc; }
.agenda-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.agenda-time { color: #4a5568; font-size: 12.5px; min-width: 120px; flex: none; font-variant-numeric: tabular-nums; }
.agenda-title { color: #1a202c; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-empty { text-align: center; color: #718096; padding: 64px 20px; font-size: 15px; line-height: 1.9; }
.agenda-empty span { font-size: 13px; }
html.dark .agenda-date { color: #a0aec0; border-color: #2d3748; }
html.dark .agenda-today .agenda-date { color: #90cdf4; }
html.dark .agenda-row { border-color: #232b3a; }
html.dark .agenda-row:hover { background: #232b3a; }
html.dark .agenda-time { color: #a0aec0; }
html.dark .agenda-title { color: #e2e8f0; }
html.dark .agenda-empty { color: #a0aec0; }
.mon-cell {
  background: #fff; padding: 3px 4px 4px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 0; cursor: pointer;
}
.mon-cell:hover { background: #f7fafc; }
.mon-cell.other-month { background: #f7fafc; color: #a0aec0; }
.mon-cell.other-month:hover { background: #edf2f7; }
.mon-cell.today .mon-date {
  background: #2b6cb0; color: #fff; border-radius: 999px;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
}
.mon-date { font-size: 12px; font-weight: 600; margin-bottom: 2px; align-self: flex-start; padding: 0 2px; }
.mon-cell.other-month .mon-date { color: #a0aec0; }
.mon-pills { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.mon-pill {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; line-height: 1.3; padding: 1px 4px; border-radius: 4px;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mon-pill:hover { background: #edf2f7; }
.mon-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; }
.mon-pill-t { color: #718096; font-variant-numeric: tabular-nums; }
.mon-pill-t2 { overflow: hidden; text-overflow: ellipsis; }
.mon-pill.ev-important .mon-pill-t2 { font-weight: 700; }
.mon-pill.ev-low { opacity: 0.7; }
.mon-more { font-size: 11px; color: #718096; font-weight: 600; padding: 0 4px; cursor: pointer; }
.mon-more:hover { color: #2b6cb0; }
html.dark #grid-header.month-head { border-color: #2d3748; }
html.dark #grid.month-grid { background: #2d3748; }
html.dark .mon-cell { background: #1a202c; }
html.dark .mon-cell:hover { background: #222836; }
html.dark .mon-cell.other-month { background: #171923; color: #4a5568; }
html.dark .mon-pill:hover { background: #2d3748; }

/* Manual events can be dragged (move) or resized (bottom edge). */
.event-chip.manual { cursor: grab; touch-action: none; }
.event-chip.manual::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  cursor: ns-resize;
}
.event-chip.manual.dragging {
  cursor: grabbing; opacity: 0.9; z-index: 60;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.drag-hint {
  position: fixed; z-index: 650; display: none;
  background: #1a202c; color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* A crowded overlapping block collapses into one readable chip (neutral — many
   overlapping meetings are expected here, not a problem). */
.event-chip.chip-more {
  background: #edf2f7; border-left-color: #a0aec0; color: #4a5568;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700; text-align: center; gap: 2px; padding: 4px 8px;
}
.event-chip.chip-more:hover { background: #e2e8f0; filter: none; }
.chip-more .chip-more-n { font-size: 13px; line-height: 1.15; }
.chip-more .chip-more-lbl { font-size: 10px; font-weight: 500; opacity: 0.85; }
html.dark .event-chip.chip-more { background: #2d3748; border-left-color: #4a5568; color: #cbd5e0; }
html.dark .event-chip.chip-more:hover { background: #4a5568; }

/* "Expand this time block" panel (from clicking the "+N expand" chip, or the
   conflict badge). A readable list of every overlapping meeting. */
.ovp-overlay {
  position: fixed; inset: 0; z-index: 610;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, 0.5); opacity: 0; transition: opacity 0.13s ease;
}
.ovp-overlay.in { opacity: 1; }
.ovp-card {
  position: relative; width: 100%; max-width: 460px; max-height: 80vh; overflow-y: auto;
  background: #fff; color: #1a202c; border-radius: 14px; padding: 18px 18px 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
}
.ovp-x { position: absolute; top: 9px; right: 12px; border: none; background: none; font-size: 22px; line-height: 1; color: #a0aec0; cursor: pointer; }
.ovp-x:hover { color: #1a202c; }
.ovp-head { font-size: 14px; font-weight: 700; margin-bottom: 12px; padding-right: 20px; }
.ovp-list { display: flex; flex-direction: column; gap: 6px; }
.ovp-item {
  display: flex; align-items: stretch; gap: 0; width: 100%; text-align: left;
  border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; cursor: pointer; overflow: hidden;
}
.ovp-item:hover { border-color: #2b6cb0; background: #f0f6ff; }
.ovp-bar { flex: 0 0 5px; }
.ovp-main { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; min-width: 0; }
.ovp-title { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ovp-meta { font-size: 12px; color: #718096; }
html.dark .ovp-card { background: #1a202c; color: #e2e8f0; }
html.dark .ovp-item { background: #1a202c; border-color: #2d3748; }
html.dark .ovp-item:hover { border-color: #63b3ed; background: #222b3a; }
html.dark .ovp-meta { color: #a0aec0; }
html.dark .ovp-x:hover { color: #e2e8f0; }

/* Simultaneous meetings split a column N ways — five at once leaves ~70px on a
   phone. Rather than clip the title mid-word, drop the time line first, then
   tighten the title. (Each .event-chip is the query container.) */
@container (max-width: 104px) {
  .event-chip .chip-time { display: none; }
}
@container (max-width: 64px) {
  .event-chip .chip-title { font-size: 10px; line-height: 1.25; letter-spacing: -0.2px; }
}

.now-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: #e53e3e; z-index: 5; pointer-events: none;
}
.now-line::before {
  content: ""; position: absolute; left: -4px; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: #e53e3e;
}

/* ---------- event details popup ---------- */
.ep-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 32, 44, 0.4);
  z-index: 400; /* above the mobile sidebar drawer */
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ep-footer {
  margin-top: 14px;
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
}
.ep-join {
  margin-right: auto; /* push Join to the left, actions stay right */
  background: #2b6cb0; border-color: #2b6cb0; color: #fff;
  text-decoration: none; font-weight: 600;
}
.ep-join:hover { background: #2c5282; }
.ep-panel {
  position: relative;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  width: 100%; max-width: 440px;
  max-height: 80vh; overflow-y: auto;
  overflow-x: hidden; /* nothing may ever poke out of a dialog */
  padding: 18px 20px 20px;
}
.ep-close {
  position: absolute; top: 8px; right: 10px;
  border: none; background: none;
  font-size: 22px; line-height: 1;
  color: #a0aec0; cursor: pointer; padding: 4px;
}
.ep-close:hover { color: #1a202c; }
.ep-title {
  font-size: 17px; font-weight: 700;
  border-left: 4px solid;
  padding: 2px 0 2px 10px;
  margin: 0 24px 12px 0;
  overflow-wrap: anywhere; word-break: break-word;
  white-space: normal;
}
.ep-rows { display: flex; flex-direction: column; gap: 9px; }
.ep-row { display: flex; gap: 10px; }
.ep-label { flex: 0 0 88px; color: #718096; font-size: 12px; padding-top: 1px; }
.ep-value { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.ep-value a { color: #2b6cb0; }
.ep-swatch {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; margin-right: 6px;
}
.ep-description {
  white-space: pre-wrap;
  font-size: 13px;
  max-height: 32vh; overflow-y: auto;
}

/* ---------- calendar editor ---------- */
.ce-panel { max-width: 400px; }
.ce-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.ce-field { display: block; margin-bottom: 11px; }
.ce-label { display: block; font-size: 12px; color: #718096; margin-bottom: 3px; }
.ce-optional { color: #a0aec0; font-weight: 400; }
.ce-input {
  width: 100%;
  border: 1px solid #cbd5e0; border-radius: 6px;
  padding: 6px 9px; font: inherit;
}
.ce-input:focus { outline: 2px solid #90cdf4; outline-offset: -1px; }
.ce-color-row { display: flex; align-items: center; gap: 8px; }
.ce-color {
  width: 38px; height: 31px; padding: 2px;
  border: 1px solid #cbd5e0; border-radius: 6px;
  background: #fff; cursor: pointer; flex: 0 0 38px;
}
.ce-hex { width: 92px; flex: 0 0 92px; }
.ce-sound { font-size: 12px; color: #718096; }
.ce-error {
  background: #fed7d7; color: #822727;
  border-radius: 6px; padding: 7px 10px;
  font-size: 12px; margin-bottom: 10px;
}
.ce-error.warning { background: #fefcbf; color: #744210; }
.ce-error a { color: inherit; font-weight: 700; text-decoration: underline; }
.ce-error a:hover { opacity: 0.8; }
.ce-actions { display: flex; gap: 8px; align-items: center; }
.ce-actions-spacer { flex: 1; }
.ce-save { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.ce-save:hover { background: #2c5282; }
.ce-delete { color: #c53030; border-color: #fc8181; }
.ce-delete:hover { background: #fff5f5; }

/* ---------- search ---------- */
#search-wrap { position: relative; }
#search-input {
  border: 1px solid #cbd5e0; border-radius: 6px;
  padding: 5px 10px; font: inherit; width: 200px;
  background: #fff; color: inherit;
}
#search-results {
  position: absolute; top: calc(100% + 4px); right: 0;
  width: 320px; max-height: 50vh; overflow-y: auto;
  background: #fff; border: 1px solid #cbd5e0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 150; padding: 4px;
}
.sr-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  border: none; background: none; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; font: inherit; color: inherit;
}
.sr-item:hover, .sr-item.active { background: #edf2f7; }
.sr-item.active { box-shadow: inset 2px 0 0 #2b6cb0; }
.sr-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.sr-main { min-width: 0; }
.sr-title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-time { font-size: 11px; color: #718096; }
.sr-empty { padding: 10px; color: #718096; font-size: 13px; text-align: center; }

/* ---------- context menu ---------- */
.ctx-menu {
  position: fixed; z-index: 300;
  background: #fff; border: 1px solid #cbd5e0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 4px; min-width: 200px;
}
.ctx-item {
  display: block; width: 100%; text-align: left;
  border: none; background: none; cursor: pointer;
  padding: 7px 10px; border-radius: 6px; font: inherit; color: inherit;
}
.ctx-item:hover { background: #edf2f7; }
.ctx-danger:hover { background: #fff5f5; color: #c53030; }
.ctx-title { font-weight: 700; font-size: 12px; padding: 4px 10px 6px; color: #4a5568; }
.ctx-hint { font-size: 11px; color: #a0aec0; padding: 6px 10px 2px; border-top: 1px solid #e2e8f0; margin-top: 4px; }
.ctx-check { display: inline-block; width: 18px; }
.ctx-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; }
.ctx-label { overflow-wrap: anywhere; }
html.dark .ctx-title { color: #a0aec0; }
html.dark .ctx-hint { border-top-color: #4a5568; }

/* ---------- keyword chip editor ---------- */
.kw-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 8px; min-height: 24px;
}
.kw-chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: #edf2f7; border: 1px solid #cbd5e0;
  border-radius: 999px; padding: 2px 4px 2px 10px;
  font-size: 12px;
}
.kw-x {
  border: none; background: none; cursor: pointer;
  color: #718096; font-size: 14px; padding: 0 5px; line-height: 1;
}
.kw-x:hover { color: #c53030; }
.kw-empty { font-size: 12px; color: #a0aec0; padding: 3px 0; }
.kw-add-row { display: flex; gap: 6px; }
.kw-add-row .kw-input { flex: 1; }
.kw-add-row .btn { flex: 0 0 auto; }
.ce-kw-hint { font-size: 11px; color: #a0aec0; margin: -6px 0 11px; }

/* ---------- settings / hidden events / recovery ---------- */
.st-dialog { max-width: 420px; }
.st-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid #e2e8f0; margin: 0 0 14px;
  overflow-x: auto; scrollbar-width: thin; /* scroll if the tabs don't all fit */
}
.st-tabs::-webkit-scrollbar { height: 5px; }
.st-tabs::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }
.st-tab {
  flex: 0 0 auto; white-space: nowrap; /* never clip a label ("Account") */
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: #718096;
  padding: 7px 11px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
/* Roomier dialog so all the tabs fit without scrolling on desktop. */
.st-dialog { max-width: 540px; }
.st-tab:hover { color: #2b6cb0; }
.st-tab.active { color: #2b6cb0; border-bottom-color: #2b6cb0; }
/* Advanced settings tabs hide until the "Advanced" toggle is opened. */
.st-tabs:not(.show-adv) .st-tab-adv { display: none; }
.st-adv-toggle {
  flex: 0 0 auto; white-space: nowrap; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: #a0aec0;
  padding: 7px 10px; margin-bottom: -1px; border-bottom: 2px solid transparent;
}
.st-adv-toggle:hover { color: #2b6cb0; }
.st-tabs.show-adv .st-adv-toggle { color: #718096; }
.pref-chrome-actions { display: flex; gap: 14px; flex-wrap: wrap; }
html.dark .st-adv-toggle { color: #718096; }
html.dark .st-adv-toggle:hover { color: #63b3ed; }
.st-body { min-height: 176px; }
.st-pane { display: none; }
.st-pane.active { display: block; }
.st-pane .st-recovery { margin-top: 2px; }
.st-acct-h { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.st-acct-block .ce-field { margin-bottom: 8px; }
.st-acct-block .st-change-pass { margin-top: 2px; }
.st-acct-sep { border: none; border-top: 1px solid #e2e8f0; margin: 16px 0; }
.bk-on-row { display: flex; align-items: center; gap: 7px; }
.bk-link-row { display: flex; align-items: center; gap: 2px; font-size: 12px; color: #718096; flex-wrap: wrap; }
.bk-link-row .bk-slug { width: auto; flex: 1 1 120px; }
.bk-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.bk-day { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.sm-row { display: flex; gap: 10px; }
.sm-row .ce-field { flex: 1; }
.sm-secure-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding-top: 6px; }
.sm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sm-oauth { margin: 4px 0 12px; }
.sm-oauth-btn { width: 100%; justify-content: center; font-weight: 600; background: #ebf3fb; border-color: #cfe0f3; color: #2b6cb0; padding: 10px; }
.sm-oauth-btn:hover { background: #dcebf9; }
.sm-oauth-or { text-align: center; font-size: 11px; color: #a0aec0; margin: 12px 0 2px; }
.sm-oauth-connected { margin: 4px 0; }
.sm-connected-line { font-size: 13px; color: #2f855a; margin-bottom: 10px; }
html.dark .sm-oauth-btn { background: #22304a; border-color: #2f4a6b; color: #90cdf4; }
html.dark .sm-connected-line { color: #68d391; }
/* Event editor: "block this elsewhere" toggle */
.ev-push-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ev-push-row input { cursor: pointer; }
.ev-push-row input:disabled + span { opacity: 0.55; }
.ev-push-hint { font-size: 11px; color: #718096; margin: 0 0 11px; line-height: 1.45; }
.ev-repeat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-repeat-row .ev-repeat { flex: 1 1 auto; }
.ev-until { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #718096; white-space: nowrap; }
.ev-until .ce-input { width: auto; }

/* Custom recurrence builder */
.ev-custom {
  margin-top: 8px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 9px;
  background: #f7fafc; display: flex; flex-direction: column; gap: 10px; font-size: 13px;
}
.ev-cu-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ev-cu-line .ev-cu-interval { width: 60px; }
.ev-cu-line .ev-cu-freq { width: auto; flex: 0 0 auto; }
.ev-cu-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-cu-sub .ce-label { margin: 0; flex: 0 0 auto; }
.ev-cu-wds { display: flex; gap: 4px; flex-wrap: wrap; }
.ev-cu-wd { position: relative; cursor: pointer; }
.ev-cu-wd input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ev-cu-wd span {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid #cbd5e0;
  font-size: 12px; font-weight: 600; color: #4a5568; background: #fff;
}
.ev-cu-wd input:checked + span { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.ev-cu-radio { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ev-cu-radio .ce-input { width: auto; }
.ev-cu-end { flex-direction: column; align-items: flex-start; gap: 6px; }
html.dark .ev-custom { background: #222b3a; border-color: #2d3748; }
html.dark .ev-cu-wd span { background: #2d3748; border-color: #4a5568; color: #cbd5e0; }
html.dark .ev-cu-wd input:checked + span { background: #3182ce; border-color: #3182ce; color: #fff; }
.st-pw-msg { font-size: 12px; border-radius: 6px; padding: 6px 9px; margin: 2px 0 8px; }
.st-pw-msg.ok { background: #c6f6d5; color: #22543d; }
.st-pw-msg.err { background: #fed7d7; color: #822727; }
.st-hint { font-size: 11px; color: #718096; margin: 4px 0 12px; }
.rc-note { font-size: 13px; color: #4a5568; }
.rc-code {
  font-family: Consolas, Menlo, monospace;
  font-size: 20px; font-weight: 700; letter-spacing: 1px;
  text-align: center;
  background: #f7fafc; border: 1px dashed #cbd5e0; border-radius: 8px;
  padding: 14px; margin: 12px 0 16px;
  user-select: all;
}
.he-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.he-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 6px;
}
.he-main { flex: 1; min-width: 0; }
.he-title {
  display: block; font-weight: 600; text-decoration: line-through; color: #718096;
  overflow-wrap: anywhere; word-break: break-word;
}
.he-sub { font-size: 11px; color: #a0aec0; }
.he-show { font-size: 12px; padding: 3px 10px; }

/* ---------- Silenced dates (holidays by default; bell toggle) ---------- */
/* The whole column gets a soft purple wash so a silenced day is obvious at
   a glance without shouting over the events themselves. */
.day-col.muted-col, .allday-cell.muted-col { background: rgba(128, 90, 213, 0.07); }
.day-head.muted-day { background: rgba(128, 90, 213, 0.12); }
html.dark .day-col.muted-col, html.dark .allday-cell.muted-col { background: rgba(159, 122, 234, 0.10); }
html.dark .day-head.muted-day { background: rgba(159, 122, 234, 0.16); }
/* Today's column has its own highlight that would otherwise beat the wash
   (its dark-mode rule comes later in this file) — a 3-class selector wins in
   both themes and blends "today" and "silenced" into a purple-tinted version
   of the today color. */
.day-col.today-col.muted-col { background-color: #f4effc; }
html.dark .day-col.today-col.muted-col { background-color: #2a2440; }

.day-head { position: relative; }
.day-mute {
  border: none; background: none; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 4px; margin-left: 4px;
  border-radius: 6px; vertical-align: middle;
  opacity: 0.35; transition: opacity 0.15s;
}
/* Discoverability: every day header shows a faint bell so the affordance is
   always visible; it brightens on hover, and a silenced date's bell is fully
   opaque so the state reads at a glance. */
.day-head:hover .day-mute, .day-mute.on { opacity: 1; }
.day-mute:hover { background: rgba(128, 90, 213, 0.15); }
/* Partial mute (only some calendars silenced): small purple corner dot. */
.day-mute.partial::after {
  content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #805ad5; margin-left: -6px; margin-top: -2px;
}
.day-holiday {
  display: block; font-size: 9.5px; font-weight: 600; color: #805ad5;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.2;
}
html.dark .day-holiday { color: #b794f4; }

/* Alarm-widget note shown when today's alarms are silenced */
.aw-muted-note {
  font-size: 12px; color: #6b46c1;
  background: rgba(128, 90, 213, 0.10);
  border: 1px solid rgba(128, 90, 213, 0.25);
  border-radius: 8px; padding: 7px 9px; margin-bottom: 6px;
}
html.dark .aw-muted-note { color: #d6bcfa; }

/* ---------- Event priority tags (right-click) ---------- */
/* Important = thick full border in the event's OWN calendar color (--cal is set
   inline on every chip by grid.js). !important beats the inline border-left
   shorthand so all four sides stay a uniform 2px; the color still matches the
   calendar because it comes from the same --cal value. Works in dark mode too. */
.event-chip.ev-important, .allday-chip.ev-important {
  border: 2px solid var(--cal, #e53e3e) !important;
}
.event-chip.ev-important .chip-title, .allday-chip.ev-important {
  text-transform: uppercase;
  font-weight: 700;
}
.event-chip.ev-low, .allday-chip.ev-low { opacity: 0.55; }
.event-chip.ev-low .chip-title, .allday-chip.ev-low { text-transform: lowercase; }

/* ---------- PDF import dialog ---------- */
.imp-file { margin: 6px 0 10px; max-width: 100%; }
.imp-summary { font-size: 13px; margin: 0 0 12px; }
.imp-counts { font-size: 13px; margin: 4px 0 8px; }
.imp-add-n { color: #2f855a; }
.imp-del-n { color: #c53030; }
.imp-list {
  max-height: 34vh; overflow-y: auto;
  border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 6px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.imp-row { display: flex; gap: 8px; align-items: baseline; font-size: 12px; padding: 2px 4px; border-radius: 4px; }
.imp-row.add { background: #f0fff4; }
.imp-row.del { background: #fff5f5; }
.imp-row.del .imp-row-main { text-decoration: line-through; color: #718096; }
.imp-sign { font-weight: 700; width: 12px; flex: 0 0 12px; }
.imp-row.add .imp-sign { color: #2f855a; }
.imp-row.del .imp-sign { color: #c53030; }
.imp-row-main { min-width: 0; overflow-wrap: break-word; }
.imp-row-time { color: #a0aec0; margin-left: 6px; font-size: 11px; white-space: nowrap; }
.ce-optional { font-weight: 400; color: #a0aec0; }

/* ---------- ICS help box ---------- */
.ce-help-btn {
  border: 1px solid #cbd5e0; background: #fff; color: #718096;
  border-radius: 50%; width: 17px; height: 17px; line-height: 1;
  font-size: 11px; cursor: pointer; margin-left: 5px; padding: 0;
}
.ce-help-btn:hover { color: #2b6cb0; border-color: #2b6cb0; }
.ce-help-box {
  font-size: 12px; color: #4a5568;
  background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 11px;
}
.ce-help-box ol { margin: 6px 0; padding-left: 18px; }
.ce-help-box li { margin: 3px 0; }
.ce-help-others { color: #718096; }

/* ---------- alarm widget ---------- */
#alarm-widget {
  position: fixed;
  top: 16px; right: 16px;
  width: 320px;
  background: #fff;
  border: 1px solid #cbd5e0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 100;
  transition: opacity 0.35s ease;
  font-size: 13px;
  user-select: none;
}
/* Cursor left the widget → slightly see-through so the calendar shows through;
   hovering, touching, or dragging snaps it back to fully solid (JS clears
   .aw-idle while the pointer is over it, and :hover forces solid regardless). */
#alarm-widget.aw-idle { opacity: 0.8; }
#alarm-widget.aw-idle:hover { opacity: 1; }
.aw-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #2d3748; color: #fff;
  border-radius: 9px 9px 0 0;
  cursor: move;
}
.aw-header .aw-title { font-weight: 700; flex: 1; }
.aw-status { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #cbd5e0; }
.aw-dot { width: 8px; height: 8px; border-radius: 50%; background: #718096; }
.aw-dot.on { background: #48bb78; }
.aw-dot.blocked { background: #e53e3e; }

.aw-body { padding: 10px 12px 12px; }
.aw-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.aw-controls .btn { font-size: 12px; padding: 4px 9px; }

.aw-list { display: flex; flex-direction: column; gap: 6px; }
.aw-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0; border-radius: 6px;
  background: #f9fafb;
}
.aw-row.started { border-color: #48bb78; background: #f0fff4; }
.aw-row-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.aw-row-main { flex: 1; min-width: 0; }
.aw-row-title {
  font-weight: 600;
  /* wrap long titles (max 2 lines) instead of truncating or overflowing */
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.aw-row-sub { font-size: 11px; color: #718096; }
.aw-row-count { font-size: 11px; font-weight: 700; color: #2b6cb0; white-space: nowrap; }
.aw-row-count.started-label { color: #2f855a; }
.aw-row-x {
  border: none; background: none; color: #a0aec0;
  font-size: 15px; cursor: pointer; padding: 0 3px; line-height: 1;
}
.aw-row-x:hover { color: #e53e3e; }
.aw-fs-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #4a5568; margin: 2px 0 4px; cursor: pointer; }
html.dark .aw-fs-row { color: #a0aec0; }

/* Full-screen "ring until dismissed" alarm */
.alarm-modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, 0.75);
  animation: alarmPulseBg 1.6s ease-in-out infinite;
}
@keyframes alarmPulseBg { 0%, 100% { background: rgba(15,23,42,0.72); } 50% { background: rgba(43,108,176,0.6); } }
.alarm-modal-card {
  width: 100%; max-width: 420px; text-align: center;
  background: #fff; color: #1a202c; border-radius: 20px;
  padding: 30px 26px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.alarm-modal-bell { font-size: 52px; line-height: 1; animation: alarmShake 1s ease-in-out infinite; }
@keyframes alarmShake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-6deg); } }
.alarm-modal-when { font-size: 15px; font-weight: 700; color: #2b6cb0; margin: 8px 0 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.alarm-modal-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.alarm-modal-item { display: flex; align-items: center; gap: 10px; text-align: left; }
.alarm-modal-swatch { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 3px; }
.alarm-modal-item-main { display: flex; flex-direction: column; min-width: 0; }
.alarm-modal-title { font-size: 17px; font-weight: 700; }
.alarm-modal-time { font-size: 13px; color: #718096; }
.alarm-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.alarm-modal-snoozes { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.alarm-snooze-label { font-size: 13px; font-weight: 600; color: #718096; }
.alarm-modal-snooze { flex: 0 0 auto; padding: 8px 14px; font-size: 13px; font-weight: 600; }
.alarm-modal-dismiss { padding: 11px; font-size: 14px; font-weight: 600; background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.alarm-modal-dismiss:hover { background: #2c5282; }
html.dark .alarm-snooze-label { color: #a0aec0; }
html.dark .alarm-modal-card { background: #1a202c; color: #e2e8f0; }
html.dark .alarm-modal-time { color: #a0aec0; }
@media (prefers-reduced-motion: reduce) {
  .alarm-modal, .alarm-modal-bell { animation: none !important; }
}

/* ==================== sending-mailbox help ==================== */
.mbh-help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 6px; padding: 0; vertical-align: middle;
  border: 1px solid #cbd5e0; border-radius: 50%; background: #fff; color: #2b6cb0;
  font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
}
.mbh-help-btn:hover { background: #2b6cb0; color: #fff; border-color: #2b6cb0; }
.mbh-inline-link {
  border: none; background: none; padding: 0; cursor: pointer;
  color: #2b6cb0; font-weight: 600; font-size: inherit; white-space: nowrap;
}
.mbh-inline-link:hover { text-decoration: underline; }
html.dark .mbh-help-btn { background: #2d3748; border-color: #4a5568; color: #63b3ed; }
html.dark .mbh-help-btn:hover { background: #3182ce; color: #fff; }
html.dark .mbh-inline-link { color: #63b3ed; }

.mbh-overlay {
  position: fixed; inset: 0; z-index: 620;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, 0.55); opacity: 0; transition: opacity 0.14s ease;
}
.mbh-overlay.in { opacity: 1; }
.mbh-card {
  position: relative; width: 100%; max-width: 480px; max-height: 86vh; overflow-y: auto;
  background: #fff; color: #1a202c; border-radius: 16px; padding: 22px 22px 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}
.mbh-x { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 24px; line-height: 1; color: #a0aec0; cursor: pointer; }
.mbh-x:hover { color: #1a202c; }
.mbh-h { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.mbh-intro { font-size: 13.5px; line-height: 1.55; color: #4a5568; margin-bottom: 14px; }
.mbh-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.mbh-chip {
  border: 1px solid #cbd5e0; border-radius: 999px; background: #fff; color: #2d3748;
  padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mbh-chip:hover { border-color: #2b6cb0; }
.mbh-chip.active { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.mbh-note { font-size: 12.5px; color: #718096; margin: 0 0 10px; }
.mbh-steps { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
.mbh-steps li { font-size: 13.5px; line-height: 1.5; }
.mbh-steps code, .mbh-settings code { background: #edf2f7; border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.mbh-settings {
  display: grid; grid-template-columns: auto 1fr; gap: 5px 12px;
  background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 11px 14px; margin-bottom: 12px; font-size: 13px;
}
.mbh-settings > div { display: contents; }
.mbh-settings > div > span { color: #718096; }
.mbh-fill { background: #2b6cb0; border-color: #2b6cb0; color: #fff; font-weight: 600; width: 100%; }
.mbh-fill:hover { background: #2c5282; }
.mbh-foot { font-size: 12.5px; color: #718096; margin: 14px 0 0; line-height: 1.5; }
html.dark .mbh-card { background: #1a202c; color: #e2e8f0; }
html.dark .mbh-intro { color: #cbd5e0; }
html.dark .mbh-chip { background: #2d3748; border-color: #4a5568; color: #e2e8f0; }
html.dark .mbh-chip.active { background: #3182ce; border-color: #3182ce; }
html.dark .mbh-steps code, html.dark .mbh-settings code { background: #2d3748; }
html.dark .mbh-settings { background: #222b3a; border-color: #2d3748; }
html.dark .mbh-x:hover { color: #e2e8f0; }

/* ==================== tutorial picker ==================== */
.tut-ov {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, 0.5); opacity: 0; transition: opacity 0.14s ease;
}
.tut-ov.in { opacity: 1; }
.tut-card {
  position: relative; width: 100%; max-width: 420px;
  background: #fff; color: #1a202c; border-radius: 16px; padding: 24px 22px 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
  transform: translateY(8px); transition: transform 0.14s ease;
}
.tut-ov.in .tut-card { transform: translateY(0); }
.tut-x {
  position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 24px; line-height: 1; color: #a0aec0; cursor: pointer;
}
.tut-x:hover { color: #1a202c; }
.tut-h { font-size: 20px; font-weight: 700; }
.tut-sub { font-size: 13.5px; color: #718096; margin: 4px 0 16px; }
.tut-opt {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; cursor: pointer;
  padding: 13px 15px; margin-bottom: 10px; transition: border-color 0.12s, background 0.12s;
}
.tut-opt:hover { border-color: #2b6cb0; background: #f0f6ff; }
.tut-opt-ico { font-size: 26px; flex: 0 0 auto; }
.tut-opt-main { display: flex; flex-direction: column; gap: 2px; }
.tut-opt-main b { font-size: 15px; }
.tut-opt-main span { font-size: 12.5px; color: #718096; }
.tut-replay {
  width: 100%; border: none; background: none; cursor: pointer;
  color: #2b6cb0; font-size: 13px; padding: 8px 4px 2px;
}
.tut-replay:hover { text-decoration: underline; }
html.dark .tut-card { background: #1a202c; color: #e2e8f0; }
html.dark .tut-opt { background: #1a202c; border-color: #2d3748; }
html.dark .tut-opt:hover { border-color: #63b3ed; background: #222b3a; }
html.dark .tut-opt-main span, html.dark .tut-sub { color: #a0aec0; }
html.dark .tut-x:hover { color: #e2e8f0; }

/* ==================== quick add ==================== */
.qa-overlay {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px;
  background: rgba(15, 23, 42, 0.5); opacity: 0; transition: opacity 0.13s ease;
}
.qa-overlay.in { opacity: 1; }
.qa-card {
  width: 100%; max-width: 460px;
  background: #fff; color: #1a202c; border-radius: 14px; padding: 18px 18px 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
  transform: translateY(-8px); transition: transform 0.13s ease;
}
.qa-overlay.in .qa-card { transform: translateY(0); }
.qa-h { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.qa-input {
  width: 100%; padding: 11px 13px; font-size: 15px;
  border: 1px solid #cbd5e0; border-radius: 9px; background: #fff; color: #1a202c;
}
.qa-input:focus { outline: none; border-color: #2b6cb0; box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15); }
.qa-preview { min-height: 20px; margin: 10px 2px 0; font-size: 13.5px; line-height: 1.45; color: #2d3748; }
.qa-preview.ok { color: #2d3748; }
.qa-preview.muted { color: #718096; }
.qa-when { color: #2b6cb0; font-weight: 600; }
.qa-hint { margin: 8px 2px 0; font-size: 11px; color: #a0aec0; }
.qa-recents { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 2px 0; }
.qa-recents-label { font-size: 11px; color: #a0aec0; font-weight: 600; }
.qa-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid #cfe0f3; background: #ebf3fb; color: #2b6cb0; cursor: pointer; font-family: inherit; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-chip:hover { background: #dcebf9; }
.qa-now { font-size: 13px; }
html.dark .qa-chip { background: #22304a; border-color: #2f4a6b; color: #90cdf4; }
.qa-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.qa-spacer { flex: 1; }
.qa-add { background: #2b6cb0; border-color: #2b6cb0; color: #fff; font-weight: 600; }
.qa-add:hover:not(:disabled) { background: #2c5282; }
.qa-add:disabled { opacity: 0.5; cursor: default; }
.qa-more { font-size: 13px; }
html.dark .qa-card { background: #1a202c; color: #e2e8f0; }
html.dark .qa-input { background: #2d3748; border-color: #4a5568; color: #e2e8f0; }
html.dark .qa-preview { color: #cbd5e0; }
html.dark .qa-when { color: #63b3ed; }

/* ==================== in-app confirm / alert ==================== */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0; transition: opacity 0.12s ease;
}
.confirm-overlay.in { opacity: 1; }
.confirm-card {
  width: 100%; max-width: 400px;
  background: #fff; color: #1a202c; border-radius: 14px;
  padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(6px); transition: transform 0.12s ease;
}
.confirm-overlay.in .confirm-card { transform: translateY(0); }
.confirm-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.confirm-msg { font-size: 14px; line-height: 1.5; color: #2d3748; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.confirm-actions .btn { padding: 8px 16px; font-weight: 600; }
.confirm-ok { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.confirm-ok:hover { background: #2c5282; }
.confirm-ok.confirm-danger { background: #e53e3e; border-color: #e53e3e; }
.confirm-ok.confirm-danger:hover { background: #c53030; }
html.dark .confirm-card { background: #1a202c; color: #e2e8f0; }
html.dark .confirm-msg { color: #cbd5e0; }
@media (prefers-reduced-motion: reduce) {
  .confirm-overlay, .confirm-card { transition: none !important; }
}

/* ==================== toast (with optional Undo) ==================== */
.toast {
  position: fixed; z-index: 620;
  left: 50%; bottom: var(--toast-bottom, 22px); transform: translate(-50%, 16px);
  display: flex; align-items: center; gap: 12px;
  max-width: min(460px, calc(100vw - 24px));
  padding: 11px 12px 11px 16px; border-radius: 10px;
  background: #1a202c; color: #f7fafc;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  font-size: 13.5px; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.in { opacity: 1; transform: translate(-50%, 0); }
.toast-msg { flex: 1 1 auto; min-width: 0; }
.toast-action {
  flex: 0 0 auto; border: none; cursor: pointer;
  background: none; color: #63b3ed; font-weight: 700; font-size: 13.5px;
  padding: 4px 6px; border-radius: 6px;
}
.toast-action:hover { background: rgba(99, 179, 237, 0.16); }
.toast-close {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: #a0aec0; font-size: 13px; padding: 2px 4px; line-height: 1;
}
.toast-close:hover { color: #f7fafc; }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity 0.2s ease; } }

/* ==================== jump-to-date popover ==================== */
.jump-pop {
  position: fixed; z-index: 300;
  display: flex; flex-direction: column; gap: 8px;
  width: 220px; padding: 12px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}
.jump-lbl { font-size: 12px; font-weight: 600; color: #718096; }
.jump-field {
  width: 100%; padding: 7px 9px; font-size: 14px;
  border: 1px solid #cbd5e0; border-radius: 7px; background: #fff; color: #1a202c;
}
.jump-actions { display: flex; gap: 8px; }
.jump-actions .btn { flex: 1; padding: 7px; font-weight: 600; }
.jump-go { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }
.jump-go:hover { background: #2c5282; }
html.dark .jump-pop { background: #1a202c; border-color: #2d3748; }
html.dark .jump-field { background: #2d3748; border-color: #4a5568; color: #e2e8f0; }
.aw-row-snooze {
  border: 1px solid #cbd5e0; background: #fff; color: #4a5568; cursor: pointer;
  font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}
.aw-row-snooze:hover { background: #edf2f7; color: #2b6cb0; }
html.dark .aw-row-snooze { background: #2d3748; border-color: #4a5568; color: #cbd5e0; }
html.dark .aw-row-snooze:hover { background: #4a5568; color: #63b3ed; }

.aw-empty { color: #718096; text-align: center; padding: 8px 0; }

.aw-dismissed { margin-top: 10px; }
.aw-dismissed-toggle {
  width: 100%; text-align: left;
  border: none; background: none; cursor: pointer;
  color: #718096; font-size: 12px; padding: 4px 0;
}
.aw-dismissed-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.aw-dismissed-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 6px; background: #f7fafc;
  color: #a0aec0;
}
.aw-dismissed-row .aw-row-main { text-decoration: line-through; }
.aw-undo-btn { font-size: 11px; padding: 2px 8px; }

/* ==================== dark mode ==================== */
html.dark body { background: #171923; color: #e2e8f0; }

html.dark .btn { background: #2d3748; border-color: #4a5568; color: #e2e8f0; }
html.dark .btn:hover { background: #4a5568; }
html.dark .btn.active { background: #3182ce; border-color: #3182ce; color: #fff; }
/* .ce-save marks the primary action (Sign in / Save / Add / Update password).
   Without this, `html.dark .btn` outranks the single-class `.ce-save` and
   flattens every primary button to plain grey in dark mode. */
html.dark .ce-save { background: #3182ce; border-color: #3182ce; color: #fff; }
html.dark .ce-save:hover { background: #2b6cb0; }

html.dark #sidebar { background: #1a202c; border-color: #2d3748; }
html.dark #toolbar { background: #1a202c; border-color: #2d3748; }
html.dark #grid-header { background: #1a202c; border-color: #2d3748; }
html.dark #allday-row { background: #1a202c; border-color: #2d3748; }
html.dark .day-head { border-color: #2d3748; color: #a0aec0; }
html.dark .day-head .day-num { color: #e2e8f0; }
html.dark .day-head.today .day-num { background: #3182ce; color: #fff; }
html.dark .allday-cell { border-color: #2d3748; }

html.dark .day-col {
  border-color: #2d3748;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--hour-h) - 1px),
      #2d3748 calc(var(--hour-h) - 1px), #2d3748 var(--hour-h));
}
html.dark .day-col.today-col { background-color: #1c2434; }
html.dark .hour-label { color: #4a5568; }
html.dark .event-chip { color: #f7fafc; }
html.dark .allday-chip { color: #f7fafc; }

html.dark .cal-sync { color: #718096; }
html.dark .cal-sync.error { color: #fc8181; }
html.dark .cal-edit:hover { color: #63b3ed; background: #2d3748; }
html.dark .cal-drag { color: #4a5568; }
html.dark .cal-drag:hover { color: #a0aec0; }
html.dark .cal-item.dragging { background: #1c2f45; }
html.dark #user-row { border-color: #2d3748; }
html.dark .view-toggle .btn { border-color: #4a5568; }

html.dark #search-input { background: #2d3748; border-color: #4a5568; color: #e2e8f0; }
html.dark #search-results { background: #1a202c; border-color: #4a5568; }
html.dark .sr-item:hover, html.dark .sr-item.active { background: #2d3748; }
html.dark .sr-time, html.dark .sr-empty { color: #a0aec0; }

html.dark .ep-panel { background: #1a202c; color: #e2e8f0; }
html.dark .ep-close:hover { color: #f7fafc; }
html.dark .ep-label { color: #a0aec0; }
html.dark .ep-value a { color: #63b3ed; }

html.dark .auth-card { background: #1a202c; border-color: #2d3748; color: #e2e8f0; }
html.dark #auth-screen { background: linear-gradient(135deg, #171923, #1a202c); }
html.dark .auth-sub, html.dark .auth-toggle { color: #a0aec0; }
html.dark .auth-toggle a, html.dark .auth-demo-note a { color: #63b3ed; }

html.dark .ce-input { background: #2d3748; border-color: #4a5568; color: #e2e8f0; }
html.dark .ce-label, html.dark .st-hint, html.dark .rc-note { color: #a0aec0; }
html.dark .ce-title { color: #e2e8f0; }
html.dark .st-tabs { border-color: #2d3748; }
html.dark .st-tab { color: #a0aec0; }
html.dark .st-tab:hover, html.dark .st-tab.active { color: #63b3ed; }
html.dark .st-tab.active { border-bottom-color: #63b3ed; }
html.dark .st-acct-sep { border-top-color: #2d3748; }
html.dark .ev-push-hint { color: #a0aec0; }
html.dark .st-pw-msg.ok { background: #22543d; color: #c6f6d5; }
html.dark .st-pw-msg.err { background: #742a2a; color: #fed7d7; }
html.dark .ce-color { background: #2d3748; border-color: #4a5568; }
html.dark .ce-sound { color: #a0aec0; }
html.dark .ce-help-btn { background: #2d3748; border-color: #4a5568; color: #a0aec0; }
html.dark .ce-help-box { background: #2d3748; border-color: #4a5568; color: #cbd5e0; }
html.dark .ce-help-others { color: #a0aec0; }
html.dark .rc-code { background: #2d3748; border-color: #4a5568; }
html.dark .he-row { border-color: #2d3748; }
html.dark .imp-list { border-color: #4a5568; }
html.dark .imp-row.add { background: #1c3a2a; }
html.dark .imp-row.del { background: #4a2020; }
html.dark .imp-add-n { color: #68d391; }
html.dark .imp-del-n, html.dark .imp-row.del .imp-sign { color: #fc8181; }
html.dark .imp-row.add .imp-sign { color: #68d391; }
html.dark .kw-chip { background: #2d3748; border-color: #4a5568; }
html.dark .kw-x { color: #a0aec0; }
html.dark .kw-x:hover { color: #fc8181; }

html.dark .ctx-menu { background: #1a202c; border-color: #4a5568; }
html.dark .ctx-item:hover { background: #2d3748; }
html.dark .ctx-danger:hover { background: #4a2020; color: #fc8181; }

html.dark .aw-header { background: #0d1117; }
html.dark #alarm-widget { background: #1a202c; border-color: #4a5568; color: #e2e8f0; }
html.dark .aw-row { background: #2d3748; border-color: #4a5568; }
html.dark .aw-row.started { background: #1c3a2a; border-color: #2f855a; }
html.dark .aw-row-sub { color: #a0aec0; }
html.dark .aw-row-count { color: #63b3ed; }
html.dark .aw-dismissed-row { background: #2d3748; color: #718096; }
html.dark .aw-empty { color: #a0aec0; }

html.dark .hero-tag { color: #a0aec0; }
html.dark .hero-points li { color: #cbd5e0; }
html.dark .hero-demo { border-color: #63b3ed; color: #63b3ed; }
html.dark .hero-demo:hover { background: #1c2f45; }

/* onboarding / demo tour — dark */
html.dark .demo-strip { background: linear-gradient(90deg, #1c2f45, #163a38); border-color: #2c5282; color: #bee3f8; }
html.dark .demo-strip-try, html.dark .demo-strip-tour { background: #1a202c; border-color: #2c5282; color: #63b3ed; }
html.dark .demo-strip-try:hover, html.dark .demo-strip-tour:hover { background: #243b53; }
html.dark .demo-strip-try.all-done { border-color: #2f855a; color: #68d391; }
html.dark .demo-strip-cta { background: #3182ce; }
html.dark .wpop-card, html.dark .tour-tip, html.dark .dtask-panel { background: #1a202c; color: #e2e8f0; border-color: #2d3748; }
html.dark .wpop-body, html.dark .tour-tip-body { color: #a0aec0; }
html.dark .wpop-tips, html.dark .wpop-ghost, html.dark .wpop-back { color: #718096; }
html.dark .wpop-dot { background: #4a5568; }
html.dark .wpop-dot.on, html.dark .wpop-next, html.dark .wpop-cta, html.dark .tour-next, html.dark .dtask-cta { background: #3182ce; }
html.dark .tour-back { background: #2d3748; color: #cbd5e0; }
html.dark .dtask-head { background: #171923; border-color: #2d3748; }
html.dark .dtask-foot { border-color: #2d3748; }
html.dark .dtask-hint { color: #718096; }
html.dark .dtask-box { border-color: #4a5568; }
html.dark .dtask-pill { background: #3182ce; }
html.dark .dtask-pill.all-done { background: #2f855a; }
html.dark .cal-empty, html.dark .sidebar-note { color: #718096; }
html.dark .btn-subtle { color: #a0aec0; }
html.dark .btn-subtle:hover { color: #63b3ed; }
html.dark .auth-divider { color: #4a5568; }
html.dark .auth-divider::before, html.dark .auth-divider::after { border-color: #2d3748; }
html.dark .ce-error { background: #4a2020; color: #feb2b2; }
html.dark .ce-error.warning { background: #4a3f18; color: #faf089; }
html.dark .auth-error { background: #4a2020; color: #feb2b2; }

/* ==================== mobile ==================== */
#menu-btn { display: none; }
#sidebar-backdrop { display: none; }

/* Floating bell button shown when the alarm widget is minimized */
#alarm-fab {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px; border-radius: 50%;
  background: #2b6cb0; color: #fff; border: none;
  font-size: 23px; cursor: pointer; z-index: 95;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: none; align-items: center; justify-content: center;
}
#alarm-fab:hover { background: #2c5282; }
html.dark #alarm-fab { background: #3182ce; }
.fab-badge {
  position: absolute; top: -3px; right: -3px;
  background: #e53e3e; color: #fff;
  border-radius: 10px; font-size: 11px; font-weight: 700;
  padding: 1px 6px;
}
.aw-min {
  border: none; background: none;
  color: #cbd5e0; font-size: 15px; font-weight: 700;
  cursor: pointer; padding: 0 5px; line-height: 1;
}
.aw-min:hover { color: #fff; }

/* Installed to the Home Screen there's no browser chrome, so the toolbar sits
   right under the clock/notch — clear the inset. In a normal tab the inset is
   0, and this rule doesn't apply anyway. */
@media (display-mode: standalone) {
  #toolbar { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
}

@media (max-width: 760px) {
  #menu-btn { display: inline-block; }

  /* Sidebar becomes a slide-in drawer */
  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; max-width: 85vw;
    z-index: 260;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
  }
  #app.sidebar-open #sidebar { transform: none; }
  #app.sidebar-open #sidebar-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 255;
  }

  /* Toolbar: deterministic two-row grid instead of chaotic wrapping */
  #toolbar {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "menu today nav label theme"
      "search search search search view";
    gap: 6px; padding: 8px 10px; align-items: center;
  }
  #menu-btn { grid-area: menu; }
  #today-btn { grid-area: today; }
  .nav-group { grid-area: nav; }
  #range-label {
    grid-area: label;
    font-size: 13px; text-align: center;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #theme-btn { grid-area: theme; }
  #search-wrap { grid-area: search; min-width: 0; }
  #search-input { width: 100%; }
  .view-toggle { grid-area: view; justify-self: end; }
  #search-results { left: 0; right: auto; width: min(320px, calc(100vw - 20px)); }

  /* Tighter grid */
  :root { --hour-h: 56px; --axis-w: 42px; }
  .hour-label { font-size: 10px; right: 3px; }
  .event-chip { font-size: 11px; padding: 2px 4px; border-left-width: 2px; }
  .event-chip .chip-time { font-size: 9px; }
  .day-head { font-size: 10px; padding: 4px 0 3px; }
  .day-head .day-num { font-size: 14px; }
  .day-head.today .day-num { width: 22px; height: 22px; line-height: 22px; }
  .allday-chip { font-size: 10px; }
  #grid-header, #allday-row { padding-right: 0; }

  /* Alarm widget: pinned bottom sheet (drag positions don't apply here) */
  #alarm-widget.aw-mobile {
    left: 8px !important; right: 8px !important;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
  }
  #alarm-widget.aw-mobile .aw-header { cursor: default; }
  #alarm-widget .aw-body { max-height: 42vh; overflow-y: auto; }

  /* Dialogs: stack label/value, use the width we have */
  .ep-panel { padding: 14px 16px 16px; }
  .ep-row { flex-direction: column; gap: 2px; }
  .ep-label { flex: none; }
  .ep-overlay { padding: 12px; }

  /* Landing: plain single-column stack — no flex sizing on a phone */
  #auth-screen {
    display: block;
    padding: 16px;
    overflow-x: hidden; overflow-y: auto;
  }
  .landing { display: block; max-width: 100%; }
  .landing-hero { max-width: 100%; margin: 0 0 22px; }
  .landing-hero h1 { font-size: 22px; }
  .hero-tag { font-size: 15px; }
  .hero-points li { overflow-wrap: break-word; }
  .hero-demo { display: block; text-align: center; }
  .auth-card { max-width: 100%; margin: 0 auto; }

  /* Demo strip: let actions wrap under the label, full-width CTA */
  .demo-strip { font-size: 12px; padding: 7px 10px; }
  .demo-strip-txt { flex: 1 1 100%; }
  .demo-strip-actions { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }
  .demo-strip-try { display: inline-block; } /* mobile entry point to the checklist */
  .demo-strip-cta { flex: 1 1 auto; text-align: center; }

  /* Checklist: corner pill is replaced by the strip button; panel centers */
  .dtask-pill { display: none !important; }
  .dtask-panel {
    left: 50%; right: auto; top: 50%; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(360px, calc(100vw - 28px));
  }

  /* Comfier tap targets */
  .btn { padding: 6px 12px; }
  .cal-edit { font-size: 15px; padding: 4px 7px; }
  .aw-row-x { font-size: 18px; padding: 2px 6px; }

  /* Comfier tap targets */
  .btn { padding: 6px 12px; }
  .cal-edit { font-size: 15px; padding: 4px 7px; }
  .aw-row-x { font-size: 18px; padding: 2px 6px; }
}

/* Respect the OS "reduce motion" setting: keep functional opacity/visibility
   changes but drop the movement (fades, pulses, the tour spotlight glide, the
   alarm idle-fade transition). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}