/* streamingmusic.io — account settings.
   Enabled only while the shared shell's Account view is active, on top of
   style.css. This file styles the settings content only: the page chrome
   (#app grid, sidebar, topbar, buttons, ink and surfaces) is the library
   shell's, so /account reads as the same product rather than a second one.
   Every --acct-* token below is therefore an alias of a design-system token,
   kept as a name so the section rules stay readable. */

:root{
  --acct-line:var(--line-2);
  --acct-line-soft:var(--line);
  --acct-ink:var(--ink-0);
  --acct-ink-dim:var(--ink-1);
  --acct-ink-faint:var(--ink-3);
  --acct-accent:var(--flame-3);
  --acct-field:rgba(255,255,255,.04);
  --acct-good:#7BCFA5;
  --acct-warn:var(--ember);
  --acct-bad:#E8867B;
  --acct-radius:var(--r);
  --acct-radius-sm:var(--r-sm);
  --acct-ease:var(--ease);
}

*,*::before,*::after{box-sizing:border-box}

/* Author display rules (for example .acct-btn{display:inline-flex}) otherwise
   override the browser's low-specificity hidden styling, exposing retry and
   conflict controls before they are relevant and putting them in the tab order. */
[hidden]{display:none!important}

/* The body owns nothing but the shell: background, ink, and type all come from
   style.css so this page starts from the same paint as the library. */
body.acct-body{margin:0}

a{color:inherit}
.acct-main a,.acct-nav a{color:var(--acct-accent)}

.acct-skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  padding:10px 14px;border-radius:0 0 var(--r-sm) 0;
  background:var(--ink-0);color:#171209;font-weight:650;
}
.acct-skip:focus{left:0}

/* ─────────────────────────────────────────────────────────── app shell ─── */
/* #app in style.css reserves a bottom row for the player bar, which this
   document does not render; without this the settings column would end in a
   92px band of empty background. The sidebar has no playlist list to absorb
   the free space either, so its foot is pushed down explicitly. */
#app.acct-app-shell{
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"side main";
}
/* Below 960px style.css turns the sidebar into an overlay drawer and drops the
   grid to a single column. This override has to follow it or the settings
   column would keep a 272px empty gutter where the drawer used to sit. */
@media (max-width:960px){
  #app.acct-app-shell{grid-template-columns:1fr;grid-template-areas:"main"}
}
.acct-sidebar .side-foot{margin-top:auto}
.acct-topbar-title{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.acct-topbar-title .kicker{font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.acct-topbar-title b{font-size:14px;font-weight:550;letter-spacing:-.01em}
.acct-topbar .top-right{margin-left:auto}
body.in-account .topbar .search-wrap,
body.in-account .topbar > .top-right{display:none}
body.in-account #account-topbar-title{margin-right:auto}
body.in-account #view-account{padding:0}

/* Screen-reader-only: for labels that must exist for assistive tech but would be
   redundant on screen, where the surrounding card already explains the control. */
.acct-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Focus ring matches the app's: ember, drawn with outline so it survives the
   overflow clipping inside the scrolling content column. */
:focus-visible{outline:2px solid var(--flame-3);outline-offset:3px;border-radius:6px}

/* The settings body sits inside <main>, which already scrolls and already pads
   its views; this matches .view's rhythm and entrance so arriving at settings
   animates in exactly like Library, Radio or the Studio. */
.acct-shell{
  max-width:1080px;margin:0 auto;
  padding:clamp(22px,3vw,36px) clamp(16px,2.4vw,30px) 64px;
  display:grid;grid-template-columns:212px minmax(0,1fr);gap:clamp(20px,3vw,38px);
  align-items:start;
  animation:viewin .5s var(--expo) both;
}

/* Same editorial serif heading and sub line every other view head uses. */
.acct-head{grid-column:1/-1;margin:0 0 4px}
.acct-head h1{margin:0 0 9px;font-family:var(--serif);font-weight:500;
  font-size:clamp(30px,3.5vw,46px);line-height:1.05;letter-spacing:-.028em;
  font-optical-sizing:auto;font-variation-settings:"opsz" 48;text-wrap:balance}
.acct-head p{margin:0;color:var(--ink-2);font-size:13.5px;max-width:62ch}

/* ─────────────────────────────────────────────── section nav + scroll-spy ─ */
.acct-nav{position:sticky;top:64px}
.acct-nav h2{
  margin:0 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acct-ink-faint);
}
.acct-nav ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.acct-nav a{
  display:block;padding:8px 12px;border-radius:9px;text-decoration:none;
  color:var(--acct-ink-dim);font-size:14px;font-weight:550;
  border-left:2px solid transparent;
  transition:background .18s var(--acct-ease),color .18s var(--acct-ease);
}
/* Matches .nav in the sidebar: ember wash plus an ember rule on the leading
   edge, so the "on this page" list reads as the same kind of navigation. */
.acct-nav a:hover{background:var(--surface);color:var(--ink-0)}
.acct-nav a[aria-current="true"]{
  background:var(--surface-2);
  color:var(--ink-0);border-left-color:var(--ember);
}

.acct-main{display:grid;gap:clamp(16px,2.4vw,24px);min-width:0}

/* ───────────────────────────────────────────────────────────────── cards ─ */
.acct-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--acct-radius);
  box-shadow:var(--sh-2),var(--hi);
  padding:clamp(16px,2.2vw,26px);
  scroll-margin-top:78px;
}
.acct-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:4px}
.acct-card-head h2{margin:0;font-size:17px;letter-spacing:-.01em}
.acct-card-head .acct-card-desc{margin:5px 0 0;color:var(--acct-ink-dim);font-size:13.5px;max-width:60ch}
.acct-card-toggle{
  display:none;margin-left:auto;flex:none;
  width:32px;height:32px;border-radius:9px;
  background:transparent;border:1px solid var(--acct-line);color:var(--acct-ink-dim);
  cursor:pointer;font-size:12px;line-height:1;
}
.acct-card-summary{display:none;margin:8px 0 0;color:var(--acct-ink-faint);font-size:13px}
.acct-card-body{display:grid;gap:18px;margin-top:16px}

.acct-field{display:grid;gap:7px;max-width:460px}
.acct-field-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.acct-label{font-weight:600;font-size:13.5px;color:var(--acct-ink)}
.acct-hint{margin:0;color:var(--acct-ink-faint);font-size:12.5px}

input[type=text],input[type=password],input[type=email]{
  width:100%;padding:10px 12px;font:inherit;color:var(--acct-ink);
  background:var(--acct-field);border:1px solid var(--line-2);border-radius:var(--acct-radius-sm);
  transition:border-color .16s var(--acct-ease),box-shadow .16s var(--acct-ease);
}
input:hover:not(:disabled){border-color:var(--line-3)}
input:focus{border-color:rgba(224,143,76,.45);
  box-shadow:0 0 0 4px rgba(var(--flame-rgb),.08);outline:none}
input:disabled{opacity:.55;cursor:not-allowed}
input[aria-invalid="true"]{border-color:var(--acct-bad)}

.acct-prefix{display:flex;align-items:stretch}
.acct-prefix span{
  display:flex;align-items:center;padding:0 10px;color:var(--acct-ink-faint);
  background:var(--acct-field);border:1px solid var(--line-2);border-right:0;
  border-radius:var(--acct-radius-sm) 0 0 var(--acct-radius-sm);font-size:14px;
}
.acct-prefix input{border-radius:0 var(--acct-radius-sm) var(--acct-radius-sm) 0}

/* The app's pill buttons, at form scale: same porcelain primary, same ghost
   treatment, same lift on hover as .btn in style.css. */
.acct-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 18px;border-radius:var(--pill);cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:550;letter-spacing:-.012em;white-space:nowrap;
  color:#171209;border:1px solid transparent;background:var(--ink-0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 26px -16px rgba(0,0,0,.9);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),
             background .22s var(--ease),border-color .22s var(--ease),color .2s;
}
.acct-btn:hover:not(:disabled){transform:translateY(-1px);background:#FFFDF8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 16px 34px -18px rgba(0,0,0,.95)}
.acct-btn:active:not(:disabled){transform:translateY(0)}
.acct-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.acct-btn.ghost{color:var(--ink-1);background:rgba(255,255,255,.038);
  border-color:var(--line-2);box-shadow:var(--hi)}
.acct-btn.ghost:hover:not(:disabled){color:var(--ink-0);background:rgba(255,255,255,.075);
  border-color:var(--line-3)}
.acct-btn.danger{color:#E8867B;background:rgba(224,110,95,.1);
  border-color:rgba(224,110,95,.34);box-shadow:none}
.acct-btn.danger:hover:not(:disabled){background:rgba(224,110,95,.16)}
.acct-btn.small{height:30px;padding:0 13px;font-size:12.5px}

.acct-badge{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--pill);white-space:nowrap;
  background:rgba(228,174,110,.12);color:var(--ember);border:1px solid rgba(228,174,110,.3);
}
.acct-badge[hidden]{display:none}
.acct-badge.saved{background:rgba(123,207,165,.12);color:var(--acct-good);border-color:rgba(123,207,165,.3)}
.acct-badge.busy{background:rgba(var(--flame-rgb),.14);color:var(--flame-3);
  border-color:rgba(var(--flame-rgb),.34)}

.acct-error{
  margin:0;font-size:13px;color:var(--acct-bad);
  display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;
}
.acct-error[hidden]{display:none}
.acct-error .acct-error-code{
  font:600 11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--acct-ink-faint);border:1px solid var(--acct-line);border-radius:6px;padding:0 5px;
}
.acct-note{margin:0;font-size:13px;color:var(--acct-ink-dim)}
.acct-note.good{color:var(--acct-good)}
.acct-note.bad{color:var(--acct-bad)}

/* ────────────────────────────────────────────────── handle confirm step ─ */
.acct-confirm{
  border:1px solid rgba(228,174,110,.32);background:rgba(228,174,110,.07);
  border-radius:var(--acct-radius-sm);padding:12px 14px;display:grid;gap:10px;max-width:460px;
}
.acct-confirm[hidden]{display:none}
.acct-confirm p{margin:0;font-size:13.5px;color:var(--acct-ink)}
.acct-confirm .acct-field-row{gap:8px}

.acct-suggest{display:flex;gap:8px;flex-wrap:wrap}
.acct-suggest[hidden]{display:none}

/* ───────────────────────────────────────────────────────────────── avatar ─ */
.acct-avatar-grid{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.acct-avatar-current{display:grid;gap:10px;justify-items:center}
.acct-avatar-pic,.acct-monogram{
  width:112px;height:112px;border-radius:50%;overflow:hidden;display:block;
  border:1px solid var(--line-2);background:var(--acct-field);
}
.acct-avatar-pic img{width:100%;height:100%;object-fit:cover;display:block}
.acct-monogram{
  display:grid;place-items:center;font-weight:700;font-size:38px;letter-spacing:.02em;
  color:#fff;background:linear-gradient(135deg,var(--mono-a,var(--flame-1)),var(--mono-b,var(--flame-3)));
  box-shadow:0 10px 26px -16px rgba(0,0,0,.85);
}
.acct-avatar-pic[hidden],.acct-monogram[hidden]{display:none}

/* The same dashed target as .dropzone in the sidebar, at panel scale. */
.acct-drop{
  position:relative;flex:1 1 260px;min-width:240px;
  border:1px dashed var(--line-3);border-radius:var(--acct-radius);
  padding:16px;display:grid;gap:12px;justify-items:center;
  background:var(--surface);
  transition:border-color .22s var(--acct-ease),background .22s var(--acct-ease);
}
.acct-drop.over{border-color:rgba(224,143,76,.6);background:rgba(217,111,51,.08)}
.acct-drop p{margin:0;text-align:center;color:var(--acct-ink-dim);font-size:13px}
.acct-drop input[type=file]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Off-screen but still a tab stop, so its focus ring has to be drawn on
   something visible — otherwise tabbing into it looks like focus vanished. */
.acct-drop:has(input[type=file]:focus-visible){
  border-color:var(--flame-3);outline:2px solid var(--flame-3);outline-offset:3px;
}

.acct-crop{position:relative;display:none;width:236px;height:236px}
.acct-crop.on{display:block}
.acct-crop canvas{
  width:236px;height:236px;display:block;border-radius:var(--acct-radius-sm);
  background:var(--bg-1);cursor:grab;touch-action:none;
}
.acct-crop canvas:active{cursor:grabbing}
/* The circular mask is decoration over the square export area, so the person
   sees the shape the avatar will actually be displayed in. */
.acct-crop-mask{
  position:absolute;inset:0;border-radius:var(--acct-radius-sm);pointer-events:none;
  box-shadow:inset 0 0 0 9999px rgba(12,10,9,.62);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 49.5%,#000 50%);
  mask:radial-gradient(circle at 50% 50%,transparent 49.5%,#000 50%);
}
.acct-crop-ring{
  position:absolute;inset:0;border-radius:var(--acct-radius-sm);pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line-3);
}
.acct-crop-progress{
  position:absolute;left:10px;right:10px;bottom:10px;height:6px;border-radius:var(--pill);
  background:rgba(12,10,9,.72);overflow:hidden;display:none;
}
.acct-crop-progress.on{display:block}
.acct-crop-progress i{
  display:block;height:100%;width:0%;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--flame-1),var(--ember));
  transition:width .12s linear;
}
.acct-crop-zoom{display:grid;gap:6px;width:236px}
.acct-crop-zoom input[type=range]{width:100%;accent-color:var(--flame-2)}

/* ─────────────────────────────────────────────────────── password + meter ─ */
.acct-strength{display:grid;gap:6px;max-width:460px}
.acct-strength-bar{display:flex;gap:5px}
.acct-strength-bar i{
  flex:1;height:5px;border-radius:var(--pill);background:var(--line-2);
  transition:background .2s var(--acct-ease);
}
.acct-strength-bar i.on{background:var(--ember)}
.acct-strength-bar i.on.good{background:var(--acct-good)}
.acct-strength-text{font-size:12.5px;color:var(--acct-ink-dim)}

/* ───────────────────────────────────────────────────────── preferences ─── */
.acct-prefs{display:grid;gap:4px}
.acct-pref{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;
  padding:12px 2px;border-bottom:1px solid var(--acct-line-soft);
}
.acct-pref:last-of-type{border-bottom:0}
.acct-pref .acct-error{grid-column:1/-1}
.acct-switch{display:flex;align-items:flex-start;gap:12px;cursor:pointer;min-width:0}
.acct-switch input{
  position:absolute;opacity:0;width:44px;height:24px;margin:0;cursor:pointer;
}
.acct-switch-track{
  flex:none;width:44px;height:24px;border-radius:var(--pill);margin-top:1px;
  background:var(--surface-2);border:1px solid var(--line-2);position:relative;
  transition:background .18s var(--acct-ease),border-color .18s var(--acct-ease);
}
.acct-switch-knob{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--ink-2);transition:transform .18s var(--acct-ease),background .18s var(--acct-ease);
}
.acct-switch input:checked + .acct-switch-track{background:rgba(var(--flame-rgb),.3);
  border-color:rgba(224,143,76,.5)}
.acct-switch input:checked + .acct-switch-track .acct-switch-knob{transform:translateX(20px);
  background:linear-gradient(135deg,var(--flame-2),var(--ember))}
.acct-switch input:focus-visible + .acct-switch-track{outline:2px solid var(--flame-3);outline-offset:3px}
.acct-switch input:disabled + .acct-switch-track{opacity:.5}
.acct-switch-text{display:grid;gap:2px;min-width:0}
.acct-switch-title{font-weight:600;font-size:13.5px}
.acct-switch-note{color:var(--acct-ink-faint);font-size:12.5px}
.acct-pref-glyph{
  justify-self:end;font-size:12px;font-weight:650;min-width:74px;text-align:right;
  color:var(--acct-ink-faint);
}
.acct-pref-glyph[data-state=saving]{color:var(--flame-3)}
.acct-pref-glyph[data-state=saved]{color:var(--acct-good)}
.acct-pref-glyph[data-state=failed]{color:var(--acct-bad)}

.acct-summary{
  margin:2px 0 0;padding:12px 14px;border-radius:var(--acct-radius-sm);
  background:var(--surface);border:1px solid var(--line-2);
  color:var(--acct-ink);font-size:13.5px;
}

/* ─────────────────────────────────────────────── conflict + live status ─── */
.acct-conflict{
  grid-column:1/-1;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-radius:var(--acct-radius-sm);
  background:rgba(228,174,110,.1);border:1px solid rgba(228,174,110,.34);
  color:var(--acct-ink);font-size:13.5px;
}
.acct-conflict[hidden]{display:none}

.acct-live{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(8px);
  z-index:40;max-width:min(92vw,520px);
  padding:10px 16px;border-radius:var(--pill);
  background:rgba(19,16,13,.96);border:1px solid var(--line-2);
  box-shadow:var(--sh-3);color:var(--acct-ink);font-size:13.5px;
  opacity:0;pointer-events:none;
  transition:opacity .18s var(--acct-ease),transform .18s var(--acct-ease);
}
.acct-live.show{opacity:1;transform:translateX(-50%) translateY(0)}
.acct-live.bad{border-color:rgba(224,110,95,.5)}

/* ───────────────────────────────────────────── skeleton on first hydrate ─ */
/* A skeleton, not a spinner: the layout is known before the data is, so the
   page should not reflow when /api/account lands. */
.acct-skel{
  display:block;height:38px;border-radius:var(--acct-radius-sm);
  background:linear-gradient(90deg,var(--surface) 0%,var(--surface-3) 50%,var(--surface) 100%);
  background-size:220% 100%;animation:acct-shimmer 1.25s linear infinite;
}
.acct-skel.wide{max-width:460px}
@keyframes acct-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
body[data-hydrated="true"] .acct-skel{display:none}
body:not([data-hydrated="true"]) [data-live-only]{display:none !important}

/* ──────────────────────────────────────────────────────────── responsive ─ */
@media (max-width:860px){
  /* minmax(0,1fr) prevents the horizontally scrolling section tabs from
     contributing their max-content width to the grid track on narrow phones. */
  .acct-shell{grid-template-columns:minmax(0,1fr);padding-bottom:64px}
  .acct-nav{position:sticky;top:56px;z-index:20;margin:0 -4px;
    background:rgba(12,10,9,.72);backdrop-filter:blur(20px) saturate(150%);padding:8px 4px;
    border-bottom:1px solid var(--line)}
  .acct-nav h2{display:none}
  .acct-nav ol{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:6px;
    scrollbar-width:none}
  .acct-nav ol::-webkit-scrollbar{display:none}
  .acct-nav a{border-left:0;border:1px solid var(--line-2);border-radius:var(--pill);
    white-space:nowrap}
  .acct-nav a[aria-current="true"]{border-color:rgba(224,143,76,.5)}
  .acct-card-toggle{display:inline-flex;align-items:center;justify-content:center}
  .acct-card.collapsed .acct-card-body{display:none}
  .acct-card.collapsed .acct-card-summary{display:block}
  .acct-card.collapsed .acct-card-desc{display:none}
}

@media (max-width:420px){
  body.acct-body{font-size:14.5px}
  .acct-shell{padding-left:12px;padding-right:12px}
  .acct-card{padding:14px}
  .acct-avatar-grid{gap:16px}
  .acct-avatar-pic,.acct-monogram{width:88px;height:88px}
  .acct-monogram{font-size:30px}
  .acct-crop,.acct-crop canvas,.acct-crop-zoom{width:100%;max-width:280px}
  .acct-crop{height:auto;aspect-ratio:1}
  .acct-crop canvas{height:auto;aspect-ratio:1}
  .acct-drop{min-width:0;flex-basis:100%}
  .acct-field,.acct-strength,.acct-confirm,.acct-summary{max-width:none}
  .acct-pref{grid-template-columns:1fr;align-items:start}
  .acct-pref-glyph{justify-self:start;text-align:left;min-width:0}
}

/* Motion is decoration here; the shimmer and the toast slide are the only two
   places it carries meaning, and both read fine as an instant state change. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .acct-skel{animation:none;background:var(--surface-2)}
  .acct-live{transform:translateX(-50%)}
  .acct-live.show{transform:translateX(-50%)}
  .acct-btn:active:not(:disabled){transform:none}
  .acct-switch input:checked + .acct-switch-track .acct-switch-knob{transition:none}
}

/* Mono micro-labels, matching the foot of style.css. */
.acct-badge,.acct-nav h2{font-family:var(--mono);font-weight:500}