/* Audnora — one design language across the tool, the blog and the admin.
 *
 * Three deliberate choices, because the previous pass read as generic:
 *
 *   1. Warm neutrals, not blue-grey. The canvas is #F7F6F3, so the page has a
 *      paper cast rather than the cold slate every default template ships with.
 *   2. Primary actions are ink, not accent. Black buttons with an indigo accent
 *      reserved for links, focus and the active word reads as considered; a page
 *      where every emphatic thing is the same blue reads as a template.
 *   3. Real type, and not the pair every AI-built page ships with. Bricolage
 *      Grotesque sets everything written in words and IBM Plex Mono everything
 *      written in numbers — timecodes, quota counters, model ids, labels.
 *      Bricolage is a variable face with irregular terminals and an optical
 *      size axis; it was chosen precisely because it does not look like the
 *      geometric sans every generated page ships with. It runs 200..800, so
 *      800 is the heaviest weight here — there is no 900.
 *
 * Colour still carries meaning and nothing else: accent = interactive,
 * amber = needs attention, green = edited, red = destructive.
 */

:root {
  /* Surfaces — warm, not slate. */
  --paper:       #FFFFFF;
  --canvas:      #F7F6F3;
  --surface:     #FAF9F7;
  --surface-2:   #F1EFEA;
  --line:        #E7E4DD;
  --line-2:      #D6D2C8;

  /* Ink — near-black with a trace of warmth so it sits on the canvas. */
  --ink:         #16161A;
  --ink-2:       #4A4A52;
  --ink-3:       #79797F;
  --ink-4:       #A8A8AE;

  --accent:      #3E37D4;
  --accent-hi:   #322BB5;
  --accent-soft: #F0EEFC;
  --accent-line: #CFC9F5;

  --warn:        #9A5B08;
  --warn-soft:   #FDF4E4;
  --warn-line:   #EBD3A4;
  --ok:          #14664C;
  --ok-soft:     #E6F4EE;
  --danger:      #A72A1D;
  --danger-soft: #FCF1EF;
  --danger-line: #E7C3BD;

  --wave:        #B6B2A8;
  --wave-play:   #3E37D4;
  --wave-bg:     #FCFBF9;

  --r-sm:  6px;
  --r:     10px;
  --r-lg:  16px;
  --r-xl:  22px;

  /* Bricolage Grotesque for everything set in words, IBM Plex Mono for
     everything set in numbers - timecodes, quota counters, model ids, labels.

     Bricolage is variable across 200..800, so unlike the Lato it replaced it
     has the mid weights: 600 carries buttons and the current nav item, 700 the
     headings, 800 the wordmark and the largest headlines. There is no 900. */
  /* Bricolage Grotesque is variable across 200..800 with an optical-size axis,
     so intermediate weights are available again and the browser adapts the
     drawing to the size it is set at. It stops at 800 — there is no 900.

     "Noto Naskh Arabic" sits behind the Latin face rather than in front of it:
     Latin resolves to Bricolage, and Urdu — which appears in transcripts and
     which nothing else in this stack covers — gets a face chosen on purpose
     instead of whatever the browser reaches for. Naskh rather than Nastaliq
     because Nastaliq's cascading baseline makes per-word highlighting look
     broken, and highlighting words is what this editor does. */
  --display: "Bricolage Grotesque", "Noto Naskh Arabic", "Segoe UI", system-ui, sans-serif;
  --font:    "Bricolage Grotesque", "Noto Naskh Arabic", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(22, 22, 26, .05);
  --shadow:    0 1px 2px rgba(22, 22, 26, .04), 0 6px 16px -8px rgba(22, 22, 26, .12);
  --shadow-lg: 0 2px 4px rgba(22, 22, 26, .04), 0 20px 40px -16px rgba(22, 22, 26, .22);

  --wrap: 68rem;
}

* { box-sizing: border-box; }

/* A class that sets `display` outranks the UA rule for [hidden], so any section
   toggled by the attribute would stay visible without this. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

/* The header is sticky, so an anchor target would otherwise land underneath it.
   Applies to every id, since any of them can be linked to. */
[id] { scroll-margin-top: 4.75rem; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: -.012em;
  line-height: 1.18;
  margin: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.wrap-narrow { max-width: 46rem; }

/* An eyebrow: mono, uppercase, preceded by a rule. Gives sections a spine
   without another heading level competing with the page title. */
.eyebrow {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 .875rem;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--line-2); flex: none; }

/* ══ Header ═══════════════════════════════════════════════════════════ */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 246, 243, .82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.head-inner {
  display: flex; align-items: center; gap: 1.25rem;
  height: 3.75rem;
}

.logo { display: flex; align-items: center; gap: .5rem; flex: none; }
.logo:hover { text-decoration: none; }

/* Ascending bars — a level meter. Says "audio" without a microphone cliché. */
.brand-mark {
  width: 18px; height: 18px; flex: none;
  background:
    linear-gradient(var(--ink), var(--ink))        0     100% / 3px 8px  no-repeat,
    linear-gradient(var(--accent), var(--accent))  7.5px 100% / 3px 18px no-repeat,
    linear-gradient(var(--ink), var(--ink))        15px  100% / 3px 12px no-repeat;
}

.brand-name {
  font-family: var(--display);
  font-size: 1.1875rem; font-weight: 800;
  letter-spacing: -.012em; color: var(--ink);
}

.site-nav { display: flex; align-items: center; gap: .25rem; margin-left: .75rem; }

.nav-link {
  font-size: .9375rem; font-weight: 400; color: var(--ink-2);
  padding: .375rem .6875rem; border-radius: var(--r-sm);
  transition: background .14s, color .14s;
}
.nav-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }

.head-right { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.count {
  display: inline-block; min-width: 1.125rem; margin-left: .3rem;
  padding: 0 .3rem; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-3);
  font-family: var(--mono); font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

#btn-recent[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
#btn-recent[aria-expanded="true"] .count { background: #E0DBFA; color: var(--accent); }

/* ══ Account chip ═════════════════════════════════════════════════════ */
.account-slot { display: flex; align-items: center; min-height: 2rem; }

/* Google renders its own button into this, and sizes it itself — the holder
   only reserves the space so the header does not jump when it appears. */
.gsi-holder { display: flex; align-items: center; min-height: 2rem; }

.acct-note { font-size: .8125rem; color: var(--ink-3); white-space: nowrap; }

.acct { position: relative; }
.acct-btn { display: inline-flex; align-items: center; gap: .4375rem; padding-left: .375rem; }

.acct-avatar {
  width: 1.375rem; height: 1.375rem; border-radius: 999px;
  flex: none; object-fit: cover; background: var(--surface-2);
}
.acct-initial {
  display: grid; place-items: center;
  font-family: var(--display); font-size: .75rem; font-weight: 700;
  color: var(--accent); background: var(--accent-soft);
}
.acct-label { font-variant-numeric: tabular-nums; }

.plan-badge {
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .125rem .3125rem; border-radius: 3px;
}
.plan-pro { background: var(--accent); color: #fff; }

.acct-pop { min-width: 15rem; padding: .75rem; gap: .5rem; }
.acct-who { padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.acct-name { font-weight: 700; color: var(--ink); font-size: .9375rem; }
.acct-mail { font-size: .8125rem; color: var(--ink-3); word-break: break-all; }
.acct-plan { font-size: .8125rem; color: var(--ink-2); line-height: 1.5; }

/* ══ Quota and the sign-in gate ═══════════════════════════════════════ */
.quota-slot:empty { display: none; }

.quota-line { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; margin: 0 0 1rem; }

.quota-pill {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  padding: .25rem .5625rem; border-radius: 999px;
  background: var(--ok-soft); color: var(--ok);
  font-variant-numeric: tabular-nums;
}
/* One left is worth noticing before it is none left. */
.quota-pill[data-low="true"] { background: var(--warn-soft); color: var(--warn); }

.quota-note { font-size: .8125rem; color: var(--ink-3); }

.gate {
  display: flex; flex-direction: column; align-items: flex-start; gap: .625rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.gate-spent { background: var(--warn-soft); border-color: var(--warn-line); }

.gate-title { margin: 0; font-family: var(--display); font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.gate-sub { margin: 0; font-size: .9375rem; color: var(--ink-2); max-width: 52ch; line-height: 1.6; }
.gate-gsi { margin-top: .25rem; }
.gate-error { margin: 0; font-size: .875rem; color: var(--danger); font-weight: 700; }

/* ══ Sign in / sign up ════════════════════════════════════════════════ */
.auth-page { flex: 1; display: grid; place-items: center; padding: clamp(2rem, 9vh, 5rem) 1.5rem; }

.auth-card {
  width: 100%; max-width: 26rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow); padding: 2.25rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.auth-h1 { font-size: 1.6875rem; font-weight: 800; letter-spacing: -.024em; }
.auth-sub { margin: 0; font-size: 1rem; color: var(--ink-2); line-height: 1.6; }
/* Google sizes its own button; this just centres it and gives it room. */
.auth-gsi { justify-content: center; margin: .625rem 0 .25rem; }
.auth-alt { margin: 0; font-size: .9375rem; color: var(--ink-3); }

.auth-points {
  list-style: none; margin: .875rem 0 0; padding: .875rem 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .4375rem;
}
.auth-points li {
  position: relative; padding-left: 1.25rem;
  font-size: .9375rem; color: var(--ink-2);
}
.auth-points li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .4375rem; height: .4375rem; border-radius: 999px; background: var(--accent-line);
}

/* ══ Pricing ══════════════════════════════════════════════════════════ */
.plan-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  margin-top: 1.75rem; align-items: stretch;
}

.plan-card {
  position: relative;
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* The one plan we want chosen sits slightly proud of the other two. */
.plan-card-pro { transform: translateY(-.5rem); }

.plan-flag {
  position: absolute; top: -.6875rem; left: 1.75rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .5625rem; border-radius: 999px;
  background: var(--accent); color: #fff;
}

.plan-price small { font-size: .875rem; font-weight: 400; color: var(--ink-3); }

/* Pushed to the bottom so the three buttons line up however tall the lists are. */
.plan-cta { margin-top: auto; width: 100%; }

.plan-foot {
  margin: 1.75rem 0 0; font-size: .9375rem; color: var(--ink-3);
  max-width: 62ch; line-height: 1.6;
}
/* The accent edge marks the plan we want chosen, and is the only place on the
   page two plans are visually ranked. */
.plan-card-pro { border-color: var(--accent-line); box-shadow: var(--shadow); }

.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.plan-head h3 { font-size: 1.3125rem; font-weight: 700; }
.plan-price { font-family: var(--display); font-size: 1.1875rem; font-weight: 700; color: var(--accent); }

.plan-for { margin: 0; font-size: .9375rem; color: var(--ink-3); }

.plan-list { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.plan-list li {
  position: relative; padding-left: 1.25rem;
  font-size: 1rem; color: var(--ink-2); line-height: 1.55;
}
.plan-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--accent-line);
}
.plan-list strong { color: var(--ink); font-weight: 700; }

.plan-note { margin: 0; padding-top: .25rem; font-size: .875rem; color: var(--ink-3); }

/* ══ Page shell ═══════════════════════════════════════════════════════ */
.page { flex: 1; display: flex; flex-direction: column; }

/* ══ Landing ══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(3rem, 7vh, 4.5rem);
  text-align: center;
  overflow: hidden;
}

/* A soft accent wash behind the headline. One gradient, low opacity — enough to
   stop the page reading as a bare document, not enough to be decoration. */
.hero::before {
  content: "";
  position: absolute; left: 50%; top: -14rem;
  width: 52rem; height: 32rem; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(62, 55, 212, .09), transparent 72%);
  pointer-events: none;
}

.hero > * { position: relative; }

.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3125rem .75rem .3125rem .5rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper); box-shadow: var(--shadow-sm);
  font-size: .8125rem; font-weight: 400; color: var(--ink-2);
  margin-bottom: 1.5rem;
}
.hero-badge b { color: var(--ink); font-weight: 700; }
.dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ok); flex: none; }

.hero-title {
  font-size: clamp(2.125rem, 5.2vw, 3.375rem);
  font-weight: 800; letter-spacing: -.028em; line-height: 1.08;
  max-width: 18ch; margin: 0 auto;
  text-wrap: balance;
}
.hero-title em { font-style: normal; color: var(--accent); }

.hero-sub {
  margin: 1.125rem auto 0;
  font-size: 1.125rem; color: var(--ink-2);
  max-width: 44ch; line-height: 1.65;
  text-wrap: pretty;
}

/* ══ Upload ═══════════════════════════════════════════════════════════ */
.dropzone { width: 100%; max-width: 36rem; margin: 2.25rem auto 0; }

.upload-card {
  position: relative;
  padding: 2.5rem 2rem 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}

/* The dashed edge is an inset outline rather than the card border, so the card
   keeps a crisp shadow while still reading as a drop target. */
.upload-card::after {
  content: "";
  position: absolute; inset: 8px;
  border: 1.5px dashed var(--line-2);
  border-radius: calc(var(--r-xl) - 8px);
  pointer-events: none;
  transition: border-color .16s;
}

.upload-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
body[data-drag="true"] .upload-card { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-lg); }
body[data-drag="true"] .upload-card::after { border-color: var(--accent); }

/* Five bars, an idle level meter — states what the tool takes as input. */
.upload-ico { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.upload-ico span { width: 5px; border-radius: 2px; background: var(--accent-line); }
.upload-ico span:nth-child(1) { height: 40%; }
.upload-ico span:nth-child(2) { height: 72%; }
.upload-ico span:nth-child(3) { height: 100%; background: var(--accent); }
.upload-ico span:nth-child(4) { height: 58%; }
.upload-ico span:nth-child(5) { height: 30%; }

.upload-lead { margin: 0; font-family: var(--display); font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.upload-or { margin: 0; font-size: .875rem; color: var(--ink-3); }

.upload-formats {
  margin: .5rem 0 0; font-size: .8125rem; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: .3125rem; justify-content: center; align-items: center;
}
.upload-formats code { background: var(--surface-2); border-color: var(--line); }

.hero-note { margin: 1.25rem 0 0; font-size: .875rem; color: var(--ink-3); }

/* ══ Feature strip ════════════════════════════════════════════════════ */
.strip { padding: 0 0 clamp(3rem, 7vh, 4.5rem); }

/* Hairline dividers via grid gap over a coloured backdrop: one rule, no
   per-cell border arithmetic that breaks when the columns rewrap. */
/* Fixed column counts, not auto-fit. The gap *is* the divider, so a row that
   does not fill leaves the backdrop showing as a blank coloured cell. Three
   columns divides the six items exactly; the paper background underneath is the
   backstop if that count ever changes. */
.feature-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.feature-grid li {
  background: var(--paper);
  padding: 1.5rem 1.375rem;
  text-align: left;
}

.feature-num {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  color: var(--accent); letter-spacing: .08em;
}
.feature-grid h3 { margin: .625rem 0 .375rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.009em; }
.feature-grid p { margin: 0; font-size: .9375rem; color: var(--ink-2); line-height: 1.6; }

/* ══ Content sections ═════════════════════════════════════════════════ */
.section { padding: clamp(3rem, 7vh, 4.5rem) 0; }

/* Alternating bands on paper white break the page into readable stretches —
   a single unbroken canvas colour is what makes a long landing page read flat. */
.section-alt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-title { font-size: clamp(1.625rem, 3.2vw, 2.125rem); font-weight: 700; letter-spacing: -.016em; max-width: 22ch; }
.section-lede { margin: .875rem 0 0; font-size: 1.0625rem; color: var(--ink-2); max-width: 52ch; line-height: 1.7; }

/* Roadmap ------------------------------------------------------------- */
.roadmap { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.roadmap li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem; align-items: start; padding: 1.25rem .25rem; background: var(--paper); }
.roadmap h3 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 .25rem; }
.roadmap p { margin: 0; font-size: 1rem; color: var(--ink-2); }

.rm-state {
  justify-self: start; margin-top: .125rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: 999px;
}
.rm-soon  { background: var(--accent-soft); color: var(--accent); }
.rm-later { background: var(--surface-2); color: var(--ink-3); }

/* FAQ — native <details>, so it works with no JavaScript at all. */
.faq-list { margin-top: 1.75rem; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.0625rem .25rem;
  font-family: var(--display); font-size: 1.0625rem; font-weight: 700; color: var(--ink);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--mono); font-size: 1.1875rem; font-weight: 400; color: var(--ink-3);
  transition: transform .16s, color .16s;
}
.faq[open] summary::after { content: "\2013"; color: var(--accent); }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.faq p { margin: -.25rem .25rem 1.25rem; font-size: 1rem; color: var(--ink-2); max-width: 60ch; line-height: 1.7; }

/* Closing band -------------------------------------------------------- */
.cta-band { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: center; }
.cta-actions { display: flex; flex-direction: column; gap: .625rem; }
.cta-actions .btn { width: 100%; }

/* ══ Saved transcripts ════════════════════════════════════════════════ */
.recent { width: 100%; max-width: 54rem; margin: 0 auto; padding: 2.5rem 1.5rem 3.5rem; }

.recent-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.recent-title { font-size: 1.4375rem; font-weight: 700; }
.recent-sub { margin: .5rem 0 1.5rem; font-size: .9375rem; color: var(--ink-3); max-width: 46rem; }

.recent-list { display: flex; flex-direction: column; gap: .5rem; }

.recent-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 1rem; align-items: center;
  padding: .9375rem 1.125rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); cursor: pointer; text-align: left; font: inherit;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.recent-row:hover { border-color: var(--accent-line); box-shadow: var(--shadow); transform: translateY(-1px); }

.row-main { min-width: 0; }
.row-name { font-size: 1rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-snip { font-size: .875rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .0625rem; }
.row-stat { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.tag {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  padding: .1875rem .5rem; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.tag-en { background: var(--accent-soft); color: var(--accent); }

.recent-empty { font-size: .9375rem; color: var(--ink-3); padding: 1.5rem 0; margin: 0; }

/* ══ Editor ═══════════════════════════════════════════════════════════ */
.editor {
  flex: 1; width: 100%; max-width: 64rem; margin: 0 auto;
  padding: 1.75rem 1.5rem 3rem;
  display: flex; flex-direction: column; gap: 1rem;
}

.file-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: none; }
.file-id { min-width: 0; }
.file-name { display: block; font-family: var(--display); font-size: 1.125rem; font-weight: 700; color: var(--ink); letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-sub { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.file-actions { display: flex; align-items: center; gap: .375rem; flex: none; }

.player {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  overflow: hidden; flex: none;
}

.wave-section { position: relative; background: var(--wave-bg); height: 88px; border-bottom: 1px solid var(--line); }
.waveform { display: block; width: 100%; height: 100%; cursor: pointer; }
.wave-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: .875rem; color: var(--ink-3); background: var(--wave-bg); }

.transport { display: flex; align-items: center; gap: 1rem; padding: .75rem .875rem; flex-wrap: wrap; }
.spacer { flex: 1; }

.time { font-family: var(--mono); font-size: .875rem; font-variant-numeric: tabular-nums; }
.t-now { color: var(--ink); font-weight: 500; }
.t-sep { color: var(--ink-4); margin: 0 .2rem; }
.t-total { color: var(--ink-3); }

.field { display: flex; align-items: center; gap: .4375rem; }
.field-label { font-family: var(--mono); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }

/* Listed by exclusion, not by enumeration. Naming the types we want meant
   email, search and date silently kept the browser's own appearance while
   still picking up our focus ring from the rule below - the worst of both. */
select, textarea,
input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"],
           [type="color"], [type="submit"], [type="button"], [type="reset"],
           [type="image"], [type="hidden"]) {
  font: inherit; font-size: .9375rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: .4375rem .5625rem;
  transition: border-color .14s, box-shadow .14s;
}
select { cursor: pointer; }
input[type="search"] { appearance: none; -webkit-appearance: none; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

select:hover, input:hover, textarea:hover { border-color: var(--ink-4); }
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.review-cluster { display: flex; align-items: center; gap: .3rem; }

/* ══ Run panel ════════════════════════════════════════════════════════ */
.run-panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 1.375rem; flex: none;
}
.run-title { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 700; }
.run-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.run-alt { display: flex; gap: .375rem; margin-top: 1rem; flex-wrap: wrap; }
.run-note { margin: 1rem 0 0; font-size: .875rem; color: var(--ink-3); }

/* ══ Document ═════════════════════════════════════════════════════════ */
.transcript-section { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.doc {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  overflow: hidden;
}

.doc-head {
  display: flex; align-items: baseline; gap: .625rem;
  padding: .8125rem 1.375rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface); flex: none;
}
.doc-title { font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--ink); }
.doc-meta { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }

/* The pane scrolls internally so the page itself scrolls like a normal website
   and the site footer is reachable — the old full-viewport app shell was half
   the reason this did not read as a site. */
.transcript {
  overflow-y: auto;
  min-height: 20rem;
  max-height: min(62vh, 44rem);
  padding: 2rem clamp(1.25rem, 4vw, 3rem) 3rem;
  scroll-behavior: smooth;
}

/* Urdu is set in Noto Naskh Arabic via the --font stack. Naskh sits shorter
   than the Latin around it, so the transcript runs a touch larger and keeps the
   generous leading both scripts need. */
.turn { max-width: 40rem; margin: 0 auto 1.5rem; font-size: 1.1875rem; line-height: 2; color: var(--ink); }
.turn:last-child { margin-bottom: 0; }

.turn-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .25rem; }
.turn-speaker { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; border: 0; background: none; padding: 0; border-radius: 3px; }
.turn-speaker:hover { text-decoration: underline; }
.turn-time { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Words.
   Horizontal padding with an equal negative margin: highlight backgrounds bridge
   the gap between adjacent words, so a flagged passage reads as one continuous
   band rather than blotches with seams, while layout spacing is unchanged. */
.w {
  border-radius: 3px;
  padding: .14em .16em;
  margin: 0 -.16em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .1s, color .1s;
}
.w:hover { background: var(--accent-soft); }
.w[data-past="true"] { color: var(--ink-3); }
.w[data-active="true"] { background: var(--accent); color: #fff; }
.w[data-flag="true"] { background: #FBEFD6; color: var(--ink); }
.w[data-flag="true"][data-past="true"] { color: var(--ink-2); }
.w[data-flag="true"][data-active="true"] { background: var(--accent); color: #fff; }
body[data-review="true"] .w:not([data-flag="true"]) { color: var(--ink-4); }
body[data-review="true"] .w[data-flag="true"] { background: #F7E2B0; color: var(--ink); }
.w[data-cursor="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.w[data-edited="true"] { background: var(--ok-soft); color: var(--ink); }

.w-input {
  font: inherit; font-size: 1.125rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 3px;
  padding: 0 .15em; min-width: 2ch; outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Tool status line — belongs to the editor, not to the site footer. */
.tool-status {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; flex: none;
  padding: .5rem .125rem 0;
}
.status { font-size: .8125rem; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status[data-kind="error"] { color: var(--danger); font-weight: 600; }
.status[data-kind="ok"] { color: var(--ok); }
.keys { display: flex; gap: .5rem; align-items: center; font-size: .8125rem; color: var(--ink-4); }

kbd {
  font-family: var(--mono); font-size: .75rem;
  background: var(--paper); border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 4px;
  padding: .15em .35em; color: var(--ink-2);
}

/* ══ Buttons ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4375rem;
  font: inherit; font-size: .9375rem; font-weight: 600;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: .5rem .875rem;
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s, transform .06s;
}
.btn:hover:not(:disabled) { background: var(--surface); border-color: var(--ink-4); color: var(--ink); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn:focus-visible, select:focus-visible, .transcript:focus-visible,
.turn-speaker:focus-visible, .recent-row:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Ink, not accent. A page where the only strong colour is one accent link reads
   as designed; a page where every button is the brand blue reads as a template. */
.btn-primary {
  background: var(--ink); border-color: var(--ink); color: #fff;
  box-shadow: 0 1px 2px rgba(22, 22, 26, .24);
}
.btn-primary:hover:not(:disabled) { background: #26262E; border-color: #26262E; color: #fff; }

.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; }

.btn-lg { padding: .6875rem 1.5rem; font-size: 1rem; font-weight: 700; border-radius: 10px; }
.btn-sm { padding: .375rem .6875rem; font-size: .875rem; }
.btn-quiet { background: none; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; }
.btn-danger { color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn-icon { width: 2.125rem; padding: .5rem 0; font-family: var(--mono); line-height: 1; }
.btn-review[aria-pressed="true"] { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }

.pill {
  display: inline-block; min-width: 1.25rem; margin-left: .375rem;
  padding: 0 .3rem; border-radius: 999px;
  background: var(--warn); color: #fff;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  text-align: center; font-variant-numeric: tabular-nums;
}
.pill[data-zero="true"] { background: var(--line-2); color: var(--ink-3); }

/* ══ Menu ═════════════════════════════════════════════════════════════ */
.menu { position: relative; }

.menu-pop {
  position: absolute; right: 0; top: calc(100% + .375rem); z-index: 40;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: .3125rem; min-width: 11.5rem;
  display: flex; flex-direction: column;
}
.menu-item {
  font: inherit; font-size: .9375rem; text-align: left;
  background: none; border: 0; border-radius: 6px;
  color: var(--ink-2); padding: .4375rem .5625rem; cursor: pointer;
}
.menu-item:hover { background: var(--accent-soft); color: var(--accent); }

code {
  font-family: var(--mono); font-size: .85em;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; padding: .1em .35em; color: var(--ink-2);
}

/* ══ Banner ═══════════════════════════════════════════════════════════ */
.banner {
  position: relative; margin-bottom: 1rem;
  padding: .8125rem 2.25rem .8125rem 1rem;
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: var(--r); font-size: .9375rem; color: var(--ink-2); flex: none;
}
.banner strong { color: var(--warn); }
.banner-x {
  position: absolute; top: .375rem; right: .5rem;
  background: none; border: 0; color: var(--ink-3);
  font-size: 1.1875rem; line-height: 1; cursor: pointer;
  padding: .125rem .3rem; border-radius: 4px;
}
.banner-x:hover { color: var(--ink); background: rgba(22, 22, 26, .06); }

/* ══ Blog ═════════════════════════════════════════════════════════════ */
.page-head { padding: clamp(2.5rem, 6vh, 4rem) 0 2rem; }
.page-title { font-size: clamp(2rem, 4.4vw, 2.75rem); font-weight: 800; letter-spacing: -.012em; max-width: 20ch; }
.page-lede { margin: .875rem 0 0; font-size: 1.125rem; color: var(--ink-2); max-width: 48ch; }

/* Two fixed columns rather than auto-fill: a new blog has one or two posts,
   and a lone card sized to a third of the page reads as a layout mistake. */
.post-list { display: grid; gap: 1.25rem; padding-bottom: 4rem; grid-template-columns: repeat(2, 1fr); }

.post-card {
  display: flex; flex-direction: column; gap: .625rem;
  padding: 1.5rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.post-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; }

.post-meta { display: flex; align-items: center; gap: .625rem; font-family: var(--mono); font-size: .75rem; color: var(--ink-3); letter-spacing: .04em; }
.post-card h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.012em; }
.post-card p { margin: 0; font-size: 1rem; color: var(--ink-2); line-height: 1.6; }
.post-more { margin-top: auto; padding-top: .375rem; font-size: .875rem; font-weight: 600; color: var(--accent); }

.post-tags { display: flex; flex-wrap: wrap; gap: .3125rem; }

/* Article ------------------------------------------------------------- */
.article { padding: clamp(2.5rem, 6vh, 4rem) 0 4.5rem; }
.article-head { border-bottom: 1px solid var(--line); padding-bottom: 1.75rem; margin-bottom: 2rem; }
.article-title { font-size: clamp(2rem, 4.6vw, 2.875rem); font-weight: 800; letter-spacing: -.012em; }
.article-sub { margin: 1rem 0 0; font-size: 1.1875rem; color: var(--ink-2); line-height: 1.6; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); }

.prose { font-size: 1.125rem; line-height: 1.78; color: var(--ink-2); max-width: 40rem; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: 1.5625rem; font-weight: 700; margin: 2.5rem 0 .875rem; letter-spacing: -.014em; }
.prose h3 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .625rem; }
.prose p { margin: 0 0 1.125rem; }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.375rem; }
.prose li { margin-bottom: .4375rem; }
.prose img { max-width: 100%; border-radius: var(--r); border: 1px solid var(--line); }
.prose blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--accent-line);
  color: var(--ink-2); font-style: italic;
}
.prose pre {
  background: var(--ink); color: #E8E8EC;
  padding: 1rem 1.125rem; border-radius: var(--r);
  overflow-x: auto; font-family: var(--mono); font-size: .875rem; line-height: 1.6;
}
.prose pre code { background: none; border: 0; color: inherit; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

.article-foot { max-width: 40rem; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }

/* ══ Admin panel ══════════════════════════════════════════════════════ */
/* A sidebar is right here and wrong on the public tool: this is an operator
   console that gets navigated, not a page that gets read. */

.wrap-wide { width: 100%; max-width: 84rem; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 1rem; }
.admin-tag {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: 4px;
  background: var(--ink); color: #fff;
}
.admin-who { font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); }

/* Sign-in ------------------------------------------------------------- */
.gate-page { display: grid; place-items: center; padding: clamp(2rem, 10vh, 6rem) 1.5rem; flex: 1; }
.gate-card {
  width: 100%; max-width: 24rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 2rem;
}
.gate-h1 { font-size: 1.4375rem; font-weight: 700; margin-bottom: .375rem; }
.gate-p { margin: 0 0 1.5rem; font-size: .9375rem; color: var(--ink-3); }
.gate-hint {
  margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .875rem; color: var(--ink-3); line-height: 1.6;
}

/* Shell --------------------------------------------------------------- */
.admin-shell {
  flex: 1; width: 100%; max-width: 84rem; margin: 0 auto;
  padding: 1.75rem 1.5rem 4rem;
  display: grid; grid-template-columns: 12.5rem 1fr; gap: 2rem; align-items: start;
}

.admin-nav { display: flex; flex-direction: column; gap: .125rem; position: sticky; top: 5rem; }
.anav {
  font-size: .9375rem; font-weight: 400; color: var(--ink-2);
  padding: .5rem .75rem; border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: background .14s, color .14s, border-color .14s;
}
.anav:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.anav[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent);
  font-weight: 700; border-left-color: var(--accent);
}

.admin-body { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.admin-body > section { display: flex; flex-direction: column; gap: 1.25rem; }

.admin-h1 { font-size: 1.5625rem; font-weight: 700; display: flex; align-items: center; gap: .625rem; }
.admin-h2 { font-size: 1.1875rem; font-weight: 700; margin-top: .5rem; }
.admin-lede { margin: -.5rem 0 0; font-size: 1rem; color: var(--ink-2); max-width: 62ch; line-height: 1.65; }

/* Stats --------------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: var(--paper); padding: 1.125rem 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.stat-label { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.stat-value { font-family: var(--display); font-size: 1.8125rem; font-weight: 800; letter-spacing: -.024em; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-note { font-size: .8125rem; color: var(--ink-3); }

/* Chart --------------------------------------------------------------- */
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.chart-peak { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.usage-chart { display: flex; align-items: flex-end; gap: .375rem; height: 8rem; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .375rem; }
.bar { width: 100%; max-width: 2.5rem; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
/* A day with no runs is still a day. Drawn as a sliver, not a gap. */
.bar[data-zero="true"] { background: var(--line-2); }
.bar-label { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }

/* Rows ---------------------------------------------------------------- */
.rows { display: flex; flex-direction: column; gap: .5rem; }

.u-row, .b-row, .p-row, .a-row {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1rem 1.125rem;
}

.u-row { display: grid; grid-template-columns: minmax(12rem, 1.6fr) auto auto; gap: .875rem 1.25rem; align-items: start; }
.u-who { min-width: 0; }
.u-name { font-weight: 700; color: var(--ink); }
.u-mail { font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); word-break: break-all; }
.u-seen { font-size: .8125rem; color: var(--ink-3); margin-top: .25rem; }
.u-plan { display: flex; align-items: center; gap: .4375rem; flex-wrap: wrap; }
.u-until { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.u-usage { display: flex; flex-direction: column; gap: .125rem; text-align: right; }
.u-today { font-family: var(--mono); font-size: .875rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.u-30d { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.u-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; padding-top: .75rem; border-top: 1px solid var(--line); }
.u-select, .u-date { font-size: .875rem; padding: .3125rem .5rem; }

/* Selects, dates and small buttons share these rows, and each has a different
   idea of how tall it should be - 30px, 42px and 36px in the same Users row.
   Pin the controls to the button's height; padding-block has to go, or the
   date field keeps its own internal box inside the one we set. */
.u-select, .u-date, .a-input, .p-input, .search-row input {
  height: 2.25rem; padding-block: 0;
}
.u-date:disabled { opacity: .4; }

.b-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: .75rem; align-items: center; }
.b-title { font-weight: 700; color: var(--ink); }
.b-slug { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }

.p-row { display: grid; gap: .625rem; }
.p-head { display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; }
.p-name { font-weight: 700; color: var(--ink); }
.p-env { font-size: .75rem; }
.p-state { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.p-src, .p-note { font-size: .8125rem; color: var(--ink-3); }
.p-hint { font-size: .75rem; }
.p-form { display: flex; gap: .375rem; flex-wrap: wrap; align-items: center; }
.p-input { flex: 1; min-width: 14rem; font-family: var(--mono); font-size: .875rem; }
.p-locked { margin: 0; font-size: .875rem; color: var(--ink-3); line-height: 1.55; max-width: 60ch; }

.a-row { display: grid; grid-template-columns: 1fr auto; gap: .875rem 1.25rem; align-items: center; }
.a-name { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.a-mail { font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); word-break: break-all; }
.a-seen { font-size: .8125rem; color: var(--ink-3); margin-top: .25rem; }
.a-actions { display: flex; gap: .375rem; align-items: center; flex-wrap: wrap; }
.a-reset { display: flex; gap: .375rem; }
.a-input { font-size: .875rem; width: 11rem; }

/* An armed destructive button should look armed. */
.btn[data-armed="true"] { background: var(--danger); border-color: var(--danger); color: #fff; }

.badge-warn   { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }

/* Search -------------------------------------------------------------- */
.search-row { display: flex; gap: .375rem; align-items: center; }
.search-row input { flex: 1; max-width: 24rem; }

/* Plan history -------------------------------------------------------- */
.history { display: flex; flex-direction: column; gap: .5rem; }
.h-row { display: grid; grid-template-columns: 11rem auto 1fr; gap: .75rem; align-items: baseline; padding-bottom: .5rem; border-bottom: 1px solid var(--line); font-size: .875rem; }
.h-row:last-child { border-bottom: 0; padding-bottom: 0; }
.h-when { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.h-what { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.h-move { font-family: var(--mono); color: var(--ink); }
.h-until { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.h-actor { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.h-note { color: var(--ink-2); }

@media (max-width: 60rem) {
  .admin-shell { grid-template-columns: 1fr; gap: 1.25rem; }
  .admin-nav { position: static; flex-direction: row; overflow-x: auto; gap: .25rem; padding-bottom: .25rem; }
  .anav { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .anav[aria-current="page"] { border-left: 0; border-bottom-color: var(--accent); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .u-row { grid-template-columns: 1fr; }
  .u-usage { text-align: left; }
  .h-row { grid-template-columns: 1fr; gap: .125rem; }
}

/* ══ Admin (legacy single-page layout) ════════════════════════════════ */
.admin { padding: clamp(2rem, 5vh, 3rem) 0 4rem; }

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 1.5rem;
}
.card + .card { margin-top: 1.25rem; }
.card-title { font-size: 1.1875rem; font-weight: 700; margin-bottom: .25rem; }
.card-sub { margin: 0 0 1.25rem; font-size: .9375rem; color: var(--ink-3); }

.form-grid { display: grid; gap: 1rem; }
/* align-content: start matters. Side-by-side rows in .form-two are stretched to
   the tallest one, and without it a row with a hint line underneath would push
   its own input down relative to the row beside it. */
.form-row { display: grid; gap: .375rem; align-content: start; }
.form-row > label { font-family: var(--mono); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.form-row input, .form-row textarea, .form-row select { width: 100%; }
.form-row textarea { min-height: 18rem; font-family: var(--mono); font-size: .875rem; line-height: 1.65; resize: vertical; }
.form-hint { font-size: .8125rem; color: var(--ink-3); }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.admin-list { display: flex; flex-direction: column; gap: .5rem; }
.admin-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: .75rem; align-items: center;
  padding: .75rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
}
.admin-row-main { min-width: 0; }
.admin-row-title { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-row-slug { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.badge { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; padding: .1875rem .4375rem; border-radius: 999px; }
.badge-live { background: var(--ok-soft); color: var(--ok); }
.badge-draft { background: var(--surface-2); color: var(--ink-3); }

.notice { padding: .75rem 1rem; border-radius: var(--r); font-size: .9375rem; margin-bottom: 1rem; }
.notice-error { background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); }
.notice-ok { background: var(--ok-soft); border: 1px solid #BEE0D2; color: var(--ok); }
.notice-info { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-hi); }

.empty { text-align: center; padding: 3rem 1rem; color: var(--ink-3); font-size: 1rem; }

/* ══ Site footer ══════════════════════════════════════════════════════ */
.site-foot {
  margin-top: auto;
  background: var(--ink);
  color: #9B9BA4;
  padding: 3.5rem 0 2rem;
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 1.5fr) repeat(3, minmax(8rem, 1fr));
  gap: 2.5rem 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.foot-brand .brand-name { color: #fff; }
.foot-brand .brand-mark {
  background:
    linear-gradient(#fff, #fff)         0     100% / 3px 8px  no-repeat,
    linear-gradient(#8B84FF, #8B84FF)   7.5px 100% / 3px 18px no-repeat,
    linear-gradient(#fff, #fff)         15px  100% / 3px 12px no-repeat;
}
.foot-blurb { margin: .875rem 0 0; font-size: .9375rem; line-height: 1.65; max-width: 26rem; color: #9B9BA4; }

.foot-col h4 { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #6E6E78; margin-bottom: .875rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.foot-col a { color: #C6C6CE; font-size: .9375rem; }
.foot-col a:hover { color: #fff; text-decoration: none; }

.foot-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem;
  font-size: .875rem; color: #6E6E78;
}
.foot-bottom a { color: #9B9BA4; }
.foot-bottom a:hover { color: #fff; text-decoration: none; }

/* ══ Responsive ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 62rem) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 64rem) {
  /* Three cards stop fitting well before the usual breakpoint. */
  .plan-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .plan-card-pro { transform: none; }
}

@media (max-width: 52rem) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .form-two { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: row; flex-wrap: wrap; }
  .cta-actions .btn { width: auto; }
}

/* The header runs out of room well before phone width: wordmark, four nav
   links, the transcripts button and the sign-in button need about 830px in one
   row. Below that the nav takes a row of its own and scrolls sideways within
   it, which is what phones get too - there is no third layout to learn. */
@media (max-width: 54rem) {
  /* The nav drops to its own row rather than disappearing. Hiding it entirely
     left phone visitors with no way to reach the blog except the footer, and a
     hamburger is more moving parts than four links justify. */
  .head-inner { height: auto; flex-wrap: wrap; padding-top: .625rem; padding-bottom: .5rem; row-gap: .25rem; }
  .site-nav {
    order: 3; width: 100%; margin-left: -.5rem;
    overflow-x: auto; scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .nav-link { white-space: nowrap; }
}

@media (max-width: 40rem) {
  .keys { display: none; }

  .file-bar { flex-direction: column; align-items: flex-start; gap: .5rem; }
  #btn-recent .count { display: none; }
  .acct-label { display: none; }
  .admin-row { grid-template-columns: 1fr auto; row-gap: .5rem; }
  .transcript { max-height: none; min-height: 16rem; }
  .post-list { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .roadmap li { grid-template-columns: 1fr; gap: .625rem; }
}