/* =========================================================
   CLINIDICT — styles.css (cleaned + balanced choice buttons)
   - Slim pill buttons for Continue / Record New
   - Equal widths, smaller type, visible halos
   - Primary Record halo + blinking hint restored
   - Mic VU stays beside the Stop button on mobile
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Background swarm */
  --rg1-w: clamp(1200px, 75vw, 2200px);
  --rg1-h: clamp(800px, 70vh, 1600px);
  --rg2-w: clamp(900px, 60vw, 1800px);
  --rg2-h: clamp(600px, 55vh, 1400px);

  /* Palette */
  --bg: #0b1220;
  --panel: #1b2433;
  --panel-2: #212b3b;
  --text: #e9eefb;
  --fg: #e9eef5; /* alias used elsewhere */
  --muted: #a9b3c7;
  --red: #ff4d4d;
  --green: #149e4a;
  --blue: #4d79ff;

  --shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  --radius: 16px;
}

/* ---------- Reset-ish ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; min-height: 100svh; overflow-x: hidden; }

/* ---------- Page ---------- */
body {
  margin: 0;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(var(--rg1-w) var(--rg1-h) at 20% -10%, #1e2a5a66, transparent 68%),
    radial-gradient(var(--rg2-w) var(--rg2-h) at 120% 8%, #7834ff33, transparent 60%),
    linear-gradient(180deg, #0a0f1e 0%, #0b1020 45%, #0a0f1e 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.container {
  max-width: 1100px;
  /* Reduce the bottom margin slightly to tighten the gap between the
     transcript card and the footer.  The original 80px left a large
     expanse of empty space on larger screens; 60px strikes a
     better balance without crowding the content. */
  margin: 32px auto 60px;
  padding: 0 16px;
}

/* ---------- Glass cards ---------- */
.glass, .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

/* ---------- Header ---------- */
.topbar { padding: 16px; margin-bottom: 16px; }
.topbar.glass {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}
.hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 22px;
  flex: 1;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo { display: block; border-radius: 12px; height: 70px; width: auto; }
.brand-text .title { margin: 0; letter-spacing: 0.2px; }
.brand-text .tag { margin: 0; color: var(--muted); font-size: 0.95rem; white-space: normal; }

.nav { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.nav a {
  color: var(--fg); text-decoration: none; padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); transition: all 0.3s ease;
}
.nav a:hover { background: rgba(255,255,255,0.1); box-shadow: 0 0 12px rgba(122,157,255,0.35); }

/* ----- Network status indicator -----
   A small Wi-Fi icon that signals connectivity status. The outer span
   receives .online/.offline classes; the inner <i> icon inherits its
   colour from these classes via Font Awesome. */
.net-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  font-size: 1rem;
  width: 16px;
  height: 16px;
  opacity: 0.85;
}
.net-status-icon i {
  font-size: 1rem;
  line-height: 1;
  color: var(--green);
}
.net-status-icon.offline i {
  color: var(--red);
}
.net-status-icon.online i {
  color: var(--green);
}

/* Hide the desktop network indicator on small screens. On mobile, no
   indicator is displayed. */
@media (max-width: 640px) {
  #netStatus { display: none; }
}

/* ---------- Tagline ---------- */
.sub { margin: 10px 0 18px; color: var(--muted); font-size: 1.02rem; }
.sub strong { color: #fff; font-weight: 700; }
.tagline-mobile { display: none; }
@media (max-width: 640px) {
  .tagline-desktop { display: none; }
  .tagline-mobile { display: block; text-align: center; font-size: 0.8rem; margin-top: 8px; font-weight: 600; }
}

/* Style the Font Awesome wand sparkles icon in the tagline to use the primary
   foreground colour (white) instead of the muted tagline colour. */
.tagline-desktop i.fa-wand-magic-sparkles,
.tagline-mobile i.fa-wand-magic-sparkles {
  color: var(--fg);
  margin-right: 4px;
}

/* ---------- Generic buttons ---------- */
.btn {
  appearance: none; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700; color: #fff;
  cursor: pointer; transition: transform 0.05s ease, box-shadow 0.3s ease, opacity 0.2s ease;
  background: #3a3f55;
}
.btn:active { transform: translateY(1px); }
.btn.record { background: var(--red); }
.btn.stop   { background: var(--blue); }
.btn:focus-visible, .icon-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(122,157,255,0.35);
}

/* Primary Record halo (restored) */
.btn.record { position: relative; overflow: visible; }
.btn.record.attn::after {
  content: ""; position: absolute; inset: -6px; border-radius: 999px;
  border: 2px solid rgba(255,77,77,0.55); box-shadow: 0 0 0 0 rgba(255,77,77,0.35); animation: attnPulse 1.6s ease-out infinite;
}
@keyframes attnPulse {
  0% { transform: scale(0.95); opacity: 0.9; box-shadow: 0 0 0 0 rgba(255,77,77,0.35); }
  70%{ transform: scale(1.12); opacity: 0;   box-shadow: 0 0 0 14px rgba(255,77,77,0); }
  100%{ transform: scale(0.95); opacity: 0; }
}

/* Blue button internal glow (unchanged) */
.btn.stop.glow {
  box-shadow: 0 0 0 0 rgba(77,121,255,0.65), 0 0 14px 4px rgba(77,121,255,0.35) inset;
  animation: glow 1.4s ease-in-out infinite;
}
@keyframes glow {
  0% { box-shadow: 0 0 0 0 rgba(77,121,255,0.6), 0 0 14px 4px rgba(77,121,255,0.32) inset; }
  50%{ box-shadow: 0 0 0 10px rgba(77,121,255,0), 0 0 18px 6px rgba(77,121,255,0.45) inset; }
  100%{ box-shadow: 0 0 0 0 rgba(77,121,255,0), 0 0 14px 4px rgba(77,121,255,0.32) inset; }
}

/* =========================================================
   CONTINUE / RECORD NEW — slim, equal, with visible halos
   ========================================================= */
.record-box { display: flex; justify-content: flex-start; margin: 20px 0; padding: 12px 16px; max-width: 460px; }
.choice-wrap {
  /*
    Use a 3‑column grid so the two action buttons stretch evenly across
    the available width with the small OR separator centred.  Dropping
    the fixed max‑width allows the choice row to grow to fill its
    container.  The buttons themselves are full width within their
    respective grid tracks.
  */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.choice-wrap .btn {
  /* Each button fills the width of its cell in the grid and maintains a
     consistent font size and padding. */
  width: 100%;
  min-width: 0;
  font-size: clamp(0.76rem, 1.9vw, 0.88rem);
  padding: 6px 30px;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  min-height: 34px;
  border-radius: 999px;
  position: relative;
  overflow: visible;
}
.btn.continue   { background: var(--green); }
.btn.record-new { background: var(--red); }

.pulse-green::after,
.pulse-red::after {
  content: ""; position: absolute; inset: -8px; border-radius: 999px; pointer-events: none;
}
.pulse-green::after { border: 2px solid rgba(20,158,74,0.55);  box-shadow: 0 0 0 0 rgba(20,158,74,0.35);  animation: haloPulseGreen 1.6s ease-out infinite; }
.pulse-red::after   { border: 2px solid rgba(255,77,77,0.55); box-shadow: 0 0 0 0 rgba(255,77,77,0.35); animation: haloPulseRed 1.6s ease-out infinite; }
@keyframes haloPulseGreen { 0%{transform:scale(0.95);opacity:.9;box-shadow:0 0 0 0 rgba(20,158,74,.35);}70%{transform:scale(1.12);opacity:0;box-shadow:0 0 0 12px rgba(20,158,74,0);}100%{transform:scale(0.95);opacity:0;} }
@keyframes haloPulseRed   { 0%{transform:scale(0.95);opacity:.9;box-shadow:0 0 0 0 rgba(255,77,77,.35);}70%{transform:scale(1.12);opacity:0;box-shadow:0 0 0 12px rgba(255,77,77,0);}100%{transform:scale(0.95);opacity:0;} }

/* Centre the OR separator within its grid cell */
.or-sep {
  margin: 0 2px;
  padding: 0 6px;
  font-weight: 800;
  font-size: clamp(0.78rem, 2.4vw, 0.9rem);
  letter-spacing: 0.08em;
  opacity: 0.92;
  user-select: none;
  text-shadow: 0 0 6px rgba(122,157,255,0.5);
  justify-self: center;
  align-self: center;
}
/* Utility glow (used by OR) */
.glow { text-shadow: 0 0 8px rgba(122,157,255,0.55); }

@media (max-width: 560px) {
  .choice-wrap { max-width: 100%; gap: 10px; }
  .choice-wrap .btn { font-size: 0.82rem; padding: 6px 12px; min-height: 34px; }
  .or-sep { padding: 0 4px; }
}

/* ---------- SmartFormat glow ---------- */
.smart-glow { box-shadow: 0 0 0 0 rgba(122,157,255,0.7), 0 0 12px 4px rgba(122,157,255,0.35) inset; animation: smartPulse 1.5s ease-in-out infinite; }
@keyframes smartPulse { 0%{box-shadow:0 0 0 0 rgba(122,157,255,.6),0 0 14px 4px rgba(122,157,255,.32) inset;}50%{box-shadow:0 0 0 10px rgba(122,157,255,0),0 0 18px 6px rgba(122,157,255,.45) inset;}100%{box-shadow:0 0 0 0 rgba(122,157,255,0),0 0 14px 4px rgba(122,157,255,.32) inset;} }
.smart-btn.smart-glow {
  box-shadow: 0 0 0 0 rgba(122,157,255,0.7), 0 0 12px 4px rgba(122,157,255,0.45), 0 0 20px rgba(122,157,255,0.35);
  animation: smartPulse 1.5s ease-in-out infinite;
}
@media (max-width: 640px) {
  .smart-btn.smart-glow { box-shadow: 0 0 6px rgba(122,157,255,0.8), 0 0 12px rgba(122,157,255,0.65), 0 0 18px rgba(122,157,255,0.45); }
}

/* ---------- Status row ---------- */
.status { margin: 10px 2px 18px; color: var(--muted); min-height: 22px; }
.status .rec { display: inline-flex; align-items: center; gap: 8px; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff6666; display: inline-block; box-shadow: 0 0 10px #ff666699; }
.status .dots span { display: inline-block; opacity: 0.2; animation: blink 1.3s infinite; }
.status .dots span:nth-child(2){ animation-delay: 0.2s; }
.status .dots span:nth-child(3){ animation-delay: 0.4s; }
@keyframes blink { 0%,100%{opacity:.2;} 50%{opacity:1;} }
.status.error { color: #ff8a8a; font-weight: 500; }

/* Mic-level OK message styling (green) */

/* Word count styling: small, subtle text below the transcript aligned right */
.word-count {
  margin-top: 6px;
  text-align: right;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.7;
}

/* Confirmation modal styles */
/* Use the existing overlay style. The confirm-card tweaks its appearance slightly. */
#confirmModal .overlay-card.confirm-card {
  max-width: 360px;
  padding: 24px 28px;
  text-align: center;
}

.confirm-message {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--fg);
  font-weight: 500;
}

.confirm-skip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 14px;
  user-select: none;
}

.confirm-skip input[type="checkbox"] {
  accent-color: var(--blue);
}

.confirm-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

/* Secondary button styling for cancel action */
.btn.secondary {
  background: #4a506a;
  color: #fff;
}

/* Ensure the confirmation modal overlays all other elements (e.g., busy overlay). */
#confirmModal {
  z-index: 1200;
}

/* ---------- Card + toolbar ---------- */
.card { padding: 16px; transition: opacity 0.25s ease, filter 0.25s ease; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-actions { display: flex; align-items: center; gap: 8px; }
.hint { font-size: 0.85rem; color: var(--muted); font-weight: 500; margin-left: 6px; }
@media (max-width: 640px) { .card-actions { gap: 8px; } }
.card.dim { opacity: 0.65; filter: saturate(0.9); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: var(--fg); cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,0.08); }
.icon-btn .label { font-size: 0.92rem; }
.icon-btn.disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; }

/* Custom uppercase button styling. It inherits base icon-btn styles but we add
   a slight differentiation: a modest blue border to hint at its formatting role. */
#capsBtn {
  border-color: rgba(122, 157, 255, 0.25);
}
#capsBtn:hover {
  background: rgba(122, 157, 255, 0.08);
}

/* Hide the uppercase button on mobile screens (≤640px) to avoid clutter */
@media (max-width: 640px) {
  #capsBtn { display: none !important; }
}

@media (max-width: 640px) {
  .smart-btn { padding: 0 8px; min-width: 32px; font-size: 0; }
  .smart-btn .label { display: none !important; }
  /* Adjust the magic wand sparkles icon size on mobile screens. Font Awesome
     icons scale with font-size; increase it slightly for better legibility. */
  .smart-btn i.fa-wand-magic-sparkles {
    font-size: 1.125rem;
  }
}
@media (max-width: 640px) { .card-actions .icon-btn { padding: 0 8px; } }

/* ---------- Transcript box ---------- */
.editable {
  white-space: pre-wrap; word-wrap: break-word; min-height: 110px; margin-top: 10px; padding: 12px;
  border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); outline: none;
}
.editable:focus {
  border-color: rgba(77,121,255,0.6);
  box-shadow: 0 0 0 2px rgba(77,121,255,0.2) inset;
  background: rgba(255,255,255,0.05);
}

/*
  When a transcript is present, the accuracy classification can be
  reflected on the text box itself.  These classes are applied
  dynamically via JavaScript and tint the border and inner shadow
  according to the confidence (green ≥99%, yellow ≥95%, red <95%).
*/
.editable.green {
  border-color: #28d07f;
  box-shadow: 0 0 0 2px rgba(40,208,127,0.25) inset;
}
.editable.yellow {
  border-color: #ffcc33;
  box-shadow: 0 0 0 2px rgba(255,204,51,0.25) inset;
}
.editable.red {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 2px rgba(255,107,107,0.25) inset;
}

/* Placeholder for transcript */
.transcript:empty::before {
  content: "Your transcript will appear here...";
  color: #9aa6bf;
  font-style: italic;
  opacity: 0.9;
  pointer-events: none;
}

/* Keep fade-in utility */
.fade-in { animation: fadeIn 0.3s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ---------- Footer ---------- */
.site-footer { padding: 22px 0 36px; }
.footer-inner { display: flex; flex-direction: column; gap: 6px; }
.foot-note { color: var(--muted); font-size: 0.92rem; margin: 0 4px; }
.copyright { color: #cfd6e3; font-size: 0.92rem; margin: 0 4px; opacity: 0.9; }
.site-links { text-align: right; margin-top: 6px; font-size: 0.92rem; color: var(--muted); }
.site-links a { color: var(--fg); text-decoration: none; opacity: 0.85; transition: opacity 0.2s ease, color 0.2s ease; }
.site-links a:hover { opacity: 1; color: #fff; }

/* ---------- Overlay & Toast ---------- */
.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(5,8,18,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1000;
}
.overlay.hidden { display: none; }
.overlay-card

 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 22px; border-radius: 16px; text-align: center; }
.overlay-text { margin-top: 4px; color: var(--fg); }
.spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25); border-top-color: #7a9dff; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 1100; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.bottom { bottom: 24px; }
.toast.center { top: 40%; transform: translate(-50%, -40%); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.center.show { transform: translate(-50%, -40%); }
.toast.hidden { display: none; }
.toast-icon { font-weight: 800; }
.toast-text { color: var(--fg); }

/* ---------- Responsive header tweaks ---------- */
@media (max-width: 900px) {
  .topbar.glass { flex-direction: column; align-items: center; padding: 14px 16px; }
  .topbar .brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
  .topbar .title { margin: 0; font-size: 1.45rem; text-align: center; line-height: 1.08; }
  .topbar .tag { margin: 0; text-align: center; font-size: 0.92rem; color: var(--muted); }
  .topbar .nav {
    display: flex; gap: 10px; margin-top: 10px; justify-content: center; align-items: center; flex-wrap: nowrap; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 4px;
  }
  .topbar .nav a { padding: 6px 10px; font-size: 0.95rem; border-radius: 14px; background: #2a3550; white-space: nowrap; flex: 0 0 auto; }
  .hero { gap: 12px; }
  .logo { height: 52px; }
  .record-box { justify-content: center; margin-inline: auto; }
}

/* ---------- Mobile layout & controls (global) ---------- */
@media (max-width: 560px) {
  .container { margin-top: 24px; }
  .topbar { text-align: center; }
  .hero { grid-template-columns: 1fr; justify-items: center; }
  .brand { flex-direction: column; align-items: center; gap: 8px; }
  .logo { height: 56px; }
  .brand-text .title { font-size: 1.6rem; }
  .brand-text .tag { font-size: 0.95rem; }
  .nav { justify-content: center; margin-top: 6px; }
  .card { padding: 12px; }
  .icon-btn { height: 34px; }
}

/* ---------- Recording status pill ---------- */
.rec { display: inline-flex; align-items: center; gap: 0.5ch; font-weight: 500; color: #fff; }
.rec .dot {
  width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ff4d4d;
  box-shadow: 0 0 0 0 rgba(255,77,77,0.7); animation: pulse 1.2s infinite; margin-right: 0.25ch;
}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,77,77,0.7);}70%{box-shadow:0 0 0 8px rgba(255,77,77,0);}100%{box-shadow:0 0 0 0 rgba(255,77,77,0);} }
.rec .dots { display: inline-flex; gap: 0.25ch; margin-left: 0.25ch; }
.rec .dots span { opacity: 0.2; font-size: 1.2em; line-height: 1; }
.rec .dots span:nth-child(1){ animation: dot 1.2s infinite 0s; }
.rec .dots span:nth-child(2){ animation: dot 1.2s infinite 0.2s; }
.rec .dots span:nth-child(3){ animation: dot 1.2s infinite 0.4s; }
@keyframes dot { 0%,20%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;} }

/* ---------- Record hint (restored gentle blink) ---------- */
.rec-hint { color: var(--muted); font-size: 0.95rem; user-select: none; display: inline-flex; align-items: center; gap: 8px; opacity: 0.9; animation: hintFade 1.6s ease-in-out infinite; }
@keyframes hintFade { 0%,100%{opacity:.55;} 50%{opacity:1;} }
.blink-dot { display: inline-block; color: #ff6666; font-weight: 700; font-size: 0.95rem; animation: dotBlink 1.2s infinite; }
@keyframes dotBlink { 0%,100%{opacity:.25; transform: translateY(0);} 50%{opacity:1; transform: translateY(-1px);} }

/* ---------- Mic VU (kept beside button) ---------- */
.record-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.mic-vu {
  display: none; align-items: center; gap: 8px; height: 24px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.04);
  flex: 0 0 auto;
}
.mic-vu canvas { display: block; width: 160px; height: 18px; }
.mic-vu.active { border-color: rgba(77,121,255,0.35); box-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 0 14px 3px rgba(77,121,255,0.22); }
.record-wrap .mic-vu { margin-left: 8px; }

@media (max-width: 560px) {
  .record-box:has(.record-wrap) { max-width: 100%; padding: 10px 12px; }
  .record-wrap { gap: 8px; min-width: 0; }
  .btn.record { padding: 8px 14px; font-size: 0.95rem; line-height: 1.1; }
  .btn.record.attn::after { inset: -4px; }
  .rec-hint { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.92rem; }
  .rec-hint .blink-dot { font-size: 0.85rem; }
  .mic-vu canvas { width: 110px; height: 16px; }
}

/* ---------- Small utilities ---------- */
.controls { display: flex; align-items: center; gap: 12px; margin: 18px 4px 14px; }
.controls select { background: #1e2a3c; color: var(--text); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 8px 10px; }
.updated { color: var(--muted); font-size: 0.9rem; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card h3 { margin: 0 0 8px; font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.card .value { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.3px; }
.card .delta { margin-left: 8px; vertical-align: middle; }
section.cards-grid + .error { margin-top: 16px; }
.delta { font-size: 0.9rem; margin-left: 6px; padding: 2px 6px; border-radius: 6px; font-weight: 600; display: inline-block; }
.delta.up { color: #0a7a0a; background-color: #e6f6e6; }
.delta.down { color: #a40000; background-color: #fdeaea; }
.delta.neutral { color: #666; background-color: #f1f1f1; }

.author-link { color: #e9eef5; text-decoration: none; position: relative; font-weight: 700; letter-spacing: 0.2px; transition: color 0.2s ease, opacity 0.2s ease; opacity: 0.95; }
.author-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, #7a9dff, #a88bff); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s ease; border-radius: 2px;
}
.author-link:hover, .author-link:focus { color: #fff; opacity: 1; outline: none; }
.author-link:hover::after, .author-link:focus::after { transform: scaleX(1); }
.author-link:focus-visible { box-shadow: 0 0 0 3px rgba(122,157,255,0.28); border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .author-link, .author-link::after { transition: none; } }

.hidden { display: none !important; }

/* Accuracy badge */
.acc {
  /*
    Style the transcript confidence as a pill.  The badge uses an
    inline-flex layout to align the label, value and optional info
    icon on a single row.  Coloured backgrounds and borders are
    applied via the state classes (.green, .yellow, .red).  The
    margin-left property is kept so the badge aligns to the right of
    the card heading on larger screens.
  */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #9aa3bd;
}

.acc.hidden { display: none; }

/* Colour variants for the confidence pill.  The colours are pulled
   directly from the existing .acc.* definitions but augmented with
   tinted backgrounds and borders to create a bubble effect. */
.acc.green {
  color: #28d07f;
  background: rgba(40,208,127,0.12);
  border-color: rgba(40,208,127,0.55);
}
.acc.yellow {
  color: #ffcc33;
  background: rgba(255,204,51,0.12);
  border-color: rgba(255,204,51,0.55);
}
.acc.red {
  color: #ff6b6b;
  background: rgba(255,107,107,0.12);
  border-color: rgba(255,107,107,0.55);
}

/* On narrow screens, reduce the font size of the accuracy badge to conserve
   space so the SmartFormat button and other controls fit comfortably. */
@media (max-width: 640px) {
  .acc {
    font-size: 0.85rem;
  }
}

/* Info icon for transcript confidence */
/*
  Info icon for transcript confidence

  The small “i” next to the transcript confidence is styled to be subtle
  and unobtrusive, matching the slightly faded white used for the footer
  links (Privacy · Terms). We remove the border and background so that
  only the glyph appears. The colour uses the foreground white with
  reduced opacity. Hovering over the icon increases its opacity to
  improve discoverability of the tooltip. A pointer cursor indicates
  interactivity.
*/
.acc-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  padding: 0;
  /* Use the primary foreground colour with reduced opacity for a faded look */
  color: var(--fg);
  opacity: 0.75;
  background: transparent;
  border: none;
  cursor: help;
  font-size: 0.8rem;
  line-height: 1;
}
.acc-info:hover,
.acc-info:focus {
  opacity: 1;
}

/* Hide the confidence info icon on narrow screens to save space */
@media (max-width: 640px) {
  .acc-info {
    display: none;
  }

  /* On narrow screens, don’t force the accuracy badge to the far right;
     allow it to sit next to the heading. This reduces unnecessary
     spacing and helps keep the badge on a single line. */
  .acc {
    margin-left: 0;
  }
}

/* On small screens hide the "Accuracy =" label */
@media (max-width: 720px) {
  .acc .acc-label { display: none; }
}

/* ====== Progress line for busy overlay ====== */
.progressline {
  position: relative;
  width: 100%;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255,255,255,0.15);
}
.progressline::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  animation: progressSweep 1.2s infinite;
}
@keyframes progressSweep {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

/* ====== Subtle success clash (gentle ring) ====== */
.clash-burst {
  position: fixed;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.0) 60%);
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0.0;
  animation: clashPop 0.7s ease-out forwards;
  z-index: 999999;
}
@keyframes clashPop {
  0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.0; filter: blur(1px); }
  20%  { opacity: 0.35; }
  60%  { opacity: 0.25; }
  100% { transform: translate(-50%, -50%) scale(14); opacity: 0; filter: blur(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .progressline::after, .clash-burst {
    animation: none !important;
  }
}
  20%{ opacity: 0.35; }
  60%{ opacity: 0.25; }
  100%{ transform: translate(-50%, -50%) scale(14); opacity: 0; filter: blur(3px); }
}
@media (prefers-reduced-motion: reduce){
  .progressline::after, .clash-burst{ animation: none !important; }
}