/* ===================================================================
   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;
  --text-muted: #857763;
  --text-faint: #b3a898;

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

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

  /* The band */
  --band: #900;
  --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: #998c7a;
  --text-faint: #6e6355;

  --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: #998c7a;
    --text-faint: #6e6355;

    --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.78);
}

.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.7);
}

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

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

.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), transform var(--transition-fast);
}

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

.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 */
@media (max-width: 768px) {
  .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-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: 0.35rem;
  vertical-align: -0.1em;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.cstat-info:hover,
.cstat-info[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-pale);
}

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

.cstat-note[hidden] {
  display: none;
}

.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: 3px;
  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: 12px;
  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: 7px;
  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: 7px;
  transition: background var(--transition-fast);
}

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

/* --- Store buttons --------------------------------------------------- */

.store-btn {
  border-radius: 6px;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.store-btn:hover {
  transform: none;
}

/* 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;
}

#guide .guide-screenshot {
  grid-area: shot;
  margin: 0;
  align-self: start;
}

/* Steps without a shot: text uses the full width */
#guide .guide-step:not(:has(.guide-screenshot)) {
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "body";
}

.guide-screenshot img,
.guide-screenshot-pair img {
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* Cap by HEIGHT — tall phone shots become small thumbnails */
#guide .guide-screenshot img {
  max-height: 230px;
  width: auto;
}

#guide .guide-screenshot-pair {
  display: flex;
  gap: 0.4rem;
}

#guide .guide-screenshot-pair img {
  max-height: 190px;
  max-width: none;
  width: auto;
}


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

/* --- 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;
}

/* --- 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 ------------------------------------------- */

.tester-chip {
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  border-radius: 4px;
  font-size: 0.83rem;
  color: var(--text-mid);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

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

.tester-chip:hover::after {
  content: " \2665";
}

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

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

.kudos-box {
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
  padding: var(--space-lg) 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: 6px;
  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 ------------------------------------------------ */

.lang-details .lang-list li {
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  border-radius: 6px;
}

.lang-details .lang-list li.lang-highlight {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* "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;
  }
}

[data-theme="dark"] .lang-details .lang-list li.lang-highlight {
  color: #211d19;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lang-details .lang-list li.lang-highlight {
    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.65);
}

.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 */