/* styles.css
   Visual design for the login screen and the main app: a dark sidebar beside a
   white working area, black pill buttons, terracotta accents, and speaker turns
   set in a serif reading font. Colours are tokens with a light and a dark set
   (theme.js picks one); the font stacks include Devanagari fonts so Marathi and
   Hindi render cleanly on every OS. */

/* ===========================================================================
   Fonts
   =========================================================================== */
/* Transcript text is set in a serif so a long meeting reads like a document.
   The files are served from /static because the page's security policy only
   allows fonts from this server. Each file covers one script (unicode-range),
   so a browser only downloads what the text on screen needs. */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Serif Devanagari";
  src: url("fonts/noto-serif-devanagari.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

/* ===========================================================================
   Design tokens: light set here, dark set below (html[data-theme="dark"])
   =========================================================================== */
:root {
  color-scheme: light;

  --color-page: #fafaf8;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f5f1;
  --color-border: #e9e7e1;
  --color-border-strong: #d6d3ca;
  --color-text: #111110;
  --color-text-muted: #6b6a65;
  --color-primary: #a84c29;          /* terracotta: links, dates, highlights */
  --color-primary-soft: #f7e9e1;
  --color-focus: #a84c29;
  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-success-text: #166534;
  --color-danger: #dc2626;
  --color-danger-soft: #fdecec;
  --color-error-border: #f5c2c2;
  --color-error-text: #9b1c1c;
  --color-warning-soft: #fffbeb;
  --color-warning-border: #fcd34d;
  --color-warning-text: #78350f;
  --color-pin-hover: #fef3c7;
  --color-find-match: #fde68a;
  --color-find-current: #f59e0b;
  --color-folder-chip: #f1efea;
  --color-folder-chip-text: #3d3b36;

  /* Main buttons are black pills (white in dark mode). */
  --color-button: #111110;
  --color-button-text: #ffffff;

  /* The sidebar and the login background are dark in both modes, so the
     sidebar's text and hover colours are fixed white tints (see .sidebar). */
  --color-sidebar: #141413;
  --color-brand: #d97757;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 24px 60px -24px rgba(0, 0, 0, 0.6);

  /* Speaker colours (avatar, name, bubble edge): earthy tones that stay easy to tell apart. */
  --speaker-0: #a84c29;
  --speaker-1: #4e6b41;
  --speaker-2: #435e7c;
  --speaker-3: #7a4a6b;
  --speaker-4: #8a6414;
  --speaker-5: #2f6b6b;
  --speaker-avatar-text: #ffffff;

  --radius-large: 16px;
  --radius-medium: 12px;
  --font-body: "Segoe UI Variable Text", "Segoe UI", "Nirmala UI", system-ui, -apple-system,
               "Kohinoor Devanagari", "Noto Sans", "Noto Sans Devanagari", "Mangal", sans-serif;
  --font-reading: "Source Serif 4", "Noto Serif Devanagari", Georgia, "Nirmala UI", serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #1a1a19;
  --color-surface: #232322;
  --color-surface-muted: #1f1f1e;
  --color-border: #33322f;
  --color-border-strong: #4a4945;
  --color-text: #f5f4ee;
  --color-text-muted: #a8a59b;
  --color-primary: #e08a6a;
  --color-primary-soft: #3d2d25;
  --color-focus: #e08a6a;
  --color-success-soft: #14331f;
  --color-success-text: #86efac;
  --color-danger: #f87171;
  --color-danger-soft: #3a1a22;
  --color-error-border: #6b2a35;
  --color-error-text: #fecaca;
  --color-warning-soft: #3a2a0c;
  --color-warning-border: #92400e;
  --color-warning-text: #fde68a;
  --color-pin-hover: #3a2a0c;
  --color-find-match: #78571a;
  --color-find-current: #fbbf24;
  --color-folder-chip: #2e2c28;
  --color-folder-chip-text: #e6dac0;
  --color-button: #ffffff;
  --color-button-text: #141413;
  --color-sidebar: #0f0f0e;
  --shadow-card: none;
  --shadow-float: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --speaker-0: #e08a6a;
  --speaker-1: #a3bd92;
  --speaker-2: #93aecf;
  --speaker-3: #c99bbd;
  --speaker-4: #d9b36a;
  --speaker-5: #7fbcbc;
  --speaker-avatar-text: #141413;
}

/* ===========================================================================
   Base
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Height reserved for the sticky top bar: content scrolled into view (an opened
   transcript, a Find match) lands below it instead of hidden behind it. */
:root { --topbar-space: 104px; }
html { scroll-padding-top: var(--topbar-space); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button { font: inherit; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.offscreen { position: fixed; top: -1000px; left: -1000px; opacity: 0; }

[hidden] { display: none !important; }

/* ===========================================================================
   App shell: sidebar + main column
   =========================================================================== */
.app-shell { min-height: 100vh; }

/* The sidebar is fixed on the left on wide screens and slides in on phones.
   It is dark in both modes, so its text and hovers are white tints. */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 14px 18px;
  background: var(--color-sidebar);
  color: #ffffff;
  overflow-y: auto;
}

.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }

.brand-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--color-brand);
  color: #141413;
  flex-shrink: 0;
}
.brand-icon svg { width: 24px; height: 24px; stroke-width: 2.4; }

.brand-title { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.brand-subtitle { font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); }

.sidebar-nav { display: grid; gap: 4px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.nav-item.is-active { background: #ffffff; color: #141413; }
.nav-item:focus-visible { outline-color: #ffffff; }

.nav-badge {
  margin-left: auto;
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
/* Fixed colours: the active item is always white, in light and dark mode. */
.nav-item.is-active .nav-badge { background: #ebe8e0; color: #141413; }

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.signed-in { padding: 0 12px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); overflow-wrap: anywhere; }
.signed-in strong { color: #ffffff; }

/* ElevenLabs credit balance: a bar of what is left, amber when low, red when
   nearly empty. On the dark sidebar in both modes, hence the white tints. */
.credits-meter { display: grid; gap: 6px; margin: 0 4px 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.credits-meter-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.credits-meter-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.credits-refresh {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.credits-refresh:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.credits-refresh:focus-visible { outline-color: #ffffff; }
.credits-refresh svg { width: 14px; height: 14px; }
.credits-meter-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.credits-meter-bar { height: 100%; border-radius: 999px; background: #e8a385; transition: width 0.3s; }
.credits-meter.is-low .credits-meter-bar { background: #f59e0b; }
.credits-meter.is-critical .credits-meter-bar { background: #ef4444; }
.credits-meter-text { font-size: 0.9rem; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums; }
.credits-meter-reset { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); }
.credits-meter-reset:empty { display: none; }

/* Dark mode switch: a small track whose knob slides right while dark mode is on. */
.theme-switch {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 18px;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.15s;
}
.theme-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.15s;
}
.theme-toggle[aria-pressed="true"] .theme-switch { background: var(--color-primary); }
.theme-toggle[aria-pressed="true"] .theme-switch::after { transform: translateX(12px); }

/* Folders menu: an accordion. The header toggles the panel below it and its
   chevron turns to point down while open. */
.nav-item .nav-chevron { width: 16px; height: 16px; margin-left: auto; opacity: 0.7; transition: transform 0.15s; }
.nav-group-toggle .nav-badge { margin-left: auto; }
.nav-group-toggle .nav-badge + .nav-chevron { margin-left: 0; }
.nav-group-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(90deg); }
.nav-group-panel { display: grid; gap: 1px; margin: 2px 0 4px; padding: 0 0 0 30px; }

/* Inside the Folders menu: "Manage folders" (the Folders page) and one
   shortcut per folder (opens History filtered to it). */
.sidebar-folders { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.sidebar-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}
.sidebar-folder:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.sidebar-folder.is-active { background: #ffffff; color: #141413; font-weight: 600; }
.sidebar-folder:focus-visible { outline-color: #ffffff; }
.sidebar-folder svg { width: 15px; height: 15px; flex-shrink: 0; }
.sidebar-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-folder-count { font-size: 0.75rem; opacity: 0.75; font-variant-numeric: tabular-nums; }

.sidebar-backdrop { display: none; }

.app-main { margin-left: 260px; min-width: 0; }

/* Top bar with the current view's title. It stays at the top while scrolling,
   so the Back and menu buttons are always reachable (e.g. deep in a long transcript). */
.topbar-wrap {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-page);
  border-bottom: 1px solid transparent;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1020px;
  margin: 0 auto;
  padding: 18px 20px 12px;
}
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.back-button svg { width: 18px; height: 18px; }
.back-button:hover { border-color: var(--color-primary); background: var(--color-primary-soft); transform: translateX(-2px); }
.topbar-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.topbar-subtitle { margin-top: 2px; color: var(--color-text-muted); font-size: 0.93rem; }
/* Higher specificity than .icon-button, which is defined later and would show it. */
.topbar .menu-button { display: none; }

/* ===========================================================================
   Page layout and cards
   =========================================================================== */
.page {
  max-width: 1020px;
  margin: 0 auto;
  padding: 14px 20px 56px;
  display: grid;
  gap: 22px;
}

/* One view is shown at a time; its cards stack with the same spacing. */
.view { display: grid; gap: 22px; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
}

.card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.card-heading h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }

.step-badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-button);
  color: var(--color-button-text);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ===========================================================================
   Chips (formats, transcript metadata)
   =========================================================================== */
.format-chips, .meta-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.meta-chips { justify-content: flex-start; margin: 10px 0 16px; }

.chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.chip-accent { background: var(--color-primary-soft); border-color: transparent; color: var(--color-primary); }
.chip-strong { color: var(--color-text); background: var(--color-surface-muted); }

/* ===========================================================================
   Upload area
   =========================================================================== */
.drop-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 38px 20px 30px;
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-large);
  background: var(--color-surface-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.drop-zone:hover, .drop-zone.is-dragging {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 6px var(--color-primary-soft);
}
.drop-zone.is-dragging { transform: scale(1.01); }
.drop-zone:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.drop-zone.is-disabled { opacity: 0.55; pointer-events: none; }

.drop-zone-orb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 50%;
  /* A warm glassy orb (white highlight over a terracotta swirl), same in both modes. */
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 38%),
    conic-gradient(from 210deg, #f0b79a, #d97757, #f5d0b5, #e8a385, #f0b79a);
  color: #141413;
  box-shadow: 0 8px 22px -10px rgba(217, 119, 87, 0.6);
  transition: transform 0.2s;
}
.drop-zone-orb svg { width: 28px; height: 28px; stroke-width: 2.2; }
.drop-zone:hover .drop-zone-orb { transform: translateY(-3px); }
.drop-zone.is-dragging .drop-zone-orb { animation: pulse 1s ease-in-out infinite; }

.drop-zone-main { font-size: 1.08rem; font-weight: 700; }
.drop-zone-hint { color: var(--color-text-muted); font-size: 0.93rem; margin-bottom: 10px; }
.link-text { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Selected file pill */
.file-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface-muted);
  animation: rise-in 0.25s ease-out;
}
.file-pill.is-invalid { border-color: var(--color-error-border); background: var(--color-danger-soft); }

.file-pill-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex-shrink: 0;
}
.file-pill-icon svg { width: 20px; height: 20px; }
.file-pill-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.file-pill-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.file-pill-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-pill-size { color: var(--color-text-muted); font-size: 0.88rem; white-space: nowrap; }
/* "12:48 · needs about 469 credits" under the file name. */
.file-pill-estimate { color: var(--color-primary); font-size: 0.85rem; font-weight: 600; }
/* An action needs more credits than the balance has left. */
.file-pill-estimate.is-warning, .notes-status.is-warning { color: var(--color-danger); font-weight: 700; }

.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.icon-button svg { width: 18px; height: 18px; }
.icon-button:hover:not(:disabled) { background: var(--color-primary-soft); color: var(--color-primary); }
.icon-button-danger:hover:not(:disabled) { background: var(--color-danger-soft); color: var(--color-danger); }
.icon-button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===========================================================================
   Buttons
   =========================================================================== */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 34px;
  border: none;
  border-radius: 999px;
  background: var(--color-button);
  color: var(--color-button-text);
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.button-primary svg { width: 20px; height: 20px; }
.button-primary:hover:not(:disabled) { transform: translateY(-1px); opacity: 0.88; }
.button-primary:active:not(:disabled) { transform: translateY(0); }
.button-primary:disabled { cursor: not-allowed; opacity: 0.45; }

.tool-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tool-button svg { width: 17px; height: 17px; }
.tool-button:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.tool-button:disabled { opacity: 0.45; cursor: not-allowed; }
.tool-button-danger svg { color: var(--color-danger); }
.tool-button-danger:hover:not(:disabled) { border-color: var(--color-danger); background: var(--color-danger-soft); }

.link-button {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ===========================================================================
   Alerts
   =========================================================================== */
.alert {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-medium);
  font-size: 0.95rem;
  animation: rise-in 0.2s ease-out;
}
.alert-error {
  background: var(--color-danger-soft);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
}
.page > .alert { margin-top: 0; box-shadow: var(--shadow-card); }

/* ===========================================================================
   Progress panel
   =========================================================================== */
.progress-panel {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--radius-medium);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  animation: rise-in 0.25s ease-out;
}

.stepper { display: flex; list-style: none; margin: 0 0 16px; padding: 0; gap: 8px; }

.stepper-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 600;
}
.stepper-step:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--color-border);
}
.stepper-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  flex-shrink: 0;
}
.stepper-step.is-active { color: var(--color-primary); }
.stepper-step.is-active .stepper-dot {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
  animation: pulse 1.4s ease-in-out infinite;
}
.stepper-step.is-complete { color: var(--color-success); }
.stepper-step.is-complete .stepper-dot { border-color: var(--color-success); background: var(--color-success); }
.stepper-step.is-complete::after { background: var(--color-success); }

.progress-row { display: flex; align-items: center; gap: 12px; }
.progress-message { flex: 1; font-weight: 600; }
.progress-elapsed { color: var(--color-text-muted); font-variant-numeric: tabular-nums; font-size: 0.9rem; }

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--color-primary-soft);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.progress-panel.is-finished .spinner { display: none; }

.progress-track {
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.25s;
}
.progress-bar.is-indeterminate { width: 40%; animation: slide 1.3s ease-in-out infinite; }
.progress-panel.is-finished .progress-bar { background: var(--color-success); }

/* ===========================================================================
   Transcript
   =========================================================================== */
.transcript-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 4px;
}
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; }

.transcript {
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px 0;
}
.transcript.has-content { display: grid; gap: 14px; padding-right: 4px; scrollbar-gutter: stable; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 16px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-large);
  background: var(--color-surface-muted);
}
.empty-state-art { width: 150px; height: 60px; color: var(--color-primary); opacity: 0.45; stroke-width: 3; margin-bottom: 14px; }
.empty-state-title { font-weight: 700; font-size: 1.05rem; }
.empty-state-text { margin-top: 4px; color: var(--color-text-muted); max-width: 380px; }

/* One speaker turn: coloured avatar + plain bubble with a coloured edge. */
.turn { display: flex; gap: 12px; align-items: flex-start; animation: rise-in 0.3s ease-out both; }

.turn-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--speaker);
  color: var(--speaker-avatar-text);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.turn-body {
  flex: 1;
  min-width: 0;
  padding: 10px 16px 12px;
  border-radius: 12px;
  background: var(--color-surface-muted);
  border-left: 3px solid var(--speaker);
}
.turn-header { display: flex; align-items: baseline; gap: 10px; }
.turn-speaker { color: var(--speaker); font-weight: 700; font-size: 0.92rem; }
.turn-time { color: var(--color-text-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.turn-text, .turn-plain {
  margin-top: 3px;
  font-family: var(--font-reading);
  font-size: 1.06rem;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.turn-plain {
  padding: 16px 20px;
  border-radius: var(--radius-medium);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
}

.speaker-color-0 { --speaker: var(--speaker-0); }
.speaker-color-1 { --speaker: var(--speaker-1); }
.speaker-color-2 { --speaker: var(--speaker-2); }
.speaker-color-3 { --speaker: var(--speaker-3); }
.speaker-color-4 { --speaker: var(--speaker-4); }
.speaker-color-5 { --speaker: var(--speaker-5); }

/* ===========================================================================
   Recent transcripts (quick-open cards on the Audio Transcription page)
   =========================================================================== */
.recent-section { display: grid; gap: 10px; }
.recent-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.recent-heading { font-size: 1rem; font-weight: 700; }

.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.recent-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.recent-card:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.recent-card.is-active { background: var(--color-primary-soft); border-color: var(--color-primary); }

/* Long titles wrap to two lines, then end with "…". */
.recent-card-name {
  font-weight: 700;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recent-card-date { font-size: 0.8rem; color: var(--color-primary); font-weight: 600; }
.recent-card-details { font-size: 0.8rem; color: var(--color-text-muted); }
.recent-card-notes {
  align-self: flex-start;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
}

/* ===========================================================================
   Transcript details: title + rename, notes, find
   =========================================================================== */
.transcript-details { display: grid; gap: 12px; margin: 6px 0 16px; }

.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.transcript-title { font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.rename-input { flex: 1 1 260px; padding: 8px 12px; }

.tool-button-small { padding: 6px 11px; font-size: 0.85rem; }
.tool-button-small svg { width: 15px; height: 15px; }

.transcript-details .meta-chips { margin: 0; }

/* Folder chips: read-only in lists, removable (×) on the open transcript. */
.folders-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.folder-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.folder-chips-empty { color: var(--color-text-muted); font-size: 0.85rem; }
.folder-chip-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; }
.folder-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--color-folder-chip);
  color: var(--color-folder-chip-text);
  font-size: 0.75rem;
  font-weight: 700;
}
.folder-chip-removable { padding-right: 3px; font-size: 0.82rem; }
.folder-chip-remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.folder-chip-remove:hover { background: color-mix(in srgb, currentColor 15%, transparent); }

.add-to-folder, .folder-field select {
  font: inherit;
  font-size: 0.85rem;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-muted);
  color: var(--color-text);
  cursor: pointer;
}
.folder-field select { font-size: 0.9rem; padding: 7px 10px; text-transform: none; letter-spacing: normal; }

.notes-panel { display: grid; gap: 6px; }
.notes-input { resize: vertical; min-height: 64px; font-size: 0.95rem; line-height: 1.5; }
.notes-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.notes-status { color: var(--color-text-muted); font-size: 0.85rem; }

/* Text to speech: text box, voice picker + character count, then the player. */
.speech-form { display: grid; gap: 8px; margin-top: 14px; }
.speech-text { resize: vertical; min-height: 160px; font-size: 1rem; line-height: 1.6; }
.speech-options { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.speech-options .date-field { flex: 0 1 280px; }
.speech-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 28px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface-muted);
}
.speech-settings-header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.speech-slider { display: grid; gap: 4px; }
.speech-slider .field-label { display: flex; justify-content: space-between; }
.speech-slider output { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.speech-slider input { width: 100%; accent-color: var(--color-primary); }
.speech-slider-ends { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: 0.8rem; }
.speech-toggle { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.speech-toggle input { width: 16px; height: 16px; accent-color: var(--color-primary); }
.speech-language { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.speech-language .speech-toggle { grid-column: auto; }
.speech-language select:disabled { opacity: 0.5; cursor: not-allowed; }
/* Saved speech clips (Text to speech page, and History when one folder is chosen). */
.speech-clip-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.speech-clip {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface-muted);
}
.speech-clip-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.speech-clip-header .history-name { flex: 1 1 200px; min-width: 0; }
.speech-clip-header a.tool-button { text-decoration: none; }
.speech-clip-folders { align-items: center; }
.speech-clip-player { width: 100%; height: 40px; }

/* Speech folders manager: a collapsible panel above the Saved speech list. */
.speech-folder-manager {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-medium);
}
.speech-folder-manager summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-primary);
  cursor: pointer;
}
.speech-folder-manager summary svg { width: 18px; height: 18px; }
.speech-folder-manager .folder-list { margin-top: 10px; }

.find-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface-muted);
}
.find-bar:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.find-bar > svg { width: 18px; height: 18px; color: var(--color-text-muted); flex-shrink: 0; }
.find-bar input {
  flex: 1;
  min-width: 0;
  padding: 9px 4px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  outline: none;
}
.find-count { color: var(--color-text-muted); font-size: 0.85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.find-bar .icon-button { width: 32px; height: 32px; }

/* Highlighted matches inside the transcript; the current one is stronger. */
.find-match { background: var(--color-find-match); color: inherit; border-radius: 3px; padding: 0 1px; }
.find-match.is-current { background: var(--color-find-current); color: #141413; box-shadow: 0 0 0 2px var(--color-find-current); }

/* ===========================================================================
   History and Activity log views
   =========================================================================== */
.card-heading-spread { justify-content: space-between; flex-wrap: wrap; margin-bottom: 6px; }
.card-summary { color: var(--color-text-muted); font-size: 0.9rem; }

.history-filters { display: grid; gap: 10px; margin: 14px 0 6px; }

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface-muted);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-field:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.search-field svg { width: 18px; height: 18px; color: var(--color-text-muted); flex-shrink: 0; }
.search-field input {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  outline: none;
}

/* From / To date pickers under the search box. */
.date-filter { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 12px; }
.date-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 1 180px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.date-field input {
  font: inherit;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-muted);
  color: var(--color-text);
}
.date-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.date-filter .link-button { margin-bottom: 9px; }

.list-status { margin: 12px 4px; color: var(--color-text-muted); font-size: 0.93rem; }
.load-more { display: flex; justify-content: center; width: 100%; margin-top: 8px; }

.history-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }

.history-item {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  transition: background 0.15s, border-color 0.15s;
}
.history-item:hover { background: var(--color-surface-muted); border-color: var(--color-border-strong); }
.history-item.is-active { background: var(--color-primary-soft); border-color: var(--color-primary); }

.history-open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.history-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-filename { font-size: 0.8rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-meta { font-size: 0.8rem; color: var(--color-primary); font-weight: 600; }
.history-notes {
  font-size: 0.85rem;
  color: var(--color-text);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-preview {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.history-delete, .history-pin { margin-top: 6px; }

/* Tick box at the left of each History item, for bulk actions. */
.history-select {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 12px 2px 0 8px;
  accent-color: var(--color-primary);
  cursor: pointer;
}
.history-item.is-selected { background: var(--color-primary-soft); border-color: var(--color-primary); }

/* Pinned: gold star, and a gold edge on the item / card. */
.pin-toggle svg { fill: none; }
.pin-toggle.is-pinned, .pin-button.is-pinned svg { color: #d97706; }
.pin-toggle.is-pinned svg, .pin-button.is-pinned svg { fill: #fbbf24; }
.pin-toggle:hover:not(:disabled) { color: #d97706; background: var(--color-pin-hover); }
.history-item.is-pinned { border-left: 3px solid #f59e0b; }
.recent-card.is-pinned { border-top: 3px solid #f59e0b; }

/* Bar shown while transcripts are ticked; stays visible while scrolling the list. */
.selection-bar {
  position: sticky;
  top: var(--topbar-space);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-medium);
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-card);
}
.selection-count { font-weight: 700; color: var(--color-primary); margin-right: auto; }

/* Folders page */
.folder-create-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.folder-create-form .text-input { flex: 1 1 240px; }
.folder-create-button { margin-top: 0; padding: 11px 22px; font-size: 0.95rem; }

/* Duplicate-name error or "did you mean ...?" warning. */
.name-problem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-medium);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  font-size: 0.92rem;
}
.name-problem-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.folder-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.folder-row { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 14px; }
.folder-row-display, .folder-row-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.folder-row-rename .text-input { flex: 1 1 220px; padding: 8px 12px; }
.folder-row-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.folder-row-open:hover { background: var(--color-surface-muted); }
.folder-row-open svg { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; }
.folder-row-name { font-weight: 700; overflow-wrap: anywhere; }
.folder-row-count { margin-left: auto; color: var(--color-text-muted); font-size: 0.85rem; white-space: nowrap; }

.activity-list { list-style: none; margin: 8px 0 0; padding: 0; }
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--color-border);
}
.activity-item:last-child { border-bottom: none; }
.activity-badge {
  flex: 0 0 176px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}
.activity-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.activity-detail { overflow-wrap: anywhere; }
.activity-meta { font-size: 0.8rem; color: var(--color-text-muted); }

.tone-success { background: var(--color-success-soft); color: var(--color-success-text); }
.tone-danger { background: var(--color-danger-soft); color: var(--color-error-text); }
.tone-info { background: var(--color-primary-soft); color: var(--color-primary); }
.tone-neutral { background: var(--color-surface-muted); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ===========================================================================
   Users page (admin)
   =========================================================================== */
.user-form { display: grid; gap: 14px; }
.user-form-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.form-field { display: grid; gap: 6px; }
.permission-fieldset { margin: 0; padding: 0; border: none; min-width: 0; }
.permission-fieldset legend { padding: 0; margin-bottom: 8px; }
.user-form .alert { margin-top: 0; }
.user-create-button { justify-self: start; margin-top: 0; }

/* Tick boxes for pages, shown as pills; a ticked one is tinted. */
.permission-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.permission-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.permission-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
.permission-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.permission-option:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.user-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.user-row { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-medium); }
.user-row-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
/* Name and its badge on the left; the buttons are pushed to the right. */
.user-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-right: auto; min-width: 0; }
.user-row-name { font-weight: 700; overflow-wrap: anywhere; }
.user-row-meta { color: var(--color-text-muted); font-size: 0.85rem; }
.user-row .permission-picker { gap: 6px; }
.user-reset-form { display: flex; flex-wrap: wrap; gap: 8px; }
.user-reset-form .text-input { flex: 1 1 240px; padding: 8px 12px; }

/* ===========================================================================
   Toast
   =========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 30;
  padding: 12px 20px;
  border-radius: 999px;
  /* Inverted page colours: dark pill in light mode, light pill in dark mode. */
  background: var(--color-text);
  color: var(--color-surface);
  font-weight: 600;
  font-size: 0.93rem;
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ===========================================================================
   Login screen
   =========================================================================== */
/* Split screen, like the app itself: the company on the left in the sidebar's
   dark colour (both modes), the form on the right on the surface colour
   (white, or dark in dark mode). On phones the two stack. */
.login-body { background: var(--color-surface); }
.login-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }

.login-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 48px clamp(28px, 6vw, 80px);
  background: var(--color-sidebar);
  color: #ffffff;
}
.login-brand-icon { width: 56px; height: 56px; border-radius: 16px; }
.login-brand-icon svg { width: 28px; height: 28px; }
/* Above the orb, which sits behind the text in the bottom corner. */
.login-brand-copy { position: relative; z-index: 1; display: grid; gap: 14px; margin-bottom: 8vh; }
.login-brand-title {
  max-width: 14ch;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
/* The company line, under the name. */
.login-brand-text { max-width: 34ch; color: rgba(255, 255, 255, 0.72); font-size: 1.25rem; }
/* A large warm sphere in the upload orb's colours, bleeding off the top-right
   corner, away from the text at the bottom (a smooth radial blend: the upload
   orb's swirl shows a seam when this big). */
.login-orb {
  position: absolute;
  right: -140px;
  top: -160px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f5d0b5 0%, #e8a385 32%, #d97757 62%, #a84c29 100%);
  opacity: 0.9;
  pointer-events: none;
}

.login-panel { display: grid; place-items: center; padding: 48px 24px; }
.login-form-wrap { width: 100%; max-width: 380px; animation: rise-in 0.4s ease-out; }
.login-title { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; }
.login-subtitle { margin-top: 6px; color: var(--color-text-muted); }
.login-form { display: grid; gap: 10px; margin-top: 28px; }

@media (max-width: 800px) {
  .login-layout { grid-template-columns: minmax(0, 1fr); }
  .login-brand { gap: 20px; padding: 28px 24px 32px; }
  .login-brand-icon { width: 44px; height: 44px; border-radius: 14px; }
  .login-brand-copy { margin-bottom: 0; }
  .login-brand-title { font-size: 1.6rem; max-width: none; }
  .login-orb { display: none; }   /* on a narrow screen it would sit behind the text */
  .login-panel { place-items: start center; padding: 32px 20px 48px; }
}
.login-form .alert { margin-top: 0; }
.login-form .button-primary { margin-top: 8px; width: 100%; }
.field-label { font-weight: 600; font-size: 0.9rem; }

.text-input {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-medium);
  background: var(--color-surface-muted);
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.text-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }

/* Password box with a show / hide eye button inside its right edge. */
.password-field { position: relative; display: grid; }
.password-field .text-input { padding-right: 48px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.password-toggle:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-off { display: block; }

/* ===========================================================================
   Animations
   =========================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .spinner, .progress-bar.is-indeterminate { animation-duration: 2.5s !important; animation-iteration-count: infinite !important; }
}

/* ===========================================================================
   Small screens
   =========================================================================== */
/* Tablets and phones: the sidebar becomes a slide-in menu. */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-105%);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: var(--shadow-float);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(0, 0, 0, 0.5);
  }
  .app-main { margin-left: 0; }
  .topbar .menu-button { display: grid; }
  .topbar { padding: 16px 16px 4px; }
}

@media (max-width: 640px) {
  .topbar-title { font-size: 1.25rem; }
  .topbar-subtitle { font-size: 0.85rem; }
  .card { padding: 20px 16px; border-radius: 16px; }
  .button-primary { width: 100%; }
  .toolbar { width: 100%; }
  .toolbar .tool-button { flex: 1 1 auto; justify-content: center; }
  .stepper-step { font-size: 0.78rem; }
  .turn-avatar { width: 32px; height: 32px; font-size: 0.7rem; }
  .turn-body { padding: 8px 12px 10px; }
  .activity-item { flex-direction: column; gap: 6px; }
  .activity-badge { flex: none; }
}