/* All of the site's styling in one file. No Bootstrap, just plain CSS. */

/* ---- Tokens ---- */
/* Color palette, spacing, and corner-radius values shared by everything
   below via var(--name) — change a look site-wide by editing one of these. */
:root {
  --bg: #101219;
  --sidebar-bg: #0c0e14;
  --surface: #191c26;
  --surface-2: #20232f;
  --border: rgba(255, 255, 255, 0.07);
  --text: #f2f3f5;
  --text-muted: #8b93a7;
  --text-faint: #5b6272;

  --accent: #ff7a29;
  --accent-2: #ff4d2e;
  --accent-soft-bg: rgba(255, 122, 41, 0.14);
  --accent-soft-text: #ffa95e;
  --blue-soft-bg: rgba(59, 130, 246, 0.14);
  --blue-soft-text: #6fa8ff;
  --green: #34d399;
  --red: #ff5c5c;
  /* text on an accent fill, like the primary button */
  --on-accent: #17130d;

  --radius: 10px;
  --radius-sm: 6px;
}

/* Light mode variable overrides */
[data-theme="light"] {
  --bg: #f4f6f8;
  --sidebar-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef2f6;
  --border: rgba(0, 0, 0, 0.1);
  --text: #1a202c;
  --text-muted: #4a5568;
  --text-faint: #718096;

  --accent-soft-bg: rgba(255, 122, 41, 0.12);
  --accent-soft-text: #d96214;
  --blue-soft-bg: rgba(59, 130, 246, 0.12);
  --blue-soft-text: #2563eb;
}

/* Reset browser default spacing and make width/height include padding+border everywhere. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Page background, default text color/font. */
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ---- Theme menu ---- */
/* Dark, light, the first mockup's look or a seasonal one (see Themes at the
   bottom). Built like the account menu: a <details>, with the panel dropping
   below the button, styled with the account menu's. The script at the bottom of
   _Layout.cshtml puts the chosen theme on the page and remembers it. */
.theme-menu {
  position: relative;
  margin-left: 8px;
}

.theme-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.theme-menu-button::-webkit-details-marker {
  display: none;
}

.theme-menu-button:hover,
.theme-menu[open] .theme-menu-button {
  background: var(--surface);
  color: var(--text);
}

.theme-menu-panel {
  min-width: 200px;
}

/* a dot of the theme's page and accent colours beside its name */
.theme-swatch {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--swatch-page) 50%, var(--swatch-accent) 50%);
}

/* and a tick by the one you're on */
.theme-check {
  margin-left: auto;
  color: var(--accent);
  visibility: hidden;
}

.theme-option[aria-pressed="true"] .theme-check {
  visibility: visible;
}

/* Links look like plain text by default; color/underline added explicitly where wanted. */
a {
  color: inherit;
  text-decoration: none;
}

/* The hidden attribute always wins. Without this, any class that sets display
   (buttons are inline-flex, button rows are flex) quietly un-hides the element. */
[hidden] {
  display: none !important;
}

/* Shared sizing/stroke for every inline icon SVG used across the app. */
svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Orange accent text color, e.g. the "Web" in the logo. */
.accent {
  color: var(--accent);
}

.eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft-text);
  margin-bottom: 12px;
}

.home-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 30px 24px;
  margin: 20px 0 28px;
  background: linear-gradient(135deg, rgba(255, 122, 41, 0.08), rgba(59, 130, 246, 0.06));
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.home-hero-copy h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.08;
  margin-bottom: 16px;
}

.home-hero-text {
  color: var(--text-muted);
  font-size: 1.02rem;
  max-width: 560px;
  margin-bottom: 22px;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.home-hero-video-wrap {
  display: flex;
  justify-content: center;
}

/* Fills its column, so the subtitles in the picture stay readable */
.home-hero-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

@media (max-width: 800px) {
  .home-hero {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .home-hero-copy {
    order: 1;
  }

  .home-hero-video-wrap {
    order: 2;
  }
}

/* ---- App shell ---- */
/* Full-height column: the header bar, then the page, then the footer. */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- Header bar ---- */
/* The bar itself spans the window, so its background and rule run edge to edge. */
.topbar {
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--border);
}

/* What's inside it: logo, nav links, theme toggle, and the account menu pushed to the right. */
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 32px;
}

/* Logo row, which doubles as the link home. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The 5-bar "waveform" logo icon — a row of bars at different heights. */
.brand-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
}

.brand-bars i {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  display: block;
}

/* Each bar's individual height, to make the "waveform" look uneven. */
.brand-bars i:nth-child(1) { height: 40%; }
.brand-bars i:nth-child(2) { height: 90%; }
.brand-bars i:nth-child(3) { height: 60%; }
.brand-bars i:nth-child(4) { height: 100%; }
.brand-bars i:nth-child(5) { height: 50%; }

/* "voiceWeb" text next to the logo mark. */
.brand-name {
  font-weight: 700;
  font-size: 1.05rem;
}

/* The Home/Projects links, sitting next to the logo. */
.top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* One nav link (icon + label). */
.top-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
}

.top-link:hover {
  background: var(--surface);
  color: var(--text);
}

/* Highlights whichever nav link matches the current page. */
.top-link.active {
  background: var(--accent-soft-bg);
  color: var(--accent);
}

/* ---- Account menu ---- */
/* A <details> element, so opening and closing it is the browser's own job and
   none of this needs javascript. margin-left pushes it to the far right. */
.account {
  position: relative;
  margin-left: auto;
}

/* The part that's always visible and gets clicked. list-style drops the default
   disclosure triangle, because the markup has an svg caret instead. */
.account-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Safari keeps showing the triangle unless it's removed this way as well. */
.account-button::-webkit-details-marker {
  display: none;
}

.account-button:hover {
  background: var(--surface);
  color: var(--text);
}

/* Their name or email. Cut off with an ellipsis rather than letting a long
   address stretch the whole bar. */
.account-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-caret {
  width: 14px;
  height: 14px;
}

/* Turns the caret over while the menu is open. */
.account[open] .account-caret {
  transform: rotate(180deg);
}

/* Their profile picture, left of the name - and on a phone in place of it (see
   Responsive). The rest of its look is .avatar's, under Comments. */
.account-avatar {
  width: 24px;
  height: 24px;
}

/* The round initial that stands in for the name on a phone (see Responsive). */
.account-initial {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft-bg);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
}

/* The name at the top of the menu, only on a phone, where the button only has
   the initial. */
.account-menu-name {
  display: none;
  margin: 0 0 6px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Hamburger menu ---- */
/* Only on a phone (see Responsive), where it holds the nav links. Built like the
   account menu: a <details>, with the panel dropping below it. */
.nav-menu {
  display: none;
  position: relative;
}

.nav-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-menu-button::-webkit-details-marker {
  display: none;
}

.nav-menu-button:hover {
  background: var(--surface);
  color: var(--text);
}

/* Three lines when shut, an X when open. */
.nav-menu-close,
.nav-menu[open] .nav-menu-open {
  display: none;
}

.nav-menu[open] .nav-menu-close {
  display: block;
}

/* Each link a full-width row in the panel. */
.nav-menu-panel .top-link {
  padding: 10px 12px;
}

/* The panel that drops below the button. Positioned rather than left in the
   flow, so opening it doesn't shove the header contents around. */
.account-menu,
.nav-menu-panel,
.theme-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 240px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* One row in the menu. A real <button>, because every row submits a form. */
.account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.account-item:hover {
  background: var(--surface-2);
}

/* The Google and Microsoft logos keep their own colors, unlike the stroked
   outline icons everywhere else. */
.brand-mark {
  width: 18px;
  height: 18px;
  stroke: none;
}

/* Small square icon-only button. */
.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
}

.icon-btn:hover {
  color: var(--text);
}

/* Borderless/transparent variant of icon-btn — the move up/down and delete
   buttons on each script line. */
.icon-btn.ghost {
  background: transparent;
  border: none;
  width: 30px;
  height: 30px;
}

/* ---- Content ---- */
/* Padding around whatever page renders inside the layout. */
.content {
  flex: 1;
  width: 100%;
  padding: 32px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Big page title, e.g. "Welcome to voiceWeb" / "Projects". */
.greeting {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 24px;
}

/* The home page's welcome, once signed in: "Welcome to voiceWeb, gabriel" on a
   computer, or on a phone "Hello, gabriel" on a line of its own above it (see
   Responsive). That line is cut short with "..." if a long name won't fit;
   min-width lets the column shrink enough for that to happen. */
.welcome {
  min-width: 0;
}

.welcome-hello {
  display: none;
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Cards ---- */
/* The boxed panel used everywhere — project info, forms, lists, etc. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

/* Title row at the top of a card, with an optional link/action on the right. */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-header h2 {
  font-size: 1rem;
  font-weight: 600;
}

/* "View all" link in a card header. */
.view-all {
  font-size: 0.82rem;
  color: var(--accent-soft-text);
  font-weight: 500;
}

.view-all:hover {
  color: var(--accent);
}

/* ---- Current project ---- */
/* Project title + status badge side by side. */
.project-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.project-title-row h3 {
  font-size: 1.05rem;
  font-weight: 600;
}

/* Dimmer secondary text, e.g. a project's description. */
.muted {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 16px;
}

/* ---- Badges ---- */
/* Small pill label shape — actual colors come from the status-* classes below. */
.badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ---- Footer ---- */
/* Copyright line at the bottom of every page. */
.site-footer {
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* Same measure again, so the copyright lines up with everything above it. */
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 32px;
}

/* Privacy Policy and Terms of Service, opposite the copyright */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
}

.footer-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ---- Privacy policy and terms of service ---- */
/* Long reading, so a comfortable size and spacing; the reset at the top of this
   file takes every margin away, so the gaps between paragraphs are put back here. */
.legal-title {
  margin-bottom: 6px;
}

.legal-updated {
  margin-bottom: 20px;
}

.legal {
  padding: 28px 32px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.legal h2 {
  margin: 28px 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

/* the About page's card starts straight with a heading */
.legal h2:first-child {
  margin-top: 0;
}

.legal p,
.legal ul {
  margin-bottom: 12px;
}

.legal ul {
  padding-left: 22px;
}

.legal li {
  margin-bottom: 8px;
}

.legal strong {
  color: var(--text);
  font-weight: 600;
}

.legal a {
  color: var(--accent-soft-text);
  text-decoration: underline;
}

.legal a:hover {
  color: var(--accent);
}

.legal > :last-child {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .legal {
    padding: 20px 18px;
  }
}

/* ---- Page header ---- */
/* Page title + primary action button row, e.g. "Projects" + "+ New Project". */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* ---- Buttons ---- */
/* Main call-to-action button (orange gradient) — Create Project, Generate, Save, etc. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: none;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* Stretches a button to fill its container's width. */
.btn-block {
  width: 100%;
}

/* Secondary/low-emphasis button — outline only, no fill. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.88rem;
  cursor: pointer;
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

/* Destructive-action button — Delete project, script or account. */
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 92, 92, 0.4);
  background: transparent;
  color: var(--red);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.btn-danger:hover {
  background: rgba(255, 92, 92, 0.12);
  border-color: var(--red);
}

/* Wraps the native <audio> player for the latest saved line on the home page. */
.generated-audio {
  margin-top: 16px;
}

.generated-audio audio {
  width: 100%;
}

.generated-audio .field-hint {
  display: inline-block;
  margin-top: 8px;
}

/* ---- Projects grid ---- */
/* Responsive grid of project cards on the Projects list page. */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* One clickable project tile in the grid. */
.project-card {
  display: block;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.project-card:hover {
  border-color: var(--accent);
}

/* ---- Project colours (Kyra's design) ---- */
/* Each project's card is marked down its left side with the project's own colour,
   set on the card as --project-color, the way a script's row is on its page. */
.project-card,
.project-card:hover {
  border-left: 4px solid var(--project-color, var(--accent));
}

/* The Current Project card, on the projects page and the home page: the project's
   colour (--project-accent) down its left side and a faint wash of it behind. */
.custom-project-card {
  border-left: 6px solid var(--project-accent, var(--accent));
  background: color-mix(in srgb, var(--project-accent, var(--accent)) 8%, var(--surface));
}

/* on the projects page it sits between the banner and the list */
.current-project {
  margin-top: 24px;
}

.current-project .project-title-row a:hover {
  color: var(--accent);
}

/* "Theme Color:" and the round picker, in the card's header */
.theme-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-picker label {
  margin: 0;
  font-size: 0.75rem;
}

.theme-picker .script-color-picker {
  width: 28px;
  height: 28px;
}

/* Clip count + created-date line at the bottom of a project card. */
.project-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 12px;
}

/* "No projects yet" placeholder card. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* ---- Status badges ---- */
/* Color variants for .badge, picked at runtime to match Project.Status
   ("Draft" / "Model Ready" / "Failed") — see status-@Model.Project.Status... in the .cshtml. */
.status-draft {
  background: var(--surface-2);
  color: var(--text-muted);
}

.status-model-ready {
  background: rgba(52, 211, 153, 0.14);
  color: var(--green);
}

/* ---- Forms ---- */
/* Caps form width so it doesn't stretch full-page on wide screens. */
.form-card {
  max-width: 560px;
}

/* Wraps one label + input pair, with spacing below it. */
.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

/* Shared look for every text-like input (text/number/textarea/file/select). */
.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea,
.form-group input[type="file"],
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}

/* Textareas can only be resized vertically, not horizontally. */
.form-group textarea {
  resize: vertical;
}

/* Label + live value readout sitting above a range slider. */
.slider-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.slider-label label {
  margin-bottom: 0;
}

.slider-label output {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-soft-text);
}

/* Full-width range slider, colored to match the accent. */
.form-group input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

/* The "Fast Mode" checkbox + its label, as one clickable row. */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* Dims and disables a form-group's inputs — toggled via JS when Fast Mode is on. */
.form-group-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Small helper text under a field or button, e.g. allowed file types. */
.field-hint {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 6px;
}

/* Right-aligned row of buttons at the bottom of a form. */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* Banner for a form error message (red). */
.form-alert {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 92, 92, 0.12);
  color: var(--red);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

/* Blue variant of form-alert, for non-error status messages (e.g. "Voice model generated"). */
.form-alert-info {
  background: var(--blue-soft-bg);
  color: var(--blue-soft-text);
}

/* ---- Invite codes ---- */
/* The box on the invite page: shown in capitals, spaced like the codes are */
.invite-code-input {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* a code just made, on the admin page, big enough to read out or copy */
.invite-code-big {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  user-select: all;
}

/* the two limits on a new code, side by side when there's room */
.invite-limits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 16px;
}

/* the admin page's lists, scrolling sideways on a phone rather than squashing */
.table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--border);
}

.admin-table td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: nowrap;
}

.admin-table form {
  margin: 0;
}

/* The "Who's in" list's Username column: one fixed width, with everything centred
   in it, so every admin's crown sits in the same place. A username is always one
   line, cut short with "..." when it won't fit. */
.admin-table .username-col {
  width: 160px;
  max-width: 160px;
  text-align: center;
}

/* the width cap is here, not on the cell, because a table cell grows to fit
   its contents whatever its own max-width says */
.username-text {
  display: block;
  max-width: 160px;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* An admin: an orange username, with a crown above it. */
.admin-username {
  color: var(--accent);
  font-weight: 600;
}

.admin-crown {
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 auto 1px;
  color: var(--accent);
  fill: var(--accent-soft-bg);
}

/* Make/Remove admin and Remove, side by side at the end of a row. */
.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* smaller than usual, so two of them leave the other columns room */
.row-actions .btn-ghost {
  padding: 6px 10px;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* dates and "3 days ago" read badly broken over two lines */
.admin-table .nowrap {
  white-space: nowrap;
}

/* ---- Account and sharing ---- */
/* Your account id on the account page, with its Copy button beside it */
.account-id-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.account-id {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  user-select: all;
}

/* Username, sign-in, joined, last active: names on the left, values on the right */
.account-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 24px;
  font-size: 0.9rem;
}

.account-facts dt {
  color: var(--text-muted);
}

.account-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.account-change {
  margin-left: 8px;
  font-size: 0.82rem;
  color: var(--accent-soft-text);
}

.account-change:hover {
  color: var(--accent);
}

/* The counts, as a row of tiles that wraps on a phone */
.account-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.account-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.account-stat strong {
  font-size: 1.4rem;
  font-weight: 700;
}

.account-stat span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* The username box, with its @ in front */
.username-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.username-input:focus-within {
  border-color: var(--accent);
}

.username-input span {
  padding-left: 12px;
  color: var(--text-faint);
}

.username-input input[type="text"] {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding-left: 4px;
}

.username-input input[type="text"]:focus {
  outline: none;
  box-shadow: none;
}

/* "Shared with you by @kyra", above a project or script that isn't yours */
.shared-banner {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft-bg);
  color: var(--accent-soft-text);
  font-size: 0.85rem;
}

/* whose a shared project is, on its card in the projects list */
.project-owner {
  margin: -2px 0 8px;
}

/* The Sharing card, under the Scripts card on the project page */
.share-card {
  margin-top: 20px;
}

/* the account id box on the sharing card: typed in capitals, like the ids are shown
   (but not its hint, which is a sentence) */
.account-id-input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.account-id-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  font-family: inherit;
}

/* the id box keeps a sensible width, so on a phone the choice and the button
   go underneath it rather than squashing it */
.inline-form.share-form {
  flex-wrap: wrap;
}

.inline-form.share-form input[type="text"] {
  flex: 1 1 240px;
}

.share-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.share-row form {
  margin: 0;
}

/* who: as wide as their name and id need - on a phone the buttons wrap under it */
.share-who {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 0 auto;
  max-width: 100%;
}

.share-who code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.8rem;
  color: var(--text-faint);
  white-space: nowrap;
}

/* a script's name in its row, for someone who can only view the project */
.script-item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
}

/* The voice settings are in a fieldset so they can all be switched off at once
   for someone who can only view; it shouldn't look like one. */
.voice-settings {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.voice-settings:disabled input,
.voice-settings:disabled select,
.voice-settings:disabled button {
  cursor: not-allowed;
}

.voice-settings:disabled input[type="range"] {
  opacity: 0.6;
}

/* ---- Recording ---- */
/* Status text under the record button — "Recording... 3s", errors, etc. */
.record-status {
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* Playback for a just-made recording, and each voice's clip on a script's page. */
.record-preview {
  width: 100%;
  margin-top: 10px;
}

/* ---- Responsive ---- */
/* Below 700px (phone width): the header tightens up, the nav links move into
   the hamburger, the account button shrinks to a round initial, and
   content/footer padding shrinks. */
@media (max-width: 700px) {
  .topbar-inner {
    gap: 8px;
    padding: 10px 16px;
  }

  .top-nav {
    display: none;
  }

  .nav-menu {
    display: block;
  }

  .theme-menu {
    margin-left: 0;
  }

  /* summary, so the signed-out Sign in link (also an account-button) keeps its words */
  summary.account-button {
    padding: 0;
    border: 0;
    border-radius: 50%;
  }

  .account-initial {
    display: flex;
  }

  .account-avatar {
    width: 32px;
    height: 32px;
  }

  .account-caret {
    display: none;
  }

  /* hidden, but still read out, as the button's name */
  summary.account-button .account-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .account-menu-name {
    display: block;
  }

  /* the home page's "Hello, gabriel" line takes over from ", gabriel" */
  .welcome-hello {
    display: block;
  }

  .welcome-name {
    display: none;
  }

  .content {
    padding: 20px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    text-align: center;
  }
}
/* ---- Waveform Canvas ---- */
.waveform-canvas {
  width: 100%;
  height: 60px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 10px;
  display: block;
}

/* display: block above would otherwise beat the hidden attribute */
.waveform-canvas[hidden] {
  display: none;
}

/* Hidden on screen but still read out, e.g. the label on each line's text box. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Room between the home page's latest-line player and the Open Project button. */
.generated-audio {
  margin-bottom: 16px;
}

/* ---- Page frame: project, script and new-project pages ---- */
/* One centred column - these pages are a sequence of steps, not a dashboard. */
.page-narrow {
  max-width: 860px;
  margin: 0 auto;
}

/* Cards stacked with even gaps. */
.stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* "Projects / My project / Script 1" above the title. */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.82rem;
  color: var(--text-faint);
}

.breadcrumb a {
  color: var(--text-muted);
}

.breadcrumb a:hover {
  color: var(--accent-soft-text);
}

/* Title (and subtitle) on the left, the Edit menu on the right. */
.title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.title-row .greeting {
  margin-bottom: 4px;
}

/* Back to the project, and the Edit menu, side by side on the right. */
.title-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
}

/* A long project name is cut short with "..." rather than pushing the title aside. */
.back-button span {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Back to project" is only for when the full one doesn't fit (the Script page
   checks, and adds "short"). */
.back-button .back-short,
.back-button.short .back-full {
  display: none;
}

.back-button.short .back-short {
  display: inline;
}

.page-subtitle {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* "(optional)" next to a field label. */
.optional {
  font-weight: 400;
  color: var(--text-faint);
}

/* A row of buttons, e.g. Continue Script + Open Project on the home page. */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- Edit menu ---- */
/* The pencil button by a title; opens a small panel with rename and delete. */
.edit-menu {
  position: relative;
  flex-shrink: 0;
}

.edit-menu summary {
  list-style: none;
}

.edit-menu summary::-webkit-details-marker {
  display: none;
}

.edit-menu[open] summary {
  color: var(--text);
  border-color: var(--text-faint);
}

.edit-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: 340px;
  max-width: calc(100vw - 40px);
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.edit-panel .form-actions {
  margin-top: 0;
}

/* Delete, kept apart from Save below a rule. */
.edit-panel-danger {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---- Steps on the project page ---- */
.step-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.step-header h2 {
  font-size: 1rem;
  font-weight: 600;
}

.step-hint {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: 2px;
}

/* The 1 / 2 in a circle - a tick once the step is done. */
.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--accent-soft-bg);
  color: var(--accent-soft-text);
}

.step-number.done {
  background: rgba(52, 211, 153, 0.14);
  color: var(--green);
}

/* Record or upload, as two big buttons side by side. */
.voice-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--text-faint);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.choice:hover,
.choice:focus-visible {
  border-color: var(--accent);
}

.choice svg {
  width: 22px;
  height: 22px;
  margin-bottom: 4px;
  color: var(--accent);
}

.choice strong {
  font-size: 0.92rem;
}

.choice span {
  font-size: 0.78rem;
  color: var(--text-faint);
}

.choice.recording {
  border-style: solid;
  border-color: var(--red);
}

.choice.recording svg {
  color: var(--red);
}

.record-status:not(:empty) {
  display: block;
  margin-top: 10px;
}

/* A plain fold-out section: a voice's "Fine-tune". */
.disclosure {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.disclosure summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.disclosure summary:hover {
  color: var(--text);
}

.disclosure[open] summary {
  margin-bottom: 12px;
}

/* An input and its button on one line, e.g. the new script name. */
.inline-form {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.inline-form input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}

/* ---- Scripts ---- */
/* One script in the project page's list (Kyra's design): its name and colour can
   be changed in place, and the rest of the row opens it. The thick left edge is
   the script's own colour, set on the row as --script-color. */
.script-item {
  display: block;
  padding: 10px 14px 12px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  border-left: 4px solid var(--script-color, var(--accent));
  background: var(--surface-2);
  transition: border-color 0.15s ease;
}

.script-item:hover {
  border-color: var(--accent);
  border-left-color: var(--script-color, var(--accent));
}

.script-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.script-item .progress {
  margin-top: 10px;
}

/* The script's name, editable where it is: plain text until pointed at or clicked */
.script-name-input {
  flex: 1;
  min-width: 0;
  margin-left: -8px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-overflow: ellipsis;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.script-name-input:hover {
  background: var(--surface);
  border-color: var(--border);
}

.script-name-input:focus {
  background: var(--surface);
  border-color: var(--accent);
  outline: none;
}

/* "Saved", or why it wasn't */
.script-save-status {
  font-size: 0.72rem;
  color: var(--text-faint);
  white-space: nowrap;
}

.script-save-status.is-error {
  color: var(--red);
}

/* The script's colour, as a round swatch */
.script-color-picker {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.script-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.script-color-picker::-webkit-color-swatch {
  border: 1px solid var(--border);
  border-radius: 50%;
}

.script-color-picker::-moz-color-swatch {
  border: 1px solid var(--border);
  border-radius: 50%;
}

/* the rest of the row, which opens the script */
.script-item-open {
  display: block;
  border-radius: 4px;
}

.script-item-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.script-open-hint {
  margin-left: auto;
  padding-left: 12px;
  color: var(--accent);
  font-weight: 600;
}

.script-item-meta {
  font-size: 0.76rem;
  color: var(--text-faint);
  white-space: nowrap;
}

/* How much of a script (or project) is saved. */
.progress {
  display: block;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-2);
}

.script-item .progress {
  background: var(--surface);
}

.progress > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

.progress-wide {
  width: 160px;
}

.project-card .progress {
  margin-top: 4px;
}

/* ---- Voice bar on a script's page ---- */
/* Voice, style and language on one row; everything else folds under Fine-tune. */
.voice-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 28px;
}

.voice-bar-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.voice-bar-voice {
  flex: 1;
  min-width: 160px;
}

.voice-bar-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.voice-name {
  font-size: 0.92rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-name:hover {
  color: var(--accent-soft-text);
}

/* Size and date under the voice's name. */
.voice-sub {
  font-size: 0.76rem;
  color: var(--text-faint);
}

/* Download clip / Replace clip / Delete voice, at the bottom of a voice's panel. */
.voice-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* The voice on each script in the project page's list. */
.script-item-voice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.script-item-voice svg {
  width: 14px;
  height: 14px;
  color: var(--text-faint);
}

.script-item-voice .no-voice {
  color: var(--red);
}

/* The style presets, as pill buttons; the one in use is filled in. */
.preset-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.chip:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

.chip[aria-pressed="true"],
.chip-static {
  border-color: transparent;
  background: var(--accent-soft-bg);
  color: var(--accent-soft-text);
}

.chip-static {
  cursor: default;
}

.compact-select {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
}

.fine-tune-summary {
  margin-left: 8px;
  font-weight: 400;
  color: var(--text-faint);
}

.fine-tune-fast {
  margin-bottom: 16px;
}

/* The six sliders, three to a row. */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 24px;
}

.settings-grid .form-group {
  margin-bottom: 0;
}

.settings-grid input[type="range"] {
  width: 100%;
}

.lines-tip {
  margin-top: 16px;
}

@media (max-width: 900px) {
  .settings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .voice-choices,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .title-row {
    flex-direction: column;
  }

  .edit-panel {
    left: 0;
    right: auto;
  }

  /* Next to a Back button, Edit sits partway across the row, so its panel
     opens from the start of the row instead, or it would run off the screen. */
  .title-actions {
    position: relative;
  }

  .title-actions .edit-menu {
    position: static;
  }

  .progress-wide {
    width: 100px;
  }
}

/* One line on a script's page, with a rule between lines. */
.script-line {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

/* Number, state badge and the move/delete buttons. */
.line-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.line-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.line-tools {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.line-tools .icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* A saved line's text, shown as text rather than a box. */
.line-text {
  font-size: 0.95rem;
  white-space: pre-wrap;
}

.line-editor {
  margin-bottom: 0;
}

/* One take: its label, player, and the voice clip it was made from. */
.take {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.take audio {
  width: 100%;
}

.take-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The take you haven't decided on yet stands out in the accent color. */
.take-new {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.take-new .take-label {
  color: var(--accent-soft-text);
}

.take-meta {
  font-size: 0.78rem;
  color: var(--text-faint);
}

.take-meta summary {
  cursor: pointer;
}

.take-meta audio {
  margin-top: 8px;
}

/* Current and new takes side by side, each with its Keep button under it. */
.take-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.take-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Generate / Save text / Save line, on the right under each line. */
.line-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* Badge for a line with two takes waiting for a pick. */
.status-comparing {
  background: var(--accent-soft-bg);
  color: var(--accent-soft-text);
}

/* Badges for a line in the generation queue: waiting its turn, then being made
   (which pulses, so it's clear something is happening). */
.status-queued {
  background: var(--surface-2);
  color: var(--accent-soft-text);
}

.status-generating {
  background: var(--accent-soft-bg);
  color: var(--accent-soft-text);
  animation: badge-pulse 1.6s ease-in-out infinite;
}

@keyframes badge-pulse {
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .status-generating {
    animation: none;
  }
}

/* "Generate all new lines", just under the Lines heading */
.generate-all {
  margin-top: 0;
  margin-bottom: 16px;
}

/* why the last try at a line's take didn't work */
.queue-failed {
  color: var(--red);
}

@media (max-width: 700px) {
  .take-compare {
    grid-template-columns: 1fr;
  }
}

/* ---- Sign-in page ---- */
/* On the sign-in page, signed out, there's no nav or account button to push the
   theme menu over, so it does the pushing itself. */
.brand + .theme-menu {
  margin-left: auto;
}

/* Centres the one card in the space between header and footer. */
.login-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 36px 32px 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.login-header {
  text-align: center;
  margin-bottom: 24px;
}

.login-header h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.login-header .muted {
  font-size: 0.88rem;
}

/* The header's waveform logo, a size up. */
.login-bars {
  display: inline-flex;
  gap: 3px;
  height: 32px;
  margin-bottom: 16px;
}

.login-bars i {
  width: 5px;
}

.login-providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* One full-width button per service, logo then label, the way Google and
   Microsoft both ask for theirs to look. */
.login-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.login-provider:hover {
  border-color: var(--accent);
  background: var(--accent-soft-bg);
}

.login-provider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.login-footnote {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-faint);
  text-align: center;
}

@media (max-width: 700px) {
  .login-card {
    padding: 28px 20px 22px;
  }
}

/* Hero Banner Layout & Image Styling */
.hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 24px;
}

.hero-content {
  flex: 1;
}

.hero-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.2;
}

.hero-description {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-image-wrapper {
  flex: 1;
  max-width: 420px;
  display: flex;
  justify-content: center;
}

.hero-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

@media (max-width: 800px) {
  .hero-card {
    flex-direction: column-reverse;
    text-align: center;
    padding: 24px;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-image-wrapper {
    max-width: 100%;
  }
}


/* ---- The cast: a project's voices ---- */
/* On a script's page: a tab for each voice, and "+ Add a voice". The page's
   script shows the tabs; without it every voice is shown, one under the other. */
.card-header-note {
  font-size: 0.8rem;
  color: var(--text-faint);
}

.cast-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.cast-tabs[hidden] {
  display: none;
}

.cast-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.cast-tab:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

.cast-tab[aria-selected="true"] {
  border-color: transparent;
  background: var(--accent-soft-bg);
  color: var(--accent-soft-text);
}

.cast-tab [data-tab-name] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "this script" on the tab of the voice that reads its lines */
.cast-tab-mark {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.cast-tab[aria-selected="true"] .cast-tab-mark {
  color: inherit;
  opacity: 0.75;
}

.cast-tab-add {
  border-style: dashed;
}

/* every voice shown at once: a line between them */
.cast-panel + .cast-panel {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.voice-bar.has-tabs .cast-panel + .cast-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.cast-panel .voice-bar-row + .record-preview,
.cast-panel .record-preview + .voice-bar-row {
  margin-top: 14px;
}

.voice-name-input {
  width: 200px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
}

.voice-name-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* to someone who can only view, the name is just its name */
fieldset:disabled .voice-name-input {
  padding-left: 0;
  border-color: transparent;
  background: transparent;
}

.voice-picker {
  margin-top: 16px;
}

/* Who reads a line, beside its state: a list while it's being worked on, the name once it's saved. */
.line-voice {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
  text-overflow: ellipsis;
}

.line-speaker {
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Read by" and its list, before Add Lines */
.add-lines-actions {
  align-items: center;
  flex-wrap: wrap;
}

.add-lines-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* On a project's page and the account page: the voices, one to a row. */
.cast-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.cast-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.cast-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.cast-meta {
  font-size: 0.8rem;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

.cast-meta a {
  color: var(--accent-soft-text);
}

/* The account page's last card: deleting the account */
.danger-card {
  border-color: rgba(255, 92, 92, 0.35);
}

/* On a phone the voice list gets a row of its own, under the line's number, state and buttons */
@media (max-width: 700px) {
  .line-head {
    flex-wrap: wrap;
  }

  .line-voice {
    order: 5;
    flex: 1 1 100%;
    max-width: none;
    padding: 6px 8px;
  }
}

/* ---- "Load more" under a list (Pages/Shared/_LoadMore.cshtml) ---- */
.load-more {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
}

.load-more-count {
  font-size: 0.8rem;
  color: var(--text-faint);
}

.load-more.is-loading [data-load-more-link] {
  pointer-events: none;
  opacity: 0.6;
}

/* ---- Themes ---- */
/* Dark is :root's and light is at the top. The rest are picked from the theme
   menu in the header; each sets the tokens, and a few add a touch the tokens
   can't reach. */

/* Mockup: the look of Brianna's first mockups - sky blue and hot pink, thick
   outlines, round corners and condensed headings. */
[data-theme="mockup"] {
  --bg: #d3f2fc;
  --sidebar-bg: #bfeafa;
  --surface: #e6f9ff;
  --surface-2: #ffe3f6;
  --border: #4a8fe7;
  --text: #1c1838;
  --text-muted: #3d4670;
  --text-faint: #646d93;

  --accent: #ff2fa8;
  --accent-2: #e4008c;
  --accent-soft-bg: rgba(255, 111, 200, 0.25);
  --accent-soft-text: #c8007a;
  --blue-soft-bg: rgba(64, 196, 240, 0.28);
  --blue-soft-text: #1560c4;
  --green: #0f9a68;
  --red: #d61f5a;
  --on-accent: #fff;

  --radius: 18px;
  --radius-sm: 10px;

  /* only this theme's */
  --mockup-ink: #1c1838;
  --mockup-pink: #ff8fd2;
  --mockup-hot-pink: #ff5cc8;
  --mockup-pink-line: #e94fa6;
  --mockup-cyan: #6fd9f2;

  /* the thick cyan scrollbar with a pink thumb down the side of every mockup */
  scrollbar-color: #ff1fa6 #5ccdf0;
}

[data-theme="mockup"] body {
  background: linear-gradient(180deg, #dcf6fe, #c4ebfa) fixed;
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

/* the mockups' headings: magenta, in a heavy condensed face */
[data-theme="mockup"] h1,
[data-theme="mockup"] h2,
[data-theme="mockup"] h3,
[data-theme="mockup"] .brand-name {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

[data-theme="mockup"] h1,
[data-theme="mockup"] h2,
[data-theme="mockup"] h3 {
  color: #e6007e;
}

/* page titles like the mockup's "My Home": blue on a pink tab */
[data-theme="mockup"] .greeting {
  display: inline-block;
  padding: 2px 18px;
  border: 2px solid var(--mockup-pink-line);
  border-radius: 8px;
  background: var(--mockup-pink);
  color: #1584ef;
}

[data-theme="mockup"] .greeting .accent {
  color: #fff;
}

/* the header: a row of pink tiles over a dark rule */
[data-theme="mockup"] .topbar {
  border-bottom: 2px solid var(--mockup-ink);
}

[data-theme="mockup"] .top-link {
  background: var(--mockup-pink);
  border: 2px solid var(--mockup-pink-line);
  color: var(--mockup-ink);
}

[data-theme="mockup"] .top-link:hover,
[data-theme="mockup"] .top-link.active {
  background: var(--mockup-hot-pink);
  color: #fff;
}

[data-theme="mockup"] .theme-menu-button,
[data-theme="mockup"] .account-button {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--mockup-ink);
}

/* cards outlined in blue; the big hero panels pink with a dark outline, like "My Home" */
[data-theme="mockup"] .card {
  border: 2px solid var(--border);
}

[data-theme="mockup"] .home-hero,
[data-theme="mockup"] .hero-card {
  background: var(--surface-2);
  border: 2px solid var(--mockup-ink);
  border-radius: 28px;
}

/* buttons: filled hot pink ("Contact"), or cyan ("Add Request") */
[data-theme="mockup"] .btn-primary {
  background: var(--mockup-hot-pink);
  border: 2px solid var(--accent-2);
  font-weight: 700;
}

[data-theme="mockup"] .btn-ghost {
  background: var(--mockup-cyan);
  border: 2px solid var(--border);
  color: var(--blue-soft-text);
  font-weight: 700;
}

[data-theme="mockup"] .btn-ghost:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* the "AI Voice Learning 75%" bar: pink, in a pink outline */
[data-theme="mockup"] .progress {
  height: 10px;
  border: 2px solid var(--mockup-pink-line);
  background: #fff;
}

[data-theme="mockup"] .progress > span {
  background: var(--mockup-hot-pink);
}

[data-theme="mockup"] .site-footer {
  border-top: 2px solid var(--mockup-ink);
}

/* Christmas: pine green with holly red and gold, and a little snow. */
[data-theme="christmas"] {
  --bg: #0e1f17;
  --sidebar-bg: #0a1812;
  --surface: #15291f;
  --surface-2: #1c3428;
  --border: rgba(255, 255, 255, 0.09);
  --text: #f5f1e8;
  --text-muted: #a9bfae;
  --text-faint: #6f8a78;

  --accent: #e23b3b;
  --accent-2: #b3122e;
  --accent-soft-bg: rgba(226, 59, 59, 0.16);
  --accent-soft-text: #ff8080;
  --blue-soft-bg: rgba(212, 175, 55, 0.16);
  --blue-soft-text: #e8c85a;
  --green: #4cc38a;
  --red: #ff6b6b;
  --on-accent: #fff;
}

[data-theme="christmas"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.6px),
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.6px);
  background-size: 48px 48px, 31px 31px;
  background-position: 0 0, 15px 20px;
}

/* Halloween: pumpkin orange on a night purple, and a jack-o'-lantern for the logo. */
[data-theme="halloween"] {
  --bg: #120d17;
  --sidebar-bg: #0d0912;
  --surface: #1d1524;
  --surface-2: #261c2f;
  --border: rgba(255, 140, 40, 0.14);
  --text: #f6efe6;
  --text-muted: #b3a3bd;
  --text-faint: #7a6b85;

  --accent: #ff7518;
  --accent-2: #e8430c;
  --accent-soft-bg: rgba(255, 117, 24, 0.16);
  --accent-soft-text: #ffa257;
  --blue-soft-bg: rgba(140, 82, 255, 0.18);
  --blue-soft-text: #b48cff;
  --green: #8be04e;
  --red: #ff4d4d;
  --on-accent: #1a0d00;
}

[data-theme="halloween"] body {
  background: radial-gradient(ellipse at top, rgba(140, 82, 255, 0.16), transparent 60%) var(--bg);
}

/* the waveform logo - in the header and on the sign-in pages - becomes a jack-o'-lantern */
[data-theme="halloween"] .brand-bars {
  width: 24px;
  height: 24px;
  background: url("../icon/jack-o-lantern.svg") center / contain no-repeat;
}

[data-theme="halloween"] .brand-bars.login-bars {
  width: 44px;
  height: 44px;
}

[data-theme="halloween"] .brand-bars i {
  display: none;
}

/* Thanksgiving: a warm harvest cream with rust, brown and mustard. */
[data-theme="thanksgiving"] {
  --bg: #f6ede0;
  --sidebar-bg: #fbf5ec;
  --surface: #fffaf3;
  --surface-2: #f1e4d1;
  --border: rgba(110, 60, 20, 0.16);
  --text: #3a2414;
  --text-muted: #6e4f37;
  --text-faint: #9a7b60;

  --accent: #c8551b;
  --accent-2: #a63d12;
  --accent-soft-bg: rgba(200, 85, 27, 0.13);
  --accent-soft-text: #a8460f;
  --blue-soft-bg: rgba(184, 134, 11, 0.15);
  --blue-soft-text: #8a6408;
  --green: #4f7a28;
  --red: #b3261e;
  --on-accent: #fff;
}

[data-theme="thanksgiving"] body {
  background: linear-gradient(180deg, #f9e3c8, var(--bg) 360px) var(--bg);
}

/* Spring: fresh green with blossom pink and a sky blue. */
[data-theme="spring"] {
  --bg: #f3faf1;
  --sidebar-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #eaf6e6;
  --border: rgba(60, 120, 60, 0.15);
  --text: #1f3324;
  --text-muted: #4c6852;
  --text-faint: #7d957f;

  --accent: #e0679a;
  --accent-2: #c94f84;
  --accent-soft-bg: rgba(224, 103, 154, 0.13);
  --accent-soft-text: #b83f74;
  --blue-soft-bg: rgba(126, 200, 227, 0.2);
  --blue-soft-text: #2f7fa6;
  --green: #3f9b4f;
  --red: #d1435b;
  --on-accent: #fff;
}

[data-theme="spring"] body {
  background: linear-gradient(180deg, #fde8f1, var(--bg) 360px) var(--bg);
}

/* Summer: sky over sand, with sea blue and a sunset orange. */
[data-theme="summer"] {
  --bg: #fff8e7;
  --sidebar-bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #fff0cc;
  --border: rgba(0, 120, 160, 0.16);
  --text: #10324a;
  --text-muted: #3f6077;
  --text-faint: #7891a3;

  --accent: #00a6d6;
  --accent-2: #ff8a3d;
  --accent-soft-bg: rgba(0, 166, 214, 0.13);
  --accent-soft-text: #0081a8;
  --blue-soft-bg: rgba(255, 138, 61, 0.15);
  --blue-soft-text: #c85a12;
  --green: #1f9d6b;
  --red: #e0453a;
  --on-accent: #fff;
}

[data-theme="summer"] body {
  background: linear-gradient(180deg, #def5ff, var(--bg) 360px) var(--bg);
}
/* ---- How VoiceWeb Works ---- */
/* Brianna's four-step guide on the projects page. Its colours come from the
   tokens, so it follows whichever theme is picked. */
.user-workflow-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 28px;
  margin-top: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border);
}

.workflow-header {
  margin-bottom: 24px;
}

.workflow-header .badge {
  padding: 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
}

.workflow-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  margin: 4px 0;
}

.workflow-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.workflow-steps-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.step-card {
  flex: 1;
  min-width: 200px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 16px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.step-card.primary-highlight {
  background: var(--accent-soft-bg);
  border-color: var(--accent);
}

.user-workflow-card svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  color: var(--accent);
}

.step-number {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 0.75rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-content h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.step-content p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.step-content code {
  background: var(--surface);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--text);
}

.step-arrow {
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .workflow-steps-container {
    flex-direction: column;
    align-items: stretch;
  }

  .step-arrow {
    transform: rotate(90deg);
    margin: 4px 0;
  }
}

/* ---- Comments ---- */
/* The Discussion card at the bottom of a project's page: newest first, each with
   who wrote it (and their profile picture, if they've added one) and when. */
.comments-card {
  margin-top: 20px;
}

.comment-form {
  margin-bottom: 20px;
}

.comment {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.comment-meta .field-hint {
  font-size: 0.8rem;
}

.comment-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* a profile picture: round, cropped to fit, 28px next to a comment and 80px on
   the Account page */
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.avatar-large {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}

/* Skeleton loading */

:root {
    --skeleton-bg: #101219;
    --skeleton-card: #202631;
    --skeleton-color: #303847;
    --skeleton-light: #475266;
}

[data-theme="light"] {
    --skeleton-bg: #f4f6f8;
    --skeleton-card: #e3e7ed;
    --skeleton-color: #cdd4de;
    --skeleton-light: #f7f9fc;
}

[data-theme="mockup"] {
    --skeleton-bg: #d3f2fc;
    --skeleton-card: #bce2f0;
    --skeleton-color: #94cde1;
    --skeleton-light: #edfaff;
}

[data-theme="christmas"] {
    --skeleton-bg: #0e1f17;
    --skeleton-card: #1b3528;
    --skeleton-color: #365944;
    --skeleton-light: #52785e;
}

[data-theme="halloween"] {
    --skeleton-bg: #120d17;
    --skeleton-card: #292030;
    --skeleton-color: #48344f;
    --skeleton-light: #694a6e;
}

[data-theme="thanksgiving"] {
    --skeleton-bg: #f6ede0;
    --skeleton-card: #ead8c2;
    --skeleton-color: #d6b998;
    --skeleton-light: #fff6e9;
}

[data-theme="spring"] {
    --skeleton-bg: #f3faf1;
    --skeleton-card: #deebdd;
    --skeleton-color: #c2d8c2;
    --skeleton-light: #ffffff;
}

[data-theme="summer"] {
    --skeleton-bg: #fff8e7;
    --skeleton-card: #f4e9ca;
    --skeleton-color: #e3d49f;
    --skeleton-light: #fffefa;
}

.page-skeleton {
    position: fixed;
    inset: 0;
    z-index: 900;
    padding: 110px 24px 30px;
    background: var(--skeleton-bg);
    overflow: auto;
}

.page-skeleton[hidden] {
    display: none;
}

.skeleton-container {
    max-width: 1200px;
    margin: auto;
}

.skeleton-line {
    border-radius: 8px;
    background: linear-gradient(
        90deg,
        var(--skeleton-color),
        var(--skeleton-light),
        var(--skeleton-color)
    );
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.skeleton-title {
    width: 40%;
    height: 32px;
    margin-bottom: 20px;
}

.skeleton-description {
    width: 65%;
    height: 15px;
    margin-bottom: 35px;
}

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.skeleton-card {
    background: var(--skeleton-card);
    padding: 24px;
    border-radius: 16px;
}

.skeleton-card-title {
    width: 65%;
    height: 22px;
    margin-bottom: 24px;
}

.skeleton-text {
    width: 100%;
    height: 13px;
    margin-bottom: 14px;
}

.skeleton-text.short {
    width: 55%;
}

@keyframes loading {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (max-width: 700px) {
    .skeleton-grid {
        grid-template-columns: 1fr;
    }

    .skeleton-title {
        width: 70%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-line {
        animation: none;
    }
}