/* Generated by scripts/build-css.py from base, layout, components, tips, redesign. Do not edit. */

/* ---- base.css ---- */
/* ===================================================================
   BASE — Design tokens, typography, resets
   Community page for Archive of Our Learning
   =================================================================== */

/* --- Custom Properties ------------------------------------------- */
:root {
  /* Palette — warm maroon from logo + cream */
  --accent: #8b1a2b;
  --accent-light: #a82640;
  --accent-pale: rgba(139, 26, 43, 0.07);
  --accent-pale2: rgba(139, 26, 43, 0.12);

  /* Surfaces — warm parchment */
  --bg: #faf7f2;
  --bg-alt: #f3ede4;
  --bg-card: #ffffff;

  /* Text hierarchy — warm browns */
  --text: #2a2118;
  --text-mid: #4d4339;
  --text-muted: #887b6e;
  --text-faint: #b3a898;

  /* Borders */
  --border: #e6dfd4;
  --border-light: #eee9e0;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;

  /* Layout */
  --container-max: 760px;
  /* Wide row for the nav band and the footer. It has to hold the Russian and
     Ukrainian nav labels plus the actions; at 960px they ran off the screen. */
  --container-wide: 1120px;
  --container-pad: clamp(1.25rem, 5vw, 2rem);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;

  /* Typography */
  --font-display: 'Fraunces', 'Lora', Georgia, serif;
  --font-body: 'Figtree', 'Inter', system-ui, sans-serif;
}

/* --- Font Faces -------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-var-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F;
}

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F;
}

/* --- Reset ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* So native controls, scrollbars and the canvas follow the theme */
  color-scheme: light dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-mid);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

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

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

/* --- Typography -------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.25;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

h4 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
}

p {
  max-width: 65ch;
  color: var(--text-mid);
}

/* --- Utility ----------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Focus ------------------------------------------------------- */

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

/* --- Selection --------------------------------------------------- */

::selection {
  background: var(--accent-pale2);
}

/* --- Reduced Motion ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- layout.css ---- */
/* ===================================================================
   LAYOUT — Container, navigation, sections, footer, responsive
   =================================================================== */

/* --- Skip Link --------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--container-pad);
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 6px 6px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* --- Container --------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --- Navigation -------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 2vw, 2rem);
  height: 3.5rem;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.nav-logo {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}

.nav-logo img {
  height: 28px;
  width: auto;
}

.nav-logo-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.nav-links a:hover {
  color: var(--text);
}

/* Right-hand actions: language switcher + hamburger */
.nav-actions {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
}

/* Language switcher */
.lang-switcher {
  display: flex;
  gap: 2px;
  background: var(--bg-alt);
  border-radius: 4px;
  padding: 2px;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 4px;
  transition: color var(--transition-fast),
              background var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Inner pages have no i18n runtime, so their switcher is a pair of links to
   the sibling page. Same chip, different element. */
a.lang-btn {
  text-decoration: none;
}

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

.lang-btn[aria-checked="true"],
.lang-btn[aria-current="page"] {
  background: var(--bg-card);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
}

/* On touch the nav controls have to be thumb-sized. On a mouse they don't,
   and blowing them up there turns the switcher into the loudest thing in the
   band — so the 44px floor is scoped to coarse pointers. */
@media (pointer: coarse) {
  .lang-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
  }
}

.nav-toggle .stroke {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

/* --- Sections ---------------------------------------------------- */

.section {
  padding-block: var(--space-xl);
}

.section-alt {
  background: var(--bg-alt);
}

.section-header {
  margin-bottom: var(--space-lg);
}

.section-header h2 {
  margin-bottom: var(--space-xs);
}

.section-header p {
  color: var(--text-muted);
}

/* --- Welcome / Intro --------------------------------------------- */

.welcome {
  padding-block: var(--space-xl) var(--space-lg);
}

.welcome-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.welcome-logo {
  flex-shrink: 0;
}

.welcome-logo img {
  width: 80px;
  height: 80px;
}

.welcome-text h1 {
  margin-bottom: var(--space-sm);
}

.welcome-text p {
  font-size: 1.05rem;
  line-height: 1.75;
}

.download-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-lg);
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast);
}

.store-btn svg {
  flex-shrink: 0;
  color: var(--accent);
  transition: color var(--transition-fast);
}

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

.store-btn:hover svg {
  color: #fff;
}

.store-btn--soon {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  position: relative;
}

.soon-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-pale);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}

.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
}

.action-link {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.action-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* --- Social band (above How-to-Use) ----------------------------- */

.section-social {
  padding-block: var(--space-lg);
}

/* --- Disclaimer (above How-to-Use) ------------------------------ */

.section-disclaimer {
  padding-block: var(--space-md) var(--space-lg);
}

.disclaimer-text {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-muted);
  font-style: italic;
  max-width: 65ch;
  margin: 0 auto;
  text-align: center;
  padding-inline: var(--space-md);
  border-left: 2px solid var(--border);
  border-right: 2px solid var(--border);
}

.social-band {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}

.social-band-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 500;
}

.social-band-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-mid);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background var(--transition-fast);
}

.social-chip svg {
  color: var(--accent);
  transition: color var(--transition-fast);
}

.social-chip:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.social-chip:hover svg {
  color: #fff;
}

/* --- Footer ------------------------------------------------------ */

.footer {
  background: var(--text);
  color: rgba(255, 255, 255, 0.65);
  padding-block: var(--space-xl);
}

/* The footer sits under the article column, so it shares its width. At the
   wide nav measure the brand and the link columns were separated by a third
   of a screen of empty red. */
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.footer-brand {
  max-width: 320px;
}

.footer-brand-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-xs);
}

.footer-brand p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 100%;
}

.footer-links {
  display: flex;
  gap: var(--space-lg);
}

.footer-col h4 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-sm);
}

.footer-col a {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding-block: 0.15rem;
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: #fff;
}

/* Social links — accent-coloured icons on dark footer */
.social-links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer-col .social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.7);
  padding-block: 0.2rem;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-col .social-link svg {
  flex-shrink: 0;
  color: var(--accent-light);
  transition: color var(--transition-fast);
}

.footer-col .social-link:hover {
  color: #fff;
}

.footer-col .social-link:hover svg {
  color: #fff;
}

.footer-bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Inner pages put "Back to home" here. Without this it inherits the global
   accent colour and lands maroon-on-maroon: invisible. */
.footer-bottom a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom .lang-switcher {
  background: rgba(255, 255, 255, 0.12);
}

.footer-bottom .lang-btn {
  color: rgba(255, 255, 255, 0.8);
}

.footer-bottom .lang-btn:hover {
  color: #fff;
}

.footer-bottom .lang-btn[aria-checked="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
}

/* --- Responsive: Nav ---------------------------------------------- */

/* The drawer takes over at 1100px, not 768px: in Russian and Ukrainian the six
   nav labels plus the actions need ~1043px, more than the 960px container, and
   the overflow pushed the theme toggle and the language switcher off-screen. */
@media (max-width: 1119px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    inset: 3.5rem 0 0 0;
    height: calc(100dvh - 3.5rem);
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    background: #ffffff;
    padding: var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: 999;
    overflow-y: auto;
  }

  .nav-links[data-open="true"] {
    transform: translateX(0);
  }

  .nav-links a {
    font-size: 1.1rem;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-light);
    width: 100%;
    white-space: normal;
    justify-content: flex-start;
  }
}

/* --- Responsive: Mobile ------------------------------------------ */

@media (max-width: 768px) {
  .welcome {
    padding-block: var(--space-lg) var(--space-md);
  }

  .welcome-inner {
    flex-direction: column;
    text-align: center;
  }

  .welcome-logo img {
    width: 64px;
    height: 64px;
  }

  .section {
    padding-block: var(--space-lg);
  }

  .footer-inner {
    flex-direction: column;
  }

  .footer-links {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Scroll Reveal Animation ------------------------------------- */

/* Reveal only activates after JS adds .reveal-ready to <html> */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- components.css ---- */
/* ===================================================================
   COMPONENTS — Guide steps, team cards, tester chips
   =================================================================== */

/* --- Guide Steps ------------------------------------------------- */

.guide-step {
  margin-bottom: var(--space-xl);
}

.guide-step:last-child {
  margin-bottom: 0;
}

.guide-step-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.guide-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-pale);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.guide-step-header h3 {
  font-size: 1.15rem;
}

.guide-step p {
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: var(--space-md);
  padding-left: calc(2rem + var(--space-md));
}

/* Screenshot placeholder (legacy) */
.screenshot-placeholder {
  margin-left: calc(2rem + var(--space-md));
  background: var(--bg-alt);
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.screenshot-placeholder .ph-icon {
  display: block;
  margin: 0 auto var(--space-sm);
  width: 32px;
  height: 32px;
  color: var(--text-faint);
}

.screenshot-placeholder img {
  max-width: 100%;
  border-radius: 8px;
}

/* --- Guide Full Link --------------------------------------------- */

/* Left-aligned with the rest of the page; only kudos keeps the archive's
   centred gesture. */
.guide-full-link {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--space-md);
}

.guide-full-link a {
  font-weight: 500;
  font-size: 1rem;
}

.guide-full-link .guide-en-link {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.guide-full-link .guide-en-link:hover {
  color: var(--accent);
}

/* --- About Block ------------------------------------------------- */

.about-content p {
  margin-bottom: var(--space-md);
  font-size: 1rem;
  line-height: 1.8;
}

.about-content p:last-child {
  margin-bottom: 0;
}

/* --- Team Groups ------------------------------------------------- */

.team-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* Cards keep their own height: stretching a two-name card to match a
     seven-name one leaves a block of empty paper inside it. */
  align-items: start;
  gap: var(--space-lg);
}

.team-group {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: var(--space-lg);
}

.team-group-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.team-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.team-list li {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  padding: var(--space-xs) 0;
}

.team-list li + li {
  border-top: 1px solid var(--border-light);
}

.team-role-inline {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: 0.3em;
}

/* --- Testers Chip Cloud ------------------------------------------ */

.testers-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.tester-chip {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--text-mid);
}

/* --- Testers Placeholder ----------------------------------------- */

.testers-placeholder {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  background: var(--bg-card);
  border: 2px dashed var(--border);
  border-radius: 8px;
}

.testers-placeholder p {
  margin-inline: auto;
  color: var(--text-muted);
}

.testers-placeholder .count {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-xs);
}

/* --- Responsive: Mobile ------------------------------------------ */

@media (max-width: 560px) {
  .guide-step p,
  .screenshot-placeholder {
    margin-left: 0;
    padding-left: 0;
  }

  .team-groups {
    grid-template-columns: 1fr;
  }
}

/* --- Supported languages (landing accordions) -------------------- */

.section-langs {
  background: var(--bg-alt);
}

.lang-accordions {
  max-width: var(--container-max);
  margin-inline: auto;
}

.lang-details {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: var(--space-sm);
  background: var(--bg-card);
  overflow: hidden;
}

.lang-details > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--space-md);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: background var(--transition-fast);
}

.lang-details > summary::-webkit-details-marker {
  display: none;
}

.lang-details > summary::after {
  content: "\25BE";
  margin-left: auto;
  color: var(--accent);
  font-size: 0.9rem;
  transition: transform var(--transition-fast);
}

.lang-details[open] > summary::after {
  transform: rotate(180deg);
}

.lang-details > summary:hover {
  background: var(--accent-pale);
}

.lang-count {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-pale);
  padding: 0.1rem 0.5rem;
  border-radius: 4px;
}

.lang-details[open] .lang-count {
  background: var(--bg-alt);
}

/* A read-only list, so it reads as one: names separated by commas, the way
   the archive lists tags. Boxed chips promised a filter that isn't there. */
.lang-details .lang-list {
  display: block;
  list-style: none;
  padding: 0 var(--space-md) var(--space-md);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--text-mid);
}

.lang-details .lang-list li {
  display: inline;
}

/* Plain inline comma plus a space: the space is the only break opportunity,
   so a comma can never wrap away from the name it belongs to. */
.lang-details .lang-list li:not(:last-child)::after {
  content: ", ";
}

/* The separator is punctuation, not part of the highlighted name */
.lang-details .lang-list li.lang-highlight::after {
  font-weight: 400;
  color: var(--text-mid);
}

.lang-details .lang-list li.lang-highlight {
  font-weight: 700;
  color: var(--accent);
}

.langs-note {
  max-width: var(--container-max);
  margin: var(--space-md) auto 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* --- APK note under welcome actions ------------------------------ */

.apk-note {
  margin-top: var(--space-md);
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 60ch;
}

.apk-download {
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.apk-download:hover {
  color: var(--accent-light);
}

.longread-link {
  margin-top: var(--space-sm);
}

.longread-link a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
}

.longread-link a:hover {
  color: var(--accent-light);
}

/* ---- tips.css ---- */
/* ===================================================================
   TIPS — Styles for the language-learning tips article
   =================================================================== */

/* Four key rules — numbered cards */
.tips-rules {
  list-style: none;
  counter-reset: tip-counter;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.tips-rules li {
  counter-increment: tip-counter;
  position: relative;
  padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 2.6rem);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.98rem;
  line-height: 1.65;
}

.tips-rules li::before {
  content: counter(tip-counter);
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-pale);
  color: var(--accent);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

.tips-rules li strong {
  display: block;
  color: var(--text);
  margin-bottom: 0.25rem;
  font-weight: 600;
}

/* --- Tips teaser on the landing --------------------------------- */

.section-tips {
  background: var(--bg-alt);
}

.tips-teaser {
  list-style: none;
  counter-reset: tip-counter;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.tips-teaser li {
  counter-increment: tip-counter;
  position: relative;
  padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 2.4rem);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.55;
}

.tips-teaser li::before {
  content: counter(tip-counter);
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-pale);
  color: var(--accent);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
}

.tips-teaser li strong {
  display: block;
  color: var(--text);
  margin-bottom: 0.2rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.tips-teaser li span {
  color: var(--text-mid);
}

.tips-full-link .tips-en-link {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.tips-full-link .tips-en-link:hover {
  color: var(--accent);
}

@media (max-width: 640px) {
  .tips-teaser {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/* --- Tips callout inside the guide pages ----------------------- */

.section-tips-callout {
  padding-block: var(--space-lg);
}

.tips-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--accent-pale);
  border: 1px solid var(--accent-pale2);
  border-radius: 8px;
}

.tips-callout-body {
  flex: 1;
  min-width: 0;
}

.tips-callout-body strong {
  display: block;
  font-family: var(--font-display);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.tips-callout-body p {
  margin: 0;
  color: var(--text-mid);
  font-size: 0.93rem;
  line-height: 1.55;
}

.tips-callout-link {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .tips-callout {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-md);
  }
}

/* Q&A sections — slightly tighter than guide */
.guide-content h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  letter-spacing: -0.01em;
}

/* Responsive */
@media (max-width: 640px) {
  .tips-rules li {
    padding: var(--space-md);
    padding-top: calc(var(--space-md) + 2.2rem);
  }

  .tips-rules li::before {
    top: var(--space-sm);
    left: var(--space-md);
  }
}

/* ---- redesign.css ---- */
/* ===================================================================
   REDESIGN — fandom-native restyle, loaded after the original CSS.

   Concept: the site dressed as an AO3 work page. Red site band,
   work-blurb hero with freeform tags and work stats, chapters instead
   of steps, an author's note, kudos at the end. Light + dark themes.
   =================================================================== */

/* --- Tokens -------------------------------------------------------- */

:root {
  /* The archive red */
  --accent: #990000;
  --accent-light: #b32d2d;
  --accent-pale: rgba(153, 0, 0, 0.07);
  --accent-pale2: rgba(153, 0, 0, 0.13);

  /* Word-highlight motif from the app */
  --learning: #b3261e;
  --learned: #2e7d4f;
  --learned-pale: rgba(46, 125, 79, 0.14);

  /* Paper */
  --bg: #faf6ee;
  --bg-alt: #f2ebdd;
  --bg-card: #fffdf8;

  --text: #2a2118;
  --text-mid: #4d4339;
  /* Both quiet greys carry real text (section subtitles, the stats note, the
     "last updated" line), so both clear 4.5:1 on --bg, --bg-alt and --bg-card. */
  --text-muted: #6b5f50;
  --text-faint: #75685a;

  --border: #e2d8c6;
  --border-light: #ece4d4;

  /* Tag pills */
  --tag-bg: #f0e9db;
  --tag-border: #ddd2bd;

  /* The band */
  --band: #990000;
  --band-text: #fff;

  --shadow-card: 0 1px 3px rgba(42, 33, 24, 0.08);
}

[data-theme="dark"] {
  --accent: #e06a5a;
  --accent-light: #eb8a7c;
  --accent-pale: rgba(224, 106, 90, 0.12);
  --accent-pale2: rgba(224, 106, 90, 0.2);

  --learning: #e57373;
  --learned: #81c995;
  --learned-pale: rgba(129, 201, 149, 0.16);

  --bg: #211d19;
  --bg-alt: #2a2520;
  --bg-card: #2e2823;

  --text: #f1e9dd;
  --text-mid: #cfc4b4;
  --text-muted: #a89a86;
  --text-faint: #9e9180;

  --border: #453d33;
  --border-light: #3a332b;

  --tag-bg: #38312a;
  --tag-border: #4a4136;

  --band: #5c1015;
  --band-text: #f6ede4;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #e06a5a;
    --accent-light: #eb8a7c;
    --accent-pale: rgba(224, 106, 90, 0.12);
    --accent-pale2: rgba(224, 106, 90, 0.2);

    --learning: #e57373;
    --learned: #81c995;
    --learned-pale: rgba(129, 201, 149, 0.16);

    --bg: #211d19;
    --bg-alt: #2a2520;
    --bg-card: #2e2823;

    --text: #f1e9dd;
    --text-mid: #cfc4b4;
    --text-muted: #a89a86;
    --text-faint: #9e9180;

    --border: #453d33;
    --border-light: #3a332b;

    --tag-bg: #38312a;
    --tag-border: #4a4136;

    --band: #5c1015;
    --band-text: #f6ede4;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35);
  }
}

/* Smooth theme change */
body,
.nav,
.footer,
.work-card,
.team-group,
.lang-details,
.tag,
.tester-chip {
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}

/* --- Typography ----------------------------------------------------- */

h1, h2, h3 {
  font-weight: 600;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* --- Nav: the red site band ---------------------------------------- */

.nav {
  background: var(--band);
  border-bottom: none;
  box-shadow: 0 2px 10px rgba(42, 15, 15, 0.25);
}

.nav-inner {
  height: 3.75rem;
}

.nav-logo-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  background: #fffdf8;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.nav-logo-disc img {
  width: 1.5rem;
  height: 1.5rem;
}

/* Inner pages have the bare logo img — give it the same light disc */
.nav-logo > img {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0.3rem;
  background: #fffdf8;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Inner pages: the back link sits on the band */
.nav-back {
  color: rgba(255, 255, 255, 0.85);
}

.nav-back:hover {
  color: #fff;
}

.nav-logo-text {
  color: var(--band-text);
  font-size: 1.05rem;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.9);
}

.nav-links a:hover {
  color: #fff;
}

.nav .lang-switcher {
  background: rgba(255, 255, 255, 0.14);
}

.nav .lang-btn {
  color: rgba(255, 255, 255, 0.92);
}

.nav .lang-btn:hover {
  color: #fff;
}

.nav .lang-btn[aria-checked="true"],
.nav .lang-btn[aria-current="page"] {
  background: #fffdf8;
  color: var(--band);
  box-shadow: none;
}

/* Inner pages: the back link sits with the other actions, so it gets the same
   quiet weight as a nav link rather than reading as the page's main control. */
.nav-actions .nav-back {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 0;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-actions .nav-back:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.nav-toggle .stroke {
  background: var(--band-text);
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  transition: background var(--transition-fast);
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Thumb-sized on touch only — see the same block in layout.css */
@media (pointer: coarse) {
  .theme-toggle {
    width: 44px;
    height: 44px;
  }
}

.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-moon { display: block; }
[data-theme="dark"] .theme-icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-moon { display: block; }
  :root:not([data-theme="light"]) .theme-icon-sun { display: none; }
}

/* Tight screens: the disc logo is enough */
@media (max-width: 520px) {
  .nav-logo-text {
    display: none;
  }
  .nav-inner {
    gap: 0.5rem;
  }
}

/* Mobile menu panel: paper, not band. Same breakpoint as the drawer itself. */
@media (max-width: 1119px) {
  .nav-links {
    background: var(--bg-card);
  }
  .nav-links a {
    color: var(--text-mid);
    border-bottom-color: var(--border-light);
  }
  .nav-links a:hover {
    color: var(--accent);
  }
}

/* --- Welcome: the work blurb --------------------------------------- */

.welcome {
  padding-block: var(--space-xl) var(--space-lg);
}

/* The blurb sits open on the paper — no box around it */
.work-card {
  max-width: 760px;
}

.work-head {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.work-head .welcome-logo img {
  width: 60px;
  height: 60px;
}

/* On dark paper the maroon logo needs its own light disc */
[data-theme="dark"] .work-head .welcome-logo {
  background: #f6ede4;
  border-radius: 50%;
  padding: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .work-head .welcome-logo {
    background: #f6ede4;
    border-radius: 50%;
    padding: 12px;
  }
}

.work-title h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--accent);
}

.work-formerly {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-faint);
  letter-spacing: 0.01em;
}

.work-byline {
  margin-top: 0.15rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--font-display);
}

/* Work meta — the archive's label column with underlined tag text */
.work-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 2rem;
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.work-meta dt {
  font-weight: 600;
  color: var(--text-mid);
}

.work-meta dd {
  margin: 0;
  color: var(--text-mid);
}

.tag {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  color: var(--text-mid);
}

/* Links in the meta rows read like tags, not like buttons */
.work-meta dd a {
  color: var(--text-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.work-meta dd a:hover {
  color: var(--accent);
}

.meta-stats .msp {
  white-space: nowrap;
  margin-right: 1.1rem;
}

.meta-stats .msp > span {
  color: var(--text-muted);
}

.meta-stats .cstat-num {
  font-weight: 600;
  color: var(--text);
  font-feature-settings: "tnum" 1;
}

@media (max-width: 560px) {
  .work-meta {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .work-meta dt:not(:first-child) {
    margin-top: 0.6rem;
  }
}

.cstat-note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch;
}

.cstat-updated-line {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.76rem;
  color: var(--text-faint);
}

/* Summary paragraph — no label, it speaks for itself */
.work-summary-p {
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 62ch;
  color: var(--text-mid);
  margin-bottom: var(--space-lg);
}

/* --- The demo word -------------------------------------------------- */

/* Lives in the guide, right under the tap-to-translate step */
.work-demo {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-md) var(--space-lg);
  margin: 0 0 var(--space-xl);
  max-width: 560px;
}

.demo-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--text);
}

.demo-word {
  font: inherit;
  color: inherit;
  padding: 0 0.1em;
  border-radius: 4px;
  background: rgba(179, 38, 30, 0.12);
  box-shadow: inset 0 -2px 0 var(--learning);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.demo-word:hover {
  background: rgba(179, 38, 30, 0.22);
}

.demo-word.is-learned {
  background: var(--learned-pale);
  box-shadow: inset 0 -2px 0 var(--learned);
}

.demo-hint {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.demo-pop {
  position: absolute;
  z-index: 5;
  left: var(--space-lg);
  top: calc(100% - 1.4rem);
  min-width: 260px;
  max-width: min(360px, calc(100vw - 3rem));
  background: #2b2320;
  color: #f3ece2;
  border-radius: 8px;
  padding: 0.9rem 1rem 0.8rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .demo-pop {
  background: #17130f;
}

.demo-pop-word {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}

.demo-pop-trans {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f0b9ae;
  margin-bottom: 0.35rem;
}

.demo-pop-trans::before {
  content: "\2192\00A0";
  font-weight: 400;
  color: rgba(243, 236, 226, 0.5);
}

/* All meanings — collapsible, like in the app */
.demo-pop-meanings {
  margin-bottom: 0.55rem;
}

.demo-pop-meanings summary {
  font-size: 0.78rem;
  color: rgba(243, 236, 226, 0.55);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.demo-pop-meanings summary::-webkit-details-marker {
  display: none;
}

.demo-pop-meanings summary::before {
  content: "\25BE\00A0";
  display: inline-block;
  transition: transform var(--transition-fast);
}

.demo-pop-meanings[open] summary::before {
  transform: rotate(180deg);
}

.demo-pop-meanings p {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: rgba(243, 236, 226, 0.85);
  max-width: none;
}

/* Sentence translation with the word highlighted */
.demo-pop-sentence {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(243, 236, 226, 0.9);
  border-top: 1px solid rgba(243, 236, 226, 0.12);
  padding-top: 0.55rem;
  margin-bottom: 0.3rem;
  max-width: none;
}

.demo-pop-sentence mark {
  background: transparent;
  color: #f0b9ae;
  font-weight: 700;
}

.demo-pop-original {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(243, 236, 226, 0.45);
  margin-bottom: 0.7rem;
  max-width: none;
}

.demo-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.demo-close {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(243, 236, 226, 0.8);
  background: rgba(243, 236, 226, 0.1);
  padding: 0.32rem 1.1rem;
  border-radius: 4px;
  transition: background var(--transition-fast);
}

.demo-close:hover {
  background: rgba(243, 236, 226, 0.2);
}

.demo-add {
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: #990000;
  padding: 0.32rem 1.1rem;
  border-radius: 4px;
  transition: background var(--transition-fast);
}

.demo-add:hover {
  background: #b32d2d;
}

/* --- Store badges (official brand lockups) --------------------------- */

.download-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  transition: opacity var(--transition-fast);
}

.store-badge:hover {
  opacity: 0.85;
}

.store-badge img {
  display: block;
  width: auto;
}

/* All three artworks are trimmed to their button, so one height lines them up.
   Chrome's is a hair taller because its PNG keeps a thin white plate. */
.store-badge--apple img { height: 42px; }
.store-badge--google img { height: 42px; }
.store-badge--chrome img { height: 44px; }

/* Direct-APK line — bigger than the small links so people actually see it */
.apk-line {
  margin: var(--space-lg) 0 0.5rem;
  font-size: 1rem;
  color: var(--text-mid);
}

.apk-line .apk-download {
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.apk-line .apk-download:hover {
  color: var(--accent-light);
}

.store-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.store-btn--primary svg {
  color: #fff;
}

.store-btn--primary:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
}

[data-theme="dark"] .store-btn--primary {
  color: #211d19;
}

[data-theme="dark"] .store-btn--primary svg {
  color: #211d19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .store-btn--primary,
  :root:not([data-theme="light"]) .store-btn--primary svg {
    color: #211d19;
  }
}

/* --- Author's note (disclaimer) -------------------------------------- */

.authors-note {
  max-width: var(--container-max);
  margin-inline: auto;
  border-left: 2px solid var(--border);
  padding-left: var(--space-lg);
}

.authors-note-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.section-disclaimer .disclaimer-text {
  border: none;
  text-align: left;
  padding-inline: 0;
  margin: 0;
  font-size: 0.92rem;
  font-style: normal;
  color: var(--text-mid);
}

/* --- Guide: chapters -------------------------------------------------- */

.guide-step-number {
  display: inline-flex;
  align-items: baseline;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.guide-step-number::after {
  content: ".";
}

.guide-step-header h3 {
  font-size: 1.2rem;
}

/* Landing guide: compact two-column steps — text left, small shot right.
   grid-areas keep the header content-sized so tall phone shots don't push
   an empty gap between the title and the paragraph. */
#guide .guide-step {
  display: grid;
  grid-template-columns: 1fr minmax(0, 150px);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "head shot"
    "body shot";
  align-items: start;
  column-gap: 2rem;
  margin-bottom: var(--space-lg);
}

#guide .guide-step-header {
  grid-area: head;
  margin-bottom: 0.5rem;
}

#guide .guide-step p {
  grid-area: body;
  padding-left: 0;
  max-width: 52ch;
  margin-bottom: 0;
  font-size: 0.92rem;
}

/* Stack on narrow screens */
@media (max-width: 640px) {
  #guide .guide-step {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "body"
      "shot";
  }
}

/* --- Tips: numbered cards --------------------------------------------- */

.tips-teaser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  counter-reset: tip;
  margin-top: var(--space-lg);
}

.tips-teaser li {
  counter-increment: tip;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-lg);
  position: relative;
}

.tips-teaser li::before {
  content: counter(tip);
  position: static;
  display: block;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.tips-teaser li strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.tips-teaser li span {
  font-size: 0.92rem;
  color: var(--text-mid);
}

/* --- About ------------------------------------------------------------ */

.about-content p {
  font-size: 1.02rem;
}

/* --- Comments (store reviews) ------------------------------------------ */

/* A literal AO3 comment thread: a bordered box per comment, a shaded
   heading bar with name, where it was left and the date in AO3's own
   format, the default user icon on the left, text beside it. Creator
   replies nest one level in, like AO3 threads. */
.comment-list,
.comment-thread {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list {
  max-width: 46rem;
}

.comment {
  display: grid;
  /* icon column includes the icon's own left inset */
  grid-template-columns: calc(56px + 0.75rem) 1fr;
  column-gap: var(--space-md);
  margin-bottom: var(--space-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.comment > :last-child {
  margin-bottom: 0.75rem;
}

.comment-head {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--tag-bg);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
}

.comment-name {
  font-weight: 700;
  color: var(--accent);
}

.comment-head time {
  margin-left: 0.4em;
  font-variant-numeric: tabular-nums;
}

.comment-icon {
  grid-column: 1;
  grid-row: 2 / span 2;
  width: 56px;
  height: 56px;
  margin: 0.75rem 0 0 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}

.comment-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--text-faint);
}

.comment-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-text {
  grid-column: 2;
  margin: 0.75rem 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text);
}

.comment-note {
  grid-column: 2;
  margin: var(--space-xs) 0.75rem 0 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-faint);
}

.comment-note:empty {
  display: none;
}

.comment-thread {
  grid-column: 1 / -1;
  margin: 0.75rem 0.75rem 0 2.5rem;
}

.comment-thread .comment {
  margin-bottom: 0;
}

/* The logo is drawn for a light plate, same as the header mark */
.comment--creator .comment-icon {
  background: #faf6ee;
}

.comment-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-size: 0.92rem;
  color: var(--text-mid);
}

/* AO3's small action buttons (Reply, Thread, Kudos row) */
.comment-btn {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--tag-border);
  border-radius: 4px;
  background: var(--tag-bg);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.comment-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 560px) {
  .comment {
    grid-template-columns: calc(40px + 0.75rem) 1fr;
    column-gap: 0.75rem;
  }

  .comment-icon {
    width: 40px;
    height: 40px;
  }

  .comment-thread {
    margin-left: 1rem;
  }
}

/* --- Team --------------------------------------------------------------- */

.team-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}

.team-group-label {
  color: var(--text-muted);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}

.team-list li {
  border-color: var(--border-light);
}

/* --- Testers: a wall of tags ------------------------------------------- */

/* Testers read as an archive tag list, the same idiom as the tags in the
   blurb above: underlined names separated by commas, not boxed chips. */
.testers-cloud {
  display: block;
  text-align: left;
  font-size: 0.95rem;
  line-height: 2;
}

.tester-chip {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: inherit;
  color: var(--text-mid);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

/* Plain inline comma plus a space: as its own inline box (inline-block with a
   margin) it used to wrap alone onto the next line. */
.tester-chip:not(:last-child)::after {
  content: ", ";
  text-decoration: none;
}

.tester-chip:hover {
  color: var(--accent);
}

/* --- Kudos -------------------------------------------------------------- */

/* Even padding: the 5rem bottom plus the box padding plus the footer's own
   margin left about 160px of empty paper under the button. */
.section-kudos {
  padding-block: var(--space-xl);
}

.kudos-box {
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
  padding: var(--space-md) 0 0;
}

.kudos-lead {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text);
  margin: 0 auto var(--space-md);
}

.kudos-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.6rem;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  transition: background var(--transition-fast);
}

[data-theme="dark"] .kudos-btn {
  color: #211d19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kudos-btn {
    color: #211d19;
  }
}

.kudos-btn:hover {
  background: var(--accent-light);
}

.kudos-btn.is-kudosed svg {
  animation: kudos-pop 500ms ease;
}

@keyframes kudos-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.6); }
  100% { transform: scale(1); }
}

.kudos-note {
  margin: var(--space-md) auto 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.kudos-review {
  margin: var(--space-sm) auto 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 40ch;
}

.kudos-review a {
  font-weight: 600;
  white-space: nowrap;
}

/* --- Language accordions ------------------------------------------------ */

/* The list is prose, not controls — see components.css. Only the reader's own
   language is marked, and it is marked with weight and colour, not a box. */
.lang-details .lang-list li.lang-highlight {
  color: var(--accent);
}

/* "new" badge on freshly-added reading languages */
.lang-new {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  vertical-align: 0.1em;
  line-height: 1.4;
}

[data-theme="dark"] .lang-new {
  color: #211d19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lang-new {
    color: #211d19;
  }
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  background: var(--band);
  color: rgba(255, 255, 255, 0.75);
}

.footer-brand p,
.footer-col a,
.footer-bottom {
  color: rgba(255, 255, 255, 0.8);
}

.footer-col h4 {
  color: rgba(255, 255, 255, 0.9);
}

.footer-col .social-link svg {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Quieter hovers (override the originals) ------------------------------ */

.social-chip:hover,
.footer-col .social-link:hover svg {
  transform: none;
}

/* --- Dark theme fine-tuning ---------------------------------------------- */

[data-theme="dark"] .nav {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text-mid);
}

/* base.css sets body colors from vars, this is just belt and suspenders */

/* --- AO3 maintenance notice (index) -------------------------------- */

.outage-banner {
  background: var(--accent-pale2);
  border-bottom: 1px solid var(--border);
}

.outage-banner a {
  display: block;
  padding: 0.85rem 0;
  color: var(--text);
  text-decoration: none;
  font-size: 0.98rem;
  line-height: 1.5;
}

.outage-banner a span {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.outage-banner a span[aria-hidden] {
  text-decoration: none;
}

.outage-banner a:hover span {
  color: var(--accent-light);
}