/* ==========================================================================
   Undertold app: Create, Documentary (desk / proposal / studio / failed),
   Library, auth and Account. Builds on tokens.css + base.css.
   ========================================================================== */

/* ---------- Shared ---------- */
.app-page main { min-height: calc(100dvh - var(--nav-h)); }
.link--btn { font: inherit; padding: 0; background: none; border: 0; cursor: pointer; }
.state[hidden] { display: none !important; }

/* The one lamp: a soft tungsten pool at the top of focused screens */
.app-create main,
.app-doc main {
  background:
    radial-gradient(56rem 26rem at 50% -8rem, rgba(242, 163, 58, 0.075), transparent 70%),
    var(--bg);
}

/* ==========================================================================
   Create: the composer
   ========================================================================== */
.composer__inner {
  display: grid;
  gap: var(--space-6);
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) 0;
}

.composer__followup {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-sm); color: var(--ink-muted);
}
.composer__followup-kind { color: var(--ink); font-weight: 600; }

.composer__topic { gap: var(--space-3); }
.composer__ask {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-variation-settings: "wdth" 68;
  font-weight: 700;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
/* The prompt is written straight onto the felt, like a slate: no box, one rule */
.composer__prompt {
  width: 100%;
  min-height: 3.5rem;
  padding: var(--space-2) 0 var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  line-height: 1.32;
  font-variation-settings: "opsz" 36;
  caret-color: var(--accent);
  resize: none;
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out);
}
.composer__prompt::placeholder { color: var(--ink-faint); opacity: 0.8; font-style: italic; }
.composer__prompt:hover { border-bottom-color: var(--ink-faint); }
.composer__prompt:focus-visible { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); border-radius: 0; }
.field--error .composer__prompt { border-bottom-color: var(--danger); }
.composer__topic-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }

.composer__sparks { display: grid; gap: var(--space-2); margin-top: calc(var(--space-3) * -1); }
.spark { white-space: normal; text-align: left; line-height: 1.25; padding-block: 0.45rem; }
.spark--surprise { border-style: dashed; color: var(--ink-muted); }
@media (max-width: 39.99rem) {
  /* one swipeable row on phones */
  #spark-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; contain: inline-size;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 2px;
  }
  #spark-chips::-webkit-scrollbar { display: none; }
  #spark-chips .spark { white-space: nowrap; flex: none; }
}
.spark--surprise:hover { color: var(--ink); }

/* Production sheet: a ruled form, like a studio call sheet */
.composer__sheet {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: var(--inner-light);
}
.sheet-row {
  display: grid; gap: var(--space-3);
  margin: 0; min-width: 0;
  padding: var(--space-5) var(--space-4);
  border: 0;
  border-top: 1px solid var(--line);
}
.sheet-row:first-child { border-top: 0; }
.sheet-row__label {
  float: left;            /* lets <legend> sit inside the grid */
  padding: 0;
  font-size: var(--fs-sm); font-weight: 650; color: var(--ink);
}
.sheet-row__label + * { clear: both; }
.sheet-row__body { display: grid; gap: var(--space-2); min-width: 0; }
@media (min-width: 40rem) {
  .sheet-row { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; padding-inline: var(--space-5); gap: var(--space-5); }
  .sheet-row__label { padding-top: 0.55rem; }
  .sheet-row__label + * { clear: none; }
}

/* Format: four options with one-line explanations */
.format-grid { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 30rem) { .format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.format-option {
  position: relative; display: grid; gap: 0.2rem;
  padding: var(--space-3) var(--space-4) var(--space-3) 2.4rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-1), background-color var(--dur-1);
}
.format-option::before {
  content: ""; position: absolute; left: var(--space-4); top: 1.05rem;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-faint);
}
.format-option:hover { background: var(--surface-2); }
.format-option:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.format-option:has(input:checked)::before { box-shadow: inset 0 0 0 3.5px var(--ink); }
.format-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.format-option input { position: absolute; opacity: 0; pointer-events: none; }
.format-option__name { font-weight: 650; }
.format-option__desc { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.4; }

/* Length */
.length-chip { position: relative; }
.length-chip__lock { width: 0.9rem; height: 0.9rem; }
.length-chip.is-locked { border-style: dashed; color: var(--ink-faint); cursor: not-allowed; }
.length-chip.is-locked:hover { background: transparent; border-color: var(--line-strong); }

/* Narrators */
.narrators { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 30rem) { .narrators { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.narrator {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color var(--dur-1), background-color var(--dur-1);
}
.narrator:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.narrator:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.narrator__pick {
  position: relative; display: grid; gap: 0.15rem; min-width: 0;
  padding: var(--space-3) var(--space-2) var(--space-3) 2.4rem; cursor: pointer;
}
.narrator__pick::before {
  content: ""; position: absolute; left: var(--space-4); top: 1.05rem;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-faint);
}
.narrator:has(input:checked) .narrator__pick::before { box-shadow: inset 0 0 0 3.5px var(--ink); }
.narrator__pick input { position: absolute; opacity: 0; pointer-events: none; }
.narrator__name { font-weight: 650; }
.narrator__desc { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.35; }
.narrator__preview {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; margin-right: var(--space-2);
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: background-color var(--dur-1), border-color var(--dur-1);
}
.narrator__preview:hover { background: var(--surface-3); border-color: var(--ink-faint); }
.narrator__preview:focus-visible { border-radius: 50%; }
.narrator__preview svg { width: 0.95rem; height: 0.95rem; margin-left: 2px; }
.narrator__preview.is-playing { border-color: var(--accent); }
.narrator__preview .wave { --wave-h: 1rem; --wave-bar: 0.16rem; }

.composer__notes { min-height: 4.5rem; }

.composer__error {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--ink);
  border-left: 3px solid var(--danger);
  font-size: var(--fs-sm); line-height: 1.5;
}

/* Sticky footer: what it costs, and the one button.
   scroll-padding keeps keyboard focus from landing underneath it. */
html:has(body.app-create) { scroll-padding-bottom: 10rem; }
html:has(#produce-bar:not([hidden])) { scroll-padding-bottom: 6rem; }
.composer__submit {
  position: sticky; bottom: 0; z-index: var(--z-raised);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5);
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--space-4) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--glass);
  backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-top: 1px solid var(--line);
}
@media (min-width: 46rem) {
  .composer__submit { margin-inline: 0; padding-inline: var(--space-5); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
}
.composer__cost { display: grid; gap: 0.15rem; min-width: 0; flex: 1 1 16rem; }
.composer__cost-main { font-weight: 600; }
.composer__cost-warn { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.45; margin-top: var(--space-1); }
.composer__submit .btn { flex: 1 1 auto; }
@media (max-width: 29.99rem) {
  .composer__submit { padding-block: var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); gap: var(--space-2); }
  .composer__submit .btn--lg { min-height: var(--control-h); font-size: var(--fs-md); }
}
@media (min-width: 30rem) { .composer__submit .btn { flex: 0 0 auto; } }

/* ==========================================================================
   Documentary: the research desk & the studio (shared)
   ========================================================================== */
.desk {
  display: grid; gap: var(--space-6);
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) var(--space-8);
}
.desk__head { display: grid; gap: var(--space-3); }
.desk__topic {
  font-family: var(--font-text);
  font-weight: 420;
  font-size: var(--fs-4xl);
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 60;
  text-wrap: balance;
  max-width: 38rem;
}
.desk__signal {
  position: relative;
  display: flex; align-items: center;
  height: 6rem;
  padding-left: var(--space-1);
}
.desk__signal::before {   /* the lamp under the waveform */
  content: ""; position: absolute; left: -2rem; top: 50%; width: 14rem; height: 8rem; transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(242, 163, 58, 0.16), transparent);
  pointer-events: none;
}
.desk__status { display: grid; gap: var(--space-3); }
.desk__status-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.desk__stage { font-size: var(--fs-xl); font-weight: 600; }
.desk__note {
  padding-top: var(--space-5); border-top: 1px solid var(--line);
  color: var(--ink-muted); max-width: 34rem;
}

/* Desk steps: a short, real sequence with the time each step started */
.desk-steps { list-style: none; padding: 0; display: grid; }
.desk-steps__item {
  position: relative;
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; column-gap: var(--space-3);
  align-items: baseline;
  padding-bottom: var(--space-4);
  color: var(--ink-faint);
}
.desk-steps__item::before {   /* the node */
  content: ""; grid-row: 1; align-self: center;
  width: 0.75rem; height: 0.75rem; margin-left: 0.5rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  background: var(--bg);
  position: relative; z-index: 1;
}
.desk-steps__item::after {    /* the thread */
  content: ""; position: absolute; left: calc(0.875rem - 0.5px); top: 1.1rem; bottom: -0.1rem; width: 1px;
  background: var(--line);
}
.desk-steps__item:last-child::after { display: none; }
.desk-steps__name { font-weight: 600; }
.desk-steps__time { font-size: var(--fs-sm); color: var(--ink-faint); }
.desk-steps__detail {
  grid-column: 2 / -1;
  display: none;
  margin-top: var(--space-1);
  font-family: var(--font-text); font-size: var(--fs-lg); line-height: 1.45; color: var(--ink-muted);
  max-width: 32rem;
}
.desk-steps__item.is-done { color: var(--ink-muted); }
.desk-steps__item.is-done::before { background: var(--success); box-shadow: none; }
.desk-steps__item.is-done::after { background: color-mix(in srgb, var(--success) 45%, transparent); }
.desk-steps__item.is-active { color: var(--ink); }
.desk-steps__item.is-active::before {
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px rgba(242, 163, 58, 0.5);
  animation: ut-pulse 1.8s var(--ease-in-out) infinite;
}
.desk-steps__item.is-active .desk-steps__detail { display: block; }

/* Studio (producing) chapter list */
.prod-chapters .chapters__time { display: inline-flex; align-items: center; gap: 0.45em; color: var(--ink-faint); }
.prod-chapters .chapters__item.is-current { opacity: 1; }
.prod-chapters .chapters__item.is-current .chapters__time { color: var(--accent-text); }
.prod-chapters .chapters__item:not(.is-pending) .chapters__time { color: var(--success); }

/* ==========================================================================
   Proposal review
   ========================================================================== */
.proposal { padding-block: clamp(2rem, 1rem + 4vw, 4rem) var(--space-9); display: grid; gap: var(--space-7); }
.proposal__head { display: grid; gap: var(--space-4); max-width: var(--w-narrow); }
.editable { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.editable .proposal__title { flex: 1 1 18rem; min-width: 0; }
.editable__btn { margin-bottom: 0.35rem; }
.proposal__title:focus-visible { outline: none; }
.editable.is-edited .proposal__title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.editable__form { display: grid; gap: var(--space-3); width: 100%; }
.editable__input {
  font-family: var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68;
  font-weight: 700; font-size: var(--fs-3xl); line-height: 1.05; min-height: 3.5rem;
}
.proposal__logline { max-width: 40rem; color: var(--ink); opacity: 0.9; }
.proposal__notice {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--danger-soft); border-left: 3px solid var(--danger); font-size: var(--fs-sm);
}

.proposal__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
@media (min-width: 56rem) {
  .proposal__grid { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-8); align-items: start; }
  .proposal__aside { position: sticky; top: calc(var(--nav-h) + var(--space-5)); }
}
.proposal__main { display: grid; gap: var(--space-7); min-width: 0; }
.proposal__block { display: grid; gap: var(--space-4); }
.proposal__label { font: 650 var(--fs-lg)/1.2 var(--font-ui); }
.proposal__label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.proposal__angle {
  font-family: var(--font-text); font-size: var(--fs-xl); line-height: 1.5; color: var(--ink-muted);
  max-width: var(--w-prose); font-variation-settings: "opsz" 20;
  padding-left: var(--space-5); border-left: 2px solid var(--line-strong);
}
.proposal__edited { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--ink-muted); }

/* Treatment: the chapter list, editable in place */
.treatment { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.treatment__item {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3);
  align-items: start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 40rem) { .treatment__item { grid-template-columns: 3rem minmax(0, 1fr) auto; } }
.treatment__num {
  font: 700 var(--fs-3xl)/0.9 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.treatment__item.is-edited .treatment__num { color: var(--accent-text); }
.treatment__body { display: grid; gap: var(--space-2); min-width: 0; }
.treatment__title { font: 650 var(--fs-xl)/1.25 var(--font-ui); letter-spacing: -0.005em; }
.treatment__summary { font-family: var(--font-text); font-size: var(--fs-lg); line-height: 1.5; color: var(--ink-muted); max-width: 36rem; font-variation-settings: "opsz" 16; }
.treatment__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.treatment__edit { margin-top: -0.25rem; }
.treatment__item.is-editing { background: var(--surface); margin-inline: calc(var(--space-3) * -1); padding-inline: var(--space-3); border-radius: var(--radius-sm); }
.treatment__form { grid-column: 2 / -1; display: grid; gap: var(--space-3); min-width: 0; }

/* Sources */
.sources { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.sources__summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
  padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; border-radius: var(--radius-md);
}
.sources__summary::-webkit-details-marker { display: none; }
.sources__summary:hover { background: var(--surface-2); }
.sources__count { font-weight: 650; font-size: var(--fs-lg); }
.sources__kinds { flex: 1 1 auto; }
.sources__chev { width: 1.2rem; height: 1.2rem; color: var(--ink-muted); transition: transform var(--dur-2) var(--ease-out); margin-left: auto; }
.sources[open] .sources__chev { transform: rotate(180deg); }
.sources__list { padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--line); }
.sources__list a { text-decoration-color: var(--line-strong); }
.sources__list a:hover { text-decoration-color: currentColor; }
.sources__list .badge { vertical-align: 0.1em; }
.sources__note { color: var(--ink-faint); margin-top: 0.15rem; }

/* Entities from the research */
.entity-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.entity-chip {
  display: inline-flex; align-items: baseline; gap: 0.45em;
  padding: 0.35rem 0.7rem; border-radius: var(--radius-xs);
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.entity-chip__type { font-size: var(--fs-xs); color: var(--ink-faint); }

/* The slate: what you're about to produce */
.slate {
  display: grid; gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--inner-light), var(--shadow-2);
  overflow: hidden;
}
.slate__spec {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
  border-bottom: 1px solid var(--line);
}
.slate__spec > div { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }
.slate__spec > div:nth-child(odd) { border-right: 1px solid var(--line); }
.slate__spec > div:nth-child(-n+2) { border-top: 0; }
.slate__spec dt { font-size: var(--fs-xs); color: var(--ink-faint); }
.slate__spec dd { font-weight: 650; margin-top: 0.1rem; }
.slate__cost { font-size: var(--fs-sm); line-height: 1.5; }
.slate__cost strong { font-weight: 700; }
.slate__fine { margin-top: var(--space-3); padding-inline: var(--space-1); }
.quota {
  display: grid; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-sm);
  background: var(--danger-soft); border-left: 3px solid var(--danger);
}
.quota__text { font-size: var(--fs-sm); line-height: 1.45; }
.revise { display: grid; gap: var(--space-3); padding-top: var(--space-2); }
.revise .textarea { min-height: 6.5rem; }

/* Mobile: Produce stays within reach */
.produce-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-player);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--glass);
  backdrop-filter: saturate(1.2) blur(16px); -webkit-backdrop-filter: saturate(1.2) blur(16px);
  border-top: 1px solid var(--line);
  animation: ut-rise var(--dur-2) var(--ease-out);
}
.produce-bar__meta { font-weight: 600; font-size: var(--fs-sm); }
@media (min-width: 56rem) { .produce-bar { display: none !important; } }

/* Failed */
.failed { display: grid; gap: var(--space-5); justify-items: start; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.failed__wave { color: var(--ink-faint); margin-bottom: var(--space-2); }
.failed__refund { color: var(--success); font-weight: 550; }
.failed__detail { font-size: var(--fs-sm); color: var(--ink-faint); max-width: 40rem; }
.failed__detail summary { cursor: pointer; width: fit-content; }
.failed__detail p { margin-top: var(--space-2); padding: var(--space-3); background: var(--surface); border-radius: var(--radius-sm); overflow-wrap: anywhere; }

/* ==========================================================================
   Library
   ========================================================================== */
.library__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.library__minutes { font-size: var(--fs-sm); }
.library__error {
  margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--danger-soft); border-left: 3px solid var(--danger); font-size: var(--fs-sm);
}
.library__grid { align-items: start; }
.lib-item { display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.lib-item__cover { display: block; text-decoration: none; border-radius: var(--radius-cover); }
.lib-item__cover:hover .cover__img { transform: scale(1.035); }
.cover--inflight .cover__img { filter: saturate(0.6) brightness(0.7); }
.cover__working {   /* sits where the kicker was, so it never collides with the title */
  position: absolute; left: 7cqi; top: 6cqi;
  display: inline-flex; align-items: center;
}
.cover__working .wave { --wave-h: 8cqi; --wave-bar: 1.6cqi; }
.cover--inflight .cover__kicker { display: none; }
.cover--plain.cover--inflight .cover__title::before { display: none; }
.lib-item__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; }
.lib-item__text { display: grid; gap: var(--space-2); min-width: 0; }
.lib-item__title {
  font-weight: 600; line-height: 1.25; color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-item__title:hover { text-decoration: underline; text-decoration-color: var(--line-strong); }
.lib-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.lib-item__parent { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lib-item__cta { justify-self: start; }
.lib-menu > summary { margin: -0.4rem -0.4rem 0 0; }
.lib-menu .menu__panel { min-width: 10.5rem; }
.lib-menu .menu__label { white-space: normal; }
.menu__item--danger { color: var(--danger); }
.library__empty { margin-top: var(--space-2); padding-block: var(--space-9); }
.library__empty .wave { margin-bottom: var(--space-2); }
.library__empty-chips { justify-content: center; margin-block: var(--space-2); }
.library__empty-chips .chip { white-space: normal; }
.delete-name { color: var(--ink); font-weight: 650; }

/* ==========================================================================
   Sign up / Log in
   ========================================================================== */
.auth { display: grid; min-height: calc(100dvh - var(--nav-h)); grid-template-columns: minmax(0, 1fr); }
.auth__media { position: relative; overflow: hidden; isolation: isolate; height: 11rem; background: var(--bg-deep); }
.auth__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: -2; }
.auth__media::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 28, 21, 0.1) 30%, rgba(17, 40, 31, 1) 100%);
}
.auth__media::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 180px; opacity: 0.22; mix-blend-mode: overlay; pointer-events: none; }
.auth__caption { display: none; }
.auth__panel { display: grid; align-items: center; padding: var(--space-5) var(--gutter) var(--space-8); }
.auth__form-wrap { display: grid; gap: var(--space-6); width: 100%; max-width: 26rem; margin-inline: auto; }
.auth__form { display: grid; gap: var(--space-5); }
.auth__error {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--danger-soft); border-left: 3px solid var(--danger); font-size: var(--fs-sm);
}
.auth__error .errorlist li::before { content: none; }
.auth__switch { color: var(--ink-muted); }
.pw { position: relative; }
.pw .input { padding-right: 4.5rem; }
.pw__toggle {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  min-height: 2.25rem; padding: 0 0.75rem; border-radius: var(--radius-xs);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-muted);
}
.pw__toggle:hover { color: var(--ink); background: var(--surface-2); }
@media (min-width: 56rem) {
  .auth { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .auth__media { height: auto; min-height: 100%; }
  .auth__media::before {
    background:
      linear-gradient(90deg, rgba(10, 28, 21, 0) 55%, rgba(17, 40, 31, 0.9) 100%),
      linear-gradient(0deg, rgba(10, 28, 21, 0.85) 0%, rgba(10, 28, 21, 0) 45%);
  }
  .auth__caption { display: block; position: absolute; left: var(--space-7); right: var(--space-8); bottom: var(--space-7); color: #eee9dc; }
  .auth__caption blockquote {
    font-family: var(--font-text); font-style: italic; font-size: var(--fs-2xl); line-height: 1.3; max-width: 24rem;
    font-variation-settings: "opsz" 36; color: rgba(238, 233, 220, 0.9);
  }
  .auth__panel { padding: var(--space-8) var(--space-7); }
}

/* ==========================================================================
   Account
   ========================================================================== */
.account__head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.account__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.account__nav {
  display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; contain: inline-size;
  margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--space-1);
}
.account__nav::-webkit-scrollbar { display: none; }
.account__nav a {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
  min-height: var(--control-h-sm); padding: 0 0.9rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  color: var(--ink-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 550; white-space: nowrap;
}
.account__nav a:hover { color: var(--ink); background: var(--surface-2); }
.account__nav a[aria-current="true"] { color: var(--ink); border-color: var(--ink-faint); }
.account__nav a[aria-current="true"]::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); }
@media (min-width: 56rem) {
  .account__layout { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .account__nav {
    position: sticky; top: calc(var(--nav-h) + var(--space-5));
    flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; overflow: visible; contain: none;
  }
  .account__nav a { border: 0; padding-inline: var(--space-3); border-radius: var(--radius-sm); min-height: 2.5rem; }
}
.account__main { min-width: 0; max-width: 50rem; }
.acct-section { display: grid; gap: var(--space-5); padding-block: var(--space-7); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + var(--space-4)); }
.acct-section:first-child { border-top: 0; padding-top: var(--space-2); }
.acct-section--last { padding-bottom: var(--space-4); }
.acct-section__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Minutes */
.minutes {
  display: grid; gap: var(--space-5);
  padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--inner-light);
}
.minutes__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.minutes__big {
  font: 700 var(--fs-6xl)/0.85 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68;
  letter-spacing: -0.02em;
}
.minutes__unit { color: var(--ink-muted); font-size: var(--fs-lg); }
.minutes__meter { display: grid; gap: var(--space-2); }
.minutes__meter-label { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); color: var(--ink-muted); }
.minutes__meter-label strong { color: var(--ink); font-weight: 700; }
/* Remaining allowance is the lit part; used minutes are the dark part that grows from the left */
.meter { position: relative; height: 0.625rem; border-radius: var(--radius-pill); background: var(--accent); overflow: hidden; }
.meter__used { position: absolute; inset: 0 auto 0 0; width: min(100%, var(--value, 0%)); background: var(--surface-3); }
.minutes__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
@media (min-width: 40rem) { .minutes__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.minutes__facts dt { font-size: var(--fs-xs); color: var(--ink-faint); }
.minutes__facts dd { font-weight: 650; }
.minutes__facts dd.caption { font-weight: 400; }

.plans { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan {
  display: grid; gap: var(--space-2); align-content: start;
  padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.plan--current { border-color: var(--line-strong); background: var(--surface); }
.plan--premium:not(.plan--current) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.plan__price { font-size: var(--fs-2xl); font-weight: 700; }
.plan__action { margin-top: var(--space-2); }

.topups { display: grid; gap: var(--space-3); }
.topups__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.topup { display: contents; }
.topup__btn {
  display: grid; justify-items: start; gap: 0.1rem;
  padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  text-align: left; transition: background-color var(--dur-1), border-color var(--dur-1);
}
.topup__btn:hover { background: var(--surface-2); border-color: var(--ink-faint); }
.topup__btn:focus-visible { border-radius: var(--radius-md); }
.topup__btn[aria-busy="true"] { opacity: 0.6; }
.topup__min { font: 700 var(--fs-4xl)/0.9 var(--font-display); font-stretch: var(--stretch-display); font-variation-settings: "wdth" 68; }
.topup__unit { font-size: var(--fs-sm); color: var(--ink-muted); }
.topup__price { margin-top: var(--space-2); font-weight: 650; }
.demo-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--ink-muted); }

/* Preferences */
.prefs { display: grid; gap: var(--space-5); }
.prefs__grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .prefs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prefs__wide { grid-column: 1 / -1; } }
.prefs__interests { border: 0; padding: 0; margin: 0; min-width: 0; }
.prefs__interests legend { padding: 0; }
.prefs__interests .chip-row { margin-top: var(--space-2); }

/* Feed */
.feed { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.feed__url { flex: 1 1 16rem; min-width: 0; font-size: var(--fs-sm); color: var(--ink-muted); text-overflow: ellipsis; }
.feed__apps { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .feed__apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feed__apps li { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.feed__apps span { color: var(--ink-muted); line-height: 1.45; }

/* Ledger */
.ledger-wrap { overflow-x: auto; contain: inline-size; border: 1px solid var(--line); border-radius: var(--radius-md); }
.ledger { width: 100%; min-width: 34rem; font-size: var(--fs-sm); }
.ledger th { text-align: left; font-weight: 600; color: var(--ink-faint); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface); }
.ledger td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger__num { text-align: right; white-space: nowrap; font-weight: 650; }
.ledger__date { white-space: nowrap; color: var(--ink-muted); }
.ledger__note { line-height: 1.45; }
.ledger__kind { font-weight: 600; }
.ledger__kind--topup, .ledger__kind--grant, .ledger__kind--refund, .ledger__kind--release { color: var(--success); }
.ledger__kind--reserve { color: var(--ink-muted); }

/* base.css's `* { margin: 0 }` reset removes the UA `margin: auto` that centres a modal <dialog> */
dialog.modal:modal { margin: auto; }