/* The studio shell: a fixed icon rail, a working column and a side column.

   The palette, radii and easing all come from base.css, so this reads as the
   same product as the landing page rather than a second one bolted on. */

.app {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- The rail --------------------------------------------------------- */

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  border-right: 1px solid var(--line-soft);
  background: var(--ink-900);
}

.rail__brand { display: block; margin-bottom: 1rem; }

/* Worn by both the anchors and the theme button, so it resets the styling a
   browser gives a <button> on its own: without this the toggle carries a
   light UA background and border, and reads as permanently pressed. */
.rail__link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-faint);
  font: inherit;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.rail__link:hover { color: var(--text); background: var(--ink-700); }
/* The current page is tinted, never grey: grey is the hover fill (decision 52). */
.rail__link[aria-current='page'] { color: var(--st-accent); background: color-mix(in srgb, var(--st-accent) 12.5%, transparent); }
.rail__link svg { width: 20px; height: 20px; }

.rail__spacer { flex: 1; }

.rail__me {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-hot), var(--accent));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---- The page --------------------------------------------------------- */

.work {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) 2rem;
  max-width: 1400px;
}

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 1.75rem;
}

.work__title { margin: 0 0 0.35rem; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.work__lede { margin: 0; color: var(--text-dim); }

.eyebrow--card {
  margin: 0 0 0.9rem;
  color: var(--text-faint);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-800);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: var(--gap);
  align-items: start;
}

@media (max-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* ---- The account menu ------------------------------------------------- */

.rail__account { position: relative; }

.rail__me {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-hot), var(--accent));
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.15s var(--ease);
}
.rail__me:hover { box-shadow: 0 0 0 3px var(--accent-soft); }
.rail__me[aria-expanded='true'] { box-shadow: 0 0 0 3px var(--accent-line); }

/* Anchored to the rail and opening upward, because the button sits at its
   foot. Fixed rather than absolute so the rail's overflow can never clip it. */
.account {
  position: absolute;
  bottom: 0;
  left: calc(100% + 0.6rem);
  z-index: 20;
  width: 264px;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-800);
  box-shadow: var(--shadow-pop);
}
.account[hidden] { display: none; }

.account__who { display: none; padding: 0.6rem 0.65rem 0.75rem; }
.account__name { margin: 0; font-weight: 600; font-size: 0.95rem; }
.account__email {
  margin: 0.1rem 0 0;
  color: var(--text-dim);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.account__plan {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--ink-600);
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account__deciding,
.account__off {
  display: none;
  margin: 0;
  padding: 0.6rem 0.65rem;
  color: var(--text-dim);
  font-size: 0.88rem;
}

.account__rule {
  display: none;
  height: 1px;
  margin: 0.35rem 0;
  border: 0;
  background: var(--line-soft);
}

.account__item {
  display: block;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.account__item:hover { color: var(--text); background: var(--ink-700); }
.account__login, .account__logout { display: none; }
.account__logout:disabled { opacity: 0.6; cursor: default; }

.account[data-state='deciding'] .account__deciding { display: block; }
.account[data-state='off'] .account__off { display: block; }
.account[data-state='signed-out'] .account__login,
.account[data-state='signed-in'] .account__logout { display: block; }
.account[data-state='signed-in'] .account__who { display: block; }
.account[data-state='signed-in'] .account__rule,
.account[data-state='signed-out'] .account__rule { display: block; }

/* ---- Asking for a chart ----------------------------------------------- */

.ask {
  display: grid;
  place-items: center;
  gap: 0.9rem;
  padding: clamp(2rem, 6vw, 3.5rem) 1.25rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-850);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.ask[data-drop='over'] { border-color: var(--accent-line); background: var(--accent-soft); }

.ask__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--ink-700);
  color: var(--text-dim);
}
.ask__mark svg { width: 20px; height: 20px; }

.ask__title { margin: 0; font-size: 1.1rem; font-weight: 600; }
.ask__hint { margin: 0; color: var(--text-faint); font-size: 0.86rem; }

.ask__form { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; width: min(560px, 100%); }

.ask__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-900);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}
.ask__input::placeholder { color: var(--text-faint); }
.ask__input:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 1px; }

.note {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-850);
  color: var(--text-dim);
  font-size: 0.88rem;
}
.note[data-tone='bad'] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
.note[hidden] { display: none; }

/* ---- The chart -------------------------------------------------------- */

.chart { margin-top: var(--gap); }
.chart[hidden] { display: none; }

.chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.chart__title { margin: 0; font-size: 1.15rem; }
.chart__facts { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pill {
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink-700);
  color: var(--text-dim);
  font-size: 0.8rem;
}

.chart__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.6rem;
}

.chord {
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-700);
  text-align: center;
}
.chord__name { font-size: 1.05rem; font-weight: 600; color: var(--chord-ink); }
.chord__name sup { font-size: 0.6em; }
.chord__at { margin-top: 0.15rem; color: var(--text-faint); font-size: 0.72rem; font-variant-numeric: tabular-nums; }

/* ---- Songs ------------------------------------------------------------ */

.songs { display: grid; gap: 0.6rem; }
.songs__empty { margin: 0; color: var(--text-faint); font-size: 0.88rem; }

.song {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--ink-850);
  transition: border-color 0.15s, background 0.15s;
}
.song:hover { border-color: var(--line); background: var(--ink-700); }

.song__art {
  width: 72px;
  height: 41px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--ink-600);
}
.song__name {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.song__meta { margin: 0.1rem 0 0; color: var(--text-faint); font-size: 0.76rem; }

/* ---- The dashboard ---------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}
.tile__value { margin: 0.3rem 0 0; font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.tile__unit { margin: 0.2rem 0 0; color: var(--text-faint); font-size: 0.82rem; }

.ask__form--left { justify-content: flex-start; width: 100%; }
.card--spaced { margin-top: var(--gap); }

.install__title { margin: 0 0 0.5rem; font-size: 1.15rem; }
.install__copy { margin: 0 0 1.1rem; color: var(--text-dim); font-size: 0.92rem; }
.install[hidden] { display: none; }

.legal {
  margin: 2.5rem 0 0;
  color: var(--text-faint);
  font-size: 0.82rem;
  text-align: center;
}
.legal a { color: var(--text-dim); text-decoration: underline; }
.legal a:hover { color: var(--text); }

/* The signed-in account's Google profile picture, shown in place of the
   initial. It is the one image here served by Google, so it carries
   referrerpolicy="no-referrer": some googleusercontent URLs refuse a request
   that names the page it came from. */
.rail__avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.rail__avatar[hidden] { display: none; }
.rail__initial[hidden] { display: none; }

/* ---- Light mode -------------------------------------------------------- */

/* Scoped to the studio shell by [data-app="studio"], because the landing page
   is built on dark-specific gradients in stage.css that a token swap alone
   would not carry. The studio itself is all tokens, so it can follow the
   system and be overridden by the toggle in the rail.
   The ink ramp is a depth scale rather than a set of greys: 900 is the
   furthest back, 600 the furthest forward, so light mode inverts the
   lightness and keeps every rule that reads it. */
:root[data-app='studio'][data-theme='light'] { color-scheme: light; }
:root[data-app='studio'][data-theme='dark'] { color-scheme: dark; }

@media (prefers-color-scheme: light) {
  :root[data-app='studio']:not([data-theme='dark']) { color-scheme: light; }
}

:root[data-app='studio'][data-theme='light'] {
  --ink-900: #ffffff;
  --ink-850: #f5f7fa;
  --ink-800: #ffffff;
  --ink-700: #eef1f6;
  --ink-600: #e2e7ef;
  --line: #d5dbe5;
  --line-soft: #e6eaf1;
  --line-strong: #b9c2d0;

  --text: #0d0f16;
  --text-dim: #4b5464;
  --text-faint: #666f80;

  --accent-soft: rgb(224 20 50 / 0.10);
  --accent-line: rgb(224 20 50 / 0.38);

  /* #f2b25c is unreadable on white, so the chord colour darkens instead. */
  --chord-ink: #9a5a05;

  --shadow-pop: 0 20px 44px -18px rgb(13 15 22 / 0.28);
}

@media (prefers-color-scheme: light) {
  :root[data-app='studio']:not([data-theme='dark']) {
    --ink-900: #ffffff;
    --ink-850: #f5f7fa;
    --ink-800: #ffffff;
    --ink-700: #eef1f6;
    --ink-600: #e2e7ef;
    --line: #d5dbe5;
    --line-soft: #e6eaf1;
    --line-strong: #b9c2d0;

    --text: #0d0f16;
    --text-dim: #4b5464;
    --text-faint: #666f80;

    --accent-soft: rgb(224 20 50 / 0.10);
    --accent-line: rgb(224 20 50 / 0.38);
    --chord-ink: #9a5a05;
    --shadow-pop: 0 20px 44px -18px rgb(13 15 22 / 0.28);
  }
}

/* ---- The theme toggle -------------------------------------------------- */

.rail__theme { margin-bottom: 0.5rem; }

/* Each icon names the theme the button switches to, so the sun shows while
   the page is dark. The effective theme is what decides, which is why the
   media query and both explicit overrides all get a say.
   Its name ("Light mode" / "Dark mode") follows the same rules, and so does
   its tooltip, a copy of the name inside the button (src/studio/rail.ts). */
.rail__theme :is(.icon-moon, .to-dark) { display: none; }

@media (prefers-color-scheme: light) {
  :root[data-app='studio']:not([data-theme='dark']) .rail__theme :is(.icon-sun, .to-light) { display: none; }
  :root[data-app='studio']:not([data-theme='dark']) .rail__theme :is(.icon-moon, .to-dark) { display: block; }
}

:root[data-theme='light'] .rail__theme :is(.icon-sun, .to-light) { display: none; }
:root[data-theme='light'] .rail__theme :is(.icon-moon, .to-dark) { display: block; }
:root[data-theme='dark'] .rail__theme :is(.icon-sun, .to-light) { display: block; }
:root[data-theme='dark'] .rail__theme :is(.icon-moon, .to-dark) { display: none; }

/* ---- The sign-in gate --------------------------------------------------- */

/* The work is on screen unless the gate positively closes it. "deciding"
   leaves it alone on purpose: hiding it until something says otherwise turns
   every way of failing to decide, an unanswered /me, a thrown render, a
   missing element, into a blank page, which is worse than a signed-out
   visitor seeing the studio for the moment before the redirect lands. */
.gate { display: none; max-width: 520px; }
.gate__title { margin: 0 0 0.6rem; font-size: 1.25rem; }
.gate__copy { margin: 0 0 1.25rem; color: var(--text-dim); }
.gate__aside { margin: 1.25rem 0 0; color: var(--text-faint); font-size: 0.86rem; }
.gate__aside a { color: var(--text-dim); text-decoration: underline; }
.gate__aside a:hover { color: var(--text); }

.work[data-gate='closed'] .split,
.work[data-gate='closed'] .tiles,
.work[data-gate='closed'] .card--spaced { display: none; }

.work[data-gate='closed'] .gate { display: block; }

/* ---- Terms and Privacy (decision 72) ------------------------------------ */

/* The Studio's first-time screen says what using it agrees to, under the
   Split stems card; every other screen leaves it out. */
.st-shell__agree { display: none; }
.st-shell[data-screen='first-time']:not([data-gate='closed']) .st-shell__agree {
  display: block;
  margin: 12px 0 0;
  color: var(--st-text-faint);
  font-size: 12px;
  text-align: center;
}
.st-shell__agree a { color: var(--st-text-dim); text-decoration: underline; }
.st-shell__agree a:hover { color: var(--st-text); }
.gate__agree { margin-top: 0.6rem; }