/* Sign-in, «Флешка» (stick page), the account page; tokens and base components are in theme.css. */

/* sign-in / sign-up: the box hangs from a fixed line (a little above the middle), so switching to sign-up grows it
   downwards only: the invite field unfolds (height + opacity), nothing above it moves */
.auth { --auth-top: max(var(--s-8), calc(50vh - 200px)); min-height: 100vh; display: grid; justify-items: center; align-content: start;
  padding: var(--auth-top) var(--s-5) var(--s-7); }
/* the glow: the logo's light behind the wordmark, drifting a few px a minute (static with reduced motion) */
.auth::before { content: ""; position: fixed; z-index: -1; left: 50%; top: calc(var(--auth-top) - 400px); width: 1080px; height: 820px; margin-left: -560px;
  pointer-events: none; will-change: transform;
  background:
    radial-gradient(closest-side at 40% 46%, rgba(var(--glow-blue), .42), rgba(var(--glow-blue), .4) 10%, rgba(var(--glow-blue), .32) 22%,
      rgba(var(--glow-blue), .19) 38%, rgba(var(--glow-blue), .085) 56%, rgba(var(--glow-blue), .025) 76%, transparent),
    radial-gradient(closest-side at 64% 60%, rgba(var(--glow-violet), .34), rgba(var(--glow-violet), .26) 14%, rgba(var(--glow-violet), .13) 36%,
      rgba(var(--glow-violet), .04) 62%, transparent 86%);
  animation: glow-drift 28s ease-in-out infinite alternate; }
@keyframes glow-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
/* faint grooves around the light, like the record in the logo */
.auth::after { content: ""; position: fixed; z-index: -1; left: 50%; top: calc(var(--auth-top) - 400px); width: 1080px; height: 820px; margin-left: -560px;
  pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(circle at 40% 46%, transparent 0 9px, rgba(255, 255, 255, .035) 9px 10px);
  -webkit-mask-image: radial-gradient(closest-side at 40% 46%, transparent 18%, #000 40%, transparent 92%);
  mask-image: radial-gradient(closest-side at 40% 46%, transparent 18%, #000 40%, transparent 92%); }
/* a cloud of the accent's light that follows the pointer over the background (js/app.js: eased, mouse only) */
.auth-cursor { position: fixed; z-index: -1; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; pointer-events: none;
  border-radius: 50%; opacity: 0; will-change: transform; transition: opacity 600ms var(--ease-out);
  background: radial-gradient(closest-side, rgba(var(--glow-blue), .2), rgba(var(--glow-blue), .12) 30%, rgba(var(--glow-blue), .05) 58%, transparent); }
.auth-cursor.on { opacity: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .auth-cursor { display: none; } }
.auth-box { width: 100%; max-width: 360px; display: grid; gap: var(--s-4); }
.brand-big { font: 400 44px/1 var(--font-display); font-variation-settings: "ELSH" 20; font-synthesis: none; }
.auth-box .sub { margin: -8px 0 var(--s-2); }
.auth-box .seg { justify-self: start; }
.auth-box form { display: flex; flex-direction: column; }
.auth-box form > * + * { margin-top: var(--s-3); }
.auth-box form > .auth-more { margin-top: 0; }                 /* it carries its own space, so it folds to nothing */
.auth-box form > button { margin-top: 20px; }
.auth-box form input { height: 44px; }
.auth-box form input:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); }   /* inside: never clipped by the fold */
.auth-more { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0;
  transition: grid-template-rows var(--d-4) var(--ease-out), opacity var(--d-2) linear; }
.auth-more > div { min-height: 0; display: flow-root; }
.auth-more input { margin-top: var(--s-3); }                  /* on the input, not the box: a folded box is 0 px */
.auth-more.open { grid-template-rows: 1fr; opacity: 1; transition-delay: 0s, 60ms; }
#authGo > span { display: inline-block; }
#authGo > span.swap { animation: swap var(--d-2) var(--ease-out); }

/* toolbar row on the stick page */
.toolbar { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-4); }
.toolbar .grow { flex: 1 1 auto; }
.toolbar input[type=search] { max-width: 260px; }

/* the empty stick page */
.hero { max-width: 520px; margin: 12vh auto 0; text-align: center; }
.hero h2 { font: var(--t-display); letter-spacing: -.02em; margin: 0 0 var(--s-3); }
.hero p { color: var(--text-2); margin: var(--s-2) 0; }
.hero .acts { display: flex; gap: var(--s-3); justify-content: center; margin: var(--s-5) 0 var(--s-3); flex-wrap: wrap; }
.hero button { height: 44px; padding: 0 22px; font-size: 15px; }

.panel { min-width: 0; }
.panel > h2 { font: var(--t-title); margin: 0 0 var(--s-3); display: flex; gap: var(--s-2); align-items: center; }
.panel > h2 .sp { margin-left: auto; font: var(--t-small); color: var(--text-2); }
.cols { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; } }

/* playlist tree */
.pl-tree { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 180px); overflow-y: auto; }
.pl-tree ul { list-style: none; margin: 0; padding: 0; }
.pl-tree ul ul { padding-left: 14px; }
.pl-item { display: flex; width: 100%; height: auto; justify-content: space-between; gap: var(--s-2); text-align: left; background: transparent; border-radius: var(--r-s); padding: 8px 10px; font: var(--t-body); color: var(--text); }
.pl-item:hover:not(:disabled) { background: var(--fill); }
.pl-item.sel { background: var(--fill-strong); }
.pl-item .c { color: var(--text-3); font-variant-numeric: tabular-nums; }
.pl-item.folder { color: var(--text-2); font: var(--t-small); padding-top: 10px; }
.pl-item.folder .arr { display: inline-block; width: 12px; }

/* track tables */
table.tl { width: 100%; border-collapse: collapse; }
.tl th, .tl td { text-align: left; padding: 10px 8px; vertical-align: top; }
.tl th { color: var(--text-3); font: var(--t-caption); }
.tl tbody tr:hover td { background: color-mix(in srgb, var(--fill) 60%, transparent); }
.tl td.n { font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.tl td.cb, .tl th.cb { width: 28px; }
.tl tr.off td { opacity: .5; }
.tl .tt { min-width: 0; overflow-wrap: anywhere; }
.tl td.st { width: 220px; }
.st-pill { display: inline-flex; align-items: center; gap: 6px; font: var(--t-small); color: var(--text-2); white-space: nowrap; }
.st-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.st-pill.ok::before { background: var(--good); }
.st-pill.bad { color: var(--bad); } .st-pill.bad::before { background: var(--bad); }
.st-pill.busy::before { background: var(--warn); }
.pbar.big { height: 6px; border-radius: 3px; margin: var(--s-3) 0 var(--s-2); }
.pbar.big i { background: var(--text); }
.pbar.enc i { background: var(--warn); }
.pbar.thin { height: 2px; }
.contrib { font: var(--t-small); color: var(--text-3); margin-top: 3px; }
.contrib.done { color: var(--good); } .contrib.failed { color: var(--warn); }
.why { color: var(--bad); font: var(--t-small); margin-top: 2px; }

/* import progress in the header */
.imp-chip { height: 30px; padding: 0 12px; gap: 8px; font: var(--t-small); color: var(--text-2); background: var(--fill); }
.imp-chip:hover:not(:disabled) { color: var(--text); }

/* account */
.acc .title { margin-bottom: 0; }
.acc .lim { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 10px 0; }
.acc .lim span { color: var(--text-2); }
.acc .lim b { font-weight: 500; font-variant-numeric: tabular-nums; }
.acc .lim .pbar { grid-column: 1 / -1; }
.acc details { margin-top: var(--s-3); }
.acc details[open] summary { margin-bottom: var(--s-2); }
/* skeleton (app.js renderAccount) */
.acc .sk .acc-sk-name { width: 140px; } .acc .sk .acc-sk-plan { width: 60px; margin-top: var(--s-1); }
.acc .sk .acc-sk-n { width: 64px; }
.acc .sk .acc-sk-more { margin-top: var(--s-3); height: 22px; display: flex; align-items: center; } .acc .sk .acc-sk-sum { width: 110px; }
.acc .sk .acc-sk-switch { display: flex; align-items: center; gap: 12px; } .acc .sk .acc-sk-tog { width: 40px; height: 24px; }
.acc .sk .acc-sk-switch .skel:last-child { width: 200px; }
.acc .sk .acc-sk-note { margin-top: var(--s-1); }
.acc .sk .acc-sk-out { width: 76px; height: 36px; }