:root,
body[data-phase="night"] {
  --bg: #050a18;
  --panel: rgba(9, 16, 36, 0.82);
  --panel-base: rgba(9, 16, 36, 0.82);
  --suggest-bg: rgba(7, 13, 30, 0.97);
  --suggest-bg-base: rgba(7, 13, 30, 0.97);
  --border: rgba(104, 133, 240, 0.22);
  --border-strong: rgba(120, 148, 255, 0.45);
  --edge: rgba(2, 6, 20, 0.5);
  --edge-base: rgba(2, 6, 20, 0.5);
  --text: #d7e0fb;
  --text-2: #8fa0d4;
  --text-3: #6875a6;
  --accent: #6c8cff;
  --halo1: rgba(43, 72, 190, 0.14);
  --halo2: rgba(90, 120, 235, 0.10);
  --hover: rgba(96, 126, 230, 0.13);
  --hover-base: rgba(96, 126, 230, 0.13);
  --chip-bg: rgba(108, 140, 255, 0.16);
  --chip-bg-base: rgba(108, 140, 255, 0.16);
  --chip-fg: #aebbe8;
  --submit-bg: #22305e;
  --submit-bg-hover: #2b3d78;
  --submit-fg: #c6d2ff;
  --pill-bg: rgba(8, 15, 34, 0.7);
  --pill-bg-base: rgba(8, 15, 34, 0.7);
  --pill-border: rgba(104, 133, 240, 0.25);
  --pill-text: #7d8fd0;
  --pill-dim: #56649c;
  --hint: #5a6898;
  --key-border: rgba(104, 133, 240, 0.25);
  --key-bg: rgba(8, 15, 34, 0.6);
  --key-bg-base: rgba(8, 15, 34, 0.6);
  --key-fg: #7484bf;
  --glow: rgba(47, 82, 219, 0.10);
  --glow-strong: rgba(66, 99, 235, 0.22);
  --sel: rgba(108, 140, 255, 0.35);
}

/* sunny warm mornings + clear blue midday share the light palette */
body[data-phase="morning"],
body[data-phase="day"] {
  --bg: #9fd4ff;
  --panel: rgba(255, 255, 255, 0.66);
  --panel-base: rgba(255, 255, 255, 0.66);
  --suggest-bg: rgba(255, 255, 255, 0.97);
  --suggest-bg-base: rgba(255, 255, 255, 0.97);
  --border: rgba(28, 64, 130, 0.20);
  --border-strong: rgba(24, 90, 200, 0.45);
  --edge: rgba(30, 60, 120, 0.14);
  --edge-base: rgba(30, 60, 120, 0.14);
  --text: #122a4c;
  --text-2: #3a5a86;
  --text-3: #5b789f;
  --accent: #1e66d0;
  --halo1: rgba(255, 255, 255, 0.35);
  --halo2: rgba(255, 214, 140, 0.30);
  --hover: rgba(30, 102, 208, 0.10);
  --hover-base: rgba(30, 102, 208, 0.10);
  --chip-bg: rgba(30, 102, 208, 0.12);
  --chip-bg-base: rgba(30, 102, 208, 0.12);
  --chip-fg: #2b57a8;
  --submit-bg: #1c4f9e;
  --submit-bg-hover: #2a63b8;
  --submit-fg: #eaf3ff;
  --pill-bg: rgba(255, 255, 255, 0.55);
  --pill-bg-base: rgba(255, 255, 255, 0.55);
  --pill-border: rgba(28, 64, 130, 0.22);
  --pill-text: #3a5a86;
  --pill-dim: #7590b4;
  --hint: #4f6c94;
  --key-border: rgba(28, 64, 130, 0.25);
  --key-bg: rgba(255, 255, 255, 0.6);
  --key-bg-base: rgba(255, 255, 255, 0.6);
  --key-fg: #4a678f;
  --glow: rgba(30, 102, 208, 0.14);
  --glow-strong: rgba(30, 102, 208, 0.26);
  --sel: rgba(30, 102, 208, 0.25);
}

/* clear blue midday: cooler halo, deeper logo */
body[data-phase="day"] {
  --bg: #a5d8ff;
  --halo2: rgba(120, 190, 255, 0.30);
}

/* warm dusky sunsets */
body[data-phase="evening"] {
  --bg: #241a33;
  --panel: rgba(40, 22, 34, 0.82);
  --panel-base: rgba(40, 22, 34, 0.82);
  --suggest-bg: rgba(30, 16, 25, 0.97);
  --suggest-bg-base: rgba(30, 16, 25, 0.97);
  --border: rgba(255, 150, 100, 0.22);
  --border-strong: rgba(255, 170, 120, 0.45);
  --edge: rgba(20, 8, 14, 0.5);
  --edge-base: rgba(20, 8, 14, 0.5);
  --text: #ffe4d0;
  --text-2: #d8a58c;
  --text-3: #b08070;
  --accent: #ff9e6b;
  --halo1: rgba(255, 120, 70, 0.12);
  --halo2: rgba(255, 170, 110, 0.10);
  --hover: rgba(255, 150, 100, 0.12);
  --hover-base: rgba(255, 150, 100, 0.12);
  --chip-bg: rgba(255, 158, 107, 0.16);
  --chip-bg-base: rgba(255, 158, 107, 0.16);
  --chip-fg: #f0b694;
  --submit-bg: #5a2e22;
  --submit-bg-hover: #75392a;
  --submit-fg: #ffd9c2;
  --pill-bg: rgba(40, 22, 34, 0.7);
  --pill-bg-base: rgba(40, 22, 34, 0.7);
  --pill-border: rgba(255, 150, 100, 0.22);
  --pill-text: #d8a58c;
  --pill-dim: #9a6c5a;
  --hint: #a37462;
  --key-border: rgba(255, 150, 100, 0.25);
  --key-bg: rgba(40, 22, 34, 0.6);
  --key-bg-base: rgba(40, 22, 34, 0.6);
  --key-fg: #b07a62;
  --glow: rgba(255, 120, 70, 0.14);
  --glow-strong: rgba(255, 140, 90, 0.26);
  --sel: rgba(255, 158, 107, 0.35);
}

/* celestial themes: recolor the planet, accents, borders, buttons and
   selection to match the personality; declared after the phase blocks so
   the theme hue wins ties. Works on dark and light phases alike. */

body[data-theme="dark"] {
  --accent: #989898;
  --border: rgba(130, 130, 130, 0.30);
  --pill-border: rgba(130, 130, 130, 0.28);
  --border-strong: rgba(130, 130, 130, 0.45);
  --glow: rgba(120, 120, 120, 0.16);
  --glow-strong: rgba(120, 120, 120, 0.30);
  --sel: rgba(140, 140, 140, 0.35);
  --chip-fg: #a8a8a8;
  --key-fg: #9a9a9a;
  --submit-bg: #3d3d3d;
  --submit-bg-hover: #4d4d4d;
  --submit-fg: #e8e8e8;
}

body[data-theme="bright"] {
  --accent: #8f8f8f;
  --border: rgba(110, 110, 110, 0.28);
  --pill-border: rgba(110, 110, 110, 0.30);
  --border-strong: rgba(110, 110, 110, 0.55);
  --glow: rgba(235, 235, 235, 0.22);
  --glow-strong: rgba(235, 235, 235, 0.38);
  --sel: rgba(160, 160, 160, 0.40);
  --chip-fg: #5f5f5f;
  --key-fg: #5a5a5a;
  --submit-bg: #4a4a4a;
  --submit-bg-hover: #5c5c5c;
  --submit-fg: #f2f2f2;
}

body[data-theme="cyberpunk"] {
  --accent: #e0189a;
  --border: rgba(224, 24, 154, 0.32);
  --pill-border: rgba(224, 24, 154, 0.28);
  --border-strong: rgba(224, 24, 154, 0.50);
  --glow: rgba(224, 24, 154, 0.16);
  --glow-strong: rgba(224, 24, 154, 0.30);
  --sel: rgba(224, 24, 154, 0.35);
  --chip-fg: #f055b5;
  --key-fg: #e86ab5;
  --submit-bg: #6b1044;
  --submit-bg-hover: #8a1457;
  --submit-fg: #ffd6ec;
}

body[data-theme="violet"] {
  --accent: #9257f0;
  --border: rgba(146, 87, 240, 0.32);
  --pill-border: rgba(146, 87, 240, 0.28);
  --border-strong: rgba(146, 87, 240, 0.50);
  --glow: rgba(146, 87, 240, 0.16);
  --glow-strong: rgba(146, 87, 240, 0.30);
  --sel: rgba(146, 87, 240, 0.35);
  --chip-fg: #a377f5;
  --key-fg: #9a68f2;
  --submit-bg: #4a2a96;
  --submit-bg-hover: #5a34ae;
  --submit-fg: #e4d6ff;
}

body[data-theme="red"] {
  --accent: #e05336;
  --border: rgba(224, 83, 54, 0.32);
  --pill-border: rgba(224, 83, 54, 0.28);
  --border-strong: rgba(224, 83, 54, 0.50);
  --glow: rgba(224, 83, 54, 0.16);
  --glow-strong: rgba(224, 83, 54, 0.30);
  --sel: rgba(224, 83, 54, 0.35);
  --chip-fg: #e8734f;
  --key-fg: #d9633f;
  --submit-bg: #8a2a18;
  --submit-bg-hover: #a33620;
  --submit-fg: #ffd4c4;
}

body[data-theme="green"] {
  --accent: #2fa869;
  --border: rgba(63, 188, 122, 0.32);
  --pill-border: rgba(63, 188, 122, 0.28);
  --border-strong: rgba(63, 188, 122, 0.50);
  --glow: rgba(63, 188, 122, 0.16);
  --glow-strong: rgba(63, 188, 122, 0.30);
  --sel: rgba(63, 188, 122, 0.35);
  --chip-fg: #4fca8a;
  --key-fg: #3fb374;
  --submit-bg: #146b49;
  --submit-bg-hover: #1a7f57;
  --submit-fg: #d4ffe6;
}

body[data-theme="blue"] {
  --accent: #3f9af0;
  --border: rgba(63, 154, 240, 0.32);
  --pill-border: rgba(63, 154, 240, 0.28);
  --border-strong: rgba(63, 154, 240, 0.50);
  --glow: rgba(63, 154, 240, 0.16);
  --glow-strong: rgba(63, 154, 240, 0.30);
  --sel: rgba(63, 154, 240, 0.35);
  --chip-fg: #5aa8f5;
  --key-fg: #4895e2;
  --submit-bg: #1a56ad;
  --submit-bg-hover: #2065c9;
  --submit-fg: #d8eaff;
}

body[data-theme="rose"] {
  --accent: #e05a94;
  --border: rgba(240, 111, 168, 0.32);
  --pill-border: rgba(240, 111, 168, 0.32);
  --border-strong: rgba(240, 111, 168, 0.50);
  --glow: rgba(240, 111, 168, 0.16);
  --glow-strong: rgba(240, 111, 168, 0.30);
  --sel: rgba(240, 111, 168, 0.35);
  --chip-fg: #ef7fb2;
  --key-fg: #e0679e;
  --submit-bg: #96255c;
  --submit-bg-hover: #ad2d6c;
  --submit-fg: #ffd9e8;
}

body[data-theme="amber"] {
  --accent: #f0a830;
  --border: rgba(240, 168, 48, 0.32);
  --pill-border: rgba(240, 168, 48, 0.28);
  --border-strong: rgba(240, 168, 48, 0.52);
  --glow: rgba(240, 168, 48, 0.16);
  --glow-strong: rgba(240, 168, 48, 0.30);
  --sel: rgba(240, 168, 48, 0.35);
  --chip-fg: #f2b552;
  --key-fg: #e0a040;
  --submit-bg: #7a4a0f;
  --submit-bg-hover: #925a14;
  --submit-fg: #fff0d0;
}

body[data-theme="teal"] {
  --accent: #22b3a8;
  --border: rgba(34, 179, 168, 0.32);
  --pill-border: rgba(34, 179, 168, 0.28);
  --border-strong: rgba(34, 179, 168, 0.52);
  --glow: rgba(34, 179, 168, 0.16);
  --glow-strong: rgba(34, 179, 168, 0.30);
  --sel: rgba(34, 179, 168, 0.35);
  --chip-fg: #4cc9bf;
  --key-fg: #36b8ad;
  --submit-bg: #0f5f5a;
  --submit-bg-hover: #13746d;
  --submit-fg: #d4fffa;
}

/* image: the accent pair is sampled from the wallpaper at runtime
   (--img-accent / --img-accent-2 set on body by setImageTheme); every other
   accent token derives from them, so any picture yields a full theme */
body[data-theme="image"] {
  --accent: var(--img-accent, #6c8cff);
  --border: rgb(from var(--accent) r g b / 0.32);
  --pill-border: rgb(from var(--accent) r g b / 0.28);
  --border-strong: rgb(from var(--img-accent-2, var(--accent)) r g b / 0.52);
  --glow: rgb(from var(--accent) r g b / 0.16);
  --glow-strong: rgb(from var(--img-accent-2, var(--accent)) r g b / 0.30);
  --sel: rgb(from var(--accent) r g b / 0.35);
  --chip-fg: color-mix(in srgb, var(--accent) 80%, #fff);
  --key-fg: color-mix(in srgb, var(--accent) 88%, #fff);
  --submit-bg: color-mix(in srgb, var(--accent) 45%, #000);
  --submit-bg-hover: color-mix(in srgb, var(--accent) 55%, #000);
  --submit-fg: color-mix(in srgb, var(--img-accent-2, var(--accent)) 25%, #fff);
}

/* light phases: the bright accent chips/keys above are tuned for dark glass;
   on white glass they need a deeper shade of the same hue to stay legible */
body[data-phase="morning"]:not([data-theme="classic"]),
body[data-phase="day"]:not([data-theme="classic"]) {
  --chip-fg: color-mix(in srgb, var(--accent) 70%, #000);
  --key-fg: color-mix(in srgb, var(--accent) 62%, #10203a);
}

/* themed surfaces: the glass itself (panels, inputs, settings, pills) picks
   up ~12% of the active theme's hue in every phase, so the chrome stops
   lagging behind the themed canvas. The neutral phase values above stay as
   the Classic look and as the fallback where color-mix is unsupported.
   Relative-color syntax keeps the low-alpha washes (hover, chips) from
   turning opaque when mixed. */
body[data-theme]:not([data-theme="classic"]) {
  --panel: color-mix(in srgb, var(--panel-base) 88%, var(--accent));
  --suggest-bg: color-mix(in srgb, var(--suggest-bg-base) 88%, var(--accent));
  --pill-bg: color-mix(in srgb, var(--pill-bg-base) 88%, var(--accent));
  --key-bg: color-mix(in srgb, var(--key-bg-base) 88%, var(--accent));
  --edge: color-mix(in srgb, var(--edge-base) 85%, var(--accent));
  --hover: color-mix(in srgb, var(--hover-base) 82%, rgb(from var(--accent) r g b / 0.13));
  --chip-bg: color-mix(in srgb, var(--chip-bg-base) 82%, rgb(from var(--accent) r g b / 0.16));
}

/* the monochrome pair needs more than a gray accent: the phase glass itself
   (navy at night, maroon at evening) must drain toward neutral. Relative-color
   syntax zeroes each surface's saturation while keeping its own lightness and
   alpha — dark glass stays dark, white glass stays white. */
body[data-theme="dark"], body[data-theme="bright"],
body[data-theme="image"][data-img-mono] {
  --panel: hsl(from var(--panel-base) h 0% l / alpha);
  --suggest-bg: hsl(from var(--suggest-bg-base) h 0% l / alpha);
  --pill-bg: hsl(from var(--pill-bg-base) h 0% l / alpha);
  --key-bg: hsl(from var(--key-bg-base) h 0% l / alpha);
  --edge: hsl(from var(--edge-base) h 0% l / alpha);
  --hover: hsl(from var(--hover-base) h 0% l / alpha);
  --chip-bg: hsl(from var(--chip-bg-base) h 0% l / alpha);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background 1s ease;
}

::selection { background: var(--sel); color: var(--text); }

#bg {
  position: fixed;
  inset: 0;
  display: block;
}

/* soft glow behind the search area */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 50% 62%, var(--halo1), transparent 65%),
    radial-gradient(30rem 20rem at 84% 12%, var(--halo2), transparent 70%);
  transition: background 1s ease;
}

.page {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

/* only the search box is in flow, so it sits exactly on the center line;
   the pill hangs below it without affecting the centering */
.center-wrap {
  position: relative;
  width: min(720px, 92vw);
}

/* show/hide toggles from settings */

body.no-input .center-wrap { display: none; }
body.no-time .pill { display: none; }
body.no-help .hint { display: none; }

/* pulsing border on the search box — a smooth breathing glow */

@keyframes border-pulse {
  0%, 100% {
    border-color: var(--border-strong);
    box-shadow:
      0 24px 70px var(--edge),
      0 0 0 1px var(--edge),
      0 0 90px var(--glow),
      0 0 10px 0 var(--sel);
  }
  50% {
    border-color: var(--accent);
    box-shadow:
      0 24px 70px var(--edge),
      0 0 0 1px var(--edge),
      0 0 90px var(--glow),
      0 0 34px 6px var(--sel);
  }
}

body.no-pulse .search,
.search:focus-within {
  animation: rise 0.7s 0.08s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---------- search box ---------- */

.search {
  position: relative;
  z-index: 2; /* keep dropdown + suggestions above the pill/footer */
  width: min(720px, 92vw);
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow:
    0 24px 70px var(--edge),
    0 0 0 1px var(--edge),
    0 0 90px var(--glow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation:
    rise 0.7s 0.08s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    border-pulse 2.8s ease-in-out infinite;
  transition: border-color 0.2s, background 1s ease;
}

.search:focus-within {
  border-color: var(--border-strong);
  box-shadow:
    0 24px 70px var(--edge),
    0 0 0 1px var(--edge),
    0 0 100px var(--glow-strong);
}

#query {
  width: 100%;
  padding: 20px 22px 8px;
  background: none;
  border: 0;
  outline: 0;
  color: var(--text);
  font: 500 17px/1.4 "Inter", system-ui, sans-serif;
  caret-color: var(--accent);
}

#query::placeholder { color: var(--text-3); }

/* vanishing placeholder overlay (cycles while the field is empty) */

.vanish-ph {
  position: absolute;
  left: 22px;
  top: 20px;
  max-width: calc(100% - 44px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-3);
  font: 500 17px/1.4 "Inter", system-ui, sans-serif;
  pointer-events: none;
}

.search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 12px;
}

/* provider dropdown */

.provider-wrap { position: relative; }

.provider-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-2);
  font: 500 13.5px/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.provider-btn:hover { background: var(--hover); color: var(--text); }
.provider-btn:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }

.provider-ico {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font: 400 11px/1 "Silkscreen", monospace;
}

.chev { color: var(--text-3); transition: transform 0.18s; }
.provider-wrap.open .chev { transform: rotate(180deg); }

.menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 230px;
  padding: 6px;
  list-style: none;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px var(--edge);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.16s, transform 0.16s;
  z-index: 10;
}

.provider-wrap.open .menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font: 500 13.5px/1 "Inter", system-ui, sans-serif;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}

.menu li:hover, .menu li.active { background: var(--hover); color: var(--text); }
.menu li .menu-bang {
  margin-left: auto;
  color: var(--text-3);
  font: 400 9px/1 "Silkscreen", "Courier New", monospace;
}
.menu li .menu-bang + .check { margin-left: 8px; }

.menu li .check {
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: var(--accent);
  opacity: 0;
}

.menu li[aria-selected="true"] .check { opacity: 1; }

/* autocomplete suggestions */

.suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  border-radius: 14px;
  background: var(--suggest-bg); /* near-opaque: content beneath must not ghost through */
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px var(--edge);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.16s, transform 0.16s;
  z-index: 9;
}

.search.suggest-open .suggest {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.suggest-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  font: 500 13.5px/1.3 "Inter", system-ui, sans-serif;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}

.suggest-item .mag { display: grid; place-items: center; color: var(--text-3); flex: none; }
.suggest-item .s-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest-item .typed { color: var(--text-2); }
.suggest-item .done { color: var(--text); font-weight: 500; }
.suggest-item:hover, .suggest-item.active { background: var(--hover); }

.suggest-item .open-tag {
  margin-left: auto;
  flex: none;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--key-border);
  background: var(--key-bg);
  font: 400 9.5px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.06em;
  color: var(--key-fg);
  text-transform: uppercase;
}

.open-tag.flashed {
  color: var(--text);
  border-color: var(--accent);
  background: var(--chip-bg);
}

.suggest-item.calc-row .done {
  font: 400 10px/1.2 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.04em;
}

.suggest-item .s-meta {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-3);
  font-size: 12px;
}

.suggest-item .s-fav {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font: 400 9px/1 "Silkscreen", monospace;
}
.suggest-item .s-fav img { width: 100%; height: 100%; object-fit: cover; }

.suggest-item .s-del {
  margin-left: auto;
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-3);
  font: 400 14px/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.suggest-item:hover .s-del, .suggest-item.active .s-del { opacity: 1; }
.suggest-item .s-del:hover { color: var(--text); background: var(--hover); }

.suggest-item.history-row .mag { color: var(--text-3); }
.suggest-item.bang-row .provider-ico { width: 18px; height: 18px; font-size: 10px; flex: none; }

.suggest-head {
  padding: 6px 12px 4px;
  color: var(--text-3);
  font: 400 8.5px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.suggest-item .calc-sym {
  font: 400 11px/1 "Silkscreen", "Courier New", monospace;
  color: var(--accent);
}

/* submit button */

.submit {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--submit-bg);
  color: var(--submit-fg);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.submit:hover { background: var(--submit-bg-hover); }
.submit:active { transform: scale(0.92); }
.submit:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }

/* ---------- breadcrumb pill ---------- */

.pill {
  position: absolute;
  top: calc(100% + 30px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--pill-border);
  background: var(--pill-bg);
  font: 400 11.5px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.06em;
  color: var(--pill-text);
  white-space: nowrap;
  animation: fade 0.7s 0.16s both;
  transition: background 1s ease, border-color 1s ease, color 1s ease;
}

.pill-slash, .pill-dot { color: var(--pill-dim); }

/* weather segment: pixel icon follows the pill text color in every theme */
#wx svg { display: inline-block; vertical-align: -1px; margin-right: 5px; }

/* ---------- tab strip (middle top) ---------- */

.tab-strip {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 4px;
  max-width: min(92vw, 1100px);
  padding: 5px;
  border-radius: 12px;
  border: 1px solid var(--pill-border);
  background: var(--pill-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade 0.7s 0.16s both;
  transition: background 1s ease, border-color 1s ease;
  z-index: 10;
}

.tab-strip.has-items { display: flex; }

body.no-tabs .tab-strip { display: none; }

.tab-chip {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 150px;
  padding: 5px 9px 5px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--pill-text);
  font: 500 12px/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.tab-chip:hover, .tab-chip.menu-open { background: var(--hover); color: var(--text); }
.tab-chip.menu-open .tab-caret { transform: rotate(180deg); }
.tab-caret { transition: transform 0.16s; }
.tab-chip:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }

.tab-caret { flex: none; display: grid; place-items: center; color: var(--text-3); }

.tab-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  padding: 6px;
  border-radius: 10px;
  background: var(--suggest-bg);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px var(--edge);
  z-index: 5;
}

/* custom slim scrollbar instead of the native one */
.tab-menu::-webkit-scrollbar { width: 10px; }
.tab-menu::-webkit-scrollbar-track { background: transparent; }
.tab-menu::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 6px;
  background: var(--key-border);
  background-clip: padding-box;
}
.tab-menu::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }
.tab-menu::-webkit-scrollbar-corner { background: transparent; }

.tab-menu-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 9px 7px 6px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-2);
  font: 500 12px/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s, background 0.15s;
}

.tab-menu-item:hover, .tab-menu-item:focus-visible { background: var(--hover); color: var(--text); outline: none; }

.tab-menu-openall {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  color: var(--text-3);
  font: 400 9px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tab-menu-count {
  margin-left: auto;
  padding-left: 8px;
  color: var(--text-3);
  font: 400 9px/1 "Silkscreen", "Courier New", monospace;
}

.tab-menu-item .tab-chip-label { max-width: 220px; }

.tab-menu-caret { margin-left: auto; display: grid; place-items: center; color: var(--text-3); }

.tab-menu-back {
  margin-bottom: 4px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  color: var(--pill-text);
}

.tab-menu-empty {
  padding: 8px 10px;
  color: var(--text-3);
  font: 400 11.5px/1.4 "Inter", system-ui, sans-serif;
}

.tab-fav {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font: 400 10px/1 "Silkscreen", "Courier New", monospace;
  overflow: hidden;
}

.tab-fav img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tab-chip-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- footer hint ---------- */

.hint {
  position: fixed;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--hint);
  user-select: none;
  transition: color 1s ease;
}

.hint .key {
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--key-border);
  background: var(--key-bg);
  font-family: "Silkscreen", monospace;
  font-size: 9.5px;
  color: var(--key-fg);
}

/* ---------- settings ---------- */

.settings-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pill-border);
  border-radius: 50%;
  background: var(--pill-bg);
  color: var(--pill-text);
  cursor: pointer;
  transition: color 0.15s, transform 0.25s, background 1s ease, border-color 1s ease;
  z-index: 20;
}

.settings-btn:hover { color: var(--text); transform: rotate(30deg); }
.settings-btn:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }

.settings {
  position: fixed;
  right: 18px;
  bottom: 66px;
  width: min(340px, calc(100vw - 36px));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--key-border) transparent;
  padding: 12px 14px 14px;
  border-radius: 14px;
  background: var(--suggest-bg);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px var(--edge);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.16s, transform 0.16s;
  z-index: 20;
}

.settings.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.set-tabs {
  position: sticky;
  top: -12px;
  z-index: 1;
  display: flex;
  gap: 4px;
  margin: -12px -14px 14px;
  padding: 10px 10px 0;
  border-bottom: 1px solid var(--border);
  background: var(--suggest-bg);
}

.set-tabs button {
  flex: 1;
  padding: 8px 6px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-3);
  font: 400 9.5px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.set-tabs button:hover { color: var(--text-2); }
.set-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.set-tabs button:focus-visible { outline: 2px solid var(--border-strong); outline-offset: -2px; }

.set-pane { animation: fade 0.18s both; }

.set-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.set-row:has(.phase-opts) { align-items: flex-start; }
.set-row:has(.phase-opts) .set-name { padding-top: 7px; }

.set-row + .set-row { margin-top: 12px; }

.set-name {
  flex: none;
  width: 48px;
  color: var(--text-3);
  font: 500 11px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.set-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--key-bg);
  color: var(--text);
  font: 500 13px/1.2 "Inter", system-ui, sans-serif;
  outline: none;
  transition: border-color 0.15s;
}

.set-input:focus { border-color: var(--border-strong); }
.set-input::placeholder { color: var(--text-3); }

.phase-opts {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phase-opts button {
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid var(--key-border);
  background: var(--key-bg);
  color: var(--key-fg);
  font: 500 11.5px/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.phase-opts button:hover { color: var(--text); border-color: var(--border-strong); }
.phase-opts button:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }

/* theme swatches: a little planet chip in front of each theme name */
.theme-opts button { display: inline-flex; align-items: center; gap: 6px; }
.theme-opts .sw {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 3px;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.45);
}
/* before a wallpaper is sampled the Image swatch is a tiny landscape */
.theme-opts .sw-img {
  background: var(--sw, linear-gradient(180deg, #7ab8ff 0 45%, #f0a830 45% 60%, #2e8b57 60%));
}

/* a one-shot action living inside an option row (e.g. Clear history) */
.phase-opts .opt-action { margin-left: auto; border-style: dashed; }
.phase-opts .opt-action.flashed { color: var(--text); border-color: var(--accent); border-style: solid; }

/* bang cheat sheet (search tab) */
.set-bangs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font: 500 11px/1.3 "Inter", system-ui, sans-serif;
  color: var(--text-2);
}
.set-bangs .bang-title {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  color: var(--text-3);
  font: 500 10.5px/1.4 "Inter", system-ui, sans-serif;
}
.set-bangs .bang-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.set-bangs .bang-row span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.set-bangs code {
  flex: none;
  min-width: 34px;
  padding: 2px 5px;
  border-radius: 5px;
  border: 1px solid var(--key-border);
  background: var(--key-bg);
  color: var(--key-fg);
  font: 400 9px/1.2 "Silkscreen", "Courier New", monospace;
  text-align: center;
}
.phase-opts button.active {
  background: var(--chip-bg);
  border-color: var(--border-strong);
  color: var(--text);
}

/* the hidden attribute must win over .set-row's display:flex */
[hidden] { display: none !important; }

/* weather: city search results + row spacing around the interposed list */
#wx-units-row, #wx-sky-row { margin-top: 12px; }
.wx-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 0 58px;
}
.wx-results button {
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid var(--key-border);
  background: var(--key-bg);
  color: var(--key-fg);
  font: 500 11.5px/1.2 "Inter", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.wx-results button:hover { color: var(--text); border-color: var(--border-strong); }

/* ---------- mod layer (widgets) ---------- */

.mod-tab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pill-border);
  border-radius: 50%;
  background: var(--pill-bg);
  color: var(--pill-text);
  cursor: pointer;
  transition: color 0.15s, background 1s ease, border-color 1s ease;
  z-index: 15;
}

.mod-tab:hover { color: var(--text); }
.mod-tab:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }

.mod-layer {
  position: fixed;
  left: 18px;
  bottom: 66px;
  width: 250px;
  max-height: min(62vh, 540px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--suggest-bg);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px var(--edge);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.16s, transform 0.16s;
  z-index: 15;
}

.mod-layer.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.mod-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.mod-title {
  flex: 1;
  font: 400 10px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.08em;
  color: var(--pill-text);
}

.mod-head-actions { display: flex; gap: 6px; }

.mod-icon-btn {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid var(--key-border);
  background: var(--key-bg);
  color: var(--key-fg);
  font: 500 13px/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: color 0.15s;
}

.mod-icon-btn:hover { color: var(--text); }
.mod-icon-btn:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }

.mod-add-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 10px;
  right: 10px;
  padding: 6px;
  border-radius: 10px;
  background: var(--suggest-bg);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px var(--edge);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 5;
}

.mod-add-menu.open { opacity: 1; transform: none; pointer-events: auto; }

.mod-add-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: 500 12.5px/1.3 "Inter", system-ui, sans-serif;
  cursor: pointer;
}

.mod-add-menu button:hover:not(:disabled) { background: var(--hover); }
.mod-add-menu button:disabled { opacity: 0.55; cursor: default; }
.mod-add-menu button strong { display: block; }
.mod-add-menu button span { font-weight: 400; font-size: 11px; color: var(--text-3); }

.mod-body {
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mod-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--key-bg);
  padding: 10px;
}

.mod-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font: 500 11px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}

.mod-remove {
  border: 0;
  background: none;
  color: var(--text-3);
  font: 400 14px/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
  padding: 0 2px;
}

.mod-remove:hover { color: var(--text); }

.mod-empty {
  color: var(--text-3);
  font: 400 11.5px/1.5 "Inter", system-ui, sans-serif;
  text-align: center;
  padding: 8px 4px;
}

/* bus tracker widget */

.wg-bus-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font: 400 8px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: blink 1.6s infinite;
}

.wg-bus-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font: 500 12px/1.2 "Inter", system-ui, sans-serif;
}

.wg-badge {
  flex: none;
  min-width: 26px;
  padding: 4px 7px;
  text-align: center;
  border-radius: 6px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font: 400 9px/1 "Silkscreen", "Courier New", monospace;
}

.wg-status {
  flex: none;
  font: 400 7px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 4px;
}

.wg-status.live { color: #22c55e; border-color: rgba(34, 197, 94, 0.4); }
.wg-status.late { color: #f59e0b; border-color: rgba(245, 158, 11, 0.4); }
.wg-status.early { color: #38bdf8; border-color: rgba(56, 189, 248, 0.45); }
.wg-status.cancelled { color: #ef4444; border-color: rgba(239, 68, 68, 0.45); }

.wg-bus-row.is-cancelled { opacity: 0.55; }

.wg-bus-row.is-cancelled .wg-badge {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.wg-dest {
  flex: 1;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wg-eta {
  font: 400 10px/1 "Silkscreen", "Courier New", monospace;
  color: var(--text);
}

@keyframes blink {
  50% { opacity: 0.25; }
}

/* personal mod alert bar (bottom-center) */

.mod-alert {
  position: fixed;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%) translateY(12px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--suggest-bg);
  border: 1px solid var(--accent);
  box-shadow: 0 0 34px var(--glow-strong), 0 16px 40px var(--edge);
  color: var(--text);
  font: 400 11px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 25;
}

.mod-alert.show {
  opacity: 1;
  transform: translateX(-50%);
}

.mod-alert-ico { font-size: 14px; }

/* good vibes widget */

.wg-vibes {
  cursor: pointer;
}

.wg-vibes-msg {
  min-height: 30px;
  display: flex;
  align-items: center;
  font: 400 10px/1.7 "Silkscreen", "Courier New", monospace;
  color: var(--text);
}

.wg-vibes-hint {
  margin-top: 4px;
  font: 400 10px/1 "Inter", system-ui, sans-serif;
  color: var(--text-3);
}

.vibe-toast {
  position: fixed;
  transform: translate(-50%, -50%) translateY(8px);
  padding: 9px 13px;
  border-radius: 10px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font: 400 10px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s, transform 0.5s;
  z-index: 14;
}

.vibe-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* wallpaper picker */

.wall-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.wall-btn {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--key-border);
  background: var(--key-bg);
  color: var(--key-fg);
  font: 500 11.5px/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.wall-btn:hover { color: var(--text); }
.wall-btn:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }

.dot-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--key-border);
  cursor: pointer;
  outline: none;
}

.dot-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.dot-slider:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; }

.set-val {
  flex: none;
  min-width: 20px;
  text-align: right;
  color: var(--text-2);
  font: 500 11px/1 "Inter", system-ui, sans-serif;
}

/* wallpaper modal */

.wall-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 5, 12, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 40;
}

.wall-modal.open { opacity: 1; pointer-events: auto; }

.wall-box {
  width: min(440px, 92vw);
  padding: 16px;
  border-radius: 16px;
  background: var(--suggest-bg);
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px var(--edge);
  transform: translateY(10px) scale(0.97);
  transition: transform 0.2s;
}

.wall-modal.open .wall-box { transform: none; }

.wall-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font: 400 10px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.08em;
  color: var(--pill-text);
}

.wall-drop {
  border: 1.5px dashed var(--border-strong);
  border-radius: 12px;
  padding: 26px 14px;
  text-align: center;
  color: var(--text-3);
  font: 400 12px/1.6 "Inter", system-ui, sans-serif;
  transition: border-color 0.15s, background 0.15s;
}

.wall-drop strong {
  display: block;
  color: var(--text-2);
  font-weight: 500;
  margin-bottom: 2px;
}

.wall-drop span { font-size: 11px; }

.wall-drop.drag {
  border-color: var(--accent);
  background: var(--hover);
  color: var(--text-2);
}

.wall-url-row { display: flex; gap: 8px; margin: 12px 0; }

.wall-url-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--key-bg);
  color: var(--text);
  font: 500 12.5px/1.2 "Inter", system-ui, sans-serif;
  outline: none;
  transition: border-color 0.15s;
}

.wall-url-row input:focus { border-color: var(--border-strong); }
.wall-url-row input::placeholder { color: var(--text-3); }

.wall-actions-row { display: flex; gap: 8px; margin-top: 12px; }

.wall-btn:disabled { opacity: 0.45; cursor: default; }
.wall-btn:disabled:hover { color: var(--key-fg); }

/* a full set of wallpapers: the drop zone stops inviting more */
.wall-drop.full { opacity: 0.5; pointer-events: none; }

.wall-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.wall-strip[hidden] { display: none; }

.wall-thumb { position: relative; aspect-ratio: 16 / 10; }

.wall-thumb-pick {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--key-bg) center / cover no-repeat;
  cursor: pointer;
  transition: border-color 0.15s;
}

.wall-thumb-pick:hover { border-color: var(--border-strong); }
.wall-thumb-pick:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }
.wall-thumb.active .wall-thumb-pick { border-color: var(--accent); }

.wall-thumb-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--suggest-bg);
  color: var(--text-2);
  font: 500 12px/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.wall-thumb:hover .wall-thumb-del,
.wall-thumb-del:focus-visible { opacity: 1; }
.wall-thumb-del:hover { color: var(--text); }
@media (hover: none) { .wall-thumb-del { opacity: 1; } }

/* wallpaper crossfade: a frozen copy of the old frame fading out over the new */
.bg-fade {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transition: opacity 1.4s ease;
}
.bg-fade.out { opacity: 0; }

.wall-thumb-num {
  position: absolute;
  left: 4px;
  bottom: 4px;
  min-width: 14px;
  padding: 2px 3px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: 400 9px/1 "Silkscreen", "Courier New", monospace;
  text-align: center;
  pointer-events: none;
}

.wall-sched {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
}
.wall-sched[hidden] { display: none; }

.wall-sched-row { display: flex; align-items: center; gap: 10px; }
.wall-sched-row.top { align-items: flex-start; }
.wall-sched-row.top .wall-sched-name { padding-top: 7px; }

.wall-sched-name {
  flex: none;
  width: 62px;
  color: var(--text-2);
  font: 400 10px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.04em;
}

/* rules override the timer, so it steps back while any exist */
#wall-rotate.muted { opacity: 0.5; }

.wall-rules { flex: 1; min-width: 0; display: grid; gap: 6px; justify-items: start; }
#wall-rule-list { display: grid; gap: 6px; width: 100%; }

.wall-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-3);
  font: 400 11.5px/1 "Inter", system-ui, sans-serif;
}
.wall-rule.live { border-color: var(--accent); }
.wall-rule.broken { opacity: 0.5; }
.wall-rule .mod-icon-btn { margin-left: auto; }

/* rule chips: open the custom pickers below */
.wall-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--key-border);
  background: var(--key-bg);
  color: var(--text);
  font: 400 11px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s;
}
.wall-pick:hover,
.wall-pick[aria-expanded="true"] { border-color: var(--border-strong); }
.wall-pick:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }
.wall-img { padding-left: 3px; }
.pick-sw {
  width: 26px;
  height: 16px;
  border-radius: 4px;
  background: var(--key-border) center / cover no-repeat;
}

/* picker popover, positioned inside the dialog box */
.wall-box { position: relative; }
.wall-pop {
  position: absolute;
  z-index: 3;
  width: 236px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--suggest-bg);
  box-shadow: 0 18px 50px var(--edge);
  animation: wall-pop-in 0.14s ease-out;
}
@keyframes wall-pop-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .wall-pop { animation: none; } }

.pop-label {
  margin: 2px 2px 6px;
  color: var(--text-3);
  font: 400 9px/1 "Silkscreen", "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pop-label + .pop-grid + .pop-label { margin-top: 10px; }

.pop-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.pop-grid button {
  height: 24px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-2);
  font: 400 10px/1 "Silkscreen", "Courier New", monospace;
  cursor: pointer;
}
.pop-grid button:hover { background: var(--hover); color: var(--text); }
.pop-grid button:focus-visible { outline: none; border-color: var(--border-strong); color: var(--text); }
.pop-grid button.sel { background: var(--accent); border-color: var(--accent); color: var(--submit-fg); }

.pop-grid.walls { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pop-grid.walls button {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 10;
  border: 1.5px solid var(--border);
  background: var(--key-bg) center / cover no-repeat;
}
.pop-grid.walls button:hover { border-color: var(--border-strong); }
.pop-grid.walls button.sel { border-color: var(--accent); background-color: var(--key-bg); }
.pop-grid.walls span {
  position: absolute;
  left: 2px;
  bottom: 2px;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 8px;
}

.wall-hint {
  margin: 0;
  color: var(--text-3);
  font: 400 11px/1.4 "Inter", system-ui, sans-serif;
}

.wall-count {
  margin: 8px 0 0;
  color: var(--text-3);
  font: 400 11px/1.4 "Inter", system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .search, .pill, .tab-strip { animation: none; }
  .menu, .chev, .submit { transition: none; }
  .live-dot { animation: none; }
  .search::before, .search::after { animation: none; }
}

/* a typed bang (!yt …) takes over the provider chip while it's active */
.provider-btn.bang-on { color: var(--text); background: var(--hover); }
.provider-btn.bang-on .provider-ico { background: var(--accent); color: var(--submit-fg); }

/* an open dropdown outranks the widget layer and bottom docks, and scrolls
   instead of running off short screens */
.search.suggest-open, .search:has(.provider-wrap.open) { z-index: 16; }
.suggest {
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--key-border) transparent;
}