/* ─────────────────────────────────────────────────────────────────
   albanisht brand stylesheet
   Color palette grounded in flag red, antique gold and granite gray
   on a primarily neutral cream field. Source Serif headings, Inter
   body. Loaded after Tailwind so utilities are still available;
   component classes here define the design system.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Brand colors */
  --c-primary:       #C8102E;   /* Albanian flag red, slightly deeper */
  --c-primary-dark:  #8B0E1F;   /* hover, focused text */
  --c-secondary:     #1A1A1A;   /* rich near-black, not pure 000 */
  --c-accent:        #C5A03A;   /* muted antique gold */

  /* Surfaces and text */
  --c-bg:            #FAFAF7;   /* warm off-white, slightly cream */
  --c-bg-elevated:   #FFFFFF;
  /* --c-card is the opaque surface for header + nav dropdown + offline
     cards. Was undefined originally, which made `background: var(--c-card)`
     resolve to transparent — the mobile nav dropdown showed page content
     bleeding through it. Defined now as the elevated white surface so the
     dropdown actually occludes whatever is behind it. */
  --c-card:          #FFFFFF;
  --c-text-primary:  #1A1A1A;
  --c-text-muted:    #5A5A5A;
  --c-border:        #E5E2DC;   /* warm gray */

  /* Accents for textures and state */
  --c-granite:       #6B7A7F;
  --c-snow:          #F0F2F0;
  --c-evergreen:     #2D4A3E;
  --c-success:       var(--c-evergreen);
  --c-warning:       #B8860B;
  --c-error:         var(--c-primary-dark);

  /* Adriatic / Kosovo-flag inspired blue. Secondary accent introduced
     in the "open blue" pass — additive, not a replacement for the flag
     red which remains the primary brand color and the eagle's fill. */
  --c-sky:           #3D6BAA;
  --c-sky-dark:      #2A4F85;
  --c-sky-soft:      #E6EDF6;

  /* Typography */
  --font-serif: "Source Serif 4", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "JetBrains Mono", "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layered drop-shadow tokens — give the site a real 3D feel via
     multi-layer shadows. Four shadow ramps from soft (small UI
     elements) to dramatic (hero, translator card). An inset top
     highlight adds a subtle bevel that suggests the surface is lifted
     from the page. */
  --shadow-soft:  0 1px 2px rgba(26,26,26,0.07),
                  0 2px 6px rgba(26,26,26,0.06);
  --shadow-card:  0 2px 5px rgba(26,26,26,0.09),
                  0 8px 20px rgba(26,26,26,0.08),
                  0 24px 48px rgba(26,26,26,0.07);
  --shadow-lift:  0 4px 10px rgba(26,26,26,0.11),
                  0 16px 32px rgba(26,26,26,0.10),
                  0 36px 72px rgba(26,26,26,0.09);
  --shadow-deep:  0 6px 14px rgba(26,26,26,0.13),
                  0 24px 48px rgba(26,26,26,0.12),
                  0 48px 96px rgba(26,26,26,0.10);
  /* Inset top-edge highlight — fake bevel suggesting the card is
     catching ambient light from above. Pairs with the drop shadows. */
  --bevel-top:    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Base typography */
html {
  background: var(--c-bg);
  color: var(--c-text-primary);
}
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  /* Subtle background pattern: topographic contours (right) + network
     graph (left), low-opacity granite on cream. Fixed attachment so it
     doesn't scroll with content. */
  background-color: var(--c-bg);
  background-image: url("/static/bg-pattern.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

h1, h2, h3, .serif {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Tap targets: 48pt minimum, 56pt for primary CTAs. Elderly users on
   small touchscreens are the design target. */
.btn { min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; }
.btn-cta { min-height: 56px; padding-left: 24px; padding-right: 24px; }

/* Reduced motion: kill all transitions and animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* High contrast: deepen borders, strip the warm cream. */
@media (prefers-contrast: more) {
  :root {
    --c-bg:           #FFFFFF;
    --c-text-primary: #000000;
    --c-text-muted:   #000000;
    --c-border:       #000000;
  }
  a, .btn-primary { text-decoration: underline; }
}

/* Focus states: always visible, never suppressed. */
:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}

/* Inputs: 18pt mobile minimum so iOS Safari does not auto-zoom on
   focus. Steps down on viewports wide enough that the soft keyboard
   does not displace the layout. */
.input, textarea.input, input.input {
  font-size: 18px;
  line-height: 1.5;
  background: transparent;
  color: var(--c-text-primary);
}
@media (min-width: 768px) {
  .input, textarea.input, input.input { font-size: 16px; }
}

/* ─── Utility-class overrides for the existing Tailwind utilities the
   templates already use. .bg-card now carries the 3D card treatment:
   subtle white-to-cream gradient + multi-layer shadow. ─── */
.text-primary  { color: var(--c-primary); }
.bg-primary    { background-color: var(--c-primary); }
.border-primary { border-color: var(--c-primary); }
.text-muted    { color: var(--c-text-muted); }
.bg-card       {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--c-bg) 100%);
  box-shadow: var(--shadow-card), var(--bevel-top);
}
.border-default { border-color: var(--c-border); }
.text-accent   { color: var(--c-accent); }
.border-accent { border-color: var(--c-accent); }

/* ─── Buttons ─── */
.btn-primary {
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: #FFFFFF;
  border: 1px solid var(--c-primary-dark);
  font-weight: 600;
  box-shadow:
    0 1px 2px rgba(139, 14, 31, 0.4),
    0 4px 12px rgba(200, 16, 46, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--c-primary-dark) 0%, #6E0B19 100%);
  box-shadow:
    0 2px 4px rgba(139, 14, 31, 0.5),
    0 8px 20px rgba(200, 16, 46, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(139, 14, 31, 0.4),
    inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .btn-primary { transition: none; }
}

.btn-ghost {
  background: transparent;
  color: var(--c-text-primary);
  border: 2px solid var(--c-border);
  font-weight: 500;
}
.btn-ghost:hover { border-color: var(--c-text-primary); }

/* ─── Brand mark ─── */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--c-text-primary);
}
.brand-mark .eagle {
  display: inline-block;
  width: 32px;
  height: 32px;
  /* Single soft drop-shadow on the heraldic eagle. Multi-layer shadows
     render messy on the eagle's complex outline (each internal cutout
     gets its own shadow), so we keep this minimal. */
  filter: drop-shadow(0 1px 2px rgba(26,26,26,0.12));
}
.brand-mark .wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--c-text-primary);
  line-height: 1;
}

/* ─── Hero block (landing page) ─── */
.hero {
  position: relative;
  padding: 96px 24px 128px;
  max-width: 1100px;
  margin: 24px auto 0;
  overflow: hidden;
  /* Stronger gradient depth: cream lifting to faint sky. */
  background: linear-gradient(180deg, #FFFFFF 0%, var(--c-bg) 50%, var(--c-sky-soft) 100%);
  border: 1px solid var(--c-border);
  border-radius: 24px;
  box-shadow: var(--shadow-deep), var(--bevel-top);
}
.hero-headline {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--c-text-primary);
  max-width: 22ch;
}
.hero-sub {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.45;
  color: var(--c-text-muted);
  max-width: 38ch;
}
.hero-cta-row {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
}
.hero-secondary-link {
  color: var(--c-sky);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.hero-secondary-link:hover { color: var(--c-sky-dark); }

/* Alps silhouette at the bottom of the hero. Sits behind text via
   negative z-index plus low opacity. Disappears on mobile to save
   bandwidth. */
.alps-ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  color: var(--c-granite);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 640px) {
  .alps-ridge { display: none; }
}
.hero > * { position: relative; z-index: 1; }

/* ─── Floating eagle: dynamic corner element on the hero.
   Wing-flap motion via scaleX (wings spread/tuck) combined with a
   small vertical lift on the down-beat. Slower 4.5s cycle so each
   wing-beat reads as deliberate rather than nervous. The canonical
   Shqiponja already shows open beaks in heraldic calling pose; the
   bigger size, full opacity and stronger shadow give it presence.
   Honors prefers-reduced-motion by freezing in place. ─── */
.eagle-corner {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 180px;
  height: 180px;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
  transform-origin: 50% 60%;  /* pivot near the body, not the head */
  animation: eagle-wings 4.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(61, 107, 170, 0.28))
          drop-shadow(0 2px 4px rgba(26, 26, 26, 0.10));
}

/* Wing-flap cycle.
     0% — neutral, wings spread
    30% — wings push DOWN (spread wider, body squashed vertically),
          slight lift (the down-beat lifts the bird)
    55% — wings recover UP (tucked narrower, body stretches), body
          drifts back down slightly
   100% — back to neutral */
@keyframes eagle-wings {
  0%, 100% { transform: scale(1, 1)        translateY(0); }
  30%      { transform: scale(1.06, 0.94)  translateY(-10px); }
  55%      { transform: scale(0.95, 1.05)  translateY(-2px); }
}

/* Reduced-motion floor. Eagle stays in its rest position. */
@media (prefers-reduced-motion: reduce) {
  .eagle-corner { animation: none; }
}

/* Mobile: smaller eagle, tighter offset. Animation kept (cheap; one
   element, GPU-composited transform) but the size drop saves bandwidth
   and visual weight on 360px viewports. */
@media (max-width: 640px) {
  .eagle-corner {
    width: 88px;
    height: 88px;
    top: 16px;
    right: 16px;
  }
}

/* ─── Feature cards (landing page) ─── */
.feature-card {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--c-bg) 100%);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-lift), var(--bevel-top);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover {
  /* Honor prefers-reduced-motion below — this transitions opt-out. */
  transform: translateY(-2px);
  box-shadow: var(--shadow-deep), var(--bevel-top);
}
@media (prefers-reduced-motion: reduce) {
  .feature-card { transition: none; }
  .feature-card:hover {
    transform: none;
    box-shadow: var(--shadow-lift), var(--bevel-top);
  }
}
.feature-card .icon {
  width: 36px;
  height: 36px;
  color: var(--c-accent);
  margin-bottom: 12px;
}
.feature-card h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--c-text-primary);
}
.feature-card p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text-muted);
}

/* ─── /about watermark ─── */
.about-watermark {
  position: absolute;
  right: -80px;
  top: 40px;
  width: 440px;
  height: 480px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  filter: blur(0.5px);  /* very soft edge — sits further back */
}
@media (max-width: 768px) {
  .about-watermark { width: 280px; height: 308px; right: -100px; top: 80px; opacity: 0.08; }
}

/* ─── Pills used on translator linguistic-notes panel ─── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
}

/* ─── /benchmark hero score card ─── */
.bench-score-card {
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--c-bg) 100%);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 32px 24px;
  gap: 16px;
  box-shadow: var(--shadow-lift), var(--bevel-top);
}
.bench-score-card .side { flex: 1; text-align: center; }
.bench-score-card .label {
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.bench-score-card .numeral {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1;
  color: var(--c-text-primary);
  margin-top: 8px;
}
.bench-score-card .denominator {
  font-size: 18px;
  color: var(--c-text-muted);
}
.bench-score-card .ours .numeral { color: var(--c-primary); }
.bench-score-card .divider {
  width: 1px;
  background: var(--c-accent);
  opacity: 0.6;
  margin: 8px 0;
}
@media (max-width: 640px) {
  .bench-score-card { flex-direction: column; }
  .bench-score-card .divider { width: auto; height: 1px; }
}

/* ─── Tabular per-category breakdown on /benchmark ─── */
.bench-cat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.bench-cat-table thead th {
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
}
.bench-cat-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}
.bench-cat-table tbody tr:nth-child(even) td { background: var(--c-snow); }
.bench-cat-table .pass-rate { font-variant-numeric: tabular-nums; }
.bench-cat-table .delta-win  { color: var(--c-success); font-weight: 600; }
.bench-cat-table .delta-loss { color: var(--c-text-muted); }

/* ─── Footer ─── */
.brand-footer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-text-muted);
}

/* ─── Filter buttons on /benchmark ─── */
.bench-filter.is-active {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

/* ─── Native <select> + <option> readability.
   Safari iOS and Chrome Android render <option> against the page's
   color-scheme — on dark-mode systems with the default "light dark"
   color-scheme meta, options can appear with dark background and dark
   text. Force light surface + dark text explicitly. ─── */
select.brand-select,
select.brand-select option,
select#dialect-select,
select#dialect-select option {
  background-color: var(--c-bg-elevated);
  color: var(--c-text-primary);
}

/* ─── /translate one-tap direction toggle ───
   Three big segmented buttons. One tap sets the whole translation
   direction. Designed for elderly users on small phones — large tap
   targets (56px min), high-contrast active state, Albanian-first
   labels with English underneath. Stacks vertically on narrow screens
   so each button is full-width and unmissable. */
.lang-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.lang-toggle-btn {
  flex: 1 1 0;
  min-height: 60px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-bg-elevated);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.1s ease;
}
.lang-toggle-btn .lt-primary {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-primary);
  line-height: 1.15;
}
.lang-toggle-btn .lt-secondary {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text-muted);
  letter-spacing: 0.02em;
}
.lang-toggle-btn:hover:not(.is-active) {
  border-color: var(--c-text-primary);
}
.lang-toggle-btn:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}
.lang-toggle-btn.is-active {
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  border-color: var(--c-primary-dark);
  box-shadow: 0 2px 6px rgba(200,16,46,0.3),
              inset 0 1px 0 rgba(255,255,255,0.18);
}
.lang-toggle-btn.is-active .lt-primary { color: #FFFFFF; }
.lang-toggle-btn.is-active .lt-secondary { color: rgba(255,255,255,0.85); }
.lang-toggle-btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .lang-toggle-btn { transition: none; }
  .lang-toggle-btn:active { transform: none; }
}
/* Narrow screens: stack the three buttons full-width so each one is a
   big, unmissable tap target. This is the elderly-mobile fix. */
@media (max-width: 640px) {
  .lang-toggle { flex-direction: column; }
  .lang-toggle-btn { width: 100%; min-height: 56px; }
}

/* ─── Nav (Albanian-primary, English secondary) ─── */
.nav-link-bilingual {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  padding: 6px 10px;
}
.nav-link-bilingual .primary {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--c-text-primary);
}
.nav-link-bilingual .secondary {
  font-size: 10px;
  font-weight: 500;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  margin-top: 1px;
}
.nav-link-bilingual:hover .primary { color: var(--c-primary); }

/* 360px: drop the English secondary line on mobile. Albanian speakers
   are the primary audience on mobile per design direction. */
@media (max-width: 640px) {
  .nav-link-bilingual .secondary { display: none; }
  .nav-link-bilingual .primary   { font-size: 14px; }
  .nav-link-bilingual { padding: 6px 8px; }
}

/* ─── Hero feature-card Albanian subtitles ─── */
.feature-card .sq-sub {
  display: block;
  margin-top: 4px;
  font-style: italic;
  font-size: 14px;
  color: var(--c-text-muted);
  line-height: 1.4;
}

/* ─── Voice mic button on /translate.
   Hidden by default (server doesn't know if browser supports MediaRecorder
   yet); app.js reveals it on feature-detection. ─── */
.btn-mic {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-bg-elevated);
  color: var(--c-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-mic:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-mic:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}
.btn-mic[hidden] { display: none; }

/* Recording state: red background + pulse on the icon so it's
   unmistakable that the mic is hot. Pulse is GPU-cheap (transform-
   based) and disabled by prefers-reduced-motion. */
.btn-mic.is-recording {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #FFFFFF;
}
.btn-mic.is-recording svg {
  animation: mic-pulse 1.4s ease-in-out infinite;
}
.btn-mic.is-busy {
  background: var(--c-bg);
  color: var(--c-text-muted);
  cursor: wait;
}
/* Speaking (text-to-speech playback) state: sky blue rather than the
   red recording state — playback is calm, recording is hot. */
.btn-mic.is-speaking {
  background: var(--c-sky);
  border-color: var(--c-sky);
  color: #FFFFFF;
}
.btn-mic.is-speaking svg {
  animation: mic-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn-mic.is-speaking svg { animation: none; }
}
@keyframes mic-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-mic.is-recording svg { animation: none; }
}

/* Tiny status line that surfaces voice errors / "Transcribing..." */
.voice-status {
  font-size: 12px;
  color: var(--c-text-muted);
  margin-top: 4px;
  min-height: 16px;
}
.voice-status.is-error { color: var(--c-error); }

/* ─── Language switcher (privacy + terms only) ─── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  font-size: 14px;
}
.lang-switch a {
  color: var(--c-text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--c-border);
  background: var(--c-bg-elevated);
}
.lang-switch a:first-child  { border-radius: 6px 0 0 6px; border-right: none; }
.lang-switch a:last-child   { border-radius: 0 6px 6px 0; }
.lang-switch a.active {
  color: var(--c-bg-elevated);
  background: var(--c-text-primary);
  border-color: var(--c-text-primary);
  font-weight: 600;
}
.lang-switch a:hover:not(.active) {
  color: var(--c-text-primary);
  border-color: var(--c-text-primary);
}

/* ─── PWA install CTA + modal ────────────────────────────────────────
   The button stays hidden until pwa.js detects the browser is
   installable (beforeinstallprompt) or the user is on iOS Safari.
   We pair the Albanian label with a smaller English secondary so
   bilingual households (parents + kids) both find it readable.
*/
.btn-install {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1.25rem;
  min-height: 56px;
  border-radius: 0.75rem;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--c-bg) 100%);
  color: var(--c-text-primary);
  border: 1px solid var(--c-border);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-card), var(--bevel-top);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-install:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-deep), var(--bevel-top);
  border-color: var(--c-text-primary);
}
.btn-install:active { transform: translateY(0); }
.btn-install-icon {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-primary);
  display: inline-flex;
}
.btn-install-text { display: inline-flex; flex-direction: column; line-height: 1.2; text-align: left; }
.btn-install-text .primary { font-weight: 700; }
.btn-install-text .secondary { font-weight: 400; font-size: 0.8rem; color: var(--c-text-muted); }

/* Footer install link — looks like the other footer links but styled as
   a button under the hood. Hidden by default; pwa.js reveals it. */
.footer-install-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-install-link:hover { color: var(--c-primary); }

/* Modal: full-screen overlay on mobile, centered card on desktop. */
.install-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(26, 26, 26, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
}
@media (min-width: 640px) {
  .install-modal {
    align-items: center;
    padding: 1.5rem;
  }
}
.install-modal[hidden] { display: none; }

.install-modal-inner {
  background: var(--c-bg-elevated);
  color: var(--c-text-primary);
  border-radius: 1rem 1rem 0 0;
  padding: 1.5rem;
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-deep);
}
@media (min-width: 640px) {
  .install-modal-inner { border-radius: 1rem; }
}

.install-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--c-text-muted);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}
.install-modal-close:hover { color: var(--c-text-primary); }

.install-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  padding-right: 2rem;
}
.install-modal-title .block { display: block; }

.install-modal-lede {
  margin: 0 0 1.25rem 0;
  line-height: 1.5;
}

.install-modal-platform {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-border);
}
.install-modal-platform:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.install-modal-step-title {
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
}
.install-modal-steps {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.install-modal-steps li { margin-bottom: 0.5rem; }
.install-modal-steps li:last-child { margin-bottom: 0; }

.install-modal-done {
  margin-top: 1.25rem;
  width: 100%;
}

/* ─── Vargje / verses section ───────────────────────────────────────
   Serif-forward typography — these are literary texts, not UI strings.
   Albanian quote dominates, English translation is recessive (lighter,
   italic, smaller). Attribution is small caps. */
.saying-card,
.saying-card-static {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-primary);
  border-radius: 0.75rem;
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-card), var(--bevel-top);
  transition: opacity 600ms ease;
}
@media (min-width: 640px) {
  .saying-card,
  .saying-card-static { padding: 2.5rem 2.25rem; }
}
.saying-card.is-fading {
  animation: saying-fade-in 600ms ease;
}
@keyframes saying-fade-in {
  from { opacity: 0.35; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .saying-card.is-fading { animation: none; }
}

.saying-quote-sq {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--c-text-primary);
  font-weight: 500;
  margin: 0;
}
@media (min-width: 640px) {
  .saying-quote-sq { font-size: 1.5rem; }
}
.saying-quote-en {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-text-muted);
  font-style: italic;
  margin: 1rem 0 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--c-border);
}
@media (min-width: 640px) {
  .saying-quote-en { font-size: 1.05rem; }
}
.saying-line {
  display: block;
}

.saying-attribution {
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--c-border);
  font-size: 0.875rem;
}
.saying-author {
  font-style: normal;
  font-weight: 600;
  color: var(--c-text-primary);
  letter-spacing: 0.01em;
}
.saying-work {
  font-size: 0.875rem;
}
.saying-dates {
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.saying-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.saying-next {
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--c-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  transition: color 150ms ease, border-color 150ms ease;
}
.saying-next:hover {
  color: var(--c-text-primary);
  border-color: var(--c-text-primary);
}
.saying-more {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.saying-more:hover { color: var(--c-primary); }

.saying-translator-note {
  font-size: 0.7rem;
  line-height: 1.5;
}

/* ─── Audience selector — relational translation UI ─────────────────
   The chip-style summary + collapsible panel. Audience profiles live
   in localStorage; the active one travels with every translate request.
*/
.audience-panel {
  margin: 0 auto;
  max-width: 56rem;
  padding: 0 0.25rem;
}
.audience-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  color: var(--c-text-muted);
}
.audience-summary::-webkit-details-marker { display: none; }
.audience-label { font-weight: 500; }
.audience-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: 1rem;
  font-size: 0.8rem;
  color: var(--c-text-primary);
}
.audience-chip.is-default { color: var(--c-text-muted); }
.audience-chip-name { font-weight: 600; }
.audience-chip-meta { font-weight: 400; color: var(--c-text-muted); font-size: 0.72rem; }
.audience-summary-hint {
  font-size: 0.72rem;
  color: var(--c-text-muted);
  margin-left: 0.25rem;
}

.audience-body {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: 0.625rem;
}

.audience-saved-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--c-border);
  font-size: 0.78rem;
}
.audience-saved-label { color: var(--c-text-muted); font-weight: 500; }
.audience-saved-chips { display: contents; }
.audience-saved-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 0.5rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color .12s ease;
}
.audience-saved-chip:hover { border-color: var(--c-primary); }
.audience-saved-chip-remove {
  background: none; border: none; padding: 0 0 0 0.15rem;
  color: var(--c-text-muted); cursor: pointer; font-size: 0.85rem;
}
.audience-saved-chip-remove:hover { color: var(--c-primary); }

.audience-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.4rem;
}
.audience-preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0.55rem 0.7rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
}
.audience-preset:hover {
  border-color: var(--c-primary);
  transform: translateY(-1px);
}
.audience-preset.is-active {
  border-color: var(--c-primary);
  background: var(--c-bg-elevated);
}
.ap-name { font-weight: 600; font-size: 0.85rem; }
.ap-meta { font-size: 0.72rem; color: var(--c-text-muted); margin-top: 0.1rem; }

.audience-custom-form {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-border);
}
.audience-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.audience-form-row label {
  display: flex; flex-direction: column;
  font-size: 0.75rem; color: var(--c-text-muted);
  gap: 0.25rem;
}
.audience-form-row input,
.audience-form-row select,
.audience-form-row textarea {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 0.4rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  color: var(--c-text-primary);
  font-family: inherit;
}
.audience-form-actions {
  display: flex; align-items: center; gap: 0.75rem;
}
@media (max-width: 640px) {
  .audience-form-row { grid-template-columns: 1fr; }
}

/* ─── /biseda — interpreter mode ────────────────────────────────────
   Push-to-talk two-card stage + animated mic + waveform meter +
   transcript. Designed to feel like a phone call, not a form.
*/

.biseda-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem auto 0;
  padding: 0.6rem 0.9rem;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: 0.6rem;
  font-size: 0.82rem;
}
.biseda-audience, .biseda-quota { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.biseda-meta-label { color: var(--c-text-muted); font-weight: 500; }
.biseda-meta-muted { color: var(--c-text-muted); }
.biseda-meta-link {
  color: var(--c-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 0.72rem;
}
.biseda-meta-link:hover { color: var(--c-primary); }
.biseda-chip {
  display: inline-flex; align-items: center;
  padding: 0.18rem 0.55rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 1rem;
  font-size: 0.78rem;
}
.biseda-chip.is-default { color: var(--c-text-muted); }
.biseda-chip-name { font-weight: 600; }

/* ── The two-card stage ── */
.biseda-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}
@media (max-width: 620px) {
  .biseda-stage { grid-template-columns: 1fr; }
}

.biseda-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  background: var(--c-bg-elevated);
  border: 1.5px solid var(--c-border);
  border-radius: 1rem;
  padding: 1.1rem 0.75rem 1.25rem;
  box-shadow: var(--shadow-card), var(--bevel-top);
  overflow: hidden;
  transition: border-color .25s ease, transform .15s ease, box-shadow .25s ease;
}
.biseda-card.is-recording {
  border-color: #c4845f;
  box-shadow: 0 0 0 4px rgba(196,132,95,0.12), var(--shadow-deep);
}
.biseda-card.is-translating {
  border-color: var(--c-primary);
}
.biseda-card.is-speaking {
  border-color: #6fbf6f;
  background: linear-gradient(180deg, rgba(111,191,111,0.06), var(--c-bg-elevated));
  animation: biseda-card-glow 2.2s ease-in-out infinite;
}
.biseda-card.is-incoming { opacity: 0.55; }

@keyframes biseda-card-glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(111,191,111,0.08), var(--shadow-card); }
  50%      { box-shadow: 0 0 0 10px rgba(111,191,111,0.18), var(--shadow-deep); }
}

.biseda-card-head {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.6rem;
}
.biseda-card-icon { font-size: 1.4rem; line-height: 1; }
.biseda-card-titles { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.biseda-card-name { font-weight: 700; font-size: 0.95rem; }
.biseda-card-lang { font-size: 0.72rem; color: var(--c-text-muted); }
.biseda-swap-btn {
  background: none; border: 1px solid var(--c-border); border-radius: 0.4rem;
  padding: 0.15rem 0.4rem; font-size: 0.85rem; cursor: pointer; color: var(--c-text-muted);
}
.biseda-swap-btn:hover { color: var(--c-text-primary); border-color: var(--c-text-primary); }

/* ── The mic button ── */
.biseda-mic {
  position: relative;
  width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--c-bg) 100%);
  border: 2px solid var(--c-border);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0.5rem 0 0.6rem;
  transition: transform .12s ease, border-color .15s ease, background .25s ease;
  touch-action: none; /* avoid scroll while holding on mobile */
  user-select: none;
}
.biseda-mic:hover { transform: scale(1.03); border-color: var(--c-primary); }
.biseda-mic:active { transform: scale(0.96); }
.biseda-mic-icon { font-size: 2rem; pointer-events: none; }
.biseda-mic-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(196,132,95,0.55);
  pointer-events: none;
  opacity: 0; transform: scale(1);
}
.biseda-card.is-recording .biseda-mic {
  background: linear-gradient(180deg, #ffd0bd, #c4845f);
  border-color: #c4845f;
}
.biseda-card.is-recording .biseda-mic-pulse {
  animation: biseda-pulse 1.6s ease-out infinite;
}
.biseda-card.is-recording .biseda-mic-pulse.delay {
  animation-delay: 0.8s;
}
@keyframes biseda-pulse {
  0%   { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.7); }
}

.biseda-mic-hint {
  font-size: 0.78rem;
  color: var(--c-text-muted);
  min-height: 1.2em;
  text-align: center;
}

/* ── The audio meter (10 bars) ── */
.biseda-meter {
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  height: 38px; margin-top: 0.3rem;
}
.biseda-meter span {
  display: inline-block; width: 4px; height: 4px;
  background: var(--c-text-muted);
  border-radius: 2px;
  opacity: 0.5;
  transition: height .08s linear, opacity .15s linear, background .2s;
}
.biseda-card.is-recording .biseda-meter span {
  background: #c4845f; opacity: 0.95;
}
.biseda-card.is-speaking .biseda-meter span {
  background: #6fbf6f; opacity: 0.9;
}

.biseda-kbd-hint {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.74rem;
  color: var(--c-text-muted);
}
.biseda-kbd-hint kbd {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.72rem;
  padding: 0 0.35rem;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-bottom-width: 2px;
  border-radius: 0.3rem;
}

/* ── Transcript ── */
.biseda-transcript-section { margin-top: 1.75rem; }
.biseda-transcript-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.biseda-transcript-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.1rem; font-weight: 600;
}
.biseda-transcript-actions { display: inline-flex; gap: 0.45rem; }
.biseda-action-btn {
  background: none; border: 1px solid var(--c-border); border-radius: 0.4rem;
  padding: 0.25rem 0.65rem; font-size: 0.78rem; cursor: pointer;
  color: var(--c-text-muted);
}
.biseda-action-btn:hover { color: var(--c-text-primary); border-color: var(--c-text-primary); }

/* "Ftoji familjen" stands out from the muted Save / Clear pair. It's
   the share-loop CTA; pulling it visually forward earns more taps. */
#biseda-invite-btn {
  color: var(--c-primary);
  border-color: var(--c-primary);
  font-weight: 600;
}
#biseda-invite-btn:hover { background: var(--c-primary); color: #FFFFFF; }

/* Welcome banner shown when receiver lands via /biseda?from=invite. */
.biseda-invite-welcome {
  margin: 1rem 0 1.25rem;
  padding: 0.85rem 1rem;
  background: #ECFDF5;
  border: 1px solid #6EE7B7;
  border-radius: 0.6rem;
  color: #065F46;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Inline toast for the clipboard-fallback path. Sits below the
   transcript so it doesn't overlap mic controls. */
.biseda-invite-toast {
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.8rem;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: 0.5rem;
  font-size: 0.88rem;
  color: var(--c-text-primary);
  text-align: center;
}

/* First-visit onboarding tip. Lives above the mic UI on initial
   load, gives the user a scripted line to read aloud to whoever's
   on the other end of the call. Dismissed once, never seen again
   (per-device localStorage). Visual treatment: warm cream
   background, soft border, the script set in italic to suggest
   "this is what you say." */
.biseda-onboard {
  margin: 1.25rem 0 0.75rem;
  padding: 0.85rem 1.05rem;
  background: #FFFDF6;
  border: 1px solid #F0E6C5;
  border-radius: 0.6rem;
}
.biseda-onboard-head {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--c-text-primary);
  margin-bottom: 0.3rem;
}
.biseda-onboard-body {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--c-text-primary);
}
.biseda-onboard-script {
  font-style: italic;
  color: var(--c-primary-dark);
}
.biseda-onboard-dismiss {
  margin-top: 0.6rem;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 0.4rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
  color: var(--c-text-primary);
  cursor: pointer;
}
.biseda-onboard-dismiss:hover {
  border-color: var(--c-text-primary);
  background: var(--c-bg-elevated);
}

/* Per-turn correction UI. The toggle is intentionally low-weight
   (looks like a small text link) so it does not dominate the turn
   card visually. The expanded form gets a soft background to set it
   apart from the surrounding transcript without shouting. */
.biseda-turn-correction { margin-top: 0.6rem; }
.biseda-correct-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  color: var(--c-text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.biseda-correct-toggle:hover { color: var(--c-primary); }
.biseda-correct-toggle.is-submitted {
  color: var(--c-success, #2D4A3E);
  text-decoration: none;
  cursor: default;
  font-weight: 600;
}
.biseda-correct-form {
  margin-top: 0.55rem;
  padding: 0.7rem 0.85rem;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.biseda-correct-field { display: flex; flex-direction: column; gap: 0.3rem; }
.biseda-correct-label {
  font-size: 0.78rem;
  color: var(--c-text-muted);
  line-height: 1.3;
}
.biseda-correct-field textarea {
  font: inherit;
  font-size: 0.92rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--c-border);
  border-radius: 0.4rem;
  background: #FFFFFF;
  color: var(--c-text-primary);
  resize: vertical;
  min-height: 2.4em;
}
.biseda-correct-field textarea:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 1px;
  border-color: var(--c-primary);
}
.biseda-correct-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.biseda-correct-submit {
  background: var(--c-primary);
  color: #FFFFFF;
  border: none;
  border-radius: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.biseda-correct-submit:hover { background: var(--c-primary-dark); }
.biseda-correct-cancel {
  background: none;
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  border-radius: 0.4rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.biseda-correct-status {
  font-size: 0.78rem;
  color: var(--c-text-muted);
  margin-left: auto;
}

.biseda-transcript {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: 0.75rem;
  padding: 0.85rem;
  min-height: 6rem;
  max-height: 26rem;
  overflow-y: auto;
}
.biseda-transcript-empty { color: var(--c-text-muted); font-size: 0.85rem; text-align: center; padding: 1.5rem 0.5rem; }

.biseda-turn {
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-left: 3px solid transparent;
  border-radius: 0.55rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.biseda-turn.is-in { opacity: 1; transform: translateY(0); }
.biseda-turn.is-me   { border-left-color: var(--c-primary); }
.biseda-turn.is-them { border-left-color: #6fbf6f; }
.biseda-turn-head {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-size: 0.72rem;
  color: var(--c-text-muted);
  margin-bottom: 0.3rem;
}
.biseda-turn-side { font-weight: 700; color: var(--c-text-primary); }
.biseda-turn-meta { flex: 1; }
.biseda-turn-replay {
  background: none; border: none; padding: 0 0.25rem; font-size: 1rem;
  cursor: pointer; color: var(--c-text-muted);
}
.biseda-turn-replay:hover { color: var(--c-primary); }
.biseda-turn-original {
  font-size: 0.86rem; color: var(--c-text-primary); margin: 0;
  font-style: italic;
}
.biseda-turn-translation {
  font-size: 0.92rem; color: var(--c-text-primary); margin: 0.2rem 0 0;
  font-weight: 500;
}

.biseda-error {
  margin-top: 1rem;
  padding: 0.6rem 0.9rem;
  background: rgba(215,115,115,0.10);
  border: 1px solid rgba(215,115,115,0.35);
  color: #b22; border-radius: 0.5rem; font-size: 0.85rem;
}

.biseda-privacy {
  margin-top: 1.5rem;
  font-size: 0.72rem;
  color: var(--c-text-muted);
  text-align: center;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .biseda-card.is-recording .biseda-mic-pulse { animation: none; }
  .biseda-card.is-speaking { animation: none; }
  .biseda-turn { transition: none; opacity: 1; transform: none; }
}

/* ─── Redesigned site header — services as top-level nav ───────────
   Each major surface (Përkthe / Biseda / Dokumente / Certifikuar /
   Vargje) gets its own top-nav slot. Secondary pages (About,
   Benchmark, Privacy, Terms) move to the footer. Mobile collapses
   into a hamburger.
*/
.site-header {
  border-bottom: 1px solid var(--c-border);
  background: var(--c-card);
  position: relative;
  z-index: 50;
}
.site-header-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px) { .site-header-inner { padding: 0.85rem 1.5rem; } }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.nav-service {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem 0.7rem;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 1.1;
  transition: background-color .15s ease, color .15s ease;
  text-decoration: none;
  color: var(--c-text-primary);
}
.nav-service .ns-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}
.nav-service .ns-en {
  font-size: 0.68rem;
  color: var(--c-text-muted);
  margin-top: 1px;
  letter-spacing: 0.02em;
}
.nav-service:hover {
  background: var(--c-bg-elevated);
}
.nav-service:hover .ns-name { color: var(--c-primary); }
.nav-service.is-active {
  background: var(--c-bg-elevated);
  position: relative;
}
.nav-service.is-active::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.15rem;
  height: 2px;
  background: var(--c-primary);
  border-radius: 1px;
}

/* ── Mobile toggle ── */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: 0.45rem;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.nav-toggle:hover { border-color: var(--c-primary); }
.nav-toggle-bars {
  display: inline-flex; flex-direction: column;
  width: 18px; height: 14px;
  justify-content: space-between;
}
.nav-toggle-bars span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--c-text-primary);
  border-radius: 1px;
  transition: transform .25s ease, opacity .15s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ── Mobile layout: hamburger + drop-down panel ── */
@media (max-width: 719px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Explicit opaque background. The CSS-var fallback (#FFFFFF) is
       there as belt-and-suspenders in case --c-card ever gets
       redefined to a transparent value — without it, page content
       bleeds through the open menu, which was the original bug. */
    background: var(--c-card, #FFFFFF);
    /* Sits above .site-header's own z-index (50). The header creates
       a stacking context, but explicit z-index here means the open
       panel will paint above any sibling that grabs its own context. */
    z-index: 60;
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 8px 24px -10px rgba(0,0,0,0.18);
    padding: 0.5rem 0.75rem 0.8rem;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .primary-nav.is-open {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }
  /* Backdrop scrim. When the menu opens, body.nav-open gets set by
     nav.js; this ::before pseudo on the open nav-panel projects a
     subtle dark overlay over the rest of the viewport, so the page
     content underneath visually recedes and the menu reads cleanly
     even if the open menu is shorter than the viewport. Clickable —
     tapping the scrim is the same as tapping outside the menu, which
     should close it (handled by nav.js via the document click). */
  .primary-nav.is-open::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(26, 26, 26, 0.28);
    z-index: -1;
    /* Don't intercept touches — the menu links above need to be
       tappable; the scrim is purely visual. Tapping outside the menu
       to dismiss it can be wired in nav.js as a follow-up. */
    pointer-events: none;
  }
  .nav-service {
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.5rem;
    text-align: left;
  }
  .nav-service .ns-name { font-size: 1.05rem; }
  .nav-service .ns-en { margin-top: 0; font-size: 0.78rem; }
  .nav-service.is-active::after {
    left: 0.4rem; right: auto; top: 0.7rem; bottom: 0.7rem;
    width: 2px; height: auto;
  }
  body.nav-open { overflow: hidden; }
}

/* The old .nav-link-bilingual is gone from base.html, but other places
   may still use the class — keep the rule intact (no harm). */

/* ─────────────────────────────────────────────────────────────────
   Certified-translation programmatic landing pages
   (one /certified/translation/<slug> page per document type).
   ───────────────────────────────────────────────────────────────── */
.cert-doc-pricing {
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.15rem;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.cert-doc-price-block { display: flex; flex-direction: column; }
.cert-doc-price-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
}
.cert-doc-price-value {
  margin-top: 0.15rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--c-text-primary);
}
/* Used in the "Includes" column on flat-fee documents where the value
   is text (e.g. "Diploma + full transcript") rather than a price. */
.cert-doc-price-value-text {
  margin-top: 0.15rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--c-text-primary);
  line-height: 1.25;
}
.cert-doc-price-sub {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--c-text-muted);
  line-height: 1.3;
}
.cert-doc-page-note {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--c-text-muted);
  line-height: 1.45;
  padding: 0.55rem 0.85rem;
  background: var(--c-bg);
  border-left: 2px solid var(--c-border);
  border-radius: 0 0.4rem 0.4rem 0;
}
.cert-doc-cta {
  margin-left: auto;
  padding: 0.75rem 1.4rem;
  font-weight: 600;
}
@media (max-width: 600px) {
  .cert-doc-cta { margin-left: 0; width: 100%; text-align: center; }
}
.cert-doc-section { margin-top: 2.25rem; }
.cert-doc-h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--c-text-primary);
}
.cert-doc-checklist {
  margin-top: 0.65rem;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.cert-doc-checklist li {
  padding-left: 1.5rem;
  position: relative;
}
.cert-doc-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-primary);
  font-weight: 700;
}
.cert-doc-checklist-muted li { color: var(--c-text-muted); }
.cert-doc-checklist-muted li::before { color: var(--c-text-muted); }
.cert-doc-certstatement {
  margin: 0.85rem 0 0;
  padding: 0.9rem 1.05rem;
  background: var(--c-bg-elevated);
  border-left: 3px solid var(--c-primary);
  border-radius: 0.4rem;
  font-style: italic;
  color: var(--c-text-primary);
}
.cert-doc-apostille {
  padding: 0.9rem 1.05rem;
  background: #FFFDF6;
  border: 1px solid #F0E6C5;
  border-radius: 0.6rem;
}
.cert-doc-apostille .cert-doc-h2 { font-size: 1.1rem; }
.cert-doc-bottom-cta {
  margin-top: 2.5rem;
  padding: 1.25rem 1.35rem;
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border);
  border-radius: 0.7rem;
}


/* ─────────────────────────────────────────────────────────────────
   Offline state
   pwa.js sets `body.is-offline` when navigator.onLine flips false.
   Pages opt in by including a [data-offline-banner] element; this
   rule reveals it and hides its inverse (e.g. the live translate CTA
   on /translate, the mic buttons on /biseda). Banners are bilingual,
   compact, and accessible (role="status" set in markup).
   ───────────────────────────────────────────────────────────────── */

[data-offline-banner] {
  display: none;
  margin: 0.75rem 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  background: #FFF7ED;       /* warm amber-50 */
  border: 1px solid #FED7AA; /* amber-200 */
  color: #7C2D12;            /* amber-900 */
  font-size: 0.95rem;
  line-height: 1.45;
}
[data-offline-banner] .ob-sq { font-weight: 600; }
[data-offline-banner] .ob-en {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 0.15rem;
}
body.is-offline [data-offline-banner] { display: block; }

/* ── /offline page layout ──────────────────────────────────────── */
.offline-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
}
@media (min-width: 640px) {
  .offline-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
.offline-card {
  border: 1px solid var(--c-border);
  border-radius: 0.8rem;
  background: var(--c-card);
  padding: 1rem 1.1rem 1.2rem;
}
.offline-card--works { border-color: #BBF7D0; }       /* green-200 */
.offline-card--needs-net { border-color: #FECACA; }   /* red-200 */
.offline-card-head { margin-bottom: 0.6rem; }
.offline-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.offline-badge--works { background: #DCFCE7; color: #166534; }       /* green */
.offline-badge--needs-net { background: #FEE2E2; color: #991B1B; }   /* red */
.offline-card-list { list-style: none; margin: 0; padding: 0; }
.offline-card-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--c-border);
}
.offline-card-list li:last-child { border-bottom: none; }
.offline-card-list a {
  text-decoration: none;
  color: var(--c-text-primary);
  display: block;
}
.offline-card-list a:hover strong { color: var(--c-primary); }
.offline-card-list strong {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
}
.offline-card-en {
  display: block;
  font-size: 0.82rem;
  color: var(--c-text-muted);
  margin-top: 0.1rem;
  line-height: 1.4;
}
.offline-retry {
  margin-top: 1.5rem;
  text-align: center;
}
.offline-footnote {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--c-text-muted);
}