/* ============================================================================
   terminal 98 (2026-10-29, Harry): a directional shift toward a Windows 97/98 feel
   across the whole app, on top of the existing layouts, icons and architecture.
   Square corners, bevelled raised controls, sunken fields, etched group boxes,
   dashed list rules, Chakra Petch (PT Sans until 2026-11-01). Dark is neutral frosted charcoal and grey (no navy);
   light is classic silver. One accent stays (cyan dark, coral light), now used for
   values, links and selection only.

   Loaded after tokens.css + components.css (base.html), so it re-points the tokens
   and then restyles the controls. The material properties (corners, borders,
   bevels, faces) carry !important on purpose: components.css has many scoped rules
   for the old glass look, and this layer must win over all of them. Delete this file
   (and its <link>) to return to the previous look.
   Mockups: reports/w98-mockups/. Protected and untouched: the mp4 background, the
   listen orb, the soundcloud / youtube embeds, the 28px round row icons, lowercase.
   ============================================================================ */

/* ---------------------------------------------------------------- tokens
   :root + html[data-theme]: as specific as tokens.css's :root and light blocks, and later,
   so the re-pointed tokens win in both themes; the light values follow. */
:root, html[data-theme="light"], html[data-theme="dark"] {
  --font-mono: 'Chakra Petch', Tahoma, Verdana, 'Segoe UI', sans-serif;
  --font-ui: 'Chakra Petch', Tahoma, Verdana, 'Segoe UI', sans-serif;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-chip: 0px;

  /* the material: a translucent window, opaque faces */
  --w-win: rgba(30, 30, 32, .84);
  --w-face: #2c2c2f;          /* tracks, wells' surroundings, inactive sub-tabs */
  --w-face-up: #3b3b3f;       /* raised buttons */
  --w-face-hover: #46464b;
  --w-field: rgba(14, 14, 15, .82);
  --w-hi: #a0a0a3;            /* bevel: top-left outer */
  --w-hi2: #505054;           /* bevel: top-left inner */
  --w-lo: #000;               /* bevel: bottom-right outer */
  --w-lo2: #18181a;           /* bevel: bottom-right inner */
  --w-etch: #5c5c60;          /* group-box rules, sub-tab edges */
  --w-text: #ececec;
  --w-dim: #a6a6a6;
  --w-dash: rgba(255, 255, 255, .24);
  --w-sel: #e4e4e4;           /* the selected main tab's pale face */
  --w-sel-text: #0c0c0c;
  --w-default: #cbcbcb;       /* the default (primary) button face */
  --w-default-hover: #d8d8d8;
  --error: #ff8a80;           /* 4.5:1+ on the charcoal window */
  --w-default-text: #111;
  --w-strip: #3a3a3e;         /* dialog title strips */
  --w-raised: inset 1px 1px 0 var(--w-hi), inset -1px -1px 0 var(--w-lo), inset 2px 2px 0 var(--w-hi2), inset -2px -2px 0 var(--w-lo2);
  --w-pressed: inset 1px 1px 0 var(--w-lo), inset -1px -1px 0 var(--w-hi), inset 2px 2px 0 var(--w-lo2), inset -2px -2px 0 var(--w-hi2);
  --w-sunken: inset 1px 1px 0 var(--w-lo2), inset -1px -1px 0 var(--w-hi), inset 2px 2px 0 var(--w-lo), inset -2px -2px 0 var(--w-hi2);
  --w-default-bevel: inset 1px 1px 0 #fff, inset -1px -1px 0 #0a0a0a, inset 2px 2px 0 #e6e6e6, inset -2px -2px 0 #7a7a7a;
  --w-etched: inset 0 0 0 1px var(--w-etch), inset 1px 1px 0 1px var(--w-lo);
  --w-window: inset 1px 1px 0 var(--w-hi), inset -1px -1px 0 var(--w-lo), inset 2px 2px 0 var(--w-hi2), inset -2px -2px 0 var(--w-lo2), 0 18px 40px rgba(0, 0, 0, .45);

  /* the existing tokens, re-pointed to the material */
  --sheet-bg: var(--w-win);
  --sheet-tint: transparent;
  --sheet-blur: blur(20px) saturate(1.05);
  --sheet-border: #000;
  --sheet-rim: none;
  --sheet-edge: none;
  --sheet-shadow: none;
  --sheet-strip: var(--w-strip);
  --group-bg: transparent;
  --tab-active-bg: var(--w-sel);
  --tab-active-fg: var(--w-sel-text);
  --tab-active-border: transparent;
  --tab-active-edge: none;
  --dock-bg: transparent;
  --dock-border: var(--w-etch);
  --dock-btn-bg: var(--w-default);
  --dock-btn-fg: var(--w-default-text);
  --switch-off: var(--w-field);
  --shelf-bg: var(--w-face);
  --shelf-border: transparent;
  --shelf-rim: none;
  --shelf-shadow: none;
  --shelf-divider: transparent;
  --sub-bg: var(--w-face);
  --sub-border: var(--w-etch);
  --sub-border-hover: var(--w-hi);
  --sub-rim: none;
  --sub-shadow: none;
  --sub-active-bg: transparent;
  --sub-active-border: var(--accent);
  --sub-active-rim: none;
  --app-ctrl-border: var(--w-etch);
  --app-field-border: var(--w-etch);
  --app-sep: var(--w-dash);
  --app-card-border: var(--w-etch);
  --frost-bg: var(--w-win);
  --frost-bg-tab: var(--w-face);
  --frost-bg-modal: rgba(34, 34, 37, .96);
  --frost-border: #000;
  --frost-sep: var(--w-dash);
  --frost-rim: none;
  --frost-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --card-bg: transparent;
  --card-border: var(--w-etch);
  --card-rim: none;
  --ctrl-bg: var(--w-face-up);
  --ctrl-border: transparent;
  --field-bg: var(--w-field);
  --field-border: transparent;
  --solid-face: var(--w-default);
  --solid-text: var(--w-default-text);
  --overlay: rgba(8, 8, 9, .6);
  --sheet-ink: rgba(30, 30, 32, .9);
}
html[data-theme="light"] {
  --accent: #96321a;          /* one coral, deep enough to read on silver and on the button faces */
  --accent-rgb: 150, 50, 26;
  --link: #96321a;
  --error: #8f2a2a;
  --w-win: rgba(214, 214, 212, .92);
  --w-face: #c9c9c9;
  --w-face-up: #c3c3c3;
  --w-face-hover: #cecece;
  --w-field: #fff;
  --w-hi: #fff;
  --w-hi2: #e8e8e8;
  --w-lo: #0a0a0a;
  --w-lo2: #7b7b7b;
  --w-etch: #7b7b7b;
  --w-text: #111;
  --w-dim: #3a3a3a;
  --w-dash: rgba(0, 0, 0, .35);
  --w-sel: #f4f4f4;
  --w-sel-text: #0c0c0c;
  --w-default: #c3c3c3;
  --w-default-hover: #d0d0d0;
  --w-default-text: #111;
  --w-strip: #c9c9c9;
  --w-window: inset 1px 1px 0 var(--w-hi), inset -1px -1px 0 var(--w-lo), inset 2px 2px 0 var(--w-hi2), inset -2px -2px 0 var(--w-lo2), 0 18px 40px rgba(0, 0, 0, .14);
  --grey-1: #111;
  --grey-2: #2a2a2a;
  --grey-3: #474747;
  --grey-4: #5c5c5c;
  --frost-bg-modal: rgba(214, 214, 212, .97);
  --frost-shadow: 0 18px 40px rgba(0, 0, 0, .14);
  --overlay: rgba(243, 242, 238, .55);
  --sheet-ink: rgba(214, 214, 212, .92);
}

/* ---------------------------------------------------------------- type */
html, body, button, input, textarea, select { font-family: var(--font-ui); }
html body { letter-spacing: .01em; }
html body :is(h1, h2, h3, h4, .tm-tab, .tm-subtab, .tm-btn, .tm-chip, .tm-cta, .tm-input, .tm-textarea, .tm-select, .tm-linklike, .tm-bracket) {
  font-family: var(--font-ui) !important;
}
:focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }

/* ---------------------------------------------------------------- the window (dashboard, library) */
html body :is(#tm-dashboard:not([hidden]), .tm-shell.tm-app:has(#tm-active-view)) {
  border-radius: 0 !important; background: var(--w-win) !important; border: 1px solid var(--w-lo) !important;
  box-shadow: var(--w-window) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.05); backdrop-filter: blur(20px) saturate(1.05);
}
/* the inner etched rule of a Win98 window */
html body :is(#tm-dashboard:not([hidden]), .tm-shell.tm-app:has(#tm-active-view))::before {
  content: "" !important; position: absolute !important; inset: 8px !important; z-index: 0 !important;
  background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid var(--w-etch) !important; box-shadow: 1px 1px 0 var(--w-lo) !important;
  border-radius: 0 !important; pointer-events: none !important; opacity: 1 !important;
}
html body #tm-dashboard.tm-dash-vanish { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html body #tm-dashboard.tm-dash-vanish::before { opacity: 0 !important; }

/* ---------------------------------------------------------------- account header (main's layout, Harry 2026-10-29) */
html body #tm-dashboard .tm-dash-head { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 12px; }
html body #tm-dashboard .tm-dash-id { display: flex !important; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
html body #tm-dashboard .tm-welcome-row { min-width: 0; overflow: hidden; }
html body #tm-dashboard .tm-welcome-inline {
  display: block; min-width: 0; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; overflow-wrap: normal !important;
}
html body #tm-dashboard .tm-welcome-inline .hl { word-break: normal !important; }
html body #tm-dashboard .tm-dash-caps:not(.tm-dash-next) { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #tm-dashboard .tm-dash-head > :is(.tm-chip, .tm-subscribed) {
  flex: none; align-self: flex-start; position: relative;
  background: var(--w-face-up) !important; color: var(--accent) !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: var(--w-raised) !important; padding: 5px 10px !important; min-height: 0 !important; line-height: 1.4 !important;
  font-size: var(--fs-meta) !important; text-decoration: none !important;
}
html body #tm-dashboard .tm-dash-head > .tm-chip:active { box-shadow: var(--w-pressed) !important; }

/* ---------------------------------------------------------------- main tabs: raised buttons in a sunken track */
html body :is(#tm-dashboard, .tm-app:has(#tm-active-view), .tm-app) .tm-tabs {
  border-radius: 0 !important; background: var(--w-face) !important; border: 0 !important;
  box-shadow: var(--w-sunken) !important; padding: 4px !important; gap: 4px !important;
}
html body :is(#tm-dashboard, .tm-app:has(#tm-active-view), .tm-app) .tm-tab {
  border-radius: 0 !important; border: 0 !important; background: var(--w-face-up) !important;
  color: var(--w-text) !important; box-shadow: var(--w-raised) !important;
}
html body :is(#tm-dashboard, .tm-app:has(#tm-active-view), .tm-app) .tm-tab::before { display: none !important; }
html body :is(#tm-dashboard, .tm-app:has(#tm-active-view), .tm-app) .tm-tab:not(.active):hover { background: var(--w-face-hover) !important; }
html body :is(#tm-dashboard, .tm-app:has(#tm-active-view), .tm-app) .tm-tab.active {
  background: var(--w-sel) !important; color: var(--w-sel-text) !important;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #0a0a0a, inset 2px 2px 0 #fff, inset -2px -2px 0 #808080 !important;
  outline: 1px dotted var(--w-sel-text) !important; outline-offset: -5px !important;
}

/* ---------------------------------------------------------------- sub-tabs: flat boxes; selected = accent text + outline, no fill */
html body .tm-feed-subtabs { gap: 4px !important; margin-top: 6px !important; }
html body .tm-subtab {
  border-radius: 0 !important; background: var(--w-face) !important; color: var(--w-text) !important;
  border: 1px solid var(--w-etch) !important; box-shadow: none !important; margin-left: 0 !important; flex: 1 1 0;
}
html body .tm-subtab:hover { border-color: var(--w-hi) !important; }
html body .tm-subtab.active {
  color: var(--accent) !important; background: transparent !important;
  border: 1px solid var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important;
}

/* ---------------------------------------------------------------- the scan / tracklist dock: an etched group box */
html body :is(#tm-dashboard .tm-dock, .tm-modal .tm-spot-dock) {
  border-radius: 0 !important; background: transparent !important; border: 0 !important; box-shadow: var(--w-etched) !important;
}
html body :is(#tm-dashboard .tm-dock, .tm-modal .tm-spot-dock):focus-within { box-shadow: var(--w-etched), 0 0 0 1px var(--accent) !important; }
html body #tm-dashboard .tm-dock:has([aria-invalid="true"]) { box-shadow: var(--w-etched), 0 0 0 1px var(--error) !important; }
html body #tm-dashboard #tm-mix-url::placeholder, html body #tm-dashboard .tm-textarea-hint { color: var(--w-text); opacity: .75; }
/* fast | deep: a square outlined well, a raised knob (fast = knob left, deep = accent well) */
html body #tm-dashboard .tm-dock .tm-scanmode-track {
  border-radius: 0 !important; width: 42px !important; height: 22px !important;
  background: var(--w-field) !important; box-shadow: var(--w-sunken) !important; outline: 1px solid var(--w-lo); outline-offset: -1px;
}
html body #tm-dashboard .tm-dock .tm-scanmode-knob {
  border-radius: 0 !important; top: 3px !important; left: 3px !important; width: 18px !important; height: 16px !important;
  background: #c3c3c3 !important; box-shadow: var(--w-default-bevel) !important;
}
html body #tm-dashboard .tm-dock .tm-scanmode.is-deep .tm-scanmode-track { background: var(--accent) !important; }
html body #tm-dashboard .tm-dock .tm-scanmode.is-deep .tm-scanmode-knob { transform: translateX(18px) !important; }
html body #tm-dashboard .tm-dock .tm-scanmode:hover .tm-scanmode-track { box-shadow: var(--w-sunken) !important; outline-color: var(--accent); }

/* ---------------------------------------------------------------- controls: raised, square */
html body :is(.tm-btn, .tm-chip, .tm-cta, .tm-upload, .tm-pill, .tm-feed-more, .tm-load-more, [id="tm-loadmore"], .tm-similar-modal .tm-chip) {
  border-radius: 0 !important; border: 0 !important; background: var(--w-face-up) !important;
  color: var(--w-text) !important; box-shadow: var(--w-raised) !important; text-decoration: none !important;
}
html body :is(.tm-btn, .tm-chip, .tm-cta, .tm-upload, .tm-pill, [id="tm-loadmore"]):not(:disabled):hover { background: var(--w-face-hover) !important; color: var(--w-text) !important; }
html body :is(.tm-btn, .tm-chip, .tm-cta, .tm-upload, .tm-pill, [id="tm-loadmore"]):not(:disabled):active { box-shadow: var(--w-pressed) !important; }
html body :is(.tm-btn, .tm-chip, .tm-cta, .tm-upload):disabled { color: var(--w-dim) !important; opacity: .7; }
/* an accent chip (upgrade, signup in menus) keeps its accent label */
html body .tm-chip.accent.accent, html body .tm-chip.accent.accent:not(:disabled):hover { color: var(--accent) !important; }
/* primary actions: the Win98 default button (pale face, black frame) */
html body :is(.tm-btn.inverted, .tm-chip.solid, .tm-modal .tm-dock-go, [id="tm-wall-subscribe"], .tm-btn.solid) {
  background: var(--w-default) !important; color: var(--w-default-text) !important; font-weight: 400 !important;
  outline: 1px solid #000 !important; outline-offset: 0 !important; box-shadow: var(--w-default-bevel) !important; border: 0 !important; border-radius: 0 !important;
}
html body :is(.tm-btn.inverted, .tm-chip.solid, .tm-modal .tm-dock-go, .tm-btn.solid):not(:disabled):hover { background: var(--w-default-hover) !important; color: var(--w-default-text) !important; }
html body :is(.tm-btn.inverted, .tm-chip.solid, .tm-modal .tm-dock-go, .tm-btn.solid):not(:disabled):active {
  box-shadow: inset 1px 1px 0 #0a0a0a, inset -1px -1px 0 #fff, inset 2px 2px 0 #7a7a7a, inset -2px -2px 0 #e6e6e6 !important;
}
/* disabled: the face stays opaque, the label greys out with an etched highlight */
html body :is(.tm-btn.inverted, .tm-chip.solid, .tm-modal .tm-dock-go, .tm-btn.solid):disabled {
  opacity: 1 !important; color: #6b6b6b !important; text-shadow: 1px 1px 0 #fff; cursor: default;
}
html body :is(.tm-btn, .tm-chip, .tm-cta, .tm-upload).tm-btn:disabled, html body :is(.tm-btn, .tm-chip, .tm-cta, .tm-upload):disabled:disabled { color: var(--w-dim) !important; }
/* the dock's scan / match: a plain raised button while empty, the default button once
   the input is ready (dashboard.js adds .inverted), greyed while invalid */
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn {
  position: relative; border: 0 !important; border-radius: 0 !important; font-weight: 400 !important; opacity: 1 !important;
  background: var(--w-face-up) !important; color: var(--w-text) !important; outline: 0 !important; box-shadow: var(--w-raised) !important;
}
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn.inverted {
  background: var(--w-default) !important; color: var(--w-default-text) !important;
  outline: 1px solid #000 !important; outline-offset: 0 !important; box-shadow: var(--w-default-bevel) !important;
}
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn:not(:disabled):hover { background: var(--w-face-hover) !important; }
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn.inverted:not(:disabled):hover { background: var(--w-default-hover) !important; }
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn:not(:disabled):active { box-shadow: var(--w-pressed) !important; }
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn:disabled { color: var(--w-dim) !important; background: var(--w-face-up) !important; outline: 0 !important; box-shadow: var(--w-raised) !important; }
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn:focus-visible::after { content: ""; position: absolute; inset: 4px; border: 1px dotted currentColor; pointer-events: none; }
/* focus everywhere: the dotted rectangle inside the control */
html body :is(.tm-tab, .tm-subtab, .tm-btn, .tm-chip, .tm-cta, .tm-upload, #tm-search-btn, .tm-dock-go, .tm-recent-row, .tm-feed-sugg, .tm-list-row a):focus-visible {
  outline: 1px dotted currentColor !important; outline-offset: -5px !important;
}

/* ---------------------------------------------------------------- fields: sunken wells */
html body :is(.tm-input, .tm-textarea, .tm-select, select.tm-select):not(#tm-mix-url):not(#tm-tracklist):not(#tm-spotify-url) {
  border-radius: 0 !important; border: 0 !important; background: var(--w-field) !important;
  box-shadow: var(--w-sunken) !important; color: var(--w-text);
}
html body :is(.tm-input, .tm-textarea, .tm-select):not(#tm-mix-url):not(#tm-tracklist):not(#tm-spotify-url):focus { box-shadow: var(--w-sunken), 0 0 0 1px var(--accent) !important; outline: none; }
html body :is(.tm-input, .tm-textarea)[aria-invalid="true"] { box-shadow: var(--w-sunken), 0 0 0 1px var(--error) !important; }
html body .tm-select-wrap { border-radius: 0 !important; }
html body .tm-select-wrap::after { color: var(--w-text); }
/* the dock's own fields stay borderless inside the group box */
html body :is(#tm-mix-url, #tm-tracklist, #tm-spotify-url) { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }

/* checkboxes: square sunken boxes */
html body .tm-check .box {
  border-radius: 0 !important; border: 0 !important; background: var(--w-field) !important; box-shadow: var(--w-sunken) !important; color: var(--w-text) !important;
}
html body .tm-check input:checked + .box { color: var(--accent) !important; }
html body input[type="checkbox"]:is(.tm-set-check, .tm-watch-check) { accent-color: var(--accent); border-radius: 0; }

/* ---------------------------------------------------------------- lists: dashed rules, list boxes */
html body :is(.tm-recent-row, .tm-list-row, .tm-follows-row, .tm-feed-sugg, .tm-set-row, .tm-ht-row) { border-bottom: 1px dashed var(--w-dash) !important; border-radius: 0 !important; }
html body :is(.tm-recent-row, .tm-list-row, .tm-follows-row, .tm-feed-sugg):last-child { border-bottom-color: transparent !important; }
html body .tm-set-row:last-child { border-bottom: 0 !important; }
html body #tm-dashboard .tm-recent h3 { color: var(--w-text) !important; border-bottom: 0 !important; }
/* recent activity: a list box with its own scrollbar lane, so the "open ›" arrows
   never sit under the scrollbar (overlay scrollbars on phones get the padding) */
html body #tm-dashboard .tm-textarea-wrap[data-mode="scan"] { flex: 1 1 auto; min-height: 0; }
html body #tm-dashboard .tm-recent { flex: 1 1 0 !important; min-height: 120px; }
html body #tm-dashboard .tm-recent-list {
  background: var(--w-field); box-shadow: var(--w-sunken); padding: 2px 4px 2px 10px;
  overflow-y: auto; flex: 0 1 auto !important; min-height: 0;
}
html body #tm-dashboard .tm-recent-list > .tm-muted { padding: 12px 2px !important; }
html body #tm-dashboard .tm-recent-row { padding-right: 14px !important; }
/* row ends stay clear of the scrollbar: lists that scroll reserve the lane on desktop,
   and phones (overlay scrollbars) get end padding instead */
html body :is(.tm-saved-scroll, .tm-feed-list) { scrollbar-gutter: auto; }
html body .tm-feed-sugg { padding-right: 14px !important; }

/* Win98 scrollbars only where a fine pointer draws a classic scrollbar; touch keeps
   the platform's overlay bars, so no lane eats the right edge on a phone */
@media (hover: hover) and (pointer: fine) {
  html body ::-webkit-scrollbar { width: 14px; height: 14px; }
  html body ::-webkit-scrollbar-track { background: var(--w-face); }
  html body ::-webkit-scrollbar-thumb { background: var(--w-face-up); box-shadow: inset 1px 1px 0 var(--w-hi), inset -1px -1px 0 var(--w-lo), inset 2px 2px 0 var(--w-hi2), inset -2px -2px 0 var(--w-lo2); }
  html body ::-webkit-scrollbar-corner { background: var(--w-face); }
  html body #tm-dashboard :is(.tm-recent-list, .tm-feed-list) { scrollbar-gutter: stable; scrollbar-width: auto !important; }
}

/* ---------------------------------------------------------------- footer pairs (saved / more, dash / change default) */
html body :is(#tm-dashboard, .tm-app:has(#tm-active-view)) > .tm-btn-pair .tm-btn {
  min-height: 34px; border-radius: 0 !important; background: var(--w-face-up) !important; box-shadow: var(--w-raised) !important; border: 0 !important; line-height: 1.5 !important;
}
html body :is(#tm-dashboard, .tm-app:has(#tm-active-view)) > .tm-btn-pair .tm-btn:hover { background: var(--w-face-hover) !important; }
html body :is(#tm-dashboard, .tm-app:has(#tm-active-view)) > .tm-btn-pair .tm-btn:active { box-shadow: var(--w-pressed) !important; }

/* ---------------------------------------------------------------- dialogs: the same window with a title strip */
html body .tm-overlay { background: var(--overlay); }
html body .tm-modal, html body .tm-modal:not(.tm-similar-modal) {
  border-radius: 0 !important; border: 1px solid var(--w-lo) !important; background: var(--frost-bg-modal) !important;
  box-shadow: var(--w-window) !important;
}
html body .tm-modal h2 {
  border-radius: 0 !important; background: var(--w-strip) !important; color: var(--w-text) !important;
  border-bottom: 1px solid var(--w-lo) !important; box-shadow: inset 0 -1px 0 var(--w-hi2) !important;
}
/* the close ✕: a small raised square */
html body .tm-modal .tm-modal-x {
  border-radius: 0 !important; background: var(--w-face-up) !important; box-shadow: var(--w-raised) !important;
  border: 0 !important; color: var(--w-text) !important; width: 26px; height: 24px;
}
html body .tm-modal .tm-modal-x:active { box-shadow: var(--w-pressed) !important; }
html body .tm-more-rule, html body hr { border: 0 !important; border-top: 1px dashed var(--w-dash) !important; }
/* the compare matrix (walls) */
html body .tm-compare, html body .tm-compare table, html body .tm-li-table { border-radius: 0 !important; }
html body :is(.tm-compare, .tm-wall-modal) :is(td, th) { border-color: var(--w-dash) !important; }

/* ---------------------------------------------------------------- cards and panels anywhere */
html body :is(.tm-card, .tm-panel, .tm-banner, .tm-plan, .tm-plan-card, .tm-follows-gate, .tm-v1-welcome, .tm-taste-sub) { border-radius: 0 !important; }
html body :is(.tm-card, .tm-panel, .tm-plan-card) { box-shadow: var(--w-etched) !important; border: 0 !important; background: transparent !important; }
html body .tm-toast { border-radius: 0 !important; background: var(--w-face-up) !important; color: var(--w-text) !important; box-shadow: var(--w-raised), 0 6px 18px rgba(0,0,0,.35) !important; border: 0 !important; }

/* ---------------------------------------------------------------- results shell + saved set page */
html body .tm-topbar .tm-bracket {
  display: inline-block; padding: 4px 10px; background: var(--w-face-up); color: var(--w-text);
  box-shadow: var(--w-raised); font-size: var(--fs-meta); line-height: 1.4; text-decoration: none;
}
html body .tm-topbar .tm-bracket::before, html body .tm-topbar .tm-bracket::after { content: none !important; }
html body .tm-topbar .tm-bracket:hover { color: var(--accent); text-decoration: none; }
html body .tm-topbar .tm-bracket:active { box-shadow: var(--w-pressed); }
html body .tm-topbar .tm-bracket.saved { color: var(--accent); }
html body .tm-topbar-sticky.is-stuck { background: var(--sheet-ink) !important; border-bottom: 1px solid var(--w-lo) !important; }

/* ---------------------------------------------------------------- landing */
html body .tm-cta { padding-top: 14px !important; padding-bottom: 14px !important; }
html body .tm-cta .tm-cta-sub { color: var(--w-dim) !important; }
html body .tm-fd-theme-opt.is-on { color: var(--accent); }

/* ============================================================================
   sweep fixes (2026-10-29): every surface captured in both themes by six agents;
   what they found not yet converted, or broken by the layer, is covered here.
   ============================================================================ */

/* ---- dialogs: no reserved scrollbar lane (the title strip ran 14px short), the strip
   sits inside the frame's bevel, a hover face on the ✕, a dotted focus inside it ---- */
html body .tm-overlay .tm-modal, html body .tm-modal { scrollbar-gutter: auto !important; }
html body .tm-modal > h2 { margin-top: 3px !important; margin-left: calc(3px - var(--sheet-pad, 16px)) !important; margin-right: calc(3px - var(--sheet-pad, 16px)) !important; }
html body .tm-modal .tm-modal-x:hover { background: var(--w-face-hover) !important; }
html body .tm-modal .tm-modal-x:focus-visible { outline: 1px dotted currentColor !important; outline-offset: -4px !important; }
html body .tm-wall-modal .tm-wall-doors { margin-left: -13px !important; margin-right: -13px !important; margin-bottom: 3px !important; }
html body .tm-wall-later .tm-linklike { color: var(--w-dim) !important; }
html body .tm-modal .tm-input-status.warn { color: var(--error) !important; }
html body #tm-spotify-form:has(#tm-spotify-status.warn:not([hidden])) .tm-spot-dock { box-shadow: var(--w-etched), 0 0 0 1px var(--error) !important; }
html body .tm-similar-modal :is(#tm-similar-loading, #tm-similar-msg, .tm-chips) { background: transparent !important; }
html body #tm-similar-back { border: 0 !important; border-radius: 0 !important; background: var(--w-face-up) !important; box-shadow: var(--w-raised) !important; color: var(--w-text) !important; }
html body #tm-similar-back:hover { background: var(--w-face-hover) !important; }
html body #tm-similar-back:active { box-shadow: var(--w-pressed) !important; }
html body .tm-taste-or::before, html body .tm-taste-or::after { border-top: 1px dashed var(--w-dash) !important; }
html body #tm-howto .tm-ht-api { color: var(--accent) !important; }
html body .tm-monthly-list { border: 0 !important; border-radius: 0 !important; background: var(--w-field) !important; box-shadow: var(--w-sunken) !important; color: var(--w-text); }
html body :is(.tm-input, .tm-textarea):not(#tm-mix-url):not(#tm-tracklist):not(#tm-spotify-url)[aria-invalid="true"] { box-shadow: var(--w-sunken), 0 0 0 1px var(--error) !important; }
html[data-theme="light"] body :is(.tm-input, .tm-textarea)::placeholder { color: #6e6e6e; opacity: 1; }

/* ---- the auth popup's v1 note, the compare matrix (walls, landing more info) ---- */
html body .tm-v1-welcome { background: transparent !important; border: 0 !important; box-shadow: var(--w-etched) !important; }
html body .tm-v1-welcome p:first-child { color: var(--w-text) !important; }
html body .tm-compare { border: 0 !important; background: var(--w-field) !important; box-shadow: var(--w-sunken) !important; padding: 2px; }
html body .tm-compare :is(th, td) { background: transparent !important; border-bottom-style: dashed !important; border-bottom-color: var(--w-dash) !important; }
html body .tm-compare tr:last-child td { border-bottom: 0 !important; }
html body .tm-compare thead th, html body .tm-compare th.col-sub { background: var(--w-face-up) !important; color: var(--w-text) !important; box-shadow: var(--w-raised) !important; border-bottom: 0 !important; }
html body .tm-compare thead th:last-child, html body .tm-compare th.col-sub { color: var(--accent) !important; }

/* ---- checkboxes everywhere: square sunken wells with a tick in the accent ---- */
html body input[type="checkbox"]:is(.tm-set-check, .tm-watch-check) {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; width: 16px; height: 16px;
  border: 0; border-radius: 0; background: var(--w-field); box-shadow: var(--w-sunken);
  display: inline-grid; place-content: center; cursor: pointer;
}
html body input[type="checkbox"]:is(.tm-set-check, .tm-watch-check)::before {
  content: ""; width: 8px; height: 4px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-1px) rotate(-45deg); visibility: hidden;
}
html body input[type="checkbox"]:is(.tm-set-check, .tm-watch-check):checked::before { visibility: visible; }
html body input[type="checkbox"]:is(.tm-set-check, .tm-watch-check):disabled { background: var(--w-face); cursor: default; }
html body input[type="checkbox"]:is(.tm-set-check, .tm-watch-check):focus-visible { outline: 1px dotted var(--w-text); outline-offset: 2px; }

/* ---- account header: the plan status is a flat status panel, upgrade keeps its accent ---- */
html body #tm-dashboard .tm-dash-head > .tm-chip:is(:hover, :active, :focus-visible) { color: var(--accent) !important; }
html body #tm-dashboard .tm-dash-head > .tm-subscribed { background: transparent !important; box-shadow: inset 1px 1px 0 var(--w-lo2), inset -1px -1px 0 var(--w-hi) !important; }
html[data-theme="light"] body #tm-dashboard .tm-dash-head > :is(.tm-chip, .tm-subscribed) { color: #862c14 !important; }
html body #tm-dashboard .tm-banner { background: var(--w-field) !important; border: 0 !important; border-radius: 0 !important; box-shadow: var(--w-sunken) !important; font-size: var(--fs-meta); }

/* ---- every raised control the first pass missed: source chips (shared rows, saved
   tracks, landing preview), list open / del / no / yes, followed-artist chips, the
   saved-set load more, the mix chooser, the set-page bracket links, close glyphs ---- */
html body :is(.tm-src-chip, .tm-track-details .tm-ra-btn, .tm-follow-chip, .tm-loadmore-row, .tm-set-item, .v2-arrow, [id="copyButton"]) {
  border: 0 !important; border-radius: 0 !important; background: var(--w-face-up) !important; color: var(--w-text) !important;
  box-shadow: var(--w-raised) !important; text-decoration: none !important;
}
html body :is(.tm-src-chip, .tm-track-details .tm-ra-btn, .tm-follow-chip, .tm-loadmore-row, .tm-set-item, .v2-arrow, [id="copyButton"]):not(:disabled):hover {
  background: var(--w-face-hover) !important; color: var(--w-text) !important;
}
html body :is(.tm-src-chip, .tm-track-details .tm-ra-btn, .tm-follow-chip, .tm-loadmore-row, .tm-set-item, .v2-arrow, [id="copyButton"]):not(:disabled):active {
  box-shadow: var(--w-pressed) !important;
}
/* list open / del / no / yes: their own rules (inside the shared list their :not() chain outranked the selected-chip and disabled rules) */
html body .tm-list-row .actions :is(a:not(.tm-store):not(.tm-yt-play):not(.tm-similar), .tm-del-yes, .tm-del-no) {
  border: 0 !important; border-radius: 0 !important; background: var(--w-face-up) !important; color: var(--w-text) !important;
  box-shadow: var(--w-raised) !important; text-decoration: none !important; padding: 4px 10px !important;
}
html body .tm-list-row .actions :is(a:not(.tm-store):not(.tm-yt-play):not(.tm-similar), .tm-del-yes, .tm-del-no):hover { background: var(--w-face-hover) !important; color: var(--w-text) !important; }
html body .tm-list-row .actions :is(a:not(.tm-store):not(.tm-yt-play):not(.tm-similar), .tm-del-yes, .tm-del-no):active { box-shadow: var(--w-pressed) !important; }
html body .tm-src-chip.is-on, html body .tm-src-chip.is-on:hover { background: var(--w-field) !important; box-shadow: var(--w-pressed) !important; color: var(--accent) !important; }
html body .tm-loadmore-row:disabled { color: var(--w-dim) !important; opacity: 1 !important; }
html body .tm-follow-chip img { border-radius: 0 !important; }
html body .tm-saved-set .tm-confirm { white-space: nowrap; }
html body .tm-saved-set.confirming .actions { flex: none; }
html body .tm-library-footer .tm-btn { line-height: 1.5 !important; }
html body .v2-dot { border-radius: 0 !important; }
html body .tm-record-exit {
  border-radius: 0 !important; border: 0 !important; background: var(--w-face-up) !important; color: var(--w-text) !important;
  box-shadow: var(--w-raised) !important; width: 28px !important; height: 26px !important;
}
html body .tm-record-exit:hover { background: var(--w-face-hover) !important; color: var(--w-text) !important; }
html body .tm-record-exit:active, html body .tm-demo-mute.is-muted { box-shadow: var(--w-pressed) !important; }
html body .tm-bracket { display: inline-block; padding: 4px 10px; background: var(--w-face-up); color: var(--w-text); box-shadow: var(--w-raised); font-size: var(--fs-meta); line-height: 1.4; text-decoration: none; }
html body .tm-bracket::before, html body .tm-bracket::after { content: none !important; }
html body .tm-bracket:hover { color: var(--accent); text-decoration: none; }
html body .tm-bracket:active { box-shadow: var(--w-pressed); }
html body .tm-topbar .tm-bracket.tm-save-edit { background: var(--w-field); box-shadow: var(--w-sunken), 0 0 0 1px var(--accent); }
html body .tm-topbar .tm-save-edit .tm-save-input:focus-visible { outline: none !important; }
html body .tm-topbar-sticky.is-stuck { -webkit-backdrop-filter: blur(20px) saturate(1.05); backdrop-filter: blur(20px) saturate(1.05); }
@media (max-width: 640px) { html body [id="tm-loadmore"] { width: calc(100% - 16px); margin-left: 8px; margin-right: 8px; } }

/* ---- lists: one dashed rule per saved track block (no double rule) ---- */
html body .tm-track-block > .tm-track-row { border-bottom: 0 !important; }
html body .tm-track-block { border-bottom: 1px dashed var(--w-dash) !important; }
html body .tm-track-block:last-child { border-bottom-color: transparent !important; }

/* ---- quiet text that fell below 4.5:1 on the charcoal window ---- */
html:not([data-theme="light"]) body :is(.tm-shared-src-lead, .tm-src-sep, .tm-fd-theme-opt:not(.is-on), .tm-li-preview .tm-pv-ra-none) { color: #8f8f8f !important; }
html body .tm-fd-theme-opt.is-on { color: var(--accent) !important; }

/* ---- pages outside the app window: payment return, subscribe, reset, terms, poll,
   monthly pick get the same window material ---- */
html body .tm-main:has(> .tm-center > h1.tm-wordmark + .tm-intro + .tm-chips) { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 16px; }
html body .tm-main > .tm-center:has(> h1.tm-wordmark + .tm-intro + .tm-chips) {
  min-height: 0 !important; width: min(400px, 100%); gap: 14px; padding: 0 20px 20px !important;
  background: var(--w-win); border: 1px solid var(--w-lo); box-shadow: var(--w-window);
  -webkit-backdrop-filter: blur(20px) saturate(1.05); backdrop-filter: blur(20px) saturate(1.05);
}
html body .tm-main > .tm-center:has(> h1.tm-wordmark + .tm-intro + .tm-chips) > h1.tm-wordmark {
  align-self: stretch; margin: 3px -17px 0; padding: 10px 14px; text-align: left; background: var(--w-strip); color: var(--w-text);
  border-bottom: 1px solid var(--w-lo); box-shadow: inset 0 -1px 0 var(--w-hi2); font-size: var(--fs-title);
}
html body :is(.tm-center > .tm-box, .poll-card, .trackmatch-container, .tm-main > div[style*='max-width:720px']:has(> h1)) {
  border-radius: 0 !important; border: 1px solid var(--w-lo) !important; background: var(--w-win) !important; box-shadow: var(--w-window) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.05); backdrop-filter: blur(20px) saturate(1.05);
}
html body .tm-main > div[style*='max-width:720px']:has(> h1) { margin: 24px auto !important; padding: 28px 22px !important; }
html body .trackmatch-container { color: var(--w-dim) !important; }
html body .trackmatch-container #tracklist { border-radius: 0 !important; border: 0 !important; background: var(--w-field) !important; box-shadow: var(--w-sunken) !important; color: var(--w-text) !important; }
html body .trackmatch-container > div[style*='font-size:10px'] { color: var(--w-dim) !important; }
html body .tm-shell.tm-app:has(#tm-reset-invalid) {
  position: relative; padding: 22px 20px !important; border-radius: 0 !important; background: var(--w-win) !important; border: 1px solid var(--w-lo) !important;
  box-shadow: var(--w-window) !important; -webkit-backdrop-filter: blur(20px) saturate(1.05); backdrop-filter: blur(20px) saturate(1.05);
}

/* ---- landing: more info preview + benchmarks, the open door, more info open ---- */
html body :is(.tm-li-preview, .tm-li-bench-item) { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: var(--w-etched) !important; }
html body .tm-li-bench-item.is-best { box-shadow: inset 0 0 0 1px var(--accent) !important; }
html body .tm-li-preview :is(.track-row, .result-block.tm-open) { border-bottom-style: dashed !important; border-bottom-color: var(--w-dash) !important; }
html body .tm-li-preview .result-block.tm-open .track-row { border-bottom-color: transparent !important; }
html body #tm-fd-moreinfo.is-open { color: var(--accent) !important; box-shadow: var(--w-pressed) !important; }
html body .tm-cta.is-active { box-shadow: var(--w-pressed) !important; }

/* ---- the watch demo popup: the window material and a title strip ---- */
html body .tm-demo .tm-demo-stage { background: var(--frost-bg-modal); border: 1px solid var(--w-lo); box-shadow: var(--w-window); padding: 0 8px 8px; gap: 8px; }
html body .tm-demo .tm-demo-top { background: var(--w-strip); margin: 0 -8px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--w-lo); box-shadow: inset 0 -1px 0 var(--w-hi2); }
html body .tm-demo .tm-demo-label { color: var(--w-text); }
html body .tm-demo .tm-demo-frame { border: 0 !important; box-shadow: var(--w-sunken) !important; padding: 2px; }

/* ---- verification fixes (2026-10-29, second pass) ---- */
/* a disabled default button: opaque face, grey label (beats the generic disabled rule) */
html body :is(.tm-btn.inverted, .tm-chip.solid, .tm-modal .tm-dock-go, .tm-btn.solid):disabled:disabled { opacity: 1 !important; color: #6b6b6b !important; text-shadow: 1px 1px 0 #fff; cursor: default; }
/* the artist info / similar window has no side padding: its strip sits 3px inside the frame */
html body .tm-modal.tm-similar-modal > h2 { margin: 3px 3px 0 !important; }
/* light: coral text on a raised grey face takes the deeper coral (5:1) */
html[data-theme="light"] body :is(.tm-chip.accent.accent, .tm-chip.accent.accent:not(:disabled):hover, .tm-bracket.saved, .tm-bracket:hover, #tm-fd-moreinfo.is-open, .tm-cta.is-active .tm-cta-title, .tm-compare th.col-sub, .tm-compare thead th:last-child, .tm-src-chip.is-on) { color: #862c14 !important; }
/* quiet text that fell under 4.5:1 */
html:not([data-theme="light"]) body :is(.tm-follow-chip-note, .tm-fd-links .tm-linklike, .tm-fd-linksep, .tm-fd-theme-sep, .v2-counter, .poll-card s) { color: #8f8f8f !important; opacity: 1 !important; }
html body .tm-taste-or { color: var(--w-dim) !important; }
html body .trackmatch-container div[style*='color:#888'] { color: var(--w-dim) !important; }
/* the toast takes the width it needs (up to its inline cap) instead of half the screen */
html body .tm-toast { width: max-content; }
/* reset page: a window sized to its message, with the side gutter; terms keeps a gutter on phones */
html body .tm-shell.tm-app:has(#tm-reset-invalid) { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin: auto !important; width: min(420px, calc(100% - 32px)) !important; box-sizing: border-box; }
html body .tm-shell.tm-app:has(#tm-reset-invalid) > .tm-center { min-height: 0 !important; height: auto !important; flex: 0 0 auto !important; }
html body .tm-main > div[style*='max-width:720px']:has(> h1) { width: calc(100% - 32px); box-sizing: border-box; }
@media (max-width: 359px) {
  html body .tm-compare :is(th, td) { padding-left: 4px !important; padding-right: 4px !important; }
  html body .tm-tagline-icons { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
}

/* ---- 2026-10-29 batch: the dashboard frame, more texture, hearts ---- */
/* the app window (dashboard + library): no outer frame; the grey inner rule is the
   edge, the window sits closer to the screen edges, and it is more see-through so
   the background texture comes through (controls, fields and the recent-activity
   list keep their own faces) */
:root, html[data-theme="light"], html[data-theme="dark"] { --w-win-app: rgba(30, 30, 32, .56); --w-app-blur: blur(6px) saturate(1.05); }
html[data-theme="light"] { --w-win-app: rgba(214, 214, 212, .66); }
html body :is(#tm-dashboard:not([hidden]), .tm-shell.tm-app:has(#tm-active-view)) {
  border: 0 !important; box-shadow: none !important; background: var(--w-win-app) !important;
  -webkit-backdrop-filter: var(--w-app-blur) !important; backdrop-filter: var(--w-app-blur) !important;
}
html body :is(#tm-dashboard:not([hidden]), .tm-shell.tm-app:has(#tm-active-view))::before { inset: 0 !important; }
html body #tm-dashboard:not([hidden]) { padding: 16px !important; }
@media (max-width: 640px) {
  html body .tm-vcenter { padding: 6px 0 max(10px, env(safe-area-inset-bottom, 0px)) !important; }
  html body .tm-vcenter > .tm-shell.tm-app { padding-left: 6px !important; padding-right: 6px !important; height: calc(100svh - 6px - max(10px, env(safe-area-inset-bottom, 0px))) !important; }
  html body #tm-dashboard:not([hidden]), html body .tm-shell.tm-app:has(#tm-active-view) { padding: 12px 12px !important; }
}
/* hearts: the glyph in the accent, a liked heart an accent ring and glyph (no grey slab) */
html body .tm-heart-count .tm-heart-glyph, html body .tm-heart-glyph { color: var(--accent); }
html body .tm-track-row .actions .tm-heart.liked { background: transparent !important; color: var(--accent) !important; border-color: var(--accent) !important; }

/* text size reaches the small labels too: the phone caps scale with the setting
   (they stopped at a fixed vw size, so "largest" left them as small as "regular") */
html body .tm-subtab { font-size: min(var(--fs-meta), calc(3.15vw * var(--tm-font-scale))) !important; }
html body .tm-market-item { font-size: min(var(--fs-ui), calc(3.05vw * var(--tm-font-scale))) !important; }
@media (max-width: 359px) { html body .tm-market-item { font-size: min(var(--fs-meta), calc(3.4vw * var(--tm-font-scale))) !important; } }
/* the listen hand-off: the window still dissolves around the orb (the window rule
   above outranks the plain vanish rule, so this one matches it) */
html body :is(#tm-dashboard:not([hidden]), .tm-shell.tm-app:has(#tm-active-view)).tm-dash-vanish {
  background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html body :is(#tm-dashboard:not([hidden]), .tm-shell.tm-app:has(#tm-active-view)).tm-dash-vanish::before { opacity: 0 !important; }
html:has(.tm-overlay.open) body :is(#tm-dashboard:not([hidden]), .tm-shell.tm-app:has(#tm-active-view)) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* the what's-new banner sits where the account line is, until it is closed */
html body #tm-dashboard.tm-banner-on .tm-dash-head { display: none !important; }

/* ---- 2026-10-29 tiny fixes ---- */
/* the heart beside a liked saved track: the label's size, not a step above it */
html body .tm-track-row .label .tm-heart-glyph { font-size: 1em !important; vertical-align: 0 !important; }
/* the landing preview's saved tick / eye: the accent disc, as on results */
html body .tm-li-preview :is(.want-btn, .fav-btn).saved:not(.tm-priv-saved) { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; }
html[data-theme="light"] body .tm-li-preview :is(.want-btn, .fav-btn).saved:not(.tm-priv-saved) { color: #f3f2ee !important; }
/* landing page buttons: translucent faces, so the background texture comes through
   (the bevels stay; sign up keeps a near-solid default face) */
:root, html[data-theme="dark"] { --w-face-glass: rgba(59, 59, 63, .42); --w-face-glass-hover: rgba(70, 70, 75, .6); --w-default-glass: rgba(203, 203, 203, .86); }
html[data-theme="light"] { --w-face-glass: rgba(195, 195, 195, .42); --w-face-glass-hover: rgba(206, 206, 206, .62); --w-default-glass: rgba(195, 195, 195, .86); }
html body .tm-frontdoor :is(.tm-cta, .tm-chip, .tm-btn):not(.solid):not(.inverted) { background: var(--w-face-glass) !important; }
html body .tm-frontdoor :is(.tm-cta, .tm-chip, .tm-btn):not(.solid):not(.inverted):not(:disabled):hover { background: var(--w-face-glass-hover) !important; }
html body .tm-frontdoor :is(.tm-chip.solid, .tm-btn.inverted, .tm-btn.solid) { background: var(--w-default-glass) !important; }


/* ---- 2026-10-29 (after release): scan / match back to the pale default button at
   every state, like spotify's "search →" (greyed label while invalid) ---- */
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn,
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn:disabled {
  background: var(--w-default) !important; color: var(--w-default-text) !important;
  outline: 1px solid #000 !important; outline-offset: 0 !important; box-shadow: var(--w-default-bevel) !important;
}
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn:not(:disabled):hover { background: var(--w-default-hover) !important; }
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn:disabled { color: #6b6b6b !important; text-shadow: 1px 1px 0 #fff; }
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn:not(:disabled):active {
  box-shadow: inset 1px 1px 0 #0a0a0a, inset -1px -1px 0 #fff, inset 2px 2px 0 #7a7a7a, inset -2px -2px 0 #e6e6e6 !important;
}

/* dark only: the app window's raised buttons (main tabs, saved / more, upload.txt,
   the feed's "scan this mix", the shared buttons) take translucent faces like the
   landing page, so the texture comes through; sub-tabs, the selected tab, popups and
   the pale default buttons keep their faces */
html:not([data-theme="light"]) body :is(#tm-dashboard, .tm-app:has(#tm-active-view)) :is(.tm-tab:not(.active), .tm-btn:not(.inverted):not(.solid), .tm-chip:not(.solid), .tm-upload, .tm-src-chip:not(.is-on), .tm-list-row .actions a:not(.tm-store):not(.tm-yt-play):not(.tm-similar)) {
  background: var(--w-face-glass) !important;
}
html:not([data-theme="light"]) body :is(#tm-dashboard, .tm-app:has(#tm-active-view)) :is(.tm-tab:not(.active), .tm-btn:not(.inverted):not(.solid), .tm-chip:not(.solid), .tm-upload, .tm-src-chip:not(.is-on), .tm-list-row .actions a:not(.tm-store):not(.tm-yt-play):not(.tm-similar)):not(:disabled):hover {
  background: var(--w-face-glass-hover) !important;
}

/* ---- 2026-10-30 QA ----
   the pale scan / match and spotify "search →" buttons: the sub-tabs' and saved /
   more's 34px, not 36 */
html body #tm-dashboard .tm-dock .tm-textarea-actions > #tm-search-btn,
html body .tm-modal .tm-spot-dock .tm-dock-go { min-height: 34px !important; height: 34px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* the selected main tab (dashboard + saved) sits pressed in: dark = the black field
   and the accent label like an "on" marketplace chip; light keeps its white well and
   takes the coral label */
html:not([data-theme="light"]) body :is(#tm-dashboard, .tm-app:has(#tm-active-view), .tm-app) .tm-tab.active {
  background: var(--w-field) !important; color: var(--accent) !important;
  box-shadow: var(--w-pressed) !important; outline: 0 !important;
}
html[data-theme="light"] body :is(#tm-dashboard, .tm-app:has(#tm-active-view), .tm-app) .tm-tab.active { color: #862c14 !important; }
/* translucent faces in both themes: the dashboard / saved window (the dark-only rule
   above, now light too) and the results page's own buttons (dash, save, load more);
   the frame's buttons take the same faces in result-frame.js. Popups and the more
   menu keep their solid faces. */
html[data-theme="light"] body :is(#tm-dashboard, .tm-app:has(#tm-active-view)) :is(.tm-tab:not(.active), .tm-btn:not(.inverted):not(.solid), .tm-chip:not(.solid), .tm-upload, .tm-src-chip:not(.is-on), .tm-list-row .actions a:not(.tm-store):not(.tm-yt-play):not(.tm-similar)) {
  background: var(--w-face-glass) !important;
}
html[data-theme="light"] body :is(#tm-dashboard, .tm-app:has(#tm-active-view)) :is(.tm-tab:not(.active), .tm-btn:not(.inverted):not(.solid), .tm-chip:not(.solid), .tm-upload, .tm-src-chip:not(.is-on), .tm-list-row .actions a:not(.tm-store):not(.tm-yt-play):not(.tm-similar)):not(:disabled):hover {
  background: var(--w-face-glass-hover) !important;
}
html body:has(#tm-result-frame) :is(.tm-topbar .tm-bracket, .tm-loadmore-row) { background: var(--w-face-glass) !important; }
html body:has(#tm-result-frame) :is(.tm-topbar .tm-bracket, .tm-loadmore-row):not(:disabled):hover { background: var(--w-face-glass-hover) !important; }

/* the landing / login "trackmatch" title in bold (2026-11-01): same face and size */
html body h1.tm-wordmark.tm-wordmark-fd { font-weight: 700 !important; }

/* the monthly pick's "new" dot (2026-11-01): on its chip in more and on the more
   button, until this device opens the pick (_monthly.html) */
html body .tm-monthly-dot { display: inline-block; width: 6px; height: 6px; margin: 0 0 1px 6px; border-radius: 50% !important; background: var(--accent); vertical-align: middle; }
html body .tm-monthly-dot[hidden] { display: none !important; }