/* INDEX dashboard — material depth pass
   Additive overrides only. Layout and application behavior stay untouched. */

:root {
  /* Preserve the Figma shell depth with the shared INDEX palette. */
  --main-bg: var(--index-night);
  --panel: var(--index-charcoal);
  --viewport-top: var(--index-charcoal);
  --viewport-glow: rgba(108, 134, 181, 0.045);
  --viewport-shadow: 0 22px 58px rgba(0, 0, 0, 0.44);
  --tab-grey: var(--index-slate);
  --tab-text: var(--index-text-on-dark);
  --tab-text-on: var(--index-ice);
  --idx-edge-hi: rgba(255, 255, 255, 0.11);
  --idx-edge-lo: rgba(0, 0, 0, 0.62);
  --idx-elev-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 7px 18px rgba(0, 0, 0, 0.24);
  --idx-elev-2: 0 2px 4px rgba(0, 0, 0, 0.34), 0 14px 36px rgba(0, 0, 0, 0.34);
  --idx-elev-3: 0 4px 8px rgba(0, 0, 0, 0.32), 0 28px 72px rgba(0, 0, 0, 0.52);
  --idx-inset: inset 0 1px 0 var(--idx-edge-hi), inset 0 -1px 0 rgba(0, 0, 0, 0.34);
  --idx-blue-shadow: 0 10px 28px rgba(77, 102, 137, 0.18);
  --idx-focus: 0 0 0 3px rgba(108, 134, 181, 0.15);
}

[data-theme="light"] {
  --main-bg: var(--index-ice);
  --panel: var(--index-paper);
  --viewport-top: var(--index-paper);
  --viewport-glow: rgba(77, 102, 137, 0.045);
  --viewport-shadow: 0 1px 4px rgba(51, 59, 73, 0.04);
  --tab-grey: var(--index-mist);
  --tab-text: var(--index-graphite);
  --tab-text-on: var(--index-slate);
  --idx-edge-hi: rgba(255, 255, 255, 0.92);
  --idx-edge-lo: rgba(51, 59, 73, 0.11);
  --idx-elev-1: 0 1px 2px rgba(51, 59, 73, 0.04);
  --idx-elev-2: 0 2px 5px rgba(51, 59, 73, 0.06);
  --idx-elev-3: 0 4px 12px rgba(51, 59, 73, 0.10);
  --idx-inset: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --idx-blue-shadow: 0 0 0 transparent;
  --card-shadow: var(--idx-elev-1);
  --card-shadow-hover: var(--idx-elev-2);
  --idx-focus: 0 0 0 3px rgba(77, 102, 137, 0.13);
}

/* ── App shell: separate the tab rail, panel, and canvas ───────────── */
.main {
  isolation: isolate;
  background:
    radial-gradient(70% 46% at 50% -12%, rgba(108, 134, 181, 0.075), transparent 72%),
    var(--main-bg);
}

/* The viewport shadow is its own lower plane: shadow → tabs → viewport. */
@media (min-width: 741px) {
  .main::before {
    content: '';
    position: absolute;
    inset: 75px 2% 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 10px;
    box-shadow: var(--viewport-shadow);
  }
}

.topbar.fhead {
  /* The shell panel owns the foreground plane; tabs tuck behind it. */
  z-index: auto;
  filter: none;
}

.ftabs {
  z-index: 1;
  /* Browser zoom reduces the CSS viewport just like a narrower window. Let
     the Figma rail own the remaining header space instead of forcing the
     search/actions off-canvas. The tab engine scales its paths to this box. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

.fnav-svg path {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.035));
}

.fl.on {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.fl:focus-visible {
  outline: 1px solid rgba(108, 134, 181, 0.82);
  outline-offset: -5px;
  border-radius: 7px;
}

.fhead-pf {
  position: relative;
  z-index: 4;
  margin-top: 11px;
  margin-right: 16px;
}

.panel-tools,
.fhead-logo {
  position: relative;
  z-index: 4;
}

.fhead-pf .pfp-btn {
  width: 48px;
  height: 48px;
  border: 1px solid var(--pfp-border);
  box-shadow: var(--idx-inset), 0 8px 20px rgba(0, 0, 0, 0.24);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.fhead-pf .pfp-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(108, 134, 181, 0.38);
  box-shadow: var(--idx-inset), var(--idx-elev-2);
}

.body {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background:
    linear-gradient(180deg, var(--viewport-top) 0%, color-mix(in srgb, var(--index-charcoal) 80%, var(--index-night)) 19%, color-mix(in srgb, var(--index-charcoal) 30%, var(--index-night)) 58%, var(--index-night) 100%);
  border-color: rgba(255, 255, 255, 0.075);
  border-top-color: transparent;
  /* Keep the Figma panel silhouette within REQ-048's crisp ≤10px contract. */
  border-radius: 10px;
  margin-top: -21px;
  box-shadow: none;
}

.view.active {
  background:
    linear-gradient(var(--viewport-top), var(--viewport-top)) top / 100% 24px no-repeat,
    radial-gradient(90% 60% at 50% -26%, var(--viewport-glow), transparent 65%);
}

.fhead-logo {
  margin-top: 16px;
}

.fhead-logo img {
  height: 32px;
}

/* Intermediate desktop states keep browser zoom (125–175%) usable without
   prematurely switching a desktop user into the phone navigation. */
@media (min-width: 741px) and (max-width: 1180px) {
  .topbar.fhead {
    padding-left: 16px;
    padding-right: 16px;
  }

  .fhead-pf {
    margin-left: 2px;
    margin-right: 10px;
  }

  .panel-tools .topbar-search {
    display: none;
  }
}

@media (min-width: 741px) and (max-width: 980px) {
  .fhead-logo {
    display: none;
  }

  .panel-tools {
    gap: 6px;
    padding-right: 0;
  }
}

[data-theme="light"] .main {
  background:
    radial-gradient(70% 46% at 50% -12%, rgba(77, 102, 137, 0.055), transparent 72%),
    var(--main-bg);
}

[data-theme="light"] .topbar.fhead {
  /* A filter creates a stacking context that traps the profile dropdown below
     the viewport. Keep the header unfiltered so its z-indexed controls can
     rise above the panel while the tabs remain underneath it. */
  filter: none;
}

[data-theme="light"] .body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 15%),
    var(--panel);
  border-color: rgba(51, 59, 73, 0.08);
  border-top-color: transparent;
  border-radius: 10px;
}

/* ── Board cards: dimensional steel/glass surfaces ─────────────────── */
.board-card {
  border-color: color-mix(in srgb, var(--card-border) 84%, rgba(108, 134, 181, 0.16));
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105) 0%, rgba(255, 255, 255, 0.038) 30%, rgba(255, 255, 255, 0.012) 66%),
    linear-gradient(180deg, rgba(108, 134, 181, 0.025), transparent 46%),
    var(--card-bg);
  box-shadow: var(--card-shadow), inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

.board-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(108, 134, 181, 0.20), transparent 34%) top left / 46% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 50%) top left / 1px 68% no-repeat;
  opacity: 0.65;
}

.board-card:hover {
  border-color: color-mix(in srgb, var(--teal) 38%, var(--card-border-hover));
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.018) 66%),
    linear-gradient(180deg, rgba(108, 134, 181, 0.055), transparent 50%),
    var(--card-bg-hover);
  box-shadow: var(--card-shadow-hover), var(--idx-blue-shadow), inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

.board-card:focus-visible,
.board-add-tile:focus-visible,
.lib-card:focus-visible,
.chat-row:focus-visible {
  outline: 0;
  border-color: var(--teal);
  box-shadow: var(--idx-focus), var(--idx-elev-2);
}

.board-card-name {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
  font-weight: 600;
  text-shadow: none;
}

.board-card-structure {
  filter: drop-shadow(0 8px 11px rgba(0, 0, 0, 0.38));
}

.board-card:hover .board-card-structure {
  filter: drop-shadow(0 10px 14px rgba(77, 102, 137, 0.30));
}

.board-tag-chip,
.board-badge {
  background: rgba(8, 9, 12, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.board-card-images {
  position: relative;
  z-index: 3;
}

.bci-thumb {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, rgba(108, 134, 181, 0.14), rgba(0, 0, 0, 0.14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 12px rgba(0, 0, 0, 0.18);
}

.board-add-tile {
  background-color: rgba(255, 255, 255, 0.012);
  box-shadow: inset 0 1px 18px rgba(0, 0, 0, 0.12);
  transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.board-add-tile:hover {
  color: var(--teal);
  background-color: rgba(108, 134, 181, 0.045);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 18px rgba(0, 0, 0, 0.10), 0 10px 24px rgba(0, 0, 0, 0.20);
}

[data-theme="light"] .board-card-name {
  color: var(--text);
  text-shadow: none;
}

[data-theme="light"] .board-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.30) 58%, rgba(233, 239, 248, 0.28)),
    var(--card-bg);
  box-shadow: var(--card-shadow);
}

[data-theme="light"] .board-card:hover {
  background:
    linear-gradient(145deg, #fff, rgba(255, 255, 255, 0.62) 58%, rgba(233, 239, 248, 0.34)),
    var(--card-bg-hover);
  box-shadow: var(--card-shadow-hover);
}

[data-theme="light"] .board-tag-chip,
[data-theme="light"] .board-badge {
  background: rgba(255, 255, 255, 0.48);
}

/* Pylons are line drawings; a blurred silhouette muddies the light cards. */
[data-theme="light"] .board-card-structure,
[data-theme="light"] .board-card:hover .board-card-structure {
  filter: none;
  text-shadow: none;
}

/* ── Reusable cards and panels ─────────────────────────────────────── */
.home-stat,
.home-panel,
.suggestion-card,
.settings-block,
.search-result-item,
.chat-row,
.lib-card {
  box-shadow: var(--idx-inset), var(--idx-elev-1);
}

.home-stat,
.home-panel,
.suggestion-card,
.settings-block,
.search-result-item {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012) 62%),
    var(--card-bg);
}

.home-stat:hover,
.suggestion-card:hover,
.search-result-item:hover {
  border-color: color-mix(in srgb, var(--teal) 28%, var(--border2));
  box-shadow: var(--idx-inset), var(--idx-elev-2);
}

.home-chip,
.home-starter {
  box-shadow: var(--idx-inset), 0 4px 12px rgba(0, 0, 0, 0.16);
}

.home-chip:hover,
.home-starter:hover {
  border-color: color-mix(in srgb, var(--teal) 38%, var(--border2));
  box-shadow: var(--idx-inset), 0 8px 20px rgba(0, 0, 0, 0.24);
  transform: translateY(-1px);
}

.chat-row {
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.chat-row:hover {
  border-color: color-mix(in srgb, var(--teal) 32%, var(--card-border-hover));
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    var(--card-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--idx-inset), var(--idx-elev-2);
}

.lib-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.02) 64%),
    var(--card-bg);
}

.lib-card::before {
  box-shadow: 0 1px 12px color-mix(in srgb, var(--c) 28%, transparent);
}

.lib-card:hover {
  box-shadow: var(--idx-inset), var(--idx-elev-2), 0 10px 28px color-mix(in srgb, var(--c) 9%, transparent);
}

[data-theme="light"] .home-stat,
[data-theme="light"] .home-panel,
[data-theme="light"] .suggestion-card,
[data-theme="light"] .settings-block,
[data-theme="light"] .search-result-item,
[data-theme="light"] .chat-row,
[data-theme="light"] .lib-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.34)), var(--card-bg);
}

/* ── AI composer: make it the primary raised work surface ─────────── */
.home-composer {
  position: relative;
  border-color: rgba(197, 208, 227, 0.30);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 55%),
    rgba(20, 20, 20, 0.78);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 48px rgba(0, 0, 0, 0.42),
    0 8px 30px rgba(77, 102, 137, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.home-composer:focus-within {
  border-color: rgba(108, 134, 181, 0.64);
  box-shadow:
    var(--idx-focus),
    0 22px 58px rgba(0, 0, 0, 0.48),
    0 10px 34px rgba(77, 102, 137, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.hc-chip,
.hc-iconbtn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.hc-chip:hover,
.hc-iconbtn:hover {
  background: rgba(108, 134, 181, 0.11);
}

.hc-menu,
.hc-bubble.user,
.hc-bubble.ai {
  box-shadow: var(--idx-inset), var(--idx-elev-2);
}

[data-theme="light"] .home-composer {
  border-color: rgba(77, 102, 137, 0.19);
  background: linear-gradient(145deg, #fff, rgba(244, 244, 244, 0.86));
  box-shadow: var(--idx-elev-1);
}

[data-theme="light"] .home-composer:focus-within {
  border-color: rgba(77, 102, 137, 0.56);
  box-shadow: var(--idx-focus), var(--idx-elev-1);
}

/* ── Buttons, filters, and inputs: tactile states ─────────────────── */
.btn,
.lib-seg,
.lib-sort,
.lib-chip,
.boards-layout-toggle,
.ngv-tool,
.set-seg,
.set-select {
  box-shadow: var(--idx-inset), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--idx-inset), 0 7px 16px rgba(0, 0, 0, 0.22);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
}

.btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--index-blue) 75%, var(--index-mist)), var(--index-blue));
  border-color: var(--index-blue);
  color: var(--index-night);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 7px 18px rgba(77, 102, 137, 0.28);
}

.btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--index-blue) 60%, var(--index-mist)), color-mix(in srgb, var(--index-blue) 90%, var(--index-mist)));
  border-color: var(--index-mist);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 24px rgba(77, 102, 137, 0.34);
}

[data-theme="light"] .btn.primary {
  background: linear-gradient(180deg, var(--index-blue-deep), color-mix(in srgb, var(--index-blue-deep) 85%, var(--index-slate)));
  border-color: var(--index-blue-deep);
  color: #fff;
}

[data-theme="light"] .btn.primary:hover:not(:disabled) {
  background: var(--index-blue-deep);
  border-color: var(--index-blue-deep);
}

[data-theme="light"] .fl.on { text-shadow: none; }

.topbar-search input,
.form-input,
.form-textarea,
.form-select,
.settings-row input,
.settings-row select,
.set-select {
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.topbar-search input:focus,
.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.settings-row input:focus,
.settings-row select:focus,
.set-select:focus {
  border-color: var(--teal);
  box-shadow: var(--idx-focus), inset 0 1px 4px rgba(0, 0, 0, 0.22);
}

[data-theme="light"] .btn,
[data-theme="light"] .lib-seg,
[data-theme="light"] .lib-sort,
[data-theme="light"] .lib-chip,
[data-theme="light"] .boards-layout-toggle,
[data-theme="light"] .ngv-tool,
[data-theme="light"] .set-seg,
[data-theme="light"] .set-select {
  box-shadow: var(--idx-elev-1);
}

[data-theme="light"] .topbar-search input,
[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea,
[data-theme="light"] .form-select,
[data-theme="light"] .settings-row input,
[data-theme="light"] .settings-row select,
[data-theme="light"] .set-select {
  box-shadow: none;
}

/* ── Network canvas and board detail: stronger plane separation ───── */
#v-network.active {
  background:
    radial-gradient(circle at 50% 48%, rgba(108, 134, 181, 0.055), transparent 44%),
    radial-gradient(circle at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.18) 100%);
}

.ngv-tool {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)), color-mix(in srgb, var(--panel) 90%, transparent);
}

.ngv-tool:hover,
.ngv-tool.on {
  box-shadow: var(--idx-inset), var(--idx-elev-2), 0 0 0 1px rgba(108, 134, 181, 0.12);
}

.ngv-menu,
.ngv-replay-bar {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.016)), color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow: var(--idx-inset), var(--idx-elev-3);
}

#v-board-detail .bd-doc {
  box-shadow: 18px 0 42px rgba(0, 0, 0, 0.22), inset -1px 0 0 rgba(255, 255, 255, 0.025);
}

#v-board-detail .bd-sidebar {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.035);
}

#v-board-detail .ai-review-strip,
#v-board-detail .bd-summary,
#v-board-detail .bd-chat-link,
#v-board-detail .history-entry {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 5px 15px rgba(0, 0, 0, 0.10);
}

[data-theme="light"] #v-network.active {
  background:
    radial-gradient(circle at 50% 48%, rgba(77, 102, 137, 0.07), transparent 44%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(51, 59, 73, 0.05) 100%);
}

[data-theme="light"] #v-board-detail .bd-doc {
  box-shadow: inset -1px 0 0 rgba(51, 59, 73, 0.08);
}

/* ── Overlays: premium, focused, and visually anchored ────────────── */
.modal-overlay,
.chat-modal-shade,
.set-modal {
  background: rgba(4, 5, 7, 0.72);
  backdrop-filter: blur(10px) saturate(0.82);
  -webkit-backdrop-filter: blur(10px) saturate(0.82);
}

.modal,
.chat-modal-card,
.watch-panel,
.set-panel,
.pfp-dropdown,
.pfp-submenu,
#v-board-detail .bd-more-menu {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), transparent 38%), var(--pfp-bg);
  box-shadow: var(--idx-inset), var(--idx-elev-3);
}

.modal-header,
.chat-modal-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
}

[data-theme="light"] .modal,
[data-theme="light"] .chat-modal-card,
[data-theme="light"] .watch-panel,
[data-theme="light"] .set-panel,
[data-theme="light"] .pfp-dropdown,
[data-theme="light"] .pfp-submenu,
[data-theme="light"] #v-board-detail .bd-more-menu {
  border-color: rgba(51, 59, 73, 0.10);
  background: linear-gradient(145deg, #fff, rgba(244, 244, 244, 0.84)), var(--pfp-bg);
  box-shadow: var(--idx-elev-3);
}

@media (max-width: 740px) {
  .body {
    border-radius: 10px 10px 0 0;
    margin-top: 4px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  .board-card:hover,
  .chat-row:hover,
  .lib-card:hover,
  .home-composer:focus-within { transform: none; }
  [data-theme="light"] .body { box-shadow: none; }
}

/* Light surfaces use borders and shallow elevation, including hover states. */
[data-theme="light"] .board-add-tile,
[data-theme="light"] .board-add-tile:hover,
[data-theme="light"] .bci-thumb,
[data-theme="light"] .lib-card::before { box-shadow: none; }

[data-theme="light"] .fhead-pf .pfp-btn,
[data-theme="light"] .home-chip,
[data-theme="light"] .home-starter,
[data-theme="light"] .verify-banner,
[data-theme="light"] .ngv-tool,
[data-theme="light"] .ngv-replay-bar,
[data-theme="light"] #v-board-detail .ai-review-strip,
[data-theme="light"] #v-board-detail .bd-summary,
[data-theme="light"] #v-board-detail .bd-chat-link,
[data-theme="light"] #v-board-detail .history-entry { box-shadow: var(--idx-elev-1); }

[data-theme="light"] .fhead-pf .pfp-btn:hover,
[data-theme="light"] .home-chip:hover,
[data-theme="light"] .home-starter:hover,
[data-theme="light"] .lib-card:hover,
[data-theme="light"] .btn:hover:not(:disabled),
[data-theme="light"] .btn.primary:hover:not(:disabled) { box-shadow: var(--idx-elev-2); }

[data-theme="light"] .btn:active:not(:disabled),
[data-theme="light"] .btn.primary:active:not(:disabled) { box-shadow: none; }
[data-theme="light"] .hc-menu,
[data-theme="light"] .apop,
[data-theme="light"] .toast,
[data-theme="light"] .ngv-menu,
[data-theme="light"] #v-board-detail .gh-cfg-menu,
[data-theme="light"] .hc-iconbtn[data-tip]::after { box-shadow: var(--idx-elev-3); }

[data-theme="light"] .board-card:focus-visible,
[data-theme="light"] .board-add-tile:focus-visible,
[data-theme="light"] .lib-card:focus-visible,
[data-theme="light"] .chat-row:focus-visible {
  outline: 2px solid var(--index-blue-deep);
  outline-offset: 3px;
  box-shadow: var(--idx-elev-1);
}

[data-theme="light"] .topbar-search input:focus,
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-textarea:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .settings-row input:focus,
[data-theme="light"] .settings-row select:focus,
[data-theme="light"] .set-select:focus { box-shadow: var(--idx-focus); }

@media (prefers-reduced-motion: reduce) {
  .board-card,
  .board-add-tile,
  .chat-row,
  .lib-card,
  .home-composer,
  .btn,
  .fhead-pf .pfp-btn { transition: none !important; }
}