/* Light and dark retain their original interface tokens in index.html. */
.phone[data-appearance="light"]{--journey-ink:#37372d;--journey-accent:#666b59;--journey-button:#f2efea;--journey-button-ink:#1b1714}
.phone[data-appearance="dark"]{--journey-ink:#ede7df;--journey-accent:#c3b49e;--journey-button:#c9b168;--journey-button-ink:#1c1814}
.phone[data-appearance="autumn"]{
  --paper:#efe9dc;--paper2:#f4eee2;--card:#faf4e8;--ink:#343f32;--ink2:#747b65;--ink3:#83866f;
  --home-bg:#efe9dc;--home-ink:#343f32;--home-muted:#747b65;--accent:#40563d;--on-accent:#f1e7cf;
  --line:rgba(52,63,50,.16);--line2:rgba(52,63,50,.08);--cell-base:#dce0cc;--np:#b69756;
  --journey-ink:#ece3ce;--journey-accent:#d9c99f;--journey-button:#e5d6af;--journey-button-ink:#344735;
}
.phone[data-appearance="night"]{
  --paper:#1d303b;--paper2:#223845;--card:#2b4350;--ink:#f3e5c9;--ink2:#b6c6c5;--ink3:#92a9ac;
  --home-bg:#172833;--home-ink:#f3e5c9;--home-muted:#b6c6c5;--accent:#dfbd7e;--on-accent:#1d303b;
  --line:rgba(211,228,227,.18);--line2:rgba(211,228,227,.08);--cell-base:#344b52;--np:#dfbd7e;
  --journey-ink:#f3e5c9;--journey-accent:#b6c6c5;--journey-button:#dfbd7e;--journey-button-ink:#1d303b;
}
.phone[data-appearance="glam"]{
  --paper:#2c2545;--paper2:#352b50;--card:#413358;--ink:#f9eafa;--ink2:#ceb9dc;--ink3:#b29dc4;
  --home-bg:#211b36;--home-ink:#f9eafa;--home-muted:#ceb9dc;--accent:#e48dcc;--on-accent:#2c2545;
  --line:rgba(238,208,245,.18);--line2:rgba(238,208,245,.08);--cell-base:#4c3b63;--np:#e48dcc;
  --journey-ink:#f9eafa;--journey-accent:#e3c7ec;--journey-button:#e48dcc;--journey-button-ink:#2c2545;
}
.phone[data-appearance="desert"]{
  --paper:#f3e1be;--paper2:#f6e7cb;--card:#faedD5;--ink:#4e3a2d;--ink2:#806951;--ink3:#947852;
  --home-bg:#f3e1be;--home-ink:#4e3a2d;--home-muted:#806951;--accent:#846247;--on-accent:#f6e7cb;
  --line:rgba(117,84,49,.22);--line2:rgba(117,84,49,.10);--cell-base:#e2cda7;--np:#bf914a;
  --journey-ink:#4e3a2d;--journey-accent:#69513a;--journey-button:#f3e1be;--journey-button-ink:#4e3a2d;
}
.phone[data-appearance="light"] .app-panel{background:var(--paper)}
body[data-appearance="autumn"]{background:#e2dccd}
body[data-appearance="night"]{background:#172833}
body[data-appearance="glam"]{background:#211b36}
body[data-appearance="desert"]{background:#e8d3ac}

/* Apply the chosen world to home, the player, the editor and all sheets. */
.phone.colour-theme .app-panel{background:var(--home-bg);color:var(--home-ink)}
.phone.colour-theme :is(.home-head h2,.home-section h3,.library-title){color:var(--home-ink)}
.phone.colour-theme :is(.screen-subhead,.prototype-release){color:var(--home-muted)}
.phone.colour-theme :is(.song-card,.chart-card,.liked-song,.search-result,.version-tile,.name-row,.back-home,.import-btn,.manifest-trigger,.song-menu,.vrow,.playlist-row,.share-preview,.share-option,.search-field){background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.phone.colour-theme :is(.home-card,.song-menu button,.manifest-menu button){color:var(--ink)}
.phone.colour-theme :is(.home-card span,.chart-card>span:not(.home-art):not(.chart-rank) span,.liked-copy span,.search-copy span,.song-card span,.song-card .song-meta,.song-card .song-combos){color:var(--ink2)}
.phone.colour-theme :is(.sheet,.confirm-modal,.version-menu,.manifest-menu){background:var(--paper2);color:var(--ink)}
.phone.colour-theme :is(.field,.search-field){background:var(--card);color:var(--ink);border-color:var(--line)}
.phone.colour-theme :is(.name-index,.drag-handle,.remove-name,.add-field,.form-card label,.import-status){color:var(--home-muted)}
.phone.colour-theme :is(.empty-state,.search-empty,.liked-empty,.playlist-empty){color:var(--home-muted);background:color-mix(in srgb,var(--home-ink) 6%,transparent)}
.phone.colour-theme :is(.miniplay,.cplay,.cta,.use-btn){background:var(--accent);color:var(--on-accent)}
.phone.colour-theme .use-btn.secondary{background:var(--card);color:var(--ink)}
.phone.colour-theme .regenplay{background:var(--card);color:var(--ink)}
.phone.colour-theme :is(.rail,.tl-scrub::before){background:var(--line)}
.phone.colour-theme :is(.fill,.knob,.playhead,.playhead::after){background:var(--accent)}
.phone.colour-theme .seclabel{color:var(--ink2)}
.phone.colour-theme .band{background:var(--line2);box-shadow:inset 0 0 0 1px var(--line)}
.phone.colour-theme .wf-ahead{background:color-mix(in srgb,var(--paper) 55%,transparent)}
.phone.colour-theme .cell{box-shadow:inset 0 0 0 1px var(--line)}
.phone.colour-theme .version-tile.active{box-shadow:inset 0 0 0 2px var(--np)}
.phone.colour-theme :is(.version-pill,.version-pill.original,.version-tag){background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.phone.colour-theme .theme-opt.active{box-shadow:inset 0 0 0 2px var(--accent)}
.phone.colour-theme .theme-opt.active .theme-check{background:var(--accent);border-color:var(--accent)}
.phone.colour-theme .theme-opt.active .theme-check::after{border-color:var(--on-accent)}
.phone.colour-theme .avatar-choice.active{box-shadow:inset 0 0 0 3px var(--paper2),0 0 0 3px var(--accent)}
.phone.colour-theme .mini-player{--mini-progress:var(--accent);background:color-mix(in srgb,var(--card) 94%,transparent)}
.phone.colour-theme .mini-regen{background:var(--accent);color:var(--on-accent)}
.phone.colour-theme .nav-item{color:var(--home-muted)}
.phone.colour-theme .nav-item.active{background:var(--line);color:var(--home-ink)}
.phone.colour-theme .grab{background:var(--line)}
.phone.colour-theme .toast{background:var(--ink);color:var(--paper)}
.phone.colour-theme .library-folder{background:color-mix(in srgb,var(--folder) 58%,var(--home-bg));color:var(--home-ink)}
.phone:is([data-appearance="night"],[data-appearance="glam"]) .library-folder{background:color-mix(in srgb,var(--folder) 48%,var(--home-bg))}
.phone[data-appearance="dark"] .library-folder{background:color-mix(in srgb,var(--folder) 42%,var(--paper));color:var(--ink)}
.phone.colour-theme .playlist-folder-icon{color:var(--home-ink);background:color-mix(in srgb,var(--home-ink) 14%,transparent)}
.phone.colour-theme .save-pill,.phone.colour-theme .save-pill:hover{background:var(--accent);color:var(--on-accent)}
.phone.colour-theme .home-card{color:var(--home-ink)}
.phone.colour-theme .home-card span{color:var(--home-muted)}
.phone.colour-theme :is(.name-index,.drag-handle){color:var(--ink2)}
.phone.colour-theme .tooltip{background:var(--paper2);color:var(--ink)}
.phone.colour-theme .tooltip :is(li,.metric span){color:var(--ink2)}
.phone.colour-theme .tooltip li b{color:var(--ink)}

/* Six compact, labelled swatches and a separate developer switch. */
.theme-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:0}
#themeSheet .theme-opt{gap:8px;padding:11px 9px;min-width:0;min-height:58px}
#themeSheet .theme-swatch{width:27px;height:27px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
#themeSheet .theme-opt b{font-size:12px;line-height:1.3}
#themeSheet .theme-check{width:16px;height:16px;flex-shrink:0;border-width:1px}
.theme-opt.active .theme-check::after{width:4px;height:7px}
.dev-mode-setting{margin-top:16px;padding:12px 2px;width:100%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:14px;font-weight:600}
.dev-switch{width:42px;height:25px;border-radius:20px;background:var(--line);padding:3px;transition:background .18s}
.dev-switch::after{content:"";display:block;width:19px;height:19px;border-radius:50%;background:var(--card);box-shadow:0 1px 4px #0003;transition:transform .18s}
.dev-mode-setting[aria-checked="true"] .dev-switch{background:var(--accent,var(--ink))}
.dev-mode-setting[aria-checked="true"] .dev-switch::after{transform:translateX(17px)}
.dev-mode-setting:focus-visible,.theme-opt:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.phone:not(.dev-mode) :is(.settings-actions,.song-menu-btn,.song-menu,.manifest-wrap,.create-song){display:none!important}

/* A portrait Journey card, with the existing native controls below it. */
.phone.journey-viz #player{padding-top:max(12px,env(safe-area-inset-top))}
.phone.journey-viz #player>.topbar{position:absolute;inset:0 0 auto;height:0;margin:0;z-index:8}
.phone.journey-viz .art-wrap{margin:0 0 20px}
/* The Journey card is always 60% of the phone's height, matching .phone's sizing. */
.phone{--phone-h:100dvh}
@media (min-width:540px){.phone{--phone-h:max(min(872px,calc(100dvh - 48px)),100svh)}}
.phone.journey-viz .art{width:100%;height:calc(var(--phone-h) * .6);aspect-ratio:auto;border-radius:22px;background:var(--journey-ground);box-shadow:none;animation:none!important;will-change:auto}
.phone.journey-viz .art::after{display:none}
.journey-canvas{position:absolute;left:0;bottom:0;width:100%;height:calc(100% - 118px);display:block;pointer-events:none}
.journey-heading{position:absolute;left:20px;right:20px;top:62px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;color:var(--journey-ink)}
.journey-copy{min-width:0;pointer-events:none}
.journey-name{display:block;font-family:Georgia,serif;font-size:30px;font-weight:400;line-height:1.08;letter-spacing:-1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.journey-swaps{display:block;margin-top:7px;font-size:13px;color:var(--journey-accent)}
.journey-edit{flex-shrink:0;display:flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border-radius:24px;background:var(--journey-button);color:var(--journey-button-ink);font-size:13px;font-weight:600}
.art .journey-edit svg{width:15px;height:15px}
.journey-edit:focus-visible{outline:2px solid var(--journey-ink);outline-offset:4px}
.phone.journey-viz .dismiss-btn{left:30px;top:max(24px,calc(env(safe-area-inset-top) + 12px));background:color-mix(in srgb,var(--journey-button) 24%,transparent);color:var(--journey-ink);box-shadow:none;backdrop-filter:blur(8px)}
@media(max-width:360px){.journey-heading{left:16px;right:16px}.journey-name{font-size:27px}.journey-edit{padding:0 10px}}

/* Journey in the editor: swaps and mutes redraw the characters' routes live. */
.edit-journey-canvas,.journey-legend{display:none}
.phone.journey-viz #customise .tl{flex:0 0 auto}
/* The spacer takes 35% of the free height, pushing the card and transport down. */
.phone.journey-viz #customise::before{content:"";order:1;flex:.35 1 0;min-height:0}
.phone.journey-viz #customise :is(.custom-heatmap-wrap,.ctransport){order:2}
.phone.journey-viz .custom-heatmap-wrap{position:relative;flex:.65 1 0;min-height:120px;margin-top:18px;border-radius:18px 18px 0 0;overflow:hidden;background:var(--journey-ground)}
.phone.journey-viz .edit-journey-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.phone.journey-viz .heatmap-summary{position:absolute;top:12px;left:12px;right:12px;z-index:1;height:auto;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;font-size:12px}
.phone.journey-viz .heatmap-summary>:is(.journey-legend,span){height:26px;padding:0 10px;border-radius:13px;display:flex;align-items:center;gap:10px;white-space:nowrap;
  background:color-mix(in srgb,var(--paper) 72%,transparent);color:var(--ink);font-weight:500;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.phone.journey-viz .heatmap-summary span:last-child{color:var(--ink)}
.phone.journey-viz .heatmap-summary>.journey-legend{margin-right:auto}
.journey-legend em{display:flex;align-items:center;gap:5px;font-style:normal}
.journey-legend i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent)}
.phone.journey-viz.show-customise .ctransport{border-radius:0 0 18px 18px}