/* ══════════════════════════════════
   BASE — reset, design tokens, app shell, top bar, timer, update toast
══════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
input, textarea { font-family: inherit; border: none; outline: none; background: none; }
textarea { resize: none; }
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

:root {
  --bg:    #0d0d10;
  --s1:    #14141e;
  --s2:    #1c1c24;
  --s3:    #252537;
  --s4:    #2e2e44;
  --text:  #e2e8f0;
  --dim:   #94a3b8;
  --muted: #475569;
  --b:     rgba(255,255,255,0.07);
  --b2:    rgba(255,255,255,0.13);
  --acc:    #a152e2;
  --accd:   #b075e0;
  --acc-lt: #caabff;   /* lightest accent — highlights (current sparkline dot, ## notes) */
  --ok:    #34d399;
  --warn:  #fbbf24;
  --bad:   #f87171;
  --pr:    #f59e0b;    /* PR star/badge gold */

  /* Motion — one ease and three speeds so everything moves alike.
     fast = state feedback · base = panels/menus · slow = full-height sheets */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --dur-fast:  .14s;
  --dur:       .24s;
  --dur-slow:  .32s;
}

/* Respect the OS "reduce motion" setting — movement collapses, nothing breaks
   (visibility delays still resolve, so overlays open and close correctly) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keyboard focus only — never shows for touch/mouse presses */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; }

/* Consistent press feedback across every tappable surface */
button:active { opacity: .6; }

/* Uniform thin scrollbars — previously some panes hid them and some showed them */
.scroll-thin::-webkit-scrollbar { width: 3px; height: 3px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--s3); border-radius: 2px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* Theme swaps: brief cross-fade of colors, self-limiting so nothing else animates */
:root.theming, :root.theming *, :root.theming *::before, :root.theming *::after {
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), fill var(--dur) var(--ease) !important;
}

html, body { height: 100%; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden;
  overscroll-behavior: none; }

/* ── App / views ── */
#app { height: 100vh; height: 100dvh; position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.4,0,.2,1); background: var(--bg);
  will-change: transform; }
#listView   { transform: translateX(0); }
#editorView { transform: translateX(100%); }
#app.editor-open #listView   { transform: translateX(-28%); }
#app.editor-open #editorView { transform: translateX(0); }

/* ── Top bar (shared) ── */
.top-bar { display: flex; align-items: center; gap: 6px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 8px; border-bottom: 1px solid var(--b);
  background: var(--s1); flex-shrink: 0; }

/* ── Naked timer ── */
.t-naked { display: flex; align-items: center; }
.t-n-disp { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--dim); padding: 3px 6px; letter-spacing: -.01em; min-width: 50px; text-align: center;
  cursor: pointer; border-radius: 5px; transition: background .12s; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; }
.t-n-disp:hover  { background: var(--s2); }
.t-n-disp:active { opacity: .65; }
.t-n-disp.run  { color: var(--ok); }
.t-n-disp.warn { color: var(--warn); }
.t-n-disp.over { color: var(--bad); }

/* ── Toasts (update prompt + transient messages) ──
   Always in the DOM so they can transition; visibility keeps them out of the
   a11y tree and pointer-events out of the way while hidden. */
.upd-toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%;
  background: var(--s3); border: 1px solid var(--b2);
  border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text); box-shadow: 0 4px 24px rgba(0,0,0,.5);
  z-index: 9999; max-width: calc(100vw - 28px);
  transform: translate(-50%, 14px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur); }
.upd-toast.vis { transform: translate(-50%, 0); opacity: 1; visibility: visible;
  pointer-events: auto; transition-delay: 0s; }
.upd-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upd-btn { padding: 5px 13px; border-radius: 7px; background: var(--acc); color: #fff;
  font-size: 12px; font-weight: 600; flex-shrink: 0; transition: opacity var(--dur-fast); }
.upd-dismiss { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  color: var(--dim); font-size: 12px; display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast); }
.upd-dismiss:hover { background: var(--s4); color: var(--text); }
/* Transient message toast — same shell, no actions */
#toast { justify-content: center; white-space: normal; text-align: center; line-height: 1.45; }
/* If the update prompt is already showing, stack above it instead of overlapping */
#updateToast.vis ~ #toast.vis { bottom: calc(78px + env(safe-area-inset-bottom)); }