/* ============================================================
   screens.css — rules that belong to exactly one screen.

   Anything used by two screens has been moved to components.css
   or layout.css. Each block below is scoped by the body class the
   template sets, so one screen can be rebuilt in a later phase
   without disturbing the others.
   ============================================================ */

/* ---- error page ---------------------------------------------- */
.screen-error .error-card {
  width: min(460px, 100%);
  padding: var(--space-10) var(--space-8);
  text-align: center;
}
.screen-error .error-code {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--signal-text);
}
.screen-error h1 { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-2); }
.screen-error p { margin: 0 0 var(--space-6); color: var(--tx-muted); }
.screen-error .brand-link { margin-bottom: var(--space-8); }
.screen-error .page-links { margin-top: var(--space-5); }

/* ---- legal prose (terms, privacy) ---------------------------- */
.screen-legal .wrap { padding-top: var(--space-10); padding-bottom: var(--space-16); }
.screen-legal h1 { margin-bottom: var(--space-2); }
.screen-legal h2 {
  font-size: var(--text-md);
  margin: var(--space-8) 0 var(--space-3);
}
.screen-legal p, .screen-legal li {
  color: var(--tx-muted);
  line-height: var(--leading-prose);
}
.screen-legal .updated {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--tx-muted);
  margin-bottom: var(--space-8);
}

/* ---- auth ----------------------------------------------------- */
.screen-auth .auth-header {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: flex-end;
  padding: var(--space-4) var(--space-5);
}
.screen-auth .auth-brand {
  justify-content: center;
  margin-bottom: var(--space-10);
}
.screen-auth .auth-card { width: min(380px, 100%); }
.screen-auth h1 {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-6);
  text-align: center;
}
/* Auth forms lay out label + input directly rather than wrapping each pair in
   a .field, because the whole card is one short form and the extra element
   buys nothing here. */
.screen-auth label {
  display: block;
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--tx-muted);
}
.screen-auth form .btn { width: 100%; margin-top: var(--space-5); }
.screen-auth .label-row { display: flex; align-items: baseline; justify-content: space-between; }
.screen-auth .label-row label { margin-bottom: var(--space-2); }
.screen-auth .label-row a { font-size: var(--text-xs); }

/* The federated sign-in button keeps the provider's own mark and wording:
   their brand guidelines require it, and it is the only place in the product
   where an outside brand appears. It is not a voice supplier.

   It is a .btn in the markup, so it inherits the shape, focus ring and touch
   target from the component. This only adds the full-width layout and pins
   the mark to its intrinsic size, since the brand SVG must not be recoloured
   or distorted. */
.screen-auth .oauth-btn { width: 100%; margin-bottom: var(--space-3); }
.screen-auth .oauth-btn svg { width: 18px; height: 18px; flex: none; }

.screen-auth .divider {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-5);
  color: var(--tx-muted); font-size: var(--text-xs);
}
.screen-auth .divider::before, .screen-auth .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
/* With no label between them the two halves read as a broken line. */
.screen-auth .divider:empty { gap: 0; }
/* The account page leads with the credit meter, so it gets room to breathe
   before the plain rows underneath. */
.screen-auth .account-meter { width: 100%; margin-bottom: var(--space-2); }
.screen-auth .account-meter + .field-hint { margin-bottom: var(--space-6); }
.screen-auth .plan-name { text-transform: capitalize; }
.screen-auth .account-plan-link { margin-top: var(--space-5); }

.screen-auth .page-links { margin-top: var(--space-4); text-align: center; }
.screen-auth .account-row {
  display: flex; justify-content: space-between; gap: var(--space-4);
  margin: var(--space-2) 0;
}
.screen-auth .account-row span:first-child { color: var(--tx-muted); }

.screen-auth .invoice-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin: var(--space-2) 0;
}
.screen-auth .invoice-date { color: var(--tx-muted); }
.screen-auth .invoice-details { display: flex; align-items: center; gap: var(--space-3); }
.screen-auth .invoice-amount { font-family: var(--font-mono); }

.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-input);
  border: var(--border-width) solid var(--line);
  background: var(--surface-sunken);
  color: var(--tx-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.flash.error { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger); }

.page-footer {
  margin-top: var(--space-8);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--tx-muted);
}
.page-footer a { color: var(--tx-muted); }

/* ---- landing --------------------------------------------------
   The sticky header is opaque. The direction rules out blur and
   glass, and a solid surface reads better over a scrolling page
   anyway - translucency here was hiding text behind text. */
.site-header.is-sticky { position: sticky; top: 0; z-index: 10; }

.screen-landing section { padding: var(--space-16) 0; }
.screen-landing h2 { text-align: center; margin: 0 0 var(--space-2); }
.screen-landing .section-sub {
  text-align: center; color: var(--tx-muted); margin: 0 0 var(--space-10);
}

.screen-landing .hero { text-align: center; padding: var(--space-20) var(--space-6) var(--space-16); }
.screen-landing .hero h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-5); }
.screen-landing .hero h1 .accent { color: var(--signal-text); }
.screen-landing .hero p {
  max-width: 60ch; margin: 0 auto var(--space-8);
  font-size: var(--text-md); color: var(--tx-muted);
  line-height: var(--leading-prose);
}
.screen-landing .hero-ctas {
  display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
}

.screen-landing .demo-grid,
.screen-landing .feat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.screen-landing .demo-card, .screen-landing .feat { padding: var(--space-5); }
.screen-landing .demo-card h3 { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-md); }
.screen-landing .demo-card .desc {
  font-size: var(--text-sm); color: var(--tx-muted);
  margin: 0 0 var(--space-4); min-height: 36px;
}
.screen-landing .demo-card audio { width: 100%; height: 36px; }

.screen-landing .feat .icon-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: var(--space-4);
  border-radius: var(--radius-input);
  background: var(--signal-bg); color: var(--signal-text);
}
.screen-landing .feat .icon-wrap .icon { width: 20px; height: 20px; }
.screen-landing .feat h3 { margin: 0 0 var(--space-2); }
.screen-landing .feat p { margin: 0; font-size: var(--text-sm); color: var(--tx-muted); }

.screen-landing .price-teaser {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
}
.screen-landing .price-card { padding: var(--space-5); text-align: center; }
.screen-landing .price-card.is-popular { border-color: var(--signal); }
.screen-landing .price-card .plabel { margin: 0; font-size: var(--text-sm); color: var(--tx-muted); }
.screen-landing .price-card .pval { margin: var(--space-1) 0; font-size: var(--text-xl); font-weight: var(--weight-medium); }
.screen-landing .price-card .pcredits { margin: 0; font-size: var(--text-xs); color: var(--signal-text); }

.screen-landing .faq-item { border-bottom: var(--border-width) solid var(--line); padding: var(--space-5) 0; }
.screen-landing .faq-item h3 { margin: 0 0 var(--space-2); }
.screen-landing .faq-item p { margin: 0; font-size: var(--text-sm); color: var(--tx-muted); }

.screen-landing .cta-band {
  text-align: center; padding: var(--space-16) var(--space-6);
  background: var(--surface);
  border-top: var(--border-width) solid var(--line);
  border-bottom: var(--border-width) solid var(--line);
}
.screen-landing .cta-band h2 { margin-bottom: var(--space-5); }

@media (max-width: 780px) {
  .screen-landing .demo-grid, .screen-landing .feat-grid { grid-template-columns: 1fr; }
  .screen-landing .price-teaser { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .screen-landing .hero { padding: var(--space-12) var(--space-5) var(--space-10); }
  .screen-landing .hero h1 { font-size: var(--text-2xl); }
  .site-header .nav-pricing { display: none; }
}

/* ---- pricing --------------------------------------------------- */
.screen-pricing .wrap { padding-top: var(--space-12); padding-bottom: var(--space-16); }
.screen-pricing h1 { text-align: center; margin: 0 0 var(--space-2); }
.screen-pricing .sub { text-align: center; color: var(--tx-muted); margin: 0 0 var(--space-2); }
.screen-pricing .mock-note {
  max-width: 480px; margin: 0 auto var(--space-8); text-align: center;
}
.screen-pricing .flash { text-align: center; }

.screen-pricing .plan-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4);
}
.screen-pricing .plan {
  position: relative; display: flex; flex-direction: column;
  padding: var(--space-6);
}
.screen-pricing .plan.is-featured { border-color: var(--signal); }
/* Current plan is marked by the badge in the heading, not by colour alone -
   the border here only reinforces what the label already says. */
.screen-pricing .plan.is-current { border-color: var(--seal); }
.screen-pricing .plan h2 {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-md); margin: 0 0 var(--space-1);
}
.screen-pricing .price {
  margin: var(--space-3) 0 var(--space-4);
  font-size: var(--text-xl); font-weight: var(--weight-medium);
}
.screen-pricing .price span {
  font-family: var(--font-body); font-size: var(--text-base);
  font-weight: var(--weight-regular); color: var(--tx-muted);
}
.screen-pricing .feature-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); flex: 1; }
.screen-pricing .feature-list li {
  position: relative; padding: var(--space-1) 0 var(--space-1) var(--space-6);
  font-size: var(--text-sm); color: var(--tx-muted);
}
.screen-pricing .feature-list li .icon {
  position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; color: var(--seal);
}
.screen-pricing .featured-tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 2px var(--space-3);
  background: var(--signal-solid); color: var(--signal-on);
  border-radius: var(--radius-tag);
  white-space: nowrap;
}

.screen-pricing .compare { margin-top: var(--space-16); }
.screen-pricing .compare h2 { text-align: center; margin: 0 0 var(--space-6); }
.screen-pricing .compare-wrap {
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-card);
}
.screen-pricing .compare-table { min-width: 620px; background: var(--surface); }
.screen-pricing .compare-table th,
.screen-pricing .compare-table td { padding: var(--space-3) var(--space-4); text-align: center; }
.screen-pricing .compare-table td:first-child,
.screen-pricing .compare-table th:first-child { text-align: left; color: var(--tx-muted); }
.screen-pricing .compare-table thead th.plan-col {
  font-family: var(--font-body); font-size: var(--text-sm);
  text-transform: none; letter-spacing: 0; color: var(--tx);
}
.screen-pricing .compare-table thead th.plan-col.is-featured { color: var(--signal-text); }
/* Row labels are <th scope="row"> for accessibility (screen readers need
   them associated with their row's data), but should read as plain body
   text like the <td> cells beside them, not the mono/uppercase treatment
   the bare `th` element rule elsewhere gives table headers by default. */
.screen-pricing .compare-table tbody th {
  font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: var(--weight-regular); text-transform: none; letter-spacing: 0;
}
.screen-pricing .compare-table tbody tr:last-child td,
.screen-pricing .compare-table tbody tr:last-child th { border-bottom: none; }
.screen-pricing .compare-table .icon.is-yes { color: var(--seal); }
.screen-pricing .compare-table .icon.is-no { color: var(--tx-faint); }

@media (max-width: 1080px) { .screen-pricing .plan-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .screen-pricing .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .screen-pricing .plan-grid { grid-template-columns: 1fr; } }

/* ---- monthly/annual toggle (STEP 7.9 PART 6) ---- */
.screen-pricing .billing-toggle {
  display: flex; justify-content: center; gap: 2px; margin: 0 auto var(--space-8);
  width: fit-content; border: var(--border-width) solid var(--line); border-radius: var(--radius-tag);
  padding: 3px;
}
.screen-pricing .billing-toggle button {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); background: none; border: none;
  border-radius: calc(var(--radius-tag) - 3px); color: var(--tx-muted);
  font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
}
.screen-pricing .billing-toggle button.is-active { background: var(--surface-sunken); color: var(--tx); }

.screen-pricing .price-sub {
  margin: calc(var(--space-4) * -1) 0 var(--space-4); font-size: var(--text-sm); color: var(--tx-muted);
}
.screen-pricing .price-sub-note { display: block; font-size: var(--text-xs); color: var(--tx-faint); }

/* ---- calculator ---- */
.screen-pricing .calculator { margin-top: var(--space-16); }
.screen-pricing .calculator h2 { text-align: center; margin: 0 0 var(--space-2); }
.screen-pricing .calculator .sub { margin: 0 0 var(--space-6); }
.screen-pricing .calculator-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  padding: var(--space-6); border: var(--border-width) solid var(--line);
  border-radius: var(--radius-card); background: var(--surface);
}
.screen-pricing .calculator-inputs { display: flex; flex-direction: column; gap: var(--space-4); }
.screen-pricing .calculator-inputs label {
  display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--tx-muted);
}
.screen-pricing .calculator-result { display: flex; flex-direction: column; justify-content: center; }
.screen-pricing .calc-headline { font-size: var(--text-md); font-weight: var(--weight-medium); margin: 0 0 var(--space-2); }
.screen-pricing .field-hint { font-size: var(--text-xs); color: var(--tx-muted); margin-top: var(--space-3); }
@media (max-width: 700px) { .screen-pricing .calculator-grid { grid-template-columns: 1fr; } }

/* ---- top-up packs ---- */
.screen-pricing .topup { margin-top: var(--space-16); }
.screen-pricing .topup h2, .screen-pricing .topup .sub { text-align: center; }
.screen-pricing .topup .sub { margin: 0 0 var(--space-6); }
.screen-pricing .topup-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); max-width: 720px; margin: 0 auto;
}
.screen-pricing .topup-pack { text-align: center; padding: var(--space-6); }
.screen-pricing .topup-credits { font-size: var(--text-lg); font-weight: var(--weight-medium); margin: 0; }
@media (max-width: 700px) { .screen-pricing .topup-grid { grid-template-columns: 1fr; } }

/* ---- FAQ (mirrors .screen-landing .faq-item) ---- */
.screen-pricing .faq { margin-top: var(--space-16); max-width: 720px; margin-left: auto; margin-right: auto; }
.screen-pricing .faq h2 { text-align: center; margin: 0 0 var(--space-6); }
.screen-pricing .faq-item { border-bottom: var(--border-width) solid var(--line); padding: var(--space-5) 0; }
.screen-pricing .faq-item h3 { margin: 0 0 var(--space-2); }
.screen-pricing .faq-item p { margin: 0; font-size: var(--text-sm); color: var(--tx-muted); }

/* ---- component gallery (dev only) ----------------------------- */
.screen-devkit .wrap { padding-top: var(--space-10); padding-bottom: var(--space-20); }
.screen-devkit > .wrap > h1 { margin-bottom: var(--space-2); }
.screen-devkit .kit-section {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--line);
}
.screen-devkit .kit-section > h2 { margin-bottom: var(--space-5); }
.screen-devkit .kit-row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-5) 0;
}
.screen-devkit .kit-row + .kit-row { border-top: var(--border-width) solid var(--line); }
.screen-devkit .kit-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--tx-muted);
}
.screen-devkit .kit-demo {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3);
}
.screen-devkit .kit-stack {
  display: flex; flex-direction: column; gap: var(--space-3);
  width: 100%; min-width: 0; max-width: 460px;
}
.screen-devkit .kit-stack--flush { gap: 0; }
.screen-devkit .kit-box { padding: var(--space-5); min-width: 0; flex: 1 1 260px; }
.screen-devkit .kit-box p { margin: 0; }

@media (max-width: 700px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(auto, 1fr), so the track
     refuses to go below the min-content width of a voice row and drags the
     whole page sideways. */
  .screen-devkit .kit-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

/* ---- queue ------------------------------------------------------
   Reuses .progress-row from components.css rather than inventing a
   parallel "job row" shape - a job in flight and a file mid-batch
   are the same idea (name, status, how far along). */
.screen-queue .wrap { padding-top: var(--space-8); padding-bottom: var(--space-16); }
.screen-queue h1 { margin-bottom: var(--space-1); }
.screen-queue .sub { color: var(--tx-muted); margin: 0 0 var(--space-6); }
.screen-queue .job-list { padding: var(--space-2) var(--space-5); }
.screen-queue .job-list[hidden] { display: none; }
.screen-queue .progress-row { flex-wrap: wrap; }
.screen-queue .job-when { margin-left: var(--space-2); color: var(--tx-muted); font-weight: var(--weight-regular); }

@media (max-width: 560px) {
  .screen-queue .progress-track { flex-basis: 100%; order: 3; }
}

/* ---- library -------------------------------------------------
   Below 700px the table becomes a stack of cards: six columns of
   audio metadata cannot be read on a phone, and a table that
   scrolls sideways hides the download controls off-screen. */
.screen-library .wrap { padding-top: var(--space-8); padding-bottom: var(--space-16); }
.screen-library h1 { margin-bottom: var(--space-1); }
.screen-library .sub { color: var(--tx-muted); margin: 0 0 var(--space-6); }
.screen-library audio { height: 34px; max-width: 240px; vertical-align: middle; }
.screen-library .expiry { font-size: var(--text-xs); }
.screen-library .expiry.is-soon { color: var(--danger); }
.screen-library .file-actions { display: flex; align-items: center; gap: var(--space-2); }
/* Invisible - only exists as an IntersectionObserver target for loading
   the next page of rows, never meant to be seen or announced. */
.screen-library .table-sentinel,
.screen-library .table-sentinel td { padding: 0; border: 0; height: 1px; }

@media (max-width: 700px) {
  .screen-library table, .screen-library thead,
  .screen-library tbody, .screen-library tr, .screen-library th,
  .screen-library td { display: block; }
  .screen-library thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .screen-library tr {
    background: var(--surface);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
  }
  .screen-library td { border: 0; padding: 0 0 var(--space-2); }
  .screen-library td.num, .screen-library th.num { text-align: left; }
  /* The label a sighted reader lost when the header row went away. */
  .screen-library td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--tx-muted);
  }
  .screen-library td.file-name {
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    padding-bottom: var(--space-3);
  }
  .screen-library td.file-name::before { content: none; }
  .screen-library audio { max-width: 100%; width: 100%; }
  .screen-library .file-actions { flex-wrap: wrap; }
}

/* ---- projects --------------------------------------------------- */
.screen-projects .wrap { padding-top: var(--space-8); padding-bottom: var(--space-16); }
.screen-projects h1 { margin-bottom: var(--space-1); }
.screen-projects .sub { color: var(--tx-muted); margin: 0 0 var(--space-6); }

.screen-projects .project-new { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-6); }
.screen-projects .project-new input {
  flex: 1; max-width: 320px; padding: var(--space-2);
  background: var(--surface-sunken); color: var(--tx);
  border: var(--border-width) solid var(--line); border-radius: var(--radius-input);
}

.screen-projects .project-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4);
}
.screen-projects .project-card { padding: var(--space-5); }
.screen-projects .project-card.is-active { border-color: var(--seal-line); }
.screen-projects .project-card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.screen-projects .project-name { font-size: var(--text-md); font-weight: var(--weight-medium); flex: 1; overflow-wrap: anywhere; }
.screen-projects .project-name-field {
  flex: 1; padding: var(--space-1) var(--space-2); font-size: var(--text-md); font-family: inherit;
  background: var(--surface-sunken); color: var(--tx);
  border: var(--border-width) solid var(--line); border-radius: var(--radius-input);
}
.screen-projects .project-card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.screen-projects .project-card-meta .muted-copy { margin: 0; }

/* The voice picker scrolls inside the dialog rather than growing it past
   the viewport, so the search field above it stays reachable. */
.screen-studio .voice-gallery {
  margin-top: var(--space-2);
  max-height: 50vh;
  overflow-y: auto;
}
.screen-studio .pron-list { margin-top: var(--space-4); }
.screen-studio .regen-status { flex: 1; font-size: var(--text-xs); color: var(--tx-muted); }

/* ---- studio ---------------------------------------------------
   Lifted out of index.html and put onto tokens. Scoped so the
   screen keeps working while the shared component library is
   still being built; PHASE 4 rebuilds this screen against those
   components and most of this block should disappear then.
   ---------------------------------------------------------------- */

/* ---- app shell: left icon-rail + main column ----
   Desktop: the shell fills the viewport and never scrolls itself. Only the
   two content panels inside <main> (.rail settings / .col editor) do, each
   independently. Below 900px this reverts to normal whole-page scrolling
   (two nested scroll boxes stacked on mobile is worse than one page scroll). */
/* Label sits beside the icon, not stacked under it: the row reads as one
   line at normal text size instead of a 10px caption. */
:root[data-theme="dark"] .rail-icon-btn .icon-sun { display: block; }
:root[data-theme="light"] .rail-icon-btn .icon-moon { display: block; }

/* ---- top bar (brand + service status only; nav lives in the rail) ---- */
.screen-studio .keys { display: flex; gap: 14px; font-size: 12px; }
.screen-studio .key { display: flex; align-items: center; gap: 7px; color: var(--tx-muted); }
.screen-studio .key .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
  flex: none;
}
.screen-studio .key.ok .dot {
  background: var(--seal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seal) 18%, transparent);
}

/* ---- layout: editor on the left (wide), settings rail on the right ----
   The grid spans the full viewport so the settings rail sits against the
   right edge. Reading width is capped on the editor's content instead, so
   capping the shell doesn't strand the rail in the middle of wide screens. */
/* The editor keeps a comfortable measure and sits centred in whatever width
   is left over, rather than hugging the rail on wide screens. */
@media (max-width: 900px) {
}
.screen-studio .rail .pane { border-top: 3px solid var(--signal); background: var(--surface); }
.screen-studio .rail .pane + .pane { border-top: 1px solid var(--line); }

/* ---- segmented / tab selector ---- */
.screen-studio .seg { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.screen-studio .seg button {
  flex: 1; padding: 9px 6px 10px; background: none; color: var(--tx-muted);
  border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; font-size: 13px; font-weight: 600; transition: color .15s ease, border-color .15s ease;
}
.screen-studio .seg button:hover { color: var(--tx); }
.screen-studio .seg button.active { color: var(--signal); border-color: var(--signal); }

/* ---- faders (sliders) ---- */
.screen-studio .slider-row { margin: 10px 0 2px; }
.screen-studio .slider-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx-muted); }
.screen-studio .slider-head b { color: var(--tx); font-weight: 600; }
.screen-studio .slider-head .val {
  font-family: ui-monospace, "Cascadia Code", monospace; color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.screen-studio .slider-row.off { opacity: .35; pointer-events: none; }
/* "Delivery" label and its Reset share one line so resetting doesn't cost a
   full button row in a panel that has to fit without scrolling. */
.screen-studio .tune-head { display: flex; align-items: baseline; justify-content: space-between; }
.screen-studio .tune-head label { margin-bottom: 4px; }
.screen-studio .linkish {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 12px; color: var(--tx-muted); text-decoration: underline;
  text-underline-offset: 2px;
}
.screen-studio .linkish:hover { color: var(--signal); }
.screen-studio .hint { font-size: 11px; color: var(--tx-muted); margin-top: 6px; }

/* ---- voice picker: compact summary button that opens a modal ---- */
.screen-studio .voice-select-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface-sunken); color: var(--tx); border: 1px solid var(--line);
  border-radius: var(--radius-input); cursor: pointer; text-align: left; font-family: inherit;
  transition: border-color .15s ease;
}
.screen-studio .voice-select-btn:hover { border-color: var(--line-strong); }
.screen-studio .voice-select-btn .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--signal); flex: none;
}
.screen-studio .voice-select-btn .vinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.screen-studio .voice-select-btn .name { font-size: 13.5px; font-weight: 600; }
.screen-studio .voice-select-btn .desc {
  font-size: 11.5px; color: var(--tx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.screen-studio .voice-select-btn svg { width: 16px; height: 16px; stroke: currentColor; color: var(--tx-faint); flex: none; }

/* ---- voice gallery (lives inside the voice-picker modal) ---- */
.screen-studio .gallery-controls { display: flex; gap: 8px; }
.screen-studio .gallery-controls input { flex: 1; }
.screen-studio .gallery-controls select { width: auto; }
.screen-studio .voice-empty { padding: 16px; text-align: center; color: var(--tx-muted); font-size: 13px; }

/* ---- estimate ledger ---- */
.screen-studio .estimate {
  margin-top: 18px; padding: 16px; background: var(--surface-sunken); border-radius: var(--radius-card);
  border: 1px solid var(--line); font-size: 13px;
}
.screen-studio .estimate.within { border-color: var(--seal); }
.screen-studio .estimate .row { display: flex; justify-content: space-between; margin: 4px 0; color: var(--tx-muted); }
.screen-studio .estimate .row span:last-child { color: var(--tx); font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.screen-studio .estimate .net-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); align-items: baseline; }
.screen-studio .estimate .big {
  font-size: 24px; font-weight: 700; color: var(--seal); font-family: ui-monospace, monospace;
}
/* The estimate card and the Generate button below it were sitting flush -
   the button read as part of the card instead of the action that follows
   it. */
.screen-studio .estimate + .btn { margin-top: var(--space-4); }

/* ---- capacity ruler ---- */
/* ---- composer: the writing surface plus everything about the text ---- */
.screen-studio .composer {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); overflow: hidden;
  transition: border-color .15s ease;
}
.screen-studio .composer:focus-within { border-color: var(--signal); }
.screen-studio .composer textarea {
  /* display:block matters: a textarea is inline-block by default, so auto
     margins don't centre it and it drifts out of line with the blocks
     below it. */
  display: block; width: 100%; border: none; background: none; border-radius: 0;
  min-height: 260px; padding: 18px 20px; font-size: 15px; line-height: 1.65;
}
/* This rule's own specificity otherwise beats the generic :lang(th) leading
   override in tokens.css, so Thai scripts here never actually got the extra
   room their vowel marks need - confirmed by measuring computed line-height
   with lang="th" set. Matched and overridden explicitly instead. */
.screen-studio .composer textarea:lang(th) { line-height: var(--leading-thai); }
/* The composer textarea deliberately has no border of its own - the wrapper
   carries it - but it still has to show a focus ring, so only the border is
   suppressed here. */
.screen-studio .composer textarea:hover, .screen-studio .composer textarea:focus { border: none; }
.screen-studio .composer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line);
  background: var(--canvas);
}
.screen-studio .counter { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--tx-muted); }
.screen-studio .counter b { color: var(--tx); font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; }
.screen-studio .ruler { position: relative; height: 6px; }
.screen-studio .ruler-zones { position: absolute; inset: 0; display: flex; overflow: hidden; }
.screen-studio .ruler-zones .z { height: 100%; }
.screen-studio .z.optimal { background: color-mix(in srgb, var(--seal) 35%, var(--surface-sunken)); }
.screen-studio .z.good { background: color-mix(in srgb, var(--signal) 30%, var(--surface-sunken)); }
.screen-studio .z.long { background: color-mix(in srgb, var(--warn) 35%, var(--surface-sunken)); }
.screen-studio .z.toolong { background: color-mix(in srgb, var(--danger) 35%, var(--surface-sunken)); }
.screen-studio .ruler-marker {
  position: absolute; top: -3px; width: 2px; height: 12px; background: var(--tx);
  border-radius: 1px; transition: left .25s ease; left: 0%;
}

.screen-studio .status {
  margin-top: 12px; padding: 9px 12px; border-radius: var(--radius-input); font-size: 13px;
  border: 1px solid var(--line); background: var(--surface-sunken); display: none;
}
.screen-studio .status.show { display: block; }
.screen-studio .status.optimal, .screen-studio .status.good { border-color: var(--seal-line); background: var(--seal-bg); color: var(--seal); }
.screen-studio .status.long { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.screen-studio .status.too_long { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger); }
.screen-studio .warns { margin: 8px 0 0; padding: 0 0 0 18px; font-size: 12px; color: var(--warn); }
.screen-studio .warns li { margin: 3px 0; }
/* The name field shrinks rather than holding 210px and pushing the save
   button off a phone screen. */
.screen-studio .paste-actions {
  display: flex; gap: var(--space-2); align-items: center;
  flex: 1 1 auto; min-width: 0;
}
.screen-studio .paste-actions input[type=text] { flex: 1 1 120px; min-width: 0; width: auto; }

/* ---- scripts list ---- */
.screen-studio .toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.screen-studio .drop {
  border: 1.5px dashed var(--line); border-radius: var(--radius-input); padding: 14px; text-align: center;
  color: var(--tx-muted); font-size: 13px; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.screen-studio .drop.over { border-color: var(--signal); color: var(--signal); background: var(--signal-bg); }
.screen-studio .chk { width: 16px; height: 16px; accent-color: var(--signal); }
.screen-studio .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--seal); }
.screen-studio .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--seal); }
.screen-studio .prog-wrap { margin: 8px 0 16px; display: none; }
.screen-studio .prog-wrap.show { display: block; }
.screen-studio .bar { height: 8px; background: var(--surface-sunken); border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.screen-studio .bar > div {
  height: 100%; width: 0; background: var(--signal);
  transition: width var(--dur-slow) var(--ease-out);
}
.screen-studio .muted { color: var(--tx-muted); font-size: 12px; }

.screen-studio .play-cell { display: flex; align-items: center; gap: 8px; }
.screen-studio .icon-link { color: var(--tx-muted); text-decoration: none; display: inline-flex; align-items: center; }
.screen-studio .icon-link:hover { color: var(--signal); }
/* modal shell */
.screen-studio .modal-rule { border-top: 1px solid var(--line); margin: 12px 0; }
.screen-studio .chunk-row { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.screen-studio .chunk-row .meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--tx-muted); margin-bottom: 6px; }
.screen-studio .chunk-row textarea { width: 100%; min-height: 60px; background: var(--surface-sunken); color: var(--tx);
                       border: 1px solid var(--line); border-radius: 6px; padding: 8px; font: inherit; }
.screen-studio .chunk-row .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.screen-studio .pron-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.screen-studio .pron-row input { flex: 1; padding: 8px 10px; background: var(--surface-sunken); color: var(--tx);
                   border: 1px solid var(--line); border-radius: 6px; }
.screen-studio .pron-row .arrow { color: var(--tx-muted); }
.screen-studio .pron-row .del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 16px; }
.screen-studio .pron-list-item { display: flex; justify-content: space-between; align-items: center;
                   padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px; font-size: 13px; }
.screen-studio .play-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface-sunken); color: var(--tx); cursor: pointer; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.screen-studio .play-btn:hover { border-color: var(--signal); color: var(--signal-text); }
.screen-studio .play-btn.is-playing {
  background: var(--signal-solid); border-color: var(--signal-solid); color: var(--signal-on);
}
.screen-studio .play-btn .icon { width: 12px; height: 12px; }
/* Same rule as the transport: the state decides which glyph is visible, so
   the button can never show pause while the audio is paused. */
.screen-studio .play-btn .icon-pause,
.screen-studio .play-btn.is-playing .icon-play { display: none; }
.screen-studio .play-btn.is-playing .icon-pause { display: block; }

.screen-studio .play-cell .icon-btn {
  width: 30px; height: 30px;
  border-color: transparent;
  color: var(--tx-muted);
}
.screen-studio .play-cell .icon-btn:hover {
  border-color: var(--line-control); color: var(--tx);
}
.screen-studio .play-cell .icon-btn .icon { width: 15px; height: 15px; }

@media (max-width: 520px) {
  .screen-studio .keys { gap: 10px; }
  /* Narrow screens drop back to icons only, so the rail costs 56px, not 208. */
}