/* ================================================================
   upon365 · stylesheet
   ---------------------------------------------------------------
   Sections:
     1. Design tokens
     2. Reset
     3. Background layers
     4. Top bar
     5. Stage layout (time column · tools · search row · focus state)
     6. Time column (drum)
     7. Panels (clock / countdown / stopwatch)
     8. Search tools (modes · engines)
     9. Search box
    10. Bottom bar
    11. Settings sheet
    12. Toast
    13. Responsive & motion fallbacks

   Performance note
     The two layouts (resting vs. expanded) differ in size, and that
     difference is never animated: morph() in app.js dissolves the
     outgoing frame, swaps the layout while nothing is visible, then
     fades the incoming frame back in from the old position with one
     uniform zoom factor. Nothing here animates height, width,
     font-size, padding or gap, because those force a relayout on
     every frame of the transition — only transform and opacity move.
   ================================================================ */

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
  /* Text */
  --ink: #13151a;
  --ink-soft: #5a606a;
  /* Small text sits straight on the wallpaper: halo strokes keep it legible */
  --halo: 0 1px 2px rgba(255, 255, 255, .82), 0 0 14px rgba(255, 255, 255, .5);

  /* Surfaces: primary element (search box) solid, secondary (engine chips) translucent */
  --surface: rgba(255, 255, 255, .62);
  --surface-strong: rgba(255, 255, 255, .9);
  --line: rgba(16, 18, 24, .13);
  --line-strong: rgba(16, 18, 24, .26);
  --shadow: 0 1px 2px rgba(16, 18, 24, .07), 0 14px 34px rgba(16, 18, 24, .13);

  /* Wallpaper scrim — Balanced by default */
  --scrim-a: rgba(255, 255, 255, .26);
  --scrim-b: rgba(255, 255, 255, .5);

  --radius: 999px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* --morph drives the drum roll; --morph-out / --morph-in drive the expand /
     restore dissolve. Both halves are mirrored by MORPH_OUT / MORPH_IN in app.js. */
  --morph: .58s;
  --morph-out: .18s;
  --morph-in: .4s;
  --ease-morph: cubic-bezier(.32, .72, .26, 1);
  --dur: .22s;
  --slow: .45s;

  /* Driven by the settings sheet */
  --accent: #2f333a;
  --accent-fg: #ffffff;
  --fs: 1;                 /* text scale */
  --engine: 44px;
  --engine-radius: 14px;
  --engine-gap: clamp(6px, 1.6vw, 12px);

  /* ---- Time column sizes: resting ---- */
  --drum-h: clamp(156px, 25vh, 214px);
  --time-fs: clamp(38px, 6.6vw, 68px);   /* clock digits + countdown digits */
  --title-fs: clamp(16px, 2vw, 21px);
  --label: clamp(10.5px, .92vw, 12px);   /* uppercase micro labels */
  --unit-gap: clamp(10px, 2vw, 24px);
  --stage-gap: clamp(10px, 1.8vh, 18px);
  --stage-pb: clamp(112px, 16vh, 154px);
  --box-h: clamp(58px, 5.6vw, 72px);     /* search box height, shared with its toggle */
}

[data-theme="dark"] {
  --ink: #f3f4f6;
  --ink-soft: #a3aab3;
  --halo: 0 1px 3px rgba(0, 0, 0, .7), 0 0 14px rgba(0, 0, 0, .45);
  --surface: rgba(24, 26, 31, .54);
  --surface-strong: rgba(24, 26, 31, .82);
  --line: rgba(255, 255, 255, .15);
  --line-strong: rgba(255, 255, 255, .3);
  --scrim-a: rgba(10, 11, 14, .42);
  --scrim-b: rgba(10, 11, 14, .66);
  --shadow: 0 1px 2px rgba(0, 0, 0, .32), 0 14px 34px rgba(0, 0, 0, .5);
}

/* ---- Accent (Settings → Appearance → Accent) ---- */
[data-accent="graphite"] { --accent: #2f333a; --accent-fg: #ffffff; }
[data-accent="blue"]     { --accent: #1a73e8; --accent-fg: #ffffff; }
[data-accent="teal"]     { --accent: #0d9488; --accent-fg: #ffffff; }
[data-accent="violet"]   { --accent: #7a4df0; --accent-fg: #ffffff; }
[data-accent="rose"]     { --accent: #d6405f; --accent-fg: #ffffff; }
[data-accent="amber"]    { --accent: #cf8a12; --accent-fg: #1d1405; }

/* Accents are lifted on dark backgrounds, otherwise blue turns muddy */
[data-theme="dark"][data-accent="graphite"] { --accent: #e7e9ee; --accent-fg: #17191d; }
[data-theme="dark"][data-accent="blue"]     { --accent: #6aa4ff; --accent-fg: #08101f; }
[data-theme="dark"][data-accent="teal"]     { --accent: #35c9b8; --accent-fg: #04201d; }
[data-theme="dark"][data-accent="violet"]   { --accent: #a888ff; --accent-fg: #150c2e; }
[data-theme="dark"][data-accent="rose"]     { --accent: #ff7d93; --accent-fg: #2b0711; }
[data-theme="dark"][data-accent="amber"]    { --accent: #f2b544; --accent-fg: #241804; }

/* ---- Text size ---- */
[data-font="small"]  { --fs: .94; }
[data-font="normal"] { --fs: 1; }
[data-font="large"]  { --fs: 1.09; }

/* ---- Density ---- */
[data-density="compact"] {
  --engine: 38px;
  --engine-radius: 11px;
  --engine-gap: 7px;
  --stage-gap: clamp(8px, 1.4vh, 12px);
  --box-h: clamp(50px, 4.4vw, 58px);
}

/* ---- Wallpaper scrim strength ---- */
[data-scrim="light"] {
  --scrim-a: rgba(255, 255, 255, .1);
  --scrim-b: rgba(255, 255, 255, .3);
}
[data-scrim="strong"] {
  --scrim-a: rgba(255, 255, 255, .55);
  --scrim-b: rgba(255, 255, 255, .8);
}
[data-theme="dark"][data-scrim="light"] {
  --scrim-a: rgba(10, 11, 14, .2);
  --scrim-b: rgba(10, 11, 14, .44);
}
[data-theme="dark"][data-scrim="strong"] {
  --scrim-a: rgba(10, 11, 14, .6);
  --scrim-b: rgba(10, 11, 14, .84);
}

/* ---- Focus state: time column centred and enlarged, search box parked at the bottom ----
   Values change instantly; morph() dissolves one frame into the other. */
body[data-focus="1"] {
  --drum-h: clamp(232px, 46vh, 392px);
  --time-fs: clamp(52px, 10vw, 104px);
  --title-fs: clamp(18px, 2.6vw, 27px);
  --unit-gap: clamp(14px, 2.8vw, 34px);
  --stage-pb: clamp(56px, 9vh, 86px);
  --box-h: clamp(46px, 7.4vw, 54px);
}

/* Measuring pass: layout is read with the focus flag temporarily flipped, so
   every transition is muted to keep that read from animating anything */
.is-probe *, .is-probe *::before, .is-probe *::after {
  transition: none !important;
  animation: none !important;
}

/* During a morph we trade backdrop blur for frame rate; restored when it ends */
.is-morphing .searchbox,
.is-morphing .engine,
.is-morphing .modes,
.is-morphing .pane__badge,
.is-morphing .chip,
.is-morphing .credit,
.is-morphing .focustoggle {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================
   2. Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* [hidden] must always win: author display rules override the UA default */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background-color: #f6f6f4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] body { background-color: #101114; }

h1, h2, p { margin: 0; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 0 0 10px 10px;
  background: var(--accent); color: var(--accent-fg);
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ============================================================
   3. Background layers
   ============================================================ */
.bg {
  position: fixed; inset: 0; z-index: -3;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s var(--ease), filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bg.is-loaded { opacity: 1; }

[data-wallpaper="off"] .bg { display: none; }
[data-wallpaper="off"] .scrim { background: none; }

[data-blur="soft"]   .bg { filter: blur(6px);  transform: scale(1.06); }
[data-blur="strong"] .bg { filter: blur(16px); transform: scale(1.14); }

.bg-gradient {
  position: fixed; inset: 0; z-index: -4;
  background:
    radial-gradient(1100px 720px at 16% 2%, #e9effc 0%, transparent 62%),
    radial-gradient(980px 720px at 96% 98%, #fdeedf 0%, transparent 58%),
    linear-gradient(168deg, #fdfdfb 0%, #eff2f7 100%);
}
[data-theme="dark"] .bg-gradient {
  background:
    radial-gradient(1200px 700px at 20% 0%, #1d2430 0%, transparent 60%),
    radial-gradient(1000px 800px at 100% 100%, #241f1b 0%, transparent 55%),
    linear-gradient(160deg, #121317, #0d0e11);
}

.scrim {
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(172deg, var(--scrim-a) 0%, var(--scrim-a) 32%, var(--scrim-b) 100%);
  transition: background var(--dur) var(--ease);
  pointer-events: none;
}

/* ============================================================
   4. Top bar
   ============================================================ */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px clamp(16px, 4vw, 34px);
  padding-top: max(16px, env(safe-area-inset-top));
}

.wordmark {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); opacity: .72;
  text-shadow: var(--halo);
  transition: opacity var(--dur) var(--ease);
}
.wordmark:hover { opacity: .98; }
.wordmark__suffix { font-size: 11px; letter-spacing: .06em; text-transform: none; opacity: .68; }

.topbar__actions { display: flex; align-items: center; gap: 8px; }

.icon-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-strong); border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.icon-toggle:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); }
.icon-toggle svg { width: 18px; height: 18px; display: block; }
.icon-toggle.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* ============================================================
   5. Stage layout
   ------------------------------------------------------------
   Resting : time column, tools and search row sit together as one centred group
   Focused : the time column fills the free space, tools drop out,
             the search row shrinks and parks at the bottom
   ============================================================ */
.stage {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--stage-gap);
  width: 100%;
  padding: clamp(6px, 2vh, 26px) clamp(16px, 5vw, 32px) var(--stage-pb);
}
body[data-focus="1"] .stage { justify-content: flex-start; }

.drumzone {
  flex: 0 0 auto;
  width: 100%; max-width: 880px;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(8px, 1.4vh, 14px);
}
body[data-focus="1"] .drumzone { flex: 1 1 auto; justify-content: center; }

.toolszone {
  flex: 0 0 auto;
  width: 100%; max-width: 760px;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(12px, 2.4vh, 22px);
}
body[data-focus="1"] .toolszone { display: none; }

.searchrow {
  flex: 0 0 auto;
  width: min(760px, 100%);
  display: flex; align-items: flex-start; gap: 8px;
}
body[data-focus="1"] .searchrow { width: min(472px, 100%); }

.searchzone {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
}

/* ============================================================
   6. Time column
   ============================================================ */
.drum {
  position: relative;
  width: 100%;
  height: var(--drum-h);
  overflow: hidden;
  cursor: ns-resize;
  outline: none;
  touch-action: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
}
.drum::before, .drum::after {
  content: ""; position: absolute; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  pointer-events: none; opacity: .55;
}
.drum::before { top: 0; }
.drum::after  { bottom: 0; }

.drum__inner {
  /* --i is the index of the visible panel; each visible cell is exactly --drum-h tall */
  transform: translateY(calc(var(--i, 0) * var(--drum-h) * -1));
  will-change: transform;
  transition: transform var(--morph) var(--ease-morph);
}

.drum__cell {
  height: var(--drum-h);
  display: grid; place-items: center;
  text-align: center;
  padding: 0 clamp(6px, 1.5vw, 14px);
}

.drumctl {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
}

.dots { display: flex; gap: 7px; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-soft); opacity: .34;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.dot:hover { opacity: .7; }
.dot[aria-selected="true"] { opacity: .95; background: var(--accent); transform: scale(1.3); }

/* ============================================================
   7. Panels: clock / countdown / stopwatch
   ============================================================ */
.pane {
  width: 100%;
  /* A grid item's default min-width:auto would be blown out by non-wrapping rows
     such as the countdown chips; release it so the row can scroll instead. */
  min-width: 0; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(5px, 1vh, 11px);
}

.pane__kicker {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  font-size: calc(var(--label) + 1.5px); color: var(--ink-soft);
  text-shadow: var(--halo);
}
.pane__badge {
  padding: 2px 9px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: var(--label); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.pane__target {
  font-size: calc(var(--label) + 1.5px);
  font-variant-numeric: tabular-nums;
  opacity: .9;
}
.pane__title {
  font-size: var(--title-fs); font-weight: 700; letter-spacing: -.01em;
  line-height: 1.2;
  max-width: min(760px, 100%);
  overflow-wrap: anywhere;
  text-shadow: var(--halo);
}
.pane__meta {
  font-size: calc(var(--label) + 2px); color: var(--ink-soft);
  text-shadow: var(--halo);
  font-variant-numeric: tabular-nums;
}
.pane__note {
  font-size: var(--label); color: var(--ink-soft);
  opacity: .72; letter-spacing: .02em;
}

/* One typographic treatment for every big number: clock, countdown and stopwatch */
.pane__time,
.unit b {
  font-size: var(--time-fs);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--halo);
}
.pane__time .ampm { font-size: .42em; font-weight: 700; margin-left: .22em; opacity: .72; }

.units { display: flex; align-items: flex-start; gap: var(--unit-gap); }
.unit {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.unit span {
  font-size: var(--label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); opacity: .78;
}

/* Parts that only exist while expanded; collapsed states take no space */
.focus-only {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(6px, 1vh, 10px);
  max-height: 0; opacity: 0; overflow: hidden;
  pointer-events: none;
  transition: opacity var(--morph-in) var(--ease);
}
body[data-focus="1"] .focus-only { max-height: 340px; opacity: 1; pointer-events: auto; }

.pane__tools {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px; width: 100%;
}

.chip {
  padding: 6px 12px; min-height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: calc(var(--label) + 2px); white-space: nowrap;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover { transform: translateY(-1px); border-color: var(--line-strong); background: var(--surface-strong); }
.chip--ghost { color: var(--ink-soft); }
.chip--ghost:hover { color: var(--ink); }
.chip--solid { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.chip--icon { padding: 6px 11px; font-size: 15px; line-height: 1; }
.chip.is-on { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

.chips {
  display: flex; gap: 6px;
  max-width: min(560px, 100%);
  overflow-x: auto; padding: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.chips::-webkit-scrollbar { display: none; }

.cdform {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  width: 100%; max-width: min(620px, 100%);
}
.minput {
  height: 34px; padding: 0 12px; min-width: 150px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong); color: var(--ink);
  font-family: inherit; font-size: calc(var(--label) + 2.5px);
}
.minput::placeholder { color: var(--ink-soft); opacity: .8; }
.minput:focus { outline: none; border-color: var(--accent); }

/* ============================================================
   8. Search tools
   ============================================================ */
.modes {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

.mode {
  padding: 8px 20px; border-radius: var(--radius);
  font-size: calc(var(--label) + 3px); font-weight: 600;
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mode:hover { color: var(--ink); }
.mode[aria-selected="true"] {
  background: var(--accent); color: var(--accent-fg);
  box-shadow: 0 2px 10px rgba(16, 18, 24, .16);
}
[data-density="compact"] .mode { padding: 6px 16px; }

.engines {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--engine-gap);
  max-width: 600px;
}
[data-density="compact"] .engines { max-width: 520px; }

.engine {
  position: relative;
  width: var(--engine); height: var(--engine); border-radius: var(--engine-radius);
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.engine:hover { transform: translateY(-2px); border-color: var(--line-strong); }

.engine__icon {
  width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center; overflow: hidden;
}
[data-density="compact"] .engine__icon { width: 21px; height: 21px; }
[data-density="compact"] .engine__icon img { width: 21px; height: 21px; }

.engine__icon img {
  width: 24px; height: 24px; display: block; object-fit: contain;
  filter: grayscale(1); opacity: .66;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.engine__name {
  display: none;
  font-size: calc(var(--label) + 2px); font-weight: 600;
  color: var(--ink); opacity: .8; white-space: nowrap;
}
[data-engine-style="labels"] .engine {
  width: auto; height: auto; padding: 7px 14px 7px 10px;
  gap: 8px; grid-auto-flow: column; border-radius: var(--radius);
}
[data-engine-style="labels"] .engine__name { display: block; }

.engine__abbr {
  display: none;
  width: 100%; height: 100%;
  font-size: 11.5px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); opacity: .62;
  transition: opacity var(--dur) var(--ease);
}

.engine[aria-checked="true"] {
  border-color: var(--line-strong);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}
.engine[aria-checked="true"] .engine__icon img { filter: none; opacity: 1; }
.engine[aria-checked="true"] .engine__abbr { opacity: 1; }
[data-engine-style="labels"] .engine[aria-checked="true"] { border-color: var(--accent); }

.engine[aria-checked="true"]::after {
  content: ""; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 2px; border-radius: 2px; background: var(--accent);
}
[data-engine-style="labels"] .engine[aria-checked="true"]::after { display: none; }

/* ============================================================
   9. Search box
   ============================================================ */
.searchbox {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 0 6px 0 clamp(16px, 2.2vw, 26px);
  height: var(--box-h);
  border-radius: var(--radius);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow);
  transition: border-color var(--dur) var(--ease);
}
.searchbox:focus-within { border-color: var(--accent); }
body[data-focus="1"] .searchbox { padding-left: clamp(14px, 2vw, 20px); }

.searchbox__icon {
  flex: none;
  width: clamp(18px, 1.3vw, 22px); height: clamp(18px, 1.3vw, 22px);
  opacity: .45;
}
.searchbox__icon svg { width: 100%; height: 100%; display: block; }

#q {
  flex: 1; min-width: 0;
  height: 100%;
  border: 0; background: none; outline: none;
  font: inherit; font-size: calc(clamp(16px, 1.3vw, 19px) * var(--fs)); color: var(--ink);
}
#q::placeholder { color: var(--ink-soft); opacity: .75; }
body[data-focus="1"] #q { font-size: calc(15px * var(--fs)); }

.submit {
  flex: none;
  height: calc(100% - 12px); aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-fg);
  transition: transform var(--dur) var(--ease);
}
.submit:hover { transform: scale(1.05); }
.submit:active { transform: scale(.97); }
.submit svg { width: clamp(18px, 1.3vw, 22px); height: clamp(18px, 1.3vw, 22px); }

/* Expand / restore control, parked next to the search box in both states */
.focustoggle {
  flex: none;
  width: var(--box-h); height: var(--box-h);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-strong); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background .3s var(--ease);
}
.focustoggle:hover { color: var(--ink); border-color: var(--accent); }
.focustoggle svg { width: 46%; height: 46%; display: block; }
.focustoggle__arrow { transition: transform .4s var(--ease); }
body[data-focus="1"] .focustoggle__arrow { transform: rotate(180deg); }

.hint {
  margin-top: clamp(12px, 2.2vh, 20px);
  font-size: calc(var(--label) + 2px); color: var(--ink-soft);
  text-shadow: var(--halo);
}
.hint b { font-weight: 600; color: var(--ink); }
.hint .note { display: block; margin-top: 4px; font-size: calc(var(--label) + 1px); opacity: .85; }
body[data-focus="1"] .hint { display: none; }

/* ============================================================
   10. Bottom bar
   ============================================================ */
.bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex;
  padding: 12px clamp(16px, 4vw, 28px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  pointer-events: none;
  font-size: calc(var(--label) + 1.5px); color: var(--ink-soft);
  text-shadow: var(--halo);
}
.bottombar > * { pointer-events: auto; }

.bottombar__row {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: flex-end; gap: 8px 14px;
}

.bottombar__main {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  transition: opacity .3s var(--ease);
}
body[data-focus="1"] .bottombar__main {
  opacity: 0; pointer-events: none;
  max-height: 0; overflow: hidden; margin: 0;
}

.shortcuts { line-height: 1.7; opacity: .78; }
.shortcuts kbd {
  font: inherit; font-size: calc(var(--label) - .5px);
  padding: 1px 5px; margin: 0 1px;
  border: 1px solid var(--line-strong); border-radius: 5px;
}

.credit {
  max-width: 46%;
  text-align: right; line-height: 1.5;
  padding: 8px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.credit__label {
  display: block; font-size: var(--label); letter-spacing: .1em;
  text-transform: uppercase; opacity: .65;
}
.credit a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.credit a:hover { color: var(--ink); }
.credit__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; margin-top: 2px;
}

/* Filings · copyright, anchored in the lower-left corner of the bottom row */
.filings {
  flex: 0 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 3px 12px;
  font-size: var(--label);
  white-space: nowrap;
  opacity: .66;
  transition: opacity var(--dur) var(--ease);
}
.filings:hover { opacity: 1; }
.legal {
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none; color: inherit;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.legal:hover { color: var(--ink); }
.legal img { height: 14px; width: auto; vertical-align: middle; }
/* The copyright doubles as the link to the links directory */
.legal--mark {
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.legal--mark:hover { border-bottom-color: var(--line-strong); }

@media (max-width: 640px) {
  .shortcuts { display: none; }
  .credit { max-width: 100%; text-align: left; }
  .bottombar__main { justify-content: flex-end; }
  /* Stacked: the credit sits above, the filings keep the bottom-left corner */
  .bottombar__row { flex-wrap: wrap; }
  .bottombar__main { flex: 1 1 100%; }
  .filings { order: 2; flex: 1 1 100%; }
}

/* ============================================================
   11. Settings sheet
   ============================================================ */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 11, 14, .26);
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ease), visibility .18s;
}
.sheet-backdrop.is-open { opacity: 1; visibility: visible; }

.sheet {
  position: fixed; z-index: 61;
  top: calc(62px + env(safe-area-inset-top));
  right: clamp(12px, 3vw, 28px);
  width: min(348px, calc(100vw - 24px));
  max-height: min(74vh, 640px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 4px;
  border-radius: 18px;
  background: var(--surface-strong);
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 60px rgba(10, 12, 18, .28);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  transform-origin: top right;
  transform: scale(.97) translateY(-6px);
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.sheet.is-open { opacity: 1; visibility: visible; transform: none; }

.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px 6px 14px;
}
.sheet__head h2 {
  margin: 0; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.sheet__close {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 17px; line-height: 1; color: var(--ink-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sheet__close:hover { background: var(--line); color: var(--ink); }

.group { padding: 8px 14px 12px; border-top: 1px solid var(--line); }
.group:first-of-type { border-top: 0; }
.group__title {
  display: block; margin-bottom: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}

.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 5px 0;
}
.row__label { font-size: calc(var(--label) + 2.5px); color: var(--ink); }
.row__hint {
  margin: 2px 0 6px;
  font-size: var(--label); line-height: 1.5; color: var(--ink-soft); opacity: .85;
}

.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
}
.seg__btn {
  padding: 5px 11px; border-radius: 999px;
  font-size: calc(var(--label) + 2px); font-weight: 600; color: var(--ink-soft);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.seg__btn:hover { color: var(--ink); }
.seg__btn[aria-checked="true"],
.seg__btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }

.swatches { display: flex; gap: 8px; }
.swatch {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  border: 2px solid transparent;
  transition: transform var(--dur) var(--ease);
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-checked="true"] { border-color: var(--ink); }

.sheet__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px 12px; border-top: 1px solid var(--line);
}
.sheet__link {
  font-size: calc(var(--label) + 2px); color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 2px;
}
.sheet__link:hover { color: var(--ink); }

@media (max-width: 420px) {
  .sheet { left: 8px; right: 8px; width: auto; }
  .row { flex-wrap: wrap; }
}

/* ============================================================
   12. Toast
   ============================================================ */
.toast {
  position: fixed; z-index: 70;
  left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  max-width: min(90vw, 440px);
  padding: 11px 18px; border-radius: 12px;
  background: rgba(22, 23, 26, .93); color: #fff;
  font-size: 13.5px; line-height: 1.5; text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.toast.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ============================================================
   13. Responsive & reduced motion
   ============================================================ */
/* Short viewports: keep the column from overflowing */
@media (max-height: 620px) {
  :root {
    --drum-h: clamp(132px, 34vh, 176px);
    --stage-pb: clamp(92px, 14vh, 120px);
  }
  body[data-focus="1"] {
    --drum-h: clamp(190px, 52vh, 268px);
    --time-fs: clamp(44px, 8.4vw, 78px);
    --stage-pb: clamp(50px, 8vh, 70px);
  }
}

@media (max-width: 560px) {
  :root { --unit-gap: clamp(7px, 3vw, 14px); }
  /* Arrows next to the chips would wrap into a stray row on narrow screens */
  .pane__tools .chip--icon { display: none; }
  .focustoggle { width: 46px; border-radius: 999px; }
}

/* Settings → Motion off */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .topbar, .bottombar, .sheet, .sheet-backdrop, .toolszone, .searchrow, .drumctl { display: none !important; }
}