/* Web polish pass (Cale, 2026-10-01 — "functionally excellent, just
   ugly… make it PRETTY", "I just want professional"). Loaded LAST, so it
   refines the per-area sheets rather than replacing them.
     - Everywhere: wallpaper (Cale's web_ art, or a soft accent glow until
       it lands), nicer buttons / inputs / dialogs / scrollbars, motion.
     - Wide (>= 768px): a floating glass app frame — sidebar with logo,
       pill nav and profile chip; content and player as glass panels;
       left-aligned page headers; list rows as cards; desktop layouts for
       Band, Menu, Calendar, Music and Chat.
   Theme tokens only (set in js/core/theme.js) — no literal colours. */

/* ── Backdrop ───────────────────────────────────────────────────────── */
html {
  background:
    radial-gradient(1100px 620px at 8% -12%, var(--accent-soft), transparent 62%),
    radial-gradient(900px 560px at 108% 112%, var(--accent-soft), transparent 60%),
    var(--background);
}
/* Transparent, or body's own background would paint over the wallpaper
   layer below (body::before, z-index -1). */
body { background: transparent; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* The theme's web art: always fills the window from the centre (cover) —
   never stretched, tiled or letterboxed. */
html[data-wallpaper='on'] body::before {
  background: linear-gradient(var(--wallpaper-dim), var(--wallpaper-dim)), var(--wallpaper) center / cover no-repeat;
}
/* Built-in art toned down (Cale, 2026-10-03 — "too dynamic and vibrant"):
   a filter, so the files stay as they are. Starting at medium, every
   built-in wallpaper; custom uploads untouched. The chooser's tiles match. */
:root { --wallpaper-tone: saturate(0.6) brightness(0.85); }
html[data-wallpaper='on'][data-wallpaper-kind='theme'] body::before,
.wallpaper-tile__img--toned { filter: var(--wallpaper-tone); }
#app { position: relative; z-index: 0; }

/* Phone layout (< 768px): the phone app's own background instead of the
   web art (2026-10-01) — flips at the same moment the layout does. Masks
   are tinted with the accent at 40%, photos shown at 60%, like
   mobile's AppBackground; plain theme colour behind, no glow. */
body::after { content: none; }
@media (max-width: 767px) {
  html { background: var(--background); }
  html[data-wallpaper='on'] body::before { background: none; }
  body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
  html[data-phone-wallpaper='photo'] body::after { background: var(--phone-wallpaper) center / cover no-repeat; opacity: 0.6; }
  html[data-phone-wallpaper='mask'] body::after {
    background-color: var(--accent);
    -webkit-mask: var(--phone-wallpaper) center / cover no-repeat;
    mask: var(--phone-wallpaper) center / cover no-repeat;
    opacity: 0.4;
  }
}

/* ── Appearance open: clear the main window (the art shows) ────────── */
.shell__main { transition: opacity 200ms ease-out; }
html.appearance-open .shell__main { opacity: 0; pointer-events: none; }
html.appearance-open .dialog-backdrop:has(.dialog-card--appearance) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dialog-card--appearance { background-color: var(--chrome); -webkit-backdrop-filter: blur(var(--glass-blur, 20px)); backdrop-filter: blur(var(--glass-blur, 20px)); }

/* ── Scrollbars ─────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--accent-border); }

/* ── Buttons / inputs / dialogs ─────────────────────────────────────── */
.btn { border-radius: 12px; transition: transform 120ms ease-out, filter 150ms, box-shadow 150ms, background-color 150ms; }
.btn--primary { border-color: transparent; box-shadow: 0 6px 18px var(--accent-glow); }
.btn--secondary { background: var(--panel); border-color: var(--hairline); }
.btn--primary .mdi { color: var(--on-accent); }
.btn:disabled { opacity: 0.4; box-shadow: none; filter: saturate(0.4); }
@media (hover: hover) {
  .btn--primary:hover:not(:disabled) { filter: brightness(1.08); }
  .btn--secondary:hover:not(:disabled) { background: var(--panel-hover); }
}
.input { background: var(--panel); border-color: var(--hairline); border-radius: 12px; transition: border-color 150ms, box-shadow 150ms; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.icon-button { border-radius: 12px; transition: background-color 150ms, transform 120ms; }
@media (hover: hover) { .icon-button:hover { background: var(--panel-hover); } }

.dialog-backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dialog-card {
  border-radius: 20px;
  border-color: var(--hairline);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  animation: pop-in 160ms ease-out;
}
.dialog-card--menu { padding: 10px; }
.overlay-card { border-radius: 20px; border-color: var(--hairline); box-shadow: var(--shadow-lg); }
.picker-popover, #layers > .picker-popover { border-color: var(--hairline); box-shadow: var(--shadow-lg); }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.segmented { background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px; }
.segmented__option { border-radius: 9px; transition: background-color 150ms, color 150ms; }
.segmented__option--active { box-shadow: var(--shadow-sm); }

/* ── Login / full-page states: a glass card ─────────────────────────── */
.login {
  padding: 32px 28px;
  border-radius: 24px;
  border: 1px solid var(--hairline);
  background: var(--chrome);
  -webkit-backdrop-filter: blur(var(--glass-blur, 24px)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur, 24px)) saturate(160%);
  box-shadow: var(--shadow-lg);
}

/* ── Profile details (inline, all widths) ───────────────────────────── */
.profile-details { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.profile-details__card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 20px; padding: 20px; }
.profile-details__title { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.profile-details__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.profile-details__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.profile-details .roles-block .field__label { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.profile-details .roles-block .roles-list { max-height: none; }
.profile-header__name { cursor: default; }

/* ── Sidebar pieces exist at every width; shown on wide only ────────── */
@media (max-width: 767px) { .tab--wide-only { display: none !important; } }
@media (min-width: 768px) { .tab--narrow-only, .narrow-only { display: none !important; } }
@media (max-width: 767px) { .wide-only { display: none !important; } }
.shell__brand, .shell__me { display: none; }
.shell__tabs { display: contents; }
.tab-sub { display: none; }
@media (max-width: 767px) {
  .tab__badge { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
  .tab { position: relative; }
}
.tab-groups { display: none; }

/* ══ Wide screens ═══════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* App frame: sidebar | content, with the title/player bar along the
     bottom of the content (Cale, 2026-10-02 — was across the top; same bar,
     nothing at the top now). */
  .shell {
    grid-template-columns: 224px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    /* EDE taskbar spans the whole bottom; the sidebar sits on top of it,
       so toggling the rail never moves the taskbar (2026-10-03). */
    grid-template-areas:
      'nav main'
      'player player';
    gap: 12px;
    padding: 12px;
  }
  .shell__nav,
  .shell__main {
    background: var(--chrome);
    -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
    border: 1px solid var(--hairline);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
  }
  .shell__nav {
    padding: 16px 12px 12px;
    gap: 0;
    border-right: 1px solid var(--hairline);
  }
  .shell__brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; }
  .shell__brand .logo-button__img { width: 44px; height: 44px; border-radius: 12px; box-shadow: var(--shadow-sm); }
  .shell__brand .logo-button__badge { border-color: var(--background); }
  .shell__wordmark { display: flex; flex-direction: column; min-width: 0; }
  .shell__wordmark-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
  .shell__wordmark-sub { font-size: 12px; color: var(--text-tertiary); opacity: 0.7; }
  /* Scrolls on its own when every group is expanded; logo stays at the
     top and the profile pill at the bottom (2026-10-01). */
  .shell__nav { min-height: 0; overflow: hidden; }
  .shell__tabs { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px 8px; padding: 0 6px; }

  .tab {
    gap: 14px;
    padding: 11px 14px;
    border-radius: 14px;
    color: var(--text);
    transition: background-color 150ms, color 150ms;
  }
  .tab .tab__icon,
  .tab--active .tab__icon { font-size: 24px !important; width: 24px !important; height: 24px !important; color: var(--text-tertiary); opacity: 0.85; }
  .tab__label, .tab--active .tab__label { font-size: 15px; font-weight: 600; color: var(--text); }
  @media (hover: hover) { .tab:hover { background: var(--panel-hover); } }
  .tab--active { background: var(--accent-soft); }
  .tab--active .tab__icon { color: var(--accent); opacity: 1; }
  .tab--active .tab__label { color: var(--accent); font-weight: 700; }

  .shell__me {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
    background: var(--panel);
    border: 1px solid var(--hairline);
    transition: background-color 150ms;
  }
  .shell__me-text { display: flex; flex-direction: column; min-width: 0; }
  .shell__me-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell__me-sub { font-size: 12px; color: var(--text-tertiary); opacity: 0.7; }
  .shell__me-text { flex: 1; }
  .shell__me .shell__me-cog { color: var(--text-tertiary); opacity: 0.7; transition: transform 300ms, opacity 150ms; }
  @media (hover: hover) { .shell__me:hover .shell__me-cog { transform: rotate(60deg); opacity: 1; color: var(--accent); } }
  .shell__me--active { background: var(--accent-soft); border-color: var(--accent-border); }
  .shell__me--active .shell__me-cog { color: var(--accent); opacity: 1; }
  .tab--wide-only { width: 100%; text-align: left; }

  /* Band tree: one group per band (logo + name), plus Superadmin. */
  .tab-groups { display: flex; flex-direction: column; gap: 4px; }
  .tab-group__head .square-avatar { border-radius: 7px !important; }
  .tab-group__head .tab__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab-group__toggle { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .tab-group__toggle .mdi { color: var(--text-tertiary); transition: transform 180ms ease-out; transform: rotate(-90deg); }
  .tab-group__head--open .tab-group__toggle .mdi { transform: none; }
  @media (hover: hover) { .tab-group__toggle:hover { background: var(--panel-hover); } }

  /* Submenus (open while in that section, foldable). */
  .tab-sub { display: none; flex-direction: column; gap: 2px; margin: 2px 0 6px 26px; padding-left: 10px; border-left: 1px solid var(--hairline); }
  .tab-sub--open { display: flex; animation: fade-in 160ms ease-out; }
  .tab-sub__item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-tertiary); transition: background-color 150ms, color 150ms; }
  .tab-sub__item .tab-sub__icon { color: var(--text-tertiary); opacity: 0.75; }
  @media (hover: hover) { .tab-sub__item:hover { background: var(--panel-hover); color: var(--text); } }
  .tab-sub__item--active { color: var(--accent); background: var(--accent-soft); }
  .tab-sub__item--active .tab-sub__icon { color: var(--accent); opacity: 1; }

  .shell__main { overflow-y: auto; }
  /* Title bar (2026-10-01): page header on the left, the player (art,
     labels, controls) on the right — one glass bar across the top. */
  .shell__player {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding: 5px 8px 5px 10px;
    border-radius: 22px;
    border: 1px solid var(--hairline);
    border-top: 1px solid var(--hairline);
    background: var(--chrome);
    -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
    box-shadow: var(--shadow-lg);
  }
  .shell__title { flex: 1; min-width: 0; display: flex; align-items: center; }
  .shell__title .screen-header { flex: 1; min-width: 0; min-height: 0; padding: 0; gap: 10px; }
  .shell__title .screen-header__title { font-size: 22px; }
  .shell__player .mini-player {
    flex: 0 1 auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  /* A touch closer to the skip buttons (Cale, 2026-10-02). */
  .shell__player .mini-player__text { flex: 0 1 220px; width: 220px; }
  .shell__player .mini-player { gap: 10px; }
  .mini-player__art { border-radius: 12px; border-color: var(--hairline); }
  .mini-player__title { font-size: 15px; }
  .mini-player__play { box-shadow: 0 6px 18px var(--accent-glow); }
  .mini-player__controls { gap: 12px; }
  .shell__player .mini-player__controls { gap: 2px; }

  /* Sidebar pages have no Back button (2026-10-01). */
  .shell--menu-page .shell__title .back-button { display: none; }
  /* Chat's unread badge on its sidebar item. */
  .tab { position: relative; }
  .tab__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }

  /* ── Page headers: big, left-aligned, logo lives in the sidebar ───── */
  .screen-header .logo-button { display: none; }
  .screen-header { min-height: 76px; padding: 18px 28px 10px; gap: 12px; }
  .screen-header__side:first-child { flex: 0 0 auto; }
  .screen-header__side:first-child:empty { display: none; }
  .screen-header__title { flex: 1 1 auto; text-align: left; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
  .screen-header__side--right { flex: 0 0 auto; gap: 6px; }
  .screen-header .icon-button { width: 42px; height: 42px; background: var(--panel); border: 1px solid var(--hairline); }
  .screen-header .icon-button .mdi { font-size: 22px !important; width: 22px !important; height: 22px !important; }
  .back-button { padding: 8px 12px 8px 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--hairline); font-size: 15px; font-weight: 600; }
  @media (hover: hover) { .back-button:hover { background: var(--panel-hover); } }
  .conversation__header { min-height: 68px; padding: 12px 24px; border-bottom: 1px solid var(--hairline); }
  .conversation__title { font-size: 20px; font-weight: 800; }
  .conversation__header .icon-button { width: 42px; height: 42px; background: var(--panel); border: 1px solid var(--hairline); }
  .conversation__header .icon-button .mdi { font-size: 22px !important; width: 22px !important; height: 22px !important; }

  /* Headings live in the title bar now, so pages start at the top and sit
     left, using the full width (no centred column with dead space). */
  .page, .page--wide { max-width: none; margin: 0; padding: 22px 28px 40px; }
  .calendar { max-width: none !important; margin: 0 !important; padding-top: 22px; }
  .page--menu { margin: 0; }
  .section-label, .music-section { font-size: 12px; letter-spacing: 0.12em; margin: 22px 0 10px; }
  .cal-feed__header { margin-top: 4px; }

  /* Empty states ("No songs yet…") as a soft dashed panel, not bare text. */
  .page > .empty-text, .gallery-grid > .empty-text, .cal-feed > .empty-text {
    padding: 36px 24px;
    text-align: center;
    border: 1px dashed var(--hairline);
    border-radius: 18px;
    background: var(--panel);
    font-size: 15px;
  }

  /* ── List rows become cards ───────────────────────────────────────── */
  .shell__main :is(.list-link, .rec-row, .band-link, .cal-event, .menu-row, .gig-row, .admin-row, .switch-row, .trash-row, .music-search__row, .band-card) {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    margin: 0 0 8px;
    padding: 14px 16px;
    transition: background-color 150ms, transform 150ms, box-shadow 150ms, border-color 150ms;
  }
  .shell__main :is(.band-link--last, .menu-row--no-border, .admin-row--no-border) { border-bottom: 1px solid var(--hairline); }
  @media (hover: hover) {
    .shell__main :is(.list-link, .rec-row, .band-link, .cal-event, .menu-row, .gig-row, .switch-row, .music-search__row, .band-card):hover {
      background: var(--panel-hover);
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
      border-color: var(--accent-border);
    }
    .shell__main button.admin-row:hover:not(:disabled) { background: var(--panel-hover); border-color: var(--accent-border); }
  }

  /* ── Chat ─────────────────────────────────────────────────────────── */
  .chat-layout__list { flex: 0 0 380px; border-right: 1px solid var(--hairline); }
  .chat-list { padding: 4px 14px 16px; gap: 4px; }
  .chat-row { margin: 0; padding: 10px 12px; border-bottom: 0; border-radius: 16px; transition: background-color 150ms; }
  @media (hover: hover) { .chat-row:hover { background: var(--panel-hover); } }
  .chat-row--active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
  .chat-row .square-avatar { border-radius: 14px !important; }
  .chat-layout__empty { gap: 14px; color: var(--text-tertiary); }
  .chat-layout__empty .mdi {
    font-size: 40px !important;
    width: 96px !important;
    height: 96px !important;
    border-radius: 28px;
    background: var(--accent-soft);
    color: var(--accent);
  }
  .msg-list { padding: 12px 28px 16px; }
  .msg-list > * { width: 100%; max-width: 920px; margin-left: auto; margin-right: auto; }
  .msg-list > .msg-row--first { margin-top: 12px; }
  .msg-bubble { padding: 9px 14px; }
  .composer { padding: 10px 28px 16px; }
  .composer > * { width: 100%; max-width: 920px; margin-left: auto; margin-right: auto; }
  .composer__box { background: var(--panel); border-color: var(--hairline); border-radius: 22px; padding: 6px 8px 6px 16px; }
  .composer__box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .msg-day span { background: var(--panel); border: 1px solid var(--hairline); }

  /* ── Band hub: identity column + tool tiles ───────────────────────── */
  .band-hub { padding-top: 12px; }
  .band-hub__logo .square-avatar { box-shadow: var(--shadow-lg); }
  .band-links { margin-top: 12px; }
  .band-link { gap: 16px; font-size: 16px; }
  .band-link .mdi { font-size: 26px !important; width: 44px !important; height: 44px !important; border-radius: 12px; background: var(--accent-soft); }

  /* ── Profile & Settings: profile card left, details + roles right ─── */
  .page--menu {
    max-width: 1100px;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-areas: 'top details' 'list details';
    grid-template-rows: auto 1fr;
    column-gap: 20px;
    align-items: start;
  }
  .page--menu > .menu-top { grid-area: top; }
  .page--menu > .profile-details { grid-area: details; margin-top: 8px; }
  .page--menu > .menu-list { grid-area: list; }
  .profile-header {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 24px;
    padding: 28px 24px;
    margin-top: 8px;
    margin-bottom: 16px;
  }
  .profile-header__avatar { box-shadow: var(--shadow-lg); }
  .menu-list { gap: 0; }
  .menu-logout { margin-top: 12px; background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; }
  @media (hover: hover) { .menu-logout:hover { background: var(--panel-hover); } }

  /* ── Calendar: the month grid gets its own panel ──────────────────── */
  .calendar { padding: 4px 28px 28px; }
  .cal-grid {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    padding: 16px;
  }
  .cal-day__circle { width: 38px; height: 38px; border-radius: 12px; transition: background-color 120ms; }
  .cal-day__circle--today { box-shadow: 0 6px 16px var(--accent-glow); }
  .cal-filter { margin: 0 auto 14px; display: inline-flex; }
  .cal-filter .segmented__option { padding: 8px 18px; white-space: nowrap; }
  .cal-event__badge { width: 52px; height: 52px; border-radius: 14px; background: var(--panel); }
  .cal-event__badge--mine { background: var(--accent-soft); }
  .cal-event__title { font-size: 16px; }

  /* ── Music: bigger art, roomier rows ──────────────────────────────── */
  .music-row { gap: 18px; padding: 6px 2px 12px; }
  .music-tile { width: 132px; gap: 8px; }
  .music-tile--small { width: 88px; }
  .music-tile__art { width: 132px; height: 132px; border-radius: 16px; border-color: var(--hairline); box-shadow: var(--shadow-sm); transition: transform 160ms, box-shadow 160ms; }
  /* Artist logos + radio tiles match the release art (they're sized
     inline for the phone). */
  /* The live station art rounds like the artist / edneyHQ Radio tiles beside it (2026-10-04). */
  .music-tile--live > .music-tile__art--live { border-radius: 16px !important; }
  .music-tile > .square-avatar, .music-tile > .radio-art { width: 132px !important; height: 132px !important; border-radius: 16px !important; box-shadow: var(--shadow-sm); transition: transform 160ms, box-shadow 160ms; }
  .music-tile--small > .square-avatar { width: 88px !important; height: 88px !important; }
  /* Radio tiles at 66% of the album / artist art, centred in the same
     132px box so the titles still line up (2026-10-01). */
  .music-tile > .radio-art { width: 88px !important; height: 88px !important; margin: 22px 0; border-radius: 14px !important; }
  .music-search__input { margin: 4px 0 6px; max-width: 520px; }
  .music-home .music-search__results:not(:empty) { max-width: 720px; }
  @media (hover: hover) { .music-tile:hover > .square-avatar { transform: translateY(-3px); box-shadow: var(--shadow-lg); } }
  /* House music's artist tiles (2026-10-09) do nothing when clicked — so they don't lift either. */
  @media (hover: hover) { .music-tile--static:hover > .square-avatar { transform: none; box-shadow: var(--shadow-sm); } }
  @media (hover: hover) {
    .music-tile:hover .music-tile__art, .music-tile:hover .radio-art { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  }
  .music-tile__title { font-size: 13px; }
  .release__art { width: 72px; height: 72px; border-radius: 14px; }
  .track-row { border-bottom-color: var(--hairline); padding: 11px 10px; border-radius: 10px; }
  @media (hover: hover) { .track-row:hover { background: var(--panel-hover); } }

  /* ── Gallery ──────────────────────────────────────────────────────── */
  .gallery-grid { gap: 8px; }
  .gallery-tile { border-radius: 12px; }
  .gallery-tile__img { transition: transform 300ms ease-out; }
  @media (hover: hover) { .gallery-tile:hover .gallery-tile__img { transform: scale(1.04); } }
  .gallery-dropdown { background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px; }
  .gallery-selectbar { border-top-color: var(--hairline); }

  /* ── Set list / song library cards ────────────────────────────────── */
  .song-card { background: var(--panel); border-color: var(--hairline); border-radius: 16px; transition: background-color 150ms, transform 150ms; }
  @media (hover: hover) { .song-card:hover { background: var(--panel-hover); transform: translateY(-1px); } }
  .setlist-line { background: transparent; border-bottom-color: var(--hairline); }
}

/* Band Admin card (all widths). */
.band-card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Dashboards (Band + Superadmin): the real pages as panels ───────── */
/* From 768px — the moment the sidebar appears — there's ONE dashboard
   (2026-10-01: it used to step through two older band layouts first).
   It rearranges by the space the content panel actually has (container
   queries below), not the window width. */
/* Every page area — the phone-width main pane and each EDE window — is
   the `main` container its pages' width rules measure (2026-10-04). */
.shell__main { container: main / inline-size; }
@media (min-width: 768px) {
  /* Band dashboard: no band-name header (the sidebar says which band),
     full width, tight padding — all the room goes to the panels. */
  .shell__main:has(> .band-hub > .dash) > div:first-child { display: none; }
  .page.band-hub:has(> .dash) { max-width: none; margin: 0; padding: 16px 16px 20px; }
  .dash { display: flex; flex-direction: column; gap: 16px; }
  .dash__cards { display: flex; flex-direction: column; gap: 6px; }
  .dash__top { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
  .dash__left { display: flex; flex-direction: column; gap: 6px; }
  /* Logo fills the column width; the three cards are one fixed size. */
  .dash__left .band-hub__logo { align-self: stretch; margin: 0 0 4px; }
  .dash__left .band-hub__logo > .square-avatar { width: 100% !important; height: auto !important; aspect-ratio: 1; }
  .dash__left .band-card { margin: 0; height: 80px; padding: 0 16px; flex-shrink: 0; overflow: hidden; }
  .dash__left .band-card .square-avatar, .dash__left .band-card__archie, .dash__left .band-card__icon { width: 48px !important; height: 48px !important; }
  .dash__left .band-card__title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dash__left .band-card__subtitle { font-size: 13px; }
  .dash__right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .dash__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
  .dash__pair--media { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.6fr); }

  .dash-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 22px;
    overflow: hidden;
  }
  .dash-panel__head { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 18px; border-bottom: 1px solid var(--hairline); }
  .dash-panel__title { display: inline-flex; align-items: center; gap: 2px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; border-radius: 8px; }
  .dash-panel__title .mdi { color: var(--text-tertiary); opacity: 0.6; transition: transform 150ms, opacity 150ms; }
  @media (hover: hover) { .dash-panel__title:hover .mdi { transform: translateX(3px); opacity: 1; color: var(--accent); } }
  .dash-panel__buttons { display: flex; gap: 8px; margin-right: auto; }
  .dash-upload { min-height: 34px; padding: 6px 12px; font-size: 13px; }
  .dash-panel__body { position: static; overflow-y: auto; min-height: 0; }

  /* The embedded screen's own header becomes the panel's action bar:
     its title and Back go (our head says which page it is), its action
     buttons sit top-right of the panel. */
  .dash-panel__body > div > .screen-header,
  .dash-panel__body > .screen-header {
    position: absolute;
    top: 8px;
    right: 12px;
    min-height: 0;
    padding: 0;
    gap: 6px;
    z-index: 2;
  }
  .dash-panel .screen-header__title,
  .dash-panel .screen-header__side:first-child { display: none; }
  .dash-panel .screen-header .icon-button { width: 38px; height: 38px; }
  .dash-panel .screen-header .icon-button .mdi { font-size: 20px !important; width: 20px !important; height: 20px !important; }
  /* Upload buttons above the panel replace these header icons. */
  .dash-panel [title='Add to Gallery'],
  .dash-panel [title='Add release'],
  .dash-panel [title='Band info'] { display: none; }
  .dash-panel .page { max-width: none; padding: 14px 18px 18px; margin: 0; }
  .dash-panel .shell__main, .dash-panel .page > .empty-text { margin: 0; }
  .dash-panel .section-label:first-child, .dash-panel .music-section:first-child { margin-top: 2px; }
  .dash-panel :is(.list-link, .rec-row, .cal-event, .admin-row) { background: var(--panel); }

  /* Per-panel sizing. */
  /* Month grid left, upcoming events beside it (scrolling), so the panel
     matches the logo + cards column instead of towering over it. */
  .dash-panel--calendar .dash-panel__body { overflow: hidden; display: flex; flex-direction: column; }
  .dash-panel--calendar .calendar { flex: 1; min-height: 0; flex-direction: row; align-items: stretch; max-width: none; margin: 0; padding: 14px 18px 18px; gap: 20px; }
  /* Compact event rows so the list doesn't swamp the panel. */
  .dash-panel--calendar .cal-event { padding: 8px 12px; margin-bottom: 6px; border-radius: 12px; gap: 10px; }
  .dash-panel--calendar .cal-event__badge { width: 40px; height: 40px; border-radius: 10px; }
  .dash-panel--calendar .cal-event__day { font-size: 14px; }
  .dash-panel--calendar .cal-event__title { font-size: 14px; }
  .dash-panel--calendar .cal-event__band { margin-top: 1px; }
  .dash-panel--calendar .cal-event__sub { font-size: 12px; margin-top: 1px; }
  .dash-panel--calendar .cal-event__tags { flex-direction: row; gap: 4px; }
  .dash-panel--calendar .cal-tag { padding: 3px 6px; font-size: 9px; }
  .dash-panel--calendar .calendar__grid-col { flex: 0 0 360px; position: static; }
  .dash-panel--calendar .cal-grid { background: transparent; border: 0; padding: 0; }
  .dash-panel--calendar .cal-day__circle { width: 34px; height: 34px; }
  .dash-panel--calendar .cal-feed { flex: 1; min-width: 0; overflow-y: auto; padding-right: 4px; }
  .dash-panel--calendar .cal-feed__header { margin-top: 2px; }
  /* Fixed tile sizes (Cale, 2026-10-01 — "give everything a tile that
     won't dynamically change size"): panels never grow with content,
     they scroll inside. */
  .dash-panel__body { flex: 1; }
  /* Calendar is exactly as tall as the logo + chat cards beside it. */
  .dash__top { align-items: stretch; }
  .dash__right:has(> .dash-panel--calendar) { position: relative; }
  .dash-panel--calendar { height: 0; min-height: 100%; }
  .dash-panel--setlists, .dash-panel--songs { height: 340px; }
  .dash-panel--recordings, .dash-panel--music { height: 440px; }
  .dash-panel--gallery { height: 660px; }
  .dash-panel--setlists .dash-panel__body,
  .dash-panel--songs .dash-panel__body,
  .dash-panel--recordings .dash-panel__body,
  .dash-panel--music .dash-panel__body,
  .dash-panel--gallery .dash-panel__body { max-height: none; }
  .dash-panel--music .artist-top { display: none; }

  .dash-panel--gallery .gallery-toolbar { padding-top: 0; }

  /* Superadmin dashboard. It's a sidebar item now, so no Back. */
  .shell__main:has(.page--dash) > .screen-header .screen-header__side:first-child { display: none; }
  .page.page--dash { max-width: 1440px; }
  .dash__left .superadmin__logo { margin: 0 0 4px; }
  .dash__left .superadmin__logo img { width: 160px; height: 160px; box-shadow: var(--shadow-lg); }
  .dash-panel--reporting .dash-panel__body,
  .dash-panel--trash .dash-panel__body { max-height: 420px; }
  .dash-panel--users .dash-panel__body,
  .dash-panel--bands .dash-panel__body,
  .dash-panel--logs .dash-panel__body { max-height: 520px; }
  .dash-panel--mfa .mfa-status__title { font-size: 16px; }
  .dash-panel--mfa .mfa-qr { width: 160px; height: 160px; }
}

/* Medium content width: logo + chat cards as a row above a full-width
   calendar; logo matches the two cards' height. */
@container main (max-width: 1099px) {
  .dash__top { grid-template-columns: minmax(0, 1fr); }
  .dash__left { flex-direction: row; align-items: stretch; gap: 12px; }
  .dash__left .band-hub__logo { flex: 0 0 166px; width: 166px; margin: 0; align-self: flex-start; }
  .dash__left .dash__cards { flex: 1; min-width: 0; }
  .dash__left .superadmin__logo img { width: 120px; height: 120px; }
  .dash-panel--calendar { height: 500px; min-height: 0; }
  .dash__pair--media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Narrow content width: everything stacks; the calendar's events go
   under its month grid. */
@container main (max-width: 760px) {
  .dash__pair, .dash__pair--media { grid-template-columns: minmax(0, 1fr); }
  .dash-panel--calendar { height: auto; }
  .dash-panel--calendar .calendar { flex-direction: column; }
  .dash-panel--calendar .calendar__grid-col { flex: none; }
  .dash-panel--calendar .cal-feed { max-height: 300px; }
}

/* Phone width keeps the phone layout; a touch more finish only. */
@media (max-width: 767px) {
  .shell__nav { background: var(--chrome); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-top: 1px solid var(--hairline); }
}

/* Chat list pane tools (2026-10-01): search box + New chat. */
.chat-list__tools { display: flex; gap: 8px; align-items: center; padding: 12px 14px 6px; }
.chat-list__search { flex: 1; min-width: 0; padding: 9px 12px; font-size: 14px; }
.chat-list__new { flex-shrink: 0; white-space: nowrap; }
.chat-list__messages { padding-top: 4px; }

/* Calendar tile: + top-left, All/Our toggle centred (2026-10-01). */
.cal-grid__top { position: relative; display: flex; justify-content: center; align-items: center; min-height: 40px; margin-bottom: 6px; }
.cal-grid__add { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 12px; background: var(--accent); }
.cal-grid__add .mdi { color: var(--on-accent); }
.cal-grid__top .cal-filter { margin: 0; }

/* Gallery toolbar: label dropdown + upload + select (2026-10-01). */
.gallery-toolbar { display: flex; align-items: center; gap: 8px; }
.gallery-tool { width: 40px; height: 40px; background: var(--panel); border: 1px solid var(--hairline); }
.gallery-tool:disabled { opacity: 0.4; }

/* Page action buttons (2026-10-01): a labelled button top-left of the
   page, and a small right-aligned labelled tool row for editors. */
.page-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.page-action { text-decoration: none; }
.tool-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-bottom: 4px; }
.tool-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; background: var(--panel); border: 1px solid var(--hairline); font-size: 13px; font-weight: 600; color: var(--text); }
.tool-button .mdi { color: var(--accent); }
@media (hover: hover) { .tool-button:hover { background: var(--panel-hover); } }
.tool-button--primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.tool-button--primary .mdi { color: var(--on-accent); }
.tool-button--danger { color: var(--danger); }
.tool-button--danger .mdi { color: var(--danger); }

/* Song Library list + song page (2026-10-01). */
.song-row__len { font-size: 13px; color: var(--text-tertiary); opacity: 0.8; font-variant-numeric: tabular-nums; }
.song-page { display: flex; flex-direction: column; gap: 10px; }
.song-page__meta { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 8px; }
.song-page__texts { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@container main (max-width: 760px) { .song-page__texts { grid-template-columns: minmax(0, 1fr); } }
.song-page__lyrics { min-height: 360px; line-height: 1.55; }

/* Band Admin (2026-10-01): logo + details left, members right (sized for
   ~10 members, scrolls past that), Reporting below. */
.band-admin__grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
@container main (max-width: 860px) { .band-admin__grid { grid-template-columns: minmax(0, 1fr); } }
@container main (max-width: 767px) { .band-admin__grid { grid-template-columns: minmax(0, 1fr); } }
.band-admin__top { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; padding: 18px; background: var(--panel); border: 1px solid var(--hairline); border-radius: 22px; }
.band-admin__logo { align-self: center; margin: 0 0 6px; }
.band-admin__logo > .square-avatar { width: 280px !important; height: 280px !important; max-width: 100%; }
.band-admin__name { align-self: center; font-size: 20px; }
.band-admin__bio-input { min-height: 96px; resize: vertical; }
.band-admin__save { display: flex; justify-content: flex-end; }
.band-admin__members { padding: 14px 16px; background: var(--panel); border: 1px solid var(--hairline); border-radius: 22px; max-height: 720px; overflow-y: auto; }
.band-admin__members-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.band-admin__members-head .section-label { margin: 0; }
.band-admin__members .admin-row { padding: 8px 12px; margin-bottom: 6px; }
.dash-panel--band-reporting { height: 460px; }
.dash-panel--band-reporting .dash-panel__body { max-height: none; }

/* Sidebar (2026-10-01): Chat + Music Player fixed above the scrolling
   band tree; profile card with Appearance (palette) + Profile (cog). */
.shell__fixed-tabs { display: contents; }
@media (min-width: 768px) {
  .shell__fixed-tabs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; flex-shrink: 0; }
  .shell__me { gap: 4px; padding: 8px; }
  .shell__me-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; border-radius: 12px; padding: 2px; }
  .shell__me-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell__me-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color 150ms; }
  .shell__me-icon .mdi { color: var(--text-tertiary); }
  @media (hover: hover) {
    .shell__me-icon:hover { background: var(--panel-hover); }
    .shell__me-icon:hover .mdi { color: var(--accent); }
    .shell__me-link:hover .shell__me-name { color: var(--accent); }
  }
  .shell__me--active .shell__me-icon[href] .mdi { color: var(--accent); }

  /* Click the page title to hide the main pane (admire the wallpaper). */
  .shell__title .screen-header__title { cursor: pointer; }
  .shell--pane-hidden .shell__main { opacity: 0; pointer-events: none; }
}

/* Smaller New chat button. */
.chat-list__new { min-height: 32px; padding: 5px 10px; font-size: 12px; gap: 5px; }
.chat-list__new .mdi { font-size: 15px !important; width: 15px !important; height: 15px !important; }
.page-actions--inline { margin: 18px 28px 0; }
@container main (max-width: 767px) { .page-actions--inline { margin: 12px 16px 0; } }
.dash-panel .page-actions--inline { margin: 12px 18px 0; }
.about-card .about-row { padding: 12px 4px; }
@media (min-width: 768px) { .shell__me-sub { font-size: 11px; } .shell__me-name { font-size: 13px; } }

/* Artist page (2026-10-01): logo left, name / bio / Contact Band right. */
.artist-top__info { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.artist-top__name { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
@container main (min-width: 768px) {
  .artist-top { flex-direction: row; align-items: center; gap: 28px; margin: 4px 0 24px; }
  .artist-top__info { align-items: flex-start; min-width: 0; }
  .artist-top__bio { text-align: left; margin-top: 0; max-width: 720px; font-size: 14px; line-height: 1.55; }
}
.artist-top__contact { margin-top: 6px; }
/* Wordmark: tagline no wider than "edneyHQ" (2026-10-01). */
@media (min-width: 768px) {
  .shell__wordmark { align-items: center; }
  .shell__wordmark-name { line-height: 1.15; }
  .shell__wordmark-sub { font-size: 9.5px; letter-spacing: 0.01em; white-space: nowrap; text-align: center; }
}

/* ── Icon rail (2026-10-01) ───────────────────────────────────────── */
.shell__rail-toggle, .shell__rail-row { display: none; }
@media (min-width: 768px) {
  /* Left, in the icon column (Cale, 2026-10-03); centred on the rail. */
  .shell__rail-row { display: flex; justify-content: flex-start; margin: 0 0 6px 6px; }
  .shell--rail .shell__rail-row { margin-left: 0; }
  .shell--rail .shell__rail-row { justify-content: center; width: 100%; }
  .shell__rail-toggle { display: flex; width: 30px; height: 30px; border-radius: 9px; align-items: center; justify-content: center; flex-shrink: 0; }
  .shell__rail-toggle .mdi { color: var(--text-tertiary); }
  @media (hover: hover) { .shell__rail-toggle:hover { background: var(--panel-hover); } .shell__rail-toggle:hover .mdi { color: var(--accent); } }

  /* Rail width = taskbar height (Cale, 2026-10-03). */
  .shell.shell--rail { grid-template-columns: 60px minmax(0, 1fr); }
  .shell--rail .shell__nav { padding: 10px 6px 8px; align-items: center; }
  .shell--rail .shell__brand { flex-direction: column; gap: 10px; padding: 2px 0 14px; }
  .shell--rail .shell__wordmark,
  .shell--rail .tab__label,
  .shell--rail .tab-group__toggle,
  .shell--rail .shell__nav .tab-sub { display: none !important; }
  .shell--rail .shell__fixed-tabs, .shell--rail .shell__tabs { align-items: center; width: 100%; }
  .shell--rail .shell__tabs { margin: 0; padding: 0; }
  .shell--rail .tab { width: 46px; height: 44px; padding: 0; justify-content: center; gap: 0; }
  .shell--rail .tab-group__head .square-avatar { width: 32px !important; height: 32px !important; border-radius: 9px !important; }
  .shell--rail .tab--flyout-open { background: var(--panel-hover); }
  .shell--rail .tab__badge { position: absolute; top: 3px; right: 3px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px; line-height: 16px; border-radius: 8px; }
  /* Profile card -> Appearance above Profile (cog), no avatar / name. */
  .shell--rail .shell__me { flex-direction: column; gap: 4px; padding: 0; background: transparent; border: 0; }
  /* Rail: just your photo (2026-10-03 — the cog/palette icons it used to show are gone). */
  .shell--rail .shell__me-link { display: flex; justify-content: center; padding: 0; }
  .shell--rail .shell__me-text { display: none; }
  .shell--rail .shell__me-icon { width: 44px; height: 40px; }
}
/* Flyout menu next to a rail icon. */
.rail-flyout {
  position: fixed;
  z-index: 150;
  min-width: 210px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--background) 88%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
  animation: pop-in 140ms ease-out;
}
.rail-flyout__title { padding: 6px 10px 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.rail-flyout .tab-sub { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border: 0; animation: none; }


/* ══ EDE — Edney Desktop Environment (web, wide layout; Cale 2026-10-02) ══
   Taskbar: Home, breadcrumb path, player, clock. Desktop: right-click menu,
   wallpaper chooser. Phone width (< 768px) is the app's layout, untouched. */
@media (max-width: 767px) {
  .taskbar__left, .taskbar-tray { display: none !important; }
  /* The app's tab order: Chat, Band, Music, Menu. */
  .shell__nav .tab[data-href="/chat"] { order: 1; }
  .shell__nav .tab[data-href="/band"] { order: 2; }
  .shell__nav .tab[data-href="/music"] { order: 3; }
  .shell__nav .tab[data-href="/menu"] { order: 4; }
}
@media (min-width: 768px) {
  .shell__player { gap: 10px; }
  /* The page header still gets lifted here (hidden on wide). */
  .shell__player .shell__title { display: none; }
  .taskbar__left { flex: 1; min-width: 0; display: flex; align-items: center; }
  /* The player lives in the tray bubble now; the bubble goes right. */
  .taskbar-tray { margin-left: auto; }
  .shell__player .mini-player__art { width: 44px; height: 44px; }
  .shell__player .mini-player__title { font-size: 14px; }
  /* Sized, not scaled — a transform here fought .tactile's press squish and
     made the button grow when pressed (2026-10-03). */
  .shell__player .mini-player__play { width: 38px; height: 38px; }
  /* Two lines, centred on the art (2026-10-03): title, album – radio. */
  .shell__player .mini-player__text { align-self: center; }
  .shell__player .mini-player--track .mini-player__subtitle,
  .shell__player .mini-player--track .mini-player__context { display: none; }
  .shell__player .mini-player--track .mini-player__line2 { display: block; }

  /* System tray: icons | clock, one glass bubble (2026-10-03). */
  .taskbar-tray {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px 3px 6px;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid var(--hairline);
  }
  .tray__icons { display: flex; align-items: center; gap: 2px; }
  .tray__icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--text); }
  .tray__icon .mdi { color: inherit !important; }
  @media (hover: hover) { .tray__icon:hover { background: var(--panel-hover); color: var(--accent); } }
  .tray__divider { width: 1px; align-self: stretch; margin: 4px 0; background: var(--hairline); }
  .taskbar-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    line-height: 1.12;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .taskbar-clock__time { font-size: 15px; font-weight: 800; color: var(--accent); letter-spacing: 0.02em; }
  .taskbar-clock__day { font-size: 11px; font-weight: 600; color: var(--text); }
  .taskbar-clock__date { font-size: 10px; color: var(--text-tertiary); }

  /* Right-click desktop menu. */
  .desktop-menu {
    position: fixed;
    z-index: 1200;
    min-width: 220px;
    padding: 6px;
    border-radius: 14px;
    background: var(--chrome);
    -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg);
    animation: fade-in 120ms ease-out;
  }
  .desktop-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text); text-align: left; }
  .desktop-menu__item:hover, .desktop-menu__item:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
  .desktop-menu__icon { color: var(--text-tertiary); }
  .desktop-menu__item:hover .desktop-menu__icon { color: var(--accent); }
  .desktop-menu__sep { height: 1px; margin: 4px 8px; background: var(--hairline); }

  /* Settings: Personalise built into the page. */
  .settings-personalise .personalise { display: flex; flex-direction: column; gap: 10px; }
  .personalise--inline .theme-list { max-height: 360px; }
  .personalise__action { align-self: flex-start; }
}

/* Wallpaper picker (Settings → Desktop, 2026-10-03 — was its own dialog). */
.wallpaper-picker { display: flex; flex-direction: column; gap: 8px; }
.wallpaper-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 18px;
  margin: 4px 0 14px;
  border: 2px dashed var(--accent-border);
  border-radius: 16px;
  background: var(--panel);
  transition: background-color 150ms, border-color 150ms;
}
.wallpaper-drop--over, .wallpaper-drop:hover { background: var(--accent-soft); border-color: var(--accent); }
.wallpaper-drop__title { font-weight: 700; font-size: 15px; }
.wallpaper-drop__hint { font-size: 12px; color: var(--text-tertiary); }
.wallpaper-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wallpaper-tile { display: flex; flex-direction: column; gap: 5px; padding: 4px; border-radius: 12px; border: 2px solid transparent; text-align: center; }
.wallpaper-tile:hover { background: var(--panel-hover); }
.wallpaper-tile--active { border-color: var(--accent); background: var(--accent-soft); }
.wallpaper-tile__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--panel); display: block; }
.wallpaper-tile__label { font-size: 11px; font-style: italic; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tray volume popup (EDE, 2026-10-03). */
.volume-pop {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 64px;
  padding: 12px 4px;
  border-radius: 16px;
  background: var(--chrome);
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
  animation: fade-in 120ms ease-out;
}
.volume-pop__pct { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.volume-pop__slider { writing-mode: vertical-lr; direction: rtl; height: 140px; width: 24px; accent-color: var(--accent); cursor: pointer; }
.volume-pop__mute { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--text); background: transparent; }
@media (hover: hover) { .volume-pop__mute:hover { background: var(--panel-hover); color: var(--accent); } }
.volume-pop__slider:focus { outline: none; }
.volume-pop__slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.volume-pop__mute .mdi { color: inherit !important; }
.volume-pop__mute--on { color: var(--accent); }

/* ══ EDE corner + spacing system (Cale, 2026-10-03; wide layout only) ═════
   Concentric corners: inner radius = outer radius − the gap between them,
   with a floor so small things never go square. Gap between panels and to
   the screen edge: 6px. Circles (play buttons, avatars, badges) untouched. */
@media (min-width: 768px) {
  :root {
    --r-outer: 12px;   /* panels, bars, dialogs, popups, menus */
    --r-tray: 7px;     /* 12 − the taskbar's 5px inset */
    --r-inset: 4px;    /* things 3–4px inside a 7–8px box */
    --r-card: 8px;     /* cards, rows, buttons, inputs (floor) */
    --r-small: 6px;    /* thumbnails, art, tiles, logos */
  }
  .shell { gap: 6px; padding: 6px; }

  .shell__nav, .shell__main, .shell__player,
  .dialog-card, .overlay-card, .rail-flyout, .desktop-menu, .volume-pop,
  .login, .avatar-menu, .gallery-dropdown { border-radius: var(--r-outer); }

  .taskbar-tray, .start-button, .taskbar-app { border-radius: var(--r-tray); }
  .tray__icon, .volume-pop__mute,
  .tab-group__toggle, .shell__rail-toggle, .dash-panel__title,
  .cal-event__badge, .dash-panel--calendar .cal-event__badge,
  .wallpaper-tile__img, .tab-group__head .square-avatar,
  .shell--rail .tab-group__head .square-avatar { border-radius: var(--r-inset) !important; }
  .desktop-menu__item, .segmented__option { border-radius: calc(var(--r-card) - 3px); }

  .profile-details__card, .dash-panel, .band-admin__top, .band-admin__members,
  .cal-grid, .song-card, .composer__box, .profile-header, .chat-row,
  .menu-row, .gig-row, .admin-row, .switch-row, .trash-row, .music-search__row, .band-card,
  .page > .empty-text, .gallery-grid > .empty-text, .cal-feed > .empty-text,
  .wallpaper-drop, .shell__me, .tab, .menu-logout,
  .btn, .input, .icon-button, .segmented, .back-button, .tool-button, .cal-grid__add,
  .shell__me-link, .shell__me-icon, .tab-sub__item, .track-row,
  .dash-panel--calendar .cal-event, .default-avatar-grid__tile, .crop__viewport, .webcam { border-radius: var(--r-card); }

  .mini-player__art, .music-tile__art, .music-tile > .square-avatar, .music-tile > .radio-art,
  .release__art, .gallery-tile, .wallpaper-tile, .logo-button__img, .shell__brand .logo-button__img,
  .now-playing__art, .band-card__icon, .thumb-grid__tile, .band-link .mdi { border-radius: var(--r-small); }
}

/* Expanded sidebar tidy (224px, 2026-10-03): same fonts, a little less padding. */
@media (min-width: 768px) {
  .shell:not(.shell--rail) .shell__nav { padding: 12px 8px 8px; }
  .shell:not(.shell--rail) .tab { padding: 10px 10px 10px 9px; gap: 12px; }
  .shell:not(.shell--rail) .shell__brand { padding: 2px 4px 16px; gap: 10px; }
  .shell:not(.shell--rail) .tab-sub { margin-left: 20px; padding-left: 8px; }
  .shell:not(.shell--rail) .shell__me { padding: 8px; }
  .tab-sub__item--placeholder { cursor: default; font-style: italic; opacity: 0.7; }
  .tab-sub__item--placeholder:hover { background: transparent !important; color: var(--text-tertiary) !important; }
}

/* ══ EDE Settings + Profile pop-ups (2026-10-03) ══════════════════════ */
.popover {
  position: fixed;
  z-index: 1150;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-outer, 12px);
  background: var(--chrome);
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg);
  animation: fade-in 120ms ease-out;
}
.popover__title { margin: 0; font-size: 17px; font-weight: 800; }
.settings-popover { width: 460px; height: min(600px, calc(100vh - 100px)); }
/* Each tab's switches stay put; only its tile grid scrolls (2026-10-03). */
.settings-popover .personalise__body { overflow: hidden; }
/* No dead space under the tab / mode switchers — the panel's gap is enough. */
.settings-popover .segmented { margin-bottom: 0; }
.personalise__scroll { flex: 1; min-height: 0; overflow-y: auto; align-content: start; padding: 2px; margin: -2px; }
.wallpaper-picker { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
/* Custom wallpaper = the grid's first tile: a dashed + box until there's
   an upload, then the picture with a small replace button. */
.wallpaper-tile--custom { position: relative; cursor: pointer; }
.wallpaper-tile__add { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--accent-border); background: var(--panel); }
.wallpaper-tile--over .wallpaper-tile__add, .wallpaper-tile--over .wallpaper-tile__img { background: var(--accent-soft); border-color: var(--accent); }
/* Replace = the camera-badge treatment (accent over black, no box) so it
   reads on any picture (Coder note 2026-10-04). */
.wallpaper-tile__replace { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; }
/* Clock Wallpaper line: label · [10] min · Activate now · switch. */
.clock-row { gap: 8px; }
.clock-row > label { flex: 1; }
.clock-row__after { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.clock-row__minutes { width: 54px; padding: 4px 6px; font-size: 13px; }
.clock-row__now { min-height: 28px; padding: 4px 10px; font-size: 12px; }
.settings-popover .personalise { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.settings-popover .theme-list { max-height: none; }
.personalise__about { display: flex; flex-direction: column; }
/* About fills from the bottom, just above the version line (2026-10-03). */
.personalise__body--about .personalise__about { flex: 1; justify-content: flex-end; }
.personalise__body--about .about-version { margin-top: 12px; }
/* Profile, kept short (2026-10-03): photo beside your name, details in two
   columns, compact role rows, Log Out + Deactivate on one line. */
.profile-popover { width: 480px; max-height: calc(100vh - 12px); overflow-y: auto; }
.profile-popover .profile-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 1px;
  align-items: center;
  justify-items: start;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.profile-popover .profile-header__avatar-wrap { grid-row: 1 / span 3; }
.profile-popover .profile-header__avatar { box-shadow: none; }
.profile-popover .profile-header__badge { right: -4px; bottom: -4px; }
.profile-popover .profile-header__name { margin-top: 0; }
.profile-popover .profile-header__display-name { font-size: 18px; }
.profile-popover .profile-details { gap: 10px; margin-bottom: 0; }
.profile-popover .profile-details__card { padding: 0; background: transparent; border: 0; box-shadow: none; }
.profile-popover .profile-details__title { font-size: 15px; margin-bottom: 4px; }
.profile-popover .profile-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-popover .profile-details .roles-block .field__label { font-size: 15px; margin-bottom: 0; }
.profile-popover .role-row { padding: 4px 0; }
.profile-popover .role-row__text { font-size: 14px; }
.profile-popover__account { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.profile-popover__account .menu-logout { margin: 0; padding: 8px 18px; }
.profile-popover__account .menu-deactivate { margin: 0; }
@media (min-width: 768px) {
  /* Rail: your photo at the bottom, mirroring the eHQ logo at the top. */
  .shell--rail .shell__me .square-avatar { width: 44px !important; height: 44px !important; border-radius: var(--r-small) !important; }
  .shell__me { cursor: pointer; }
}

/* ══ EDE pick tiles — themes + tones in Settings (2026-10-03) ═════════
   Same size and grid as the wallpaper picker: a box, label inside, a
   circle top-left (ticked = active). Themes show their toned wallpaper
   thumbnail; tones are a shaded box with a centred ▶. */
.pick-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pick-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-card, 8px);
  border: 2px solid transparent;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pick-tile--pickable { cursor: pointer; }
.pick-tile--pickable:hover { background: var(--panel-hover); }
.pick-tile--active { border-color: var(--accent); background: var(--accent-soft); }
.pick-tile--dimmed { opacity: 0.45; }
.pick-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick-tile__radio {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--text-secondary);
  background: var(--chrome);
}
.pick-tile--active .pick-tile__radio { border-color: var(--accent); background: var(--accent); }
.pick-tile--active .pick-tile__radio .mdi { color: var(--on-accent); }
.pick-tile__label {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
/* Over a picture the label gets a small glass pill so it reads anywhere. */
.pick-tile__img ~ .pick-tile__label {
  left: 50%;
  right: auto;
  max-width: calc(100% - 12px);
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: var(--r-small, 6px);
  background: var(--chrome);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Centred with inset + auto margins, not a transform — the press squish
   (.tactile) is a transform, and it used to wipe the centring out, so the
   ▶ jumped out from under the pointer and the click never landed. */
.pick-tile__play {
  position: absolute;
  inset: 0 0 16px;
  z-index: 1;
  width: 34px;
  height: 34px;
  margin: auto;
  display: inline-flex;
  line-height: 0;
}

/* Profile pop-up: slimmer text boxes, no "Your details" heading. */
.profile-popover .input { padding: 7px 10px; font-size: 14px; }
.profile-popover .field__label { font-size: 12px; }
.profile-popover .profile-details__title { display: none; }
.profile-popover .profile-details__actions .btn { min-height: 34px; padding: 6px 14px; font-size: 14px; }

/* EDE Now Playing pop-up (2026-10-03): from the taskbar's mini player. */
.now-playing-popover { overflow-y: auto; }
.now-playing-popover .now-playing { padding: 0; }

/* ══ EDE Clock Wallpaper (2026-10-03) ═══════════════════════════════
   Everything fades out (sidebar, taskbar, pages, pop-ups); the wallpaper
   (body::before) stays, darkened; a big clock drifts slowly on top. */
html.clockwall-on body > *:not(.clockwall) { opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.clockwall { position: fixed; inset: 0; z-index: 5000; cursor: none; opacity: 0; transition: opacity 1.6s ease; }
.clockwall--in { opacity: 1; }
.clockwall__dim { position: absolute; inset: 0; background: var(--black); opacity: 0.5; }
.clockwall__clock {
  position: absolute;
  color: var(--white);
  text-align: center;
  white-space: nowrap;
  transition: left 8s ease-in-out, top 8s ease-in-out;
}
.clockwall__time { font-size: 132px; font-weight: 200; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.clockwall__date { margin-top: 8px; font-size: 22px; font-weight: 500; opacity: 0.85; }
.clockwall__playing { margin-top: 14px; font-size: 15px; opacity: 0.7; }

/* ══ EDE: mini player inside the tray bubble (2026-10-03) ════════════
   [art · title / artist – album · ⏮ ▶ ⏭] | 🔊 ⚙ | clock — shrunk to fit. */
@media (min-width: 768px) {
  .taskbar-tray .mini-player { gap: 8px; }
  .taskbar-tray .mini-player__art { width: 36px; height: 36px; border-radius: var(--r-small, 6px); }
  .taskbar-tray .mini-player__text { flex: 0 1 180px; width: 180px; }
  .taskbar-tray .mini-player__title { font-size: 13px; }
  .taskbar-tray .mini-player__line2, .taskbar-tray .mini-player__subtitle { font-size: 11px; }
  .taskbar-tray .mini-player__play { width: 30px; height: 30px; box-shadow: none; }
  .taskbar-tray .mini-player__play .mdi { font-size: 20px !important; width: 20px !important; height: 20px !important; }
  .taskbar-tray .mini-player__skip { padding: 2px; }
  .taskbar-tray .mini-player__skip .mdi { font-size: 20px !important; width: 20px !important; height: 20px !important; }
}

/* ══ EDE chat layout (2026-10-03, wide only) ═════════════════════════
   No big panel: the chat list is its own full-height glass panel (380px),
   the open conversation a glass box 6px to its right — twice the list's
   width, half its height, top-aligned. The rest is empty desktop. */
@media (min-width: 768px) {
  .shell__main:not(.win__body):has(> .chat-layout) {
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: hidden;
    padding: 0;
  }
  .shell__main:not(.win__body) > .chat-layout { gap: 6px; align-items: flex-start; height: 100%; }
  .shell__main:not(.win__body) > .chat-layout > .chat-layout__list,
  .shell__main:not(.win__body) > .chat-layout > .chat-layout__convo {
    background: var(--chrome);
    -webkit-backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur, 28px)) saturate(160%);
    border: 1px solid var(--hairline);
    border-radius: var(--r-outer, 12px);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .shell__main:not(.win__body) > .chat-layout > .chat-layout__list { flex: 0 0 380px; height: 100%; overflow-y: auto; }
  .shell__main:not(.win__body) > .chat-layout > .chat-layout__convo { flex: 0 1 760px; height: 50%; min-width: 0; }
  /* Nothing open: just the list. */
  .shell__main:not(.win__body) > .chat-layout:has(> .chat-layout__convo > .chat-layout__empty) > .chat-layout__convo { display: none; }
}
@media (min-width: 768px) {
  .taskbar-tray .mini-player--track .mini-player__text { cursor: pointer; }
}

/* EDE update notice (2026-10-04): just above the tray (wide), top of the
   screen (phone width). Persistent until Update now / Remind me later. */
.update-notice {
  position: fixed;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--r-outer, 12px);
  background: var(--chrome);
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
  border: 1px solid var(--accent-border);
  box-shadow: var(--shadow-lg);
}
.update-notice--top { top: 12px; left: 16px; right: 16px; }
.update-notice__title { font-size: 15px; font-weight: 800; color: var(--accent); white-space: nowrap; overflow: hidden; }
.update-notice__versions { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.update-notice__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.update-notice__actions .btn { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.tray__icon--update .mdi { color: var(--accent) !important; }
.tray__icon[hidden] { display: none !important; }
/* Tray bell (2026-10-04): same badge as the eHQ logo, same pop-up. */
.tray__icon--bell { position: relative; }
.tray__badge {
  position: absolute;
  top: -2px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.tray__badge[hidden] { display: none; }
.notif-popover { width: 320px; overflow-y: auto; }

/* ── EDE Start menu + taskbar (Cale, 2026-10-04) — wide layout only ── */
.start-button, .taskbar-app, .shell__search-slot, .shell__pin-row { display: none; }
@media (min-width: 768px) {
  /* Floating mode (default): no sidebar — the page gets the full width. */
  .shell.shell--start-floating { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'main' 'player'; }
  .shell--start-floating .shell__nav { display: none; }

  /* Start: the radio mic, theme-coloured, in a glass square like the tray. */
  .taskbar__left { gap: 4px; }
  .shell__player { padding-left: 5px; }
  .start-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    margin-right: 6px;
    /* Corner = var(--r-tray) (the EDE corner system, below): 12 − its 5px inset. */
    background: var(--panel);
    border: 1px solid var(--hairline);
    transition: background-color 150ms, box-shadow 150ms;
  }
  .start-button__mic {
    width: 42px;
    height: 42px;
    background: var(--accent);
    -webkit-mask: url('/assets/images/general-mic.png') center / contain no-repeat;
    mask: url('/assets/images/general-mic.png') center / contain no-repeat;
  }
  @media (hover: hover) { .start-button:not(:disabled):hover { background: var(--panel-hover); box-shadow: 0 0 14px var(--accent-glow); } }
  .start-button--open { background: var(--panel-hover); box-shadow: 0 0 14px var(--accent-glow); }
  .start-button:disabled { cursor: default; }
  .start-button:disabled .start-button__mic { opacity: 0.35; }

  /* Pinned apps: icons straight on the bar, left-aligned after Start. */
  .taskbar-app {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--r-tray, 7px);
    color: var(--text);
    transition: background-color 150ms;
  }
  .taskbar-app .mdi { color: inherit !important; }
  @media (hover: hover) { .taskbar-app:hover { background: var(--panel-hover); color: var(--accent); } }
  /* "Open" glow + underline: the page you're in (windows from build b). */
  .taskbar-app--active { background: var(--accent-soft); color: var(--accent); }
  .taskbar-app--active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
  .taskbar-app__badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 9.5px; font-weight: 800; line-height: 16px; text-align: center; margin: 0; }
  .taskbar-app__badge[hidden] { display: none; }

  /* Show desktop sits right of Start as a taskbar icon (taskbar-app, 2026-10-07). */
  .tray__icon--on { background: var(--accent-soft); color: var(--accent); }

  /* ── The floating Start menu ─────────────────────────────────────── */
  .start-menu, .start-dock {
    position: fixed;
    z-index: 1150;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-outer, 16px);
    background: var(--chrome);
    -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: start-rise 140ms ease-out;
  }
  @keyframes start-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .start-menu__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
  .start-menu__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .start-menu__brand .logo-button__img { width: 52px; height: 52px; border-radius: 13px; }
  .start-menu__profile { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 4px 4px 10px; border-radius: 12px; text-align: right; }
  @media (hover: hover) { .start-menu__profile:hover { background: var(--panel-hover); } .start-menu__profile:hover .start-menu__profile-name { color: var(--accent); } }
  /* Same type as the wordmark opposite (Cale, 2026-10-04): name = "edneyHQ",
     email = "Strength in Music", identical line heights so the lines align. */
  .start-menu__profile-text { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
  .start-menu__profile-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .start-menu__profile-sub { font-size: 9.5px; letter-spacing: 0.01em; line-height: 1.3; color: var(--text-tertiary); opacity: 0.7; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .start-menu__brand .shell__wordmark-name { line-height: 1.15; }
  .start-menu__brand .shell__wordmark-sub { line-height: 1.3; }
  .start-menu__body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .start-menu__left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--hairline); }
  .start-menu__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
  .start-menu__bands { display: flex; flex-direction: column; gap: 2px; }
  .start-menu__divider { height: 1px; margin: 6px 8px; background: var(--hairline); flex-shrink: 0; }
  .start-menu__pin { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-tertiary); }
  .start-menu__pin .mdi { color: inherit !important; }
  @media (hover: hover) { .start-menu__pin:hover { background: var(--panel-hover); color: var(--accent); } }
  .start-menu__right { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
  .start-menu__right-head { padding: 6px 10px 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
  .start-menu__right-band { display: inline-flex; align-items: center; gap: 8px; }
  .start-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text); text-align: left; transition: background-color 120ms; }
  @media (hover: hover) { .start-item:hover { background: var(--panel-hover); } .start-item:hover .start-item__icon { color: var(--accent); } }
  .start-item--selected { background: var(--accent-soft); }
  .start-item--selected .start-item__label, .start-item--selected .start-item__icon { color: var(--accent); }
  .start-item--inert { cursor: default; opacity: 0.6; }
  .start-item--inert:hover { background: transparent !important; }
  .start-item__icon { color: var(--text-tertiary) !important; flex-shrink: 0; }
  .start-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .start-item__more { color: var(--text-tertiary) !important; margin-left: auto; }
  .start-item__soon { font-size: 11px; font-style: italic; color: var(--text-tertiary); }
  .start-item__badge { position: static; margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; }
  .start-item__badge[hidden] { display: none; }
  .start-menu__search { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 8px; border-top: 1px solid var(--hairline); flex-shrink: 0; }
  .start-search__input { flex: 1; min-width: 0; }
  /* Searching: results take the full width over both columns, scrolling. */
  .start-menu .start-results { display: none; }
  .start-menu--searching .start-menu__left, .start-menu--searching .start-menu__right { visibility: hidden; }
  .start-menu--searching .start-results { display: flex; position: absolute; inset: 0; }

  /* Results (both hosts). */
  .start-results { flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
  .start-results__group { display: flex; flex-direction: column; gap: 1px; }
  .start-results__label { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
  .start-results__spinner { width: 18px; height: 18px; margin: 6px 12px; }
  .start-results__note { padding: 8px 10px; font-size: 13px; color: var(--text-tertiary); }
  .start-results__more { align-self: flex-start; padding: 4px 10px 8px; font-size: 12px; font-weight: 700; color: var(--accent); }
  .start-result { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 10px; border-radius: 10px; text-align: left; }
  @media (hover: hover) { .start-result:hover { background: var(--panel-hover); } }
  .start-result--current { background: var(--accent-soft); }
  .start-results__more.start-result--current { background: var(--accent-soft); border-radius: 8px; }
  .start-result--inert { cursor: default; opacity: 0.6; }
  .start-result__art { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
  .start-result__art .mdi { color: var(--text-tertiary) !important; }
  .start-result__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .start-result__title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .start-result__sub { font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── Pinned sidebar: profile on top, search, 📌 above the chevron ── */
  .shell__nav > .shell__me { margin-bottom: 10px; }
  .shell__search-slot { display: block; margin: 8px 0; flex-shrink: 0; }
  .shell__search { display: flex; align-items: center; gap: 6px; }
  .shell__search-icon { color: var(--text-tertiary) !important; flex-shrink: 0; }
  .shell__search .start-search__input { padding: 7px 10px; font-size: 13px; }
  /* Search: just the 🔍 in both widths; the box lives in the docked panel. */
  .shell__search-slot { display: flex; }
  .shell__search-rail { width: 46px; height: 44px; padding: 0; justify-content: center; gap: 0; }
  .shell--rail .shell__search-slot { justify-content: center; width: 100%; }
  .shell__pin-row { display: flex; margin-bottom: 2px; }
  .tab-sub__soon { margin-left: auto; font-size: 10px; font-style: italic; opacity: 0.8; }

  /* Docked search panel (pinned mode): sidebar/taskbar corner. */
  .start-dock > .shell__search { padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
  .start-dock__body { flex: 1; min-height: 0; display: flex; }
  .start-dock .start-results { display: flex; flex: 1; }
}

/* ── EDE windows (Cale, 2026-10-04 — build b) — wide layout only ──── */
.win-layer, .win-grid { display: none; }
@media (min-width: 768px) {
  /* Pages live in windows; the old single page area is gone on wide. */
  .shell--windows .shell__main { display: none; }
  .shell--windows.shell--start-floating { grid-template-areas: 'main' 'player'; }

  .win-layer { display: block; position: fixed; inset: 0; z-index: 50; pointer-events: none; }
  .win {
    position: fixed;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    border-radius: var(--r-outer, 16px);
    /* Same glass as the old page area (Cale, 2026-10-04: the solid version
       was far too dark). 10 points more solid than the chrome, 2026-10-05. */
    background: var(--win-glass, var(--chrome));
    -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg);
  }
  .win[hidden] { display: none; }
  .win--focused { border-color: var(--accent-border); }
  .win--settling { transition: left 140ms ease-out, top 140ms ease-out, width 140ms ease-out, height 140ms ease-out; }
  .win--dragging { user-select: none; }
  .win--dragging * { pointer-events: none; }

  /* The slim standard title bar. */
  .win__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px; /* a little taller since 2026-10-07 (band tabs) */
    flex-shrink: 0;
    padding: 0 4px 0 10px;
    border-bottom: 1px solid var(--hairline);
    border-radius: var(--r-outer, 16px) var(--r-outer, 16px) 0 0;
    user-select: none;
    cursor: default;
  }
  .win--focused .win__bar { background: var(--panel); }
  .win__icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
  .win__icon .mdi { color: var(--accent) !important; }
  .win__icon .square-avatar { border-radius: 5px !important; }
  .win__back { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-secondary); }
  .win__back[hidden] { display: none; }
  .win__back .mdi { color: inherit !important; }
  @media (hover: hover) { .win__back:hover { background: var(--panel-hover); color: var(--accent); } }
  .win__title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .win--focused .win__title { color: var(--text); }
  .win__actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
  .win__actions .icon-button { width: 30px; height: 30px; }
  .win__actions .icon-button .mdi { font-size: 18px !important; width: 18px !important; height: 18px !important; }
  .win__controls { display: flex; align-items: center; flex-shrink: 0; }
  .win__ctl { width: 36px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
  .win__ctl .mdi { color: inherit !important; }
  @media (hover: hover) {
    .win__ctl:hover { background: var(--panel-hover); color: var(--text); }
    .win__ctl--close:hover { background: var(--danger); color: var(--text); }
  }

  /* The body is a page area (same styles as the old main pane), minus the
     pane's own glass box — the window is the box now. */
  .win__body.shell__main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: transparent;
    border: 0;
    border-radius: 0 0 var(--r-outer, 16px) var(--r-outer, 16px);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .screen-header--in-window { display: none !important; }
  .win--popout .conversation__header { display: none; }
  .win__body > .chat-layout { height: 100%; }

  /* Resize handles: edges and corners. */
  .win__rz { position: absolute; z-index: 3; }
  .win--max .win__rz { display: none; }
  .win__rz--n, .win__rz--s { left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
  .win__rz--n { top: -4px; }
  .win__rz--s { bottom: -4px; }
  .win__rz--e, .win__rz--w { top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
  .win__rz--e { right: -4px; }
  .win__rz--w { left: -4px; }
  .win__rz--ne, .win__rz--nw, .win__rz--se, .win__rz--sw { width: 14px; height: 14px; }
  .win__rz--ne { top: -4px; right: -4px; cursor: nesw-resize; }
  .win__rz--sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
  .win__rz--nw { top: -4px; left: -4px; cursor: nwse-resize; }
  .win__rz--se { bottom: -4px; right: -4px; cursor: nwse-resize; }

  /* Faint grid + the landing outline while dragging / resizing. */
  .win-grid { display: block; position: fixed; z-index: 1100; pointer-events: none; }
  .win-grid[hidden] { display: none; }
  .win-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, var(--accent) 1px, transparent 1px), linear-gradient(to bottom, var(--accent) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: var(--grid-x, 0) 0;
    opacity: 0.1;
  }
  .win-grid__outline { position: absolute; border: 2px dashed var(--accent); border-radius: var(--r-outer, 16px); background: var(--accent-soft); }

  /* Dialogs over their window only (below its title bar). */
  .win__dialogs { position: absolute; left: 0; right: 0; top: 42px; bottom: 0; z-index: 4; pointer-events: none; }
  .win__dialogs > .dialog-backdrop--window {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: auto;
    padding: 12px;
    border-radius: 0 0 var(--r-outer, 16px) var(--r-outer, 16px);
    overflow: visible;
  }
  .dialog-backdrop--window .dialog-card { max-height: none; }
  .dialog-backdrop--window .viewer-host { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
  /* App-wide dialogs: a compact box on the desktop, no dim. */
  #layers > .dialog-backdrop--desktop { inset: auto; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
  .dialog-backdrop--desktop > * { pointer-events: auto; }

  /* ── Taskbar: one icon per app type ─────────────────────────────── */
  .taskbar__apps { display: flex; align-items: center; min-width: 0; overflow: hidden; }
  .taskbar-groups { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .taskbar-groups .taskbar-app { flex-shrink: 1; min-width: 36px; }
  .taskbar-app--open::after, .taskbar-app--front::after, .taskbar-app--min::after { content: ''; position: absolute; bottom: 3px; height: 3px; border-radius: 2px; background: var(--accent); }
  .taskbar-app--open::after { left: 18px; right: 18px; opacity: 0.8; }
  .taskbar-app--min::after { left: 18px; right: 18px; opacity: 0.35; }
  .taskbar-app--front { background: var(--accent-soft); color: var(--accent); }
  .taskbar-app--front::after { left: 10px; right: 10px; box-shadow: 0 0 8px var(--accent-glow); }
  .taskbar-app__count { position: absolute; bottom: 6px; right: 4px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--panel-hover); color: var(--text); font-size: 9px; font-weight: 800; line-height: 14px; text-align: center; }
  .taskbar-app__noroom { position: absolute; top: 5px; left: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); }

  .taskbar-list { width: 280px; padding: 6px; gap: 2px; overflow-y: auto; }
  .taskbar-list__head { padding: 6px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
  .taskbar-list__row { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
  .taskbar-list__divider { height: 1px; margin: 4px 8px; background: var(--hairline); }
  .taskbar-list__row--front { background: var(--accent-soft); }
  .taskbar-list__row--min .taskbar-list__name { opacity: 0.65; }
  .taskbar-list__pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; text-align: left; font-size: 14px; font-weight: 600; }
  @media (hover: hover) { .taskbar-list__pick:hover { background: var(--panel-hover); } }
  .taskbar-list__art { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .taskbar-list__art .mdi { color: var(--text-tertiary) !important; }
  .taskbar-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .taskbar-list__close { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-tertiary); }
  .taskbar-list__close .mdi { color: inherit !important; }
  @media (hover: hover) { .taskbar-list__close:hover { background: var(--panel-hover); color: var(--danger); } }
}

/* Settings → Desktop: window buttons above the wallpaper picker. */
.personalise__desktop { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.personalise__windows { display: flex; gap: 8px; }
.personalise__windows .btn { flex: 1; }

/* Utility windows (Profile, Settings — 2026-10-04): movable, × only. */
@media (min-width: 768px) {
  .win--utility .win__util-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-radius: 0 0 var(--r-outer, 16px) var(--r-outer, 16px); }
  .win--settings .win__util-body .personalise__body { overflow: hidden; }
  .win--settings .win__util-body .segmented { margin-bottom: 0; }
  /* One rhythm on every tab (Cale, 2026-10-05): the same gap under the tab
     bar, the same gap between rows, everything on the same edges. */
  .win--settings .personalise { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
  .win--settings .personalise__body,
  .win--settings .personalise__desktop { gap: 12px; }
  .win--settings .personalise__body .toggle-row { margin-top: 0; min-height: 28px; }
  .win--settings .personalise__body .personalise__hint { margin: 0; }
  .win--settings .personalise__body--about .personalise__about { justify-content: flex-start; }
  .win--settings .personalise__body--about .about-row:first-child { padding-top: 0; }
  .win--settings .personalise__body--about .about-version { margin-top: auto; }
  /* Profile window = the old pop-up's layout (photo beside the name, two-column details). */
  .win--profile.profile-popover { height: auto; overflow: visible; }
  .win--profile .win__util-body { padding: 14px 16px 16px; }
}

/* Window player strip (2026-10-04): fixed height, always there. */
@media (min-width: 768px) {
  .win--with-player .win__body.shell__main { border-radius: 0; }
  .win-player {
    flex-shrink: 0;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 12px;
    border-top: 1px solid var(--hairline);
    border-radius: 0 0 var(--r-outer, 16px) var(--r-outer, 16px);
    background: var(--panel);
  }
  .win-player__info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 260px; text-align: left; border-radius: var(--r-card, 8px); padding: 2px; }
  @media (hover: hover) { .win-player__info:hover .win-player__title { color: var(--accent); } }
  .win-player__art { width: 44px; height: 44px; border-radius: var(--r-small, 6px); object-fit: cover; flex-shrink: 0; background: var(--panel); }
  .win-player__art--idle { object-fit: contain; padding: 4px; background: var(--black); }
  .win-player__text { min-width: 0; display: flex; flex-direction: column; }
  .win-player__title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .win-player__sub { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .win-player__controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .win-player__btn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text); }
  .win-player__btn .mdi { color: inherit !important; }
  .win-player__btn:disabled { opacity: 0.35; cursor: default; }
  @media (hover: hover) { .win-player__btn:not(:disabled):hover { background: var(--panel-hover); color: var(--accent); } }
  .win-player__play { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); }
  .win-player__play .mdi { color: var(--on-accent) !important; }
  .win-player__progress { flex: 1; min-width: 80px; display: flex; align-items: center; gap: 8px; }
  .win-player__time { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; min-width: 32px; text-align: center; }
  .win-player__seek { flex: 1; min-width: 0; accent-color: var(--accent); }
  .win-player__volume { display: flex; align-items: center; gap: 4px; flex: 0 0 120px; }
  .win-player__vol { flex: 1; min-width: 0; accent-color: var(--accent); }
}
/* Narrow windows: the strip drops volume, then the seek bar. */
@media (min-width: 768px) { .win--with-player { container: win / inline-size; } }
@container win (max-width: 620px) { .win-player__volume { display: none; } }
@container win (max-width: 460px) { .win-player__progress { display: none; } .win-player__info { flex: 1; } }

/* Settings → Desktop → Size (2026-10-04; tidied 2026-10-05): a small label
   above, then a full-width switch the same height as the rows above it. */
.personalise__size { display: flex; flex-direction: column; gap: 6px; }
.personalise__size-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.personalise__size .segmented { width: 100%; }
.wallpaper-picker__heading { margin-top: 12px; }
.segmented__sub { opacity: 0.6; font-weight: 600; }

/* Report an Issue utility window (2026-10-04): its own header is the title bar. */
.win__report .screen-header { display: none; }

/* Windows never scroll sideways (Cale, 2026-10-05 — chat windows had a
   horizontal scrollbar): long words wrap, flex rows may shrink. */
@media (min-width: 768px) {
  .win__body.shell__main { overflow-x: hidden; }
  .win .conversation, .win .conversation__body, .win .chat-layout__convo, .win .composer, .win .msg-bubble-wrap { min-width: 0; max-width: 100%; }
  /* Chat windows: bubbles up to about 2/3 of the window (Cale, 2026-10-05) —
     80% of the list (its side padding is wide) + the ⋯ button beside it. */
  .win .msg-list { container-type: inline-size; }
  .win .msg-col { max-width: min(100%, calc(80cqw + 32px)); }
  .win .msg-bubble { overflow-wrap: anywhere; }
}

/* Full-colour app / game icons (components/app-icon.js, Cale 2026-10-07):
   a coloured tile with the white symbol. Window title bars keep the plain one. */
.app-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 26%; box-shadow: inset 0 1px 0 var(--app-icon-shine), var(--shadow-sm); }
.app-icon { position: relative; }
.app-icon__ring { position: absolute; inset: 2px; border-style: solid; border-color: var(--app-icon-fg); pointer-events: none; }
.app-icon .mdi, .taskbar-app .app-icon .mdi, .start-item .app-icon .mdi { color: var(--app-icon-fg, var(--white)) !important; }

/* ── Taskbar system box, tabbed band apps (Cale, 2026-10-07) ──────────── */
@media (min-width: 768px) {
  /* Start + Show desktop + Full screen: one box styled like the tray. The
     system icons never glow or underline — their icon changes instead. */
  .taskbar-sysbox { flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding: 2px; margin-right: 6px; border-radius: var(--r-tray, 7px); background: var(--panel); border: 1px solid var(--hairline); }
  .taskbar-sysbox .start-button { margin-right: 0; background: transparent; border: 0; }
  .taskbar-sysbox .start-button, .taskbar-sysbox .taskbar-sys { border-radius: var(--r-inset, 4px); }  /* concentric: 7 outer − 2 padding − 1 border */
  .taskbar-sys { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 50px; height: 50px; border-radius: var(--r-tray, 7px); color: var(--text); transition: background-color 150ms; }  /* 50 = Start's cell, so the three sit on an even pitch (Cale, 2026-10-09) */
  .taskbar-sys[hidden] { display: none; }
  .taskbar-sys .mdi { color: inherit !important; }
  .mdi-ink { display: block; flex-shrink: 0; background-color: currentColor; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
  @media (hover: hover) { .taskbar-sys:hover { background: var(--panel-hover); color: var(--accent); } }

  /* The hover column (2026-10-07): rises from behind the taskbar over its
     icon — a clip box whose bottom is the taskbar's top edge. */
  .task-col-clip { position: fixed; z-index: 1190; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; pointer-events: none; }
  .task-col-clip[hidden] { display: none; }
  .task-col { pointer-events: auto; width: 230px; max-height: 100%; display: flex; flex-direction: column; margin-bottom: 6px; padding: 6px; border-radius: 16px; border: 1px solid var(--hairline); background: var(--chrome); -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%); backdrop-filter: blur(var(--glass-blur, 20px)) saturate(160%); box-shadow: var(--shadow-lg); }
  .task-col--rising { animation: task-col-rise 180ms ease-out; }
  @keyframes task-col-rise { from { transform: translateY(calc(100% + 8px)); } to { transform: translateY(0); } }
  .task-col__head { padding: 6px 8px 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
  .task-col__rows { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
  .task-col__row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border-radius: 10px; color: var(--text); font-size: 14px; font-weight: 600; cursor: default; }
  @media (hover: hover) { .task-col__row:hover { background: var(--panel-hover); } }
  .task-col__row--dim { opacity: 0.55; }
  .task-col__art { display: flex; flex-shrink: 0; }
  .task-col__art .square-avatar { border-radius: 6px !important; }
  .task-col__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .task-col__close { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; color: var(--text-tertiary); }
  .task-col__close .mdi { color: inherit !important; }
  @media (hover: hover) { .task-col__close:hover { background: var(--danger); color: var(--text); } }
  /* Dragging an icon to a new spot. */
  .taskbar-app--dragging { opacity: 0.7; cursor: grabbing; }

  /* Band tabs (Chrome-style, Cale 2026-10-07): the bar is tinted in
     sections — title, the other tabs, the empty strip, the buttons — and the
     front tab is left clear, so it opens straight into the page (the window
     is glass, so nothing could paint over the line instead). The tabs either
     side of the front one round their bottom corners: the flared feet. */
  .win__bar--tabbed { --tab-tint: var(--panel); gap: 0; padding: 0; align-items: stretch; background: none !important; border-bottom: 0; }
  .win__lead { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; max-width: 40%; padding: 0 12px 0 10px; background: var(--tab-tint); border-bottom: 1px solid var(--hairline); border-top-left-radius: inherit; }
  .win__tail { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 0 4px 0 8px; background: var(--tab-tint); border-bottom: 1px solid var(--hairline); border-top-right-radius: inherit; }
  .win__tabs { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow: hidden; }
  .win__tabs::after { content: ''; flex: 1 0 0; background: var(--tab-tint); border-bottom: 1px solid var(--hairline); }
  .win__tab { position: relative; display: flex; align-items: center; gap: 6px; flex: 0 1 220px; min-width: 0; padding: 6px 6px 0 12px; background: var(--tab-tint); border-bottom: 1px solid var(--hairline); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: default; }
  .win__tab .square-avatar { flex-shrink: 0; border-radius: 5px !important; }
  .win__tab-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Thin dividers between neighbours, none beside the front tab. */
  .win__tab + .win__tab::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 9px; width: 1px; background: var(--hairline); }
  .win__tab--active::before, .win__tab--active + .win__tab::before { display: none; }
  @media (hover: hover) { .win__tab:not(.win__tab--active):hover { color: var(--text); } }
  /* The front tab: clear below a 6px tinted band, rounded top corners. */
  .win__tab--active {
    color: var(--text);
    border-bottom-color: transparent;
    background:
      radial-gradient(circle at 8px 14px, transparent 8px, var(--tab-tint) 8.5px) top left / 8px 14px no-repeat,
      radial-gradient(circle at 0 14px, transparent 8px, var(--tab-tint) 8.5px) top right / 8px 14px no-repeat,
      linear-gradient(var(--tab-tint), var(--tab-tint)) top center / calc(100% - 16px) 6px no-repeat;
  }
  .win__tab:has(+ .win__tab--active), .win__lead:has(+ .win__tabs > .win__tab--active:first-child) { border-bottom-right-radius: 8px; }
  .win__tab--active + .win__tab, .win__tabs:has(> .win__tab--active:last-child)::after { border-bottom-left-radius: 8px; }
  /* Background tabs read as tabs (Cale, 2026-10-09): an outline drawn INSIDE the tab's own box, so the tab keeps painting the bar's tint over its full height — the bar behind the tabs must never change colour. Starts level with the front tab's clear area (6px down), 2px gap between neighbours. */
  .win__bar--tabbed .win__tab:not(.win__tab--active)::before { display: none; }
  .win__bar--tabbed .win__tab:not(.win__tab--active)::after {
    content: ''; position: absolute; top: 6px; left: 2px; right: 0; bottom: 0;
    border: 1px solid var(--hairline); border-bottom: 0; border-radius: 8px 8px 0 0; pointer-events: none;
  }
  .win__bar--tabbed .win__tab:not(.win__tab--active):first-child::after { left: 4px; }
  /* 2px gap on BOTH sides of the front tab (not just the right), and hover fills only the tab's own shape — never the bar behind it. */
  .win__bar--tabbed .win__tab:has(+ .win__tab--active)::after { right: 2px; }
  @media (hover: hover) { .win__bar--tabbed .win__tab:not(.win__tab--active):hover::after { background: var(--panel-hover); } }
  .win__tab-close { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; color: var(--text-tertiary); visibility: hidden; }
  .win__tab-close .mdi { color: inherit !important; }
  .win__tab:hover .win__tab-close, .win__tab--active .win__tab-close { visibility: visible; }
  @media (hover: hover) { .win__tab-close:hover { background: var(--panel-hover); color: var(--text); } }
  .win__tab--dragging { opacity: 0.4; }
  .win__tab--ghost { position: fixed; z-index: 100000; pointer-events: none; width: 200px; height: 34px; padding: 0 6px 0 12px; border: 1px solid var(--accent-border); border-radius: 8px; background: var(--glass); color: var(--text); box-shadow: var(--shadow-lg); }
  .win__tab--ghost::before { display: none; }
  /* A window that a dragged tab / window would join. */
  .win--tab-target .win__bar { box-shadow: inset 0 0 0 2px var(--accent); }
  .win--tab-target .win__bar--tabbed { --tab-tint: var(--accent-soft); }
  /* Only the front tab's page shows. */
  .win__body.shell__main[hidden] { display: none; }

  /* Context menus: the one you're on. */
  .desktop-menu__item--current { color: var(--accent); }
  .desktop-menu__check { margin-left: auto; color: var(--accent) !important; }

  /* Start: All Apps at the bottom of the left column; headings in its list. */
  .start-menu__left > .start-menu__divider { margin: 0 8px; }
  .start-menu__bottom { padding: 8px; flex-shrink: 0; }
  .start-menu__section { padding: 10px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }

  /* The Settings app (2026-10-07): the panel fills its window; the changelog
     replaces it in place, with its own × back to Settings. */
  .settings-app { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .settings-app > .personalise { flex: 1; min-height: 0; }
  .changelog-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .changelog-view__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 8px 16px; border-bottom: 1px solid var(--hairline); flex-shrink: 0; }
  .changelog-view__title { font-size: 17px; font-weight: 800; color: var(--text); margin: 0; }
  .changelog-view__body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; }

  /* Gallery (2026-10-07): the album list + Upload as dropdowns, not dialogs. */
  .gallery-menu { min-width: 240px; padding: 6px; }
}