/* ANUBIS28 VISUAL SYSTEM -- v1, Egyptian sandstone / gold / terracotta.
   This file is the source of truth for site and game interface colors.
   Intro explanation uses the same text color as the sentence beneath it.
   Do not assign random hexadecimal colors in future game components. */
:root {
  /* Main surfaces */
  --color-canvas: #E7D0A7;
  --color-page: #FFF8EC;
  --color-paper: #F6E7CA;
  --color-card: #FFFBF3;
  --color-card-hover: #F8E9D0;
  --color-input: #FFFCF6;
  /* Text */
  --color-text: #392819;
  --color-text-subtle: #775D41;
  --color-heading: #58351B;
  --color-section-heading: #76461D;
  --color-number: #8B4D1C;
  --color-digitcode-letter: #9B4F17;
  /* Navigation */
  --color-menu: #29190F;
  --color-menu-ink: #FFF0D2;
  --color-navigation: #F2DFBE;
  --color-navigation-ink: #684525;
  --color-navigation-selected: #E8C17B;
  /* Buttons */
  --color-button-primary: #AD6021;
  --color-button-primary-hover: #894417;
  --color-button-primary-ink: #FFFFFF;
  --color-button-gold: #DDA64B;
  --color-button-gold-hover: #C9892E;
  --color-button-gold-ink: #2D1A0F;
  --color-button-secondary: #FFF7E9;
  --color-button-secondary-ink: #614022;
  /* Details and states */
  --color-gold: #DAA64B;
  --color-gold-highlight: #F0C46C;
  --color-orange: #C27427;
  --color-border: #DCC19A;
  --color-focus: #E69F40;
  --color-success: #31734D;
  --color-danger: #A84430;
  /* Lesson scene */
  --color-scene-bg: #000000;
  --color-scene-number: #F7CF7A;
  --color-scene-helper: #E5C997;
  /* Compatibility with prototype 05 components */
  --bg: var(--color-canvas);
  --white: var(--color-page);
  --ink: var(--color-text);
  --muted: var(--color-text-subtle);
  --gold: var(--color-gold);
  --deep: var(--color-menu);
  --border: var(--color-border);
  --soft: var(--color-paper);
  --good: var(--color-success);
  --bad: var(--color-danger);
  --shadow: 0 12px 28px rgba(72,42,16,.09);
}

/* Sandstone outside the content, parchment inside. No texture from the original
   cardboard dieline is used on screen, because that reference contains CUT marks. */
html,body {
  color: var(--color-text);
  background-color: var(--color-canvas);
  background-image:
    radial-gradient(ellipse at 20% 11%, rgba(254,236,194,.54), transparent 48%),
    radial-gradient(ellipse at 90% 80%, rgba(144,92,35,.12), transparent 50%);
}
.app-shell {background:var(--color-page);box-shadow:0 0 65px rgba(65,38,15,.15)}
.content {color:var(--color-text)}
.topbar {
  color:var(--color-menu-ink);
  background:linear-gradient(107deg, #21130D 0%, var(--color-menu) 65%, #432813 100%);
  border-bottom:3px solid var(--color-gold);
}
.brand-text {color:var(--color-menu-ink)}
.gold {color:var(--color-gold-highlight)}
.pill {border-color:#86683B;color:#F6E6CA}
.pill-preview {border-color:#9F7C40;color:var(--color-gold-highlight)}
.status-dot {background:#83BD7B}
.tabs {background:var(--color-navigation);border-color:var(--color-border)}
.tab {color:var(--color-navigation-ink)}
.tab.active,.tab:hover {background:var(--color-navigation-selected);color:var(--color-menu)}
.footer {background:#F7EAD3;color:var(--color-text-subtle);border-color:var(--color-border)}

/* Hierarchy shared by onboarding, catalog, lessons and games */
h1,h2,h3,h4,.section-title,.hero h1,.menu-card h3 {color:var(--color-heading)}
.eyebrow,.feature-no {color:var(--color-orange)}
.section-desc,.helper,.small-label,.catalog-meta,.menu-card p,.glossary dd,.story-text,.note,.hero .lead,
.hero p:not(.eyebrow):not(.lead) {color:var(--color-text-subtle)}
.emphasis,.story-text strong {color:var(--color-heading)}
.intro-compact .lead.secret-copy {color:var(--color-text-subtle)}

/* Stable button color roles */
.btn {background:var(--color-button-primary);border-color:var(--color-button-primary);color:var(--color-button-primary-ink)}
.btn:hover {background:var(--color-button-primary-hover);border-color:var(--color-button-primary-hover)}
.btn.gold-btn {background:var(--color-button-gold);border-color:var(--color-button-gold);color:var(--color-button-gold-ink)}
.btn.gold-btn:hover {background:var(--color-button-gold-hover);border-color:var(--color-button-gold-hover);color:var(--color-button-gold-ink)}
.btn.ghost {background:var(--color-button-secondary);border-color:var(--color-border);color:var(--color-button-secondary-ink)}
.btn.ghost:hover {background:var(--color-card-hover)}
button:focus-visible,input:focus-visible {outline:3px solid var(--color-focus);outline-offset:2px}

/* Tiles and menus */
.card,.menu-card,.catalog-item,.memage-card,.digit-tile {
  border-color:var(--color-border);
  background:var(--color-card);
}
.card {box-shadow:var(--shadow)}
.soft-card,.learn-panel,.note {
  background:var(--color-paper);
  border-color:var(--color-border);
}
.menu-card:hover,.catalog-button:hover {background:var(--color-card-hover);border-color:var(--color-gold)}
.feature-no,.memage-code,.catalog-code,.digit-tile .letter,.word-coding mark {color:var(--color-number)}
.memage-card {background:linear-gradient(155deg,var(--color-card),var(--color-paper))}
.digit-tile {background:linear-gradient(145deg,var(--color-card),var(--color-paper))}
.brand-duo {background:linear-gradient(140deg,#F8E9CB,#F3DCB3);border-color:var(--color-border)}
.brand-duo figcaption {color:var(--color-heading)}
.intro-images {border-color:var(--color-border)}
.step {background:#E6D3B5}
.step.filled {background:var(--color-gold)}
.hero-number,.digit-tile .d,.quiz-target .letter-question {color:var(--color-number)}
.stat-strip span,.chip {background:#F8EACC;color:var(--color-text-subtle);border-color:var(--color-border)}
.search,.answer-input {background:var(--color-input);color:var(--color-text);border-color:var(--color-border)}
.search:focus,.answer-input:focus {border-color:var(--color-orange)}
.switcher {background:#EBD5AE}
.switcher button {color:var(--color-text-subtle)}
.switcher button.on {background:var(--color-page);color:var(--color-heading)}
.quiz-target,.detail-image,.missing-image {background:var(--color-paper);border-color:var(--color-border)}
.learn-panel {border-left-color:var(--color-orange)}
.word-coding mark {background:transparent}
.thermometer {background:#E8D0A7}
.thermometer div,.thermometer span {background:linear-gradient(90deg,var(--color-orange),var(--color-gold-highlight))}
.quiz-feedback.success {color:var(--color-success);background:#E5F1E5}
.quiz-feedback.fail {color:var(--color-danger);background:#FAE5DD}

/* The approved mnemonic image has a completely BLACK stage behind its alpha.
   Number follows the image within the same black scene area. */
.intro-images .soft-card.center {
  background:var(--color-scene-bg);
  border:2px solid #806037;
  box-shadow:0 12px 32px rgba(36,19,9,.15);
  padding:clamp(10px,2vw,20px);
}
.intro-images .intro-scene {
  background:var(--color-scene-bg);
  border-radius:6px;
  display:block;
}
.intro-images .hero-number.grouped-number {color:var(--color-scene-number)}
.intro-images .soft-card.center .helper {color:var(--color-scene-helper)}
.story-img,.scene-on-quiz {background:var(--color-scene-bg);border-radius:12px}

/* Preserve current typography sizes and geometry. Adjust colors only. */


/* v16 - sandstone backgrounds. The image files are procedural mineral textures,
   not the old illustrated die-cut template (which is kept only as a reference).
   New screens and games reuse the tokens below instead of one-off colors. */
:root {
  --texture-sandstone-wall: url("assets/textures/sandstone-wall.webp");
  --texture-sandstone-page: url("assets/textures/sandstone-page.webp");
  --texture-sandstone-panel: url("assets/textures/sandstone-panel.webp");
  --texture-stone-size: 512px 512px;
  --color-stone-shadow: rgba(77,42,16,.18);
}
html, body {
  background-color: var(--color-canvas);
  background-image:
    linear-gradient(125deg,rgba(93,55,19,.12),transparent 32%,rgba(255,235,170,.09) 67%,rgba(82,46,18,.16)),
    var(--texture-sandstone-wall);
  background-size: cover, var(--texture-stone-size);
  background-repeat: no-repeat, repeat;
  background-attachment: fixed, fixed;
}
.app-shell {
  background-color: var(--color-page);
  background-image: var(--texture-sandstone-page);
  background-size: var(--texture-stone-size);
  background-repeat: repeat;
  box-shadow: 0 0 65px var(--color-stone-shadow), 0 0 0 1px rgba(124,85,45,.2);
}
.topbar {
  background-color: var(--color-menu);
  background-image:
    linear-gradient(110deg,rgba(24,12,5,.92),rgba(43,23,11,.87) 55%,rgba(49,26,9,.85)),
    var(--texture-sandstone-wall);
  background-size: cover, var(--texture-stone-size);
  background-repeat: no-repeat, repeat;
}
.tabs {
  background-color: var(--color-navigation);
  background-image: linear-gradient(rgba(247,225,182,.56),rgba(247,225,182,.56)), var(--texture-sandstone-panel);
  background-size: cover, var(--texture-stone-size);
}
.footer {
  background-color: var(--color-navigation);
  background-image: linear-gradient(rgba(255,244,216,.62),rgba(255,244,216,.62)), var(--texture-sandstone-panel);
  background-size: cover, var(--texture-stone-size);
}
/* Individual sandstone surfaces for learning aids, games, quiz and hints. */
.soft-card, .learn-panel, .note, .memory-principle, .detail-quiz, .brand-duo {
  background-color: var(--color-paper);
  background-image: var(--texture-sandstone-panel);
  background-size: var(--texture-stone-size);
  background-repeat: repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.40), 0 2px 10px rgba(92,52,24,.04);
}
.card, .menu-card, .catalog-item, .memage-card, .digit-tile {
  background-color: var(--color-card);
  background-image: var(--texture-sandstone-page);
  background-size: var(--texture-stone-size);
  background-repeat: repeat;
}
/* These elements must remain BLACK to keep the approved light scene intact. */
.intro-images .soft-card.center, .intro-images .intro-scene, .story-img, .scene-on-quiz {
  background-color: var(--color-scene-bg);
  background-image: none;
}


/* v17: lighter stone backing ONLY for Memage image tiles.
   The sandstone grain remains, but a thin warm-white veil makes the figures
   easier to distinguish. Keep the black mnemonic scene untouched. */
:root {
  --color-memage-card-bg: #FFFDF9;
  --color-memage-card-veil: rgba(255,255,255,.35);
}
.memage-card {
  background-color: var(--color-memage-card-bg);
  background-image:
    linear-gradient(var(--color-memage-card-veil), var(--color-memage-card-veil)),
    var(--texture-sandstone-page);
  background-size: cover, var(--texture-stone-size);
  background-repeat: no-repeat, repeat;
}

/* Memage spelling: Digitcode letters use color AND uppercase, everywhere.
   Display-only formatting: the stored dictionary entry remains unchanged. */
mark.digitcode-letter,
.word-coding mark.digitcode-letter {
  color:var(--color-digitcode-letter);
  background:transparent; /* Keep the exact underlying card/page background. */
  border-radius:2px;
  font-weight:900;
  text-transform:uppercase;
  padding:0 1px;
}

/* v20: all standard cards are LIGHTER than their immediate sandstone surface.
   Site canvas > page > raised panels > white cards; the approved black
   cinematic scene and dark header are intentional exceptions. */
:root {
  --color-number: #B65C0A;
  --color-catalog-word: #29190F;
  --color-raised-card: #FFFDF8;
  --color-raised-overlay: rgba(255,255,255,.76);
  --color-page-overlay: rgba(181,127,52,.23);
}
.app-shell {
  background-image:linear-gradient(var(--color-page-overlay),var(--color-page-overlay)),var(--texture-sandstone-page);
  background-size:cover,var(--texture-stone-size);
}
.card,.menu-card,.catalog-item,.memage-card,.digit-tile,.detail-quiz {
  background-color:var(--color-raised-card);
  background-image:linear-gradient(var(--color-raised-overlay),var(--color-raised-overlay)),var(--texture-sandstone-page);
  background-size:cover,var(--texture-stone-size);
  background-repeat:no-repeat,repeat;
}
/* Individual panels and quizzes still sit above the main page, while any
   inner image surface is lighter than its parent card. */
.soft-card,.learn-panel,.note,.memory-principle,.brand-duo,.story-recall {
  background-color:#FBF0D9;
  background-image:linear-gradient(rgba(255,255,255,.67),rgba(255,255,255,.67)),var(--texture-sandstone-panel);
  background-size:cover,var(--texture-stone-size);
}
.quiz-panel {background-color:#FCF4E5;background-image:linear-gradient(rgba(255,255,255,.64),rgba(255,255,255,.64)),var(--texture-sandstone-panel)}
.quiz-panel .quiz-target, .quiz-panel .learn-panel, .detail-quiz .detail-choices .btn.ghost,
.memage-card,.catalog-thumb-button,.detail-image-trigger,.intro-compact .brand-duo figure {
  background-color:#FFFEFB;
}
.quiz-panel .quiz-target,.quiz-panel .learn-panel {
  background-image:linear-gradient(rgba(255,255,255,.80),rgba(255,255,255,.80)),var(--texture-sandstone-page);
}
.catalog-item:hover,.menu-card:hover,.digit-tile:hover {background-color:#FFFDF7}
.catalog-code,.memage-code {color:var(--color-number);font-weight:850}
.catalog-word,.memage-name {color:var(--color-catalog-word);font-weight:750}
/* Fixed number and letter use identical font family and weight. */
.digit-tile .d,.digit-tile .letter {font-family:inherit;font-style:normal;font-weight:850;line-height:1.2}
.digit-tile .d {font-size:30px}
.digit-tile .letter {font-size:30px;color:var(--color-digitcode-letter)}
.digit-hint strong.digit-hint-emphasis,.learn-panel strong.digit-hint-emphasis,.quiz-feedback strong.digit-hint-emphasis {
  font-weight:900;color:var(--color-digitcode-letter);
}
.catalog-pages {display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;margin:20px 0 16px;padding:3px 2px 9px;scrollbar-width:thin;scrollbar-color:var(--color-gold) transparent}
.catalog-page {flex:0 0 auto;border:1px solid var(--color-border);border-radius:9px;color:var(--color-heading);font:700 12px/1.2 inherit;font-family:inherit;font-weight:800;font-size:12px;white-space:nowrap;padding:10px 13px;cursor:pointer;background:#FFFDF6;transition:background .14s}
.catalog-page:hover{background:#F8E5C3}
.catalog-page.active{background:var(--color-button-primary);color:#fff;border-color:var(--color-button-primary)}
.catalog-tools {margin-bottom:15px}
.catalog-item {display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:8px;min-width:0;padding:11px;border-radius:13px}
.catalog-main{display:flex;gap:10px;align-items:center;min-height:71px;min-width:0}
.catalog-open{flex:1;min-width:0;padding:4px 2px;text-align:left;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:3px;border:none;background:transparent;color:inherit;font:inherit;cursor:pointer}
.catalog-open:hover .catalog-word{text-decoration:underline}
.catalog-code {font-size:21px;line-height:1.1;font-variant-numeric:tabular-nums}
.catalog-word {font-size:14px;line-height:1.25;max-width:none;display:block;overflow-wrap:anywhere}
.catalog-thumb-button {padding:2px;display:grid;place-items:center;flex:0 0 71px;height:71px;cursor:zoom-in;border:1px solid #E8D0AB;border-radius:9px;transition:box-shadow .15s}
.catalog-thumb-button:hover{box-shadow:0 0 0 2px var(--color-gold)}
.catalog-thumb-button img {max-width:100%;max-height:100%;width:67px;height:67px;object-fit:contain}
.catalog-item .placeholder {background:#F6E8D3;color:var(--color-text-subtle);height:67px;width:71px}
.catalog-item .thermometer {margin-top:auto;height:8px;max-width:none;width:100%;background:#E7CEAA;border:1px solid rgba(166,119,58,.20)}
.catalog-item .thermometer span {height:100%;background:linear-gradient(90deg,#C46D20,#EEBD62)}
.detail-image-trigger {width:100%;border:1px solid var(--color-border);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:zoom-in;padding:10px;background-image:linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),var(--texture-sandstone-page);background-size:cover,var(--texture-stone-size)}
.detail-image-trigger .detail-image {width:100%;max-width:300px;object-fit:contain;background:transparent}
.zoom-caption {font-size:12px;color:var(--color-text-subtle);margin-top:2px}
.image-lightbox {position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(15,9,4,.89);padding:clamp(8px,3vw,26px)}
.lightbox-content {position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#FFFDF6;border:2px solid var(--color-gold);border-radius:17px;padding:clamp(12px,3vw,24px);max-width:min(720px,96vw);max-height:95dvh;box-shadow:0 15px 70px #0008}
.lightbox-content img {display:block;width:min(512px,83vw);height:auto;max-height:calc(95dvh - 110px);object-fit:contain;aspect-ratio:1/1}
.lightbox-close {position:absolute;right:5px;top:3px;border:0;background:transparent;color:var(--color-heading);font:700 34px/1 inherit;cursor:pointer;padding:3px 12px;z-index:1}
.lightbox-caption {margin-top:6px;font-weight:750;text-align:center;color:var(--color-catalog-word)}
.lightbox-number {color:var(--color-number);font-weight:900;margin-right:12px}
body.modal-open{overflow:hidden}
.technique-intro {margin-top:20px;margin-bottom:14px}
.technique-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.technique-card h3{margin-top:0}
.technique-card p,.technique-intro p{color:var(--color-text-subtle);line-height:1.6}
/* The one approved memory scene stays completely black, never sandstone. */
.intro-images .soft-card.center,.intro-images .intro-scene,.story-img,.scene-on-quiz{background-color:#000;background-image:none}
@media(max-width:700px){.technique-list{grid-template-columns:1fr}}
@media(max-width:760px){.digit-tile .d,.digit-tile .letter{font-size:23px}}

/* v20 mobile learning: never hide the approved Digitcode hints. The wider
   two-column cards keep the full translations, rotation angles and bold
   code letters/digits legible on a phone. */
@media(max-width:760px) {
  .digit-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .digit-tile {padding:13px 9px;min-height:146px}
  .digit-tile .d,.digit-tile .letter {font-size:25px}
  .digit-tile .hint {display:block;font-size:12px;line-height:1.37;margin-top:8px;color:var(--color-text-subtle)}
}


/* v21: Extended public reference copy -- reuses approved sandstone color tokens. */
.public-glossary,.public-memixes-guide {scroll-margin-top:24px}
.glossary-jump {display:flex;flex-wrap:wrap;gap:8px;margin:19px 0 25px}
.glossary-jump a {color:var(--color-button-secondary-ink);background:var(--color-button-secondary);border:1px solid var(--color-border);border-radius:24px;padding:8px 13px;font-weight:750;font-size:13px;text-decoration:none}
.glossary-jump a:hover,.glossary-jump a:focus-visible {background:var(--color-navigation-selected);outline-color:var(--color-focus)}
.glossary-group {margin:24px 0 26px;scroll-margin-top:20px}
.glossary-group-title {font-size:clamp(19px,3vw,23px);margin:0 0 11px;color:var(--color-heading)}
.glossary-entries {display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.glossary-entry {border:1px solid var(--color-border);background-color:var(--color-raised-card);background-image:linear-gradient(var(--color-raised-overlay),var(--color-raised-overlay)),var(--texture-sandstone-page);background-size:cover,var(--texture-stone-size);border-radius:14px;padding:clamp(15px,2.2vw,22px);min-width:0}
.glossary-entry h3 {margin:0 0 8px;font-size:17px;color:var(--color-heading)}
.glossary-entry p {margin:0;color:var(--color-text);font-size:14px;line-height:1.7;overflow-wrap:break-word}
.glossary-entry-important {border-left:5px solid var(--color-orange);padding-left:clamp(13px,2vw,20px)}
.glossary-entry .glossary-example {background:var(--color-paper);border-radius:9px;margin-top:12px;padding:10px 12px;font-size:13px;color:var(--color-text-subtle)}
.glossary-example-label {display:block;font-size:10px;letter-spacing:.1em;font-weight:850;text-transform:uppercase;color:var(--color-orange);margin-bottom:4px}
.glossary-mapping {margin:18px 0 28px}
.glossary-mapping h3 {font-size:17px;margin:0 0 12px}
.glossary-mapping h3:not(:first-child) {margin-top:20px}
.glossary-code-grid {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.glossary-code-tile {display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid var(--color-border);border-radius:9px;background:var(--color-paper);padding:9px 2px}
.glossary-code-tile strong {color:var(--color-number);font-size:18px}
.glossary-code-tile span {color:var(--color-digitcode-letter);font-size:19px;font-weight:850}
.glossary-check-examples {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.glossary-check-example {min-width:0;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:center;padding:12px 13px;border-radius:11px;background:var(--color-paper)}
.glossary-check-code {grid-row:span 2;font-size:25px;font-weight:850;color:var(--color-number);font-variant-numeric:tabular-nums}
.glossary-check-word {font-weight:750;color:var(--color-catalog-word);font-size:16px;overflow-wrap:anywhere}
.glossary-check-decoded {font-size:12px;color:var(--color-text-subtle)}
.glossary-next {margin-top:20px}
.glossary-next h3 {margin:0 0 7px}
.glossary-next p {margin:0;color:var(--color-text-subtle);line-height:1.6}
.public-intro p {font-size:16px;line-height:1.75;margin:0}
.public-intro-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
.public-intro-steps div {background:var(--color-paper);border:1px solid var(--color-border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.public-intro-steps span {font-weight:850;color:var(--color-orange);font-size:12px}
.public-intro-steps strong {font-size:15px;color:var(--color-heading)}
.public-intro-steps small {font-size:12px;color:var(--color-text-subtle)}
.public-study-guide {margin:15px 0 18px;padding:0;overflow:hidden}
.public-study-guide summary {cursor:pointer;font-weight:800;color:var(--color-heading);padding:15px 20px}
.public-study-guide summary:hover {background:var(--color-card-hover)}
.public-study-guide[open] summary {border-bottom:1px solid var(--color-border)}
.public-study-body {padding:0 20px 19px}
.public-study-body h3 {margin:17px 0 7px;font-size:16px}
.public-study-body p {margin:0;color:var(--color-text-subtle);line-height:1.7;font-size:14px}
.public-study-body .buttons {margin-top:15px}
@media(max-width:700px) {
  .glossary-code-grid {grid-template-columns:repeat(5,minmax(0,1fr))}
  .glossary-check-examples {grid-template-columns:1fr}
  .public-intro-steps {grid-template-columns:1fr}
  .glossary-jump a {font-size:12px;padding:8px 10px}
}


/* v22: persistent, inclusive From / To training code sliders. */
.training-range {margin-top:20px;padding:clamp(16px,2.6vw,24px)}
.training-range-header {display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.training-range-header h3 {margin:0 0 5px;font-size:19px;color:var(--color-heading)}
.training-range-header p {margin:0;line-height:1.5}
.training-range-chip {background:var(--color-paper);border:1px solid var(--color-border);color:var(--color-number);font-weight:850;font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums;padding:8px 13px;border-radius:9px}
.training-range-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:19px 0 12px}
.training-bound {min-width:0;padding:14px 15px 9px;background:var(--color-paper);border:1px solid var(--color-border);border-radius:13px}
.training-bound-heading {display:flex;align-items:center;justify-content:space-between;gap:12px}
.training-bound-heading label {color:var(--color-heading);font-size:14px;font-weight:850}
.training-select {font-family:inherit;font-size:16px;font-weight:800;color:var(--color-number);background:var(--color-input);border:1px solid var(--color-border);border-radius:8px;padding:8px 12px;max-width:132px;min-width:85px}
.training-select:focus-visible,.training-slider:focus-visible {outline:3px solid var(--color-focus);outline-offset:3px}
.training-slider {display:block;width:100%;height:28px;margin:11px 0 2px;accent-color:var(--color-button-primary);cursor:pointer}
.training-bound-ends {display:flex;justify-content:space-between;gap:10px;color:var(--color-text-subtle);font-size:11px;font-variant-numeric:tabular-nums}
.training-range-stats {margin:0;padding:9px 13px;font-size:14px;font-weight:750;color:var(--color-heading);background:var(--color-card-hover);border-radius:9px}
.training-range-note {margin:11px 0 0;font-size:12px;line-height:1.6}
.training-empty {padding:26px;text-align:center}
.training-empty h3 {margin:0 0 10px}
.training-empty p {max-width:560px;margin:0 auto;color:var(--color-text-subtle);line-height:1.6}
.recognition-typed-form {max-width:550px;margin:19px auto}
.recognition-typed-form label {display:block;color:var(--color-text-subtle);font-weight:720;font-size:13px;margin-bottom:8px}
.recognition-typed-row {display:flex;gap:10px;align-items:stretch}
.recognition-typed-row .answer-input {font-size:20px;min-width:0;flex:1;letter-spacing:.12em;padding:10px}
.recognition-typed-row .btn {flex:0 0 auto}
@media(max-width:580px){
  .training-range-fields {grid-template-columns:1fr;gap:10px}
  .training-range-header {gap:9px}
  .recognition-typed-row {flex-direction:column}
  .recognition-typed-row .btn {width:100%}
}


/* v23: optional first lesson with accessible menu and remembered preference. */
.lesson-start-controls {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:13px auto 22px;padding:13px 16px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-paper);max-width:790px}
.lesson-start-controls .btn {flex:0 0 auto}
.startup-lesson-option {display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:var(--color-heading);font-weight:700;font-size:14px;line-height:1.5;text-align:left}
.startup-lesson-option input[type=checkbox] {width:20px;height:20px;flex:none;margin:0;accent-color:var(--color-button-primary);cursor:pointer}
.lesson-finish-preference {margin:18px auto 0;display:flex;justify-content:center}
.account-startup-setting {background:var(--color-paper);border-radius:12px;padding:18px;margin:13px 0 22px}
.account-startup-setting p {margin:9px 0 0 30px}
@media(max-width:480px){.lesson-start-controls {flex-direction:column;align-items:stretch}.lesson-start-controls .btn {width:100%}}

/* v24: One-click access to Recognition directly above the Memages catalog. */
.memages-training-actions { margin: 16px 0 20px; }

/* v25: Compact, responsive space system. Vertical rhythm is intentionally tight.
   This layer changes geometry only: color tokens, images, data and functionality stay intact. */
:root {
  --compact-gap: 8px;
  --compact-card-pad: clamp(12px, 1.7vw, 17px);
}
.topbar { padding: 6px clamp(12px, 2.5vw, 27px); gap: 10px; }
.brand { gap: 8px; }
.brand-logo { width: 43px; height: 43px; }
.topbar-right { gap: 6px; }
.pill { padding: 4px 8px; }
.tabs { padding: 5px 10px; gap: 4px; }
.tab { padding: 8px 12px; border-radius: 8px; }
.content { padding: clamp(13px, 1.8vw, 23px) clamp(13px, 2.6vw, 28px); }
.footer { padding: 8px clamp(13px, 2.5vw, 27px); line-height: 1.35; }
.eyebrow { margin: 0 0 3px; font-size: 11px; line-height: 1.3; }
.section-header { align-items: center; margin-bottom: 10px; gap: 9px; }
.section-title { font-size: clamp(22px, 2.8vw, 29px); margin: 0 0 3px; }
.section-desc { font-size: 13px; line-height: 1.45; }
.buttons { display: flex; flex-direction: row; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.btn, .buttons .btn { width: auto; min-height: 39px; padding: 7px 13px; font-size: 13px; border-radius: 9px; }
.card { padding: var(--compact-card-pad); }
.soft-card { padding: 12px 14px; }
.spacer { height: 10px; }
.spacer-sm { height: 5px; }
.card > h3, .soft-card > h3 { margin: 0 0 6px; }
.card > p, .soft-card > p { line-height: 1.48; }
.quiz-feedback { margin-top: 8px; padding: 8px 10px; font-size: 13px; }
.note { padding: 10px 12px; }
.chip { padding: 3px 8px; }

/* Home and tutorial navigation: number and title share a line. */
.home-challenge { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; line-height: 1.45; }
.home-challenge .btn { flex: none; }
.row-cards { gap: 9px; }
.menu-card { min-width: 0; padding: 12px 14px; border-radius: 11px; }
.menu-card-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; min-width: 0; }
.menu-card .feature-no { margin: 0; flex: none; }
.menu-card-head h3 { font-size: 16px; margin: 0; line-height: 1.25; }
.menu-card p { font-size: 12px; line-height: 1.4; }
.tutorial-grid, .account-grid, .memixes-entries { margin: 10px 0; }
.account-startup-setting { padding: 10px 12px; margin: 8px 0 11px; }
.account-startup-setting p { margin: 6px 0 0 26px; }
.account-grid .card .helper { margin: 6px 0; }
.account-grid .card .btn { margin-top: 7px; }

/* Memages: keep Train alongside the title, then put the filters close to the grid. */
.catalog-heading-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 0 0 3px; }
.catalog-heading-row .section-title { margin: 0; }
.catalog-heading-row .btn { white-space: nowrap; flex: 0 0 auto; }
.catalog-summary { margin: 0 0 8px; }
.public-study-guide { margin: 7px 0 8px; }
.public-study-guide summary { padding: 9px 13px; font-size: 13px; }
.public-study-body { padding: 0 13px 12px; }
.public-study-body h3 { margin: 9px 0 3px; }
.public-study-body p { font-size: 13px; line-height: 1.5; }
.public-study-body .buttons { margin-top: 9px; }
.catalog-pages { gap: 5px; margin: 6px 0 7px; padding: 1px 1px 4px; }
.catalog-page { padding: 6px 9px; font-size: 12px; border-radius: 8px; }
.catalog-tools { gap: 7px; margin-bottom: 8px; flex-wrap: nowrap; }
.search { min-width: 0; padding: 8px 10px; font-size: 13px; }
.switcher { padding: 3px; gap: 2px; flex: 0 0 auto; }
.switcher button { padding: 7px 9px; font-size: 11px; white-space: nowrap; }
.catalog-list { gap: 8px; }
.catalog-item { padding: 8px; gap: 5px; border-radius: 10px; }
.catalog-main { gap: 7px; min-height: 56px; }
.catalog-open { gap: 1px; padding: 1px 0; }
.catalog-code { font-size: 19px; }
.catalog-word { font-size: 13px; line-height: 1.25; }
.catalog-thumb-button { height: 56px; flex-basis: 56px; border-radius: 8px; }
.catalog-thumb-button img { width: 52px; height: 52px; }
.catalog-item .placeholder { height: 52px; width: 56px; border-radius: 8px; }
.catalog-item .thermometer { height: 6px; margin-top: 2px; }
.detail-layout { gap: 15px; margin-top: 10px; }
.detail-image-trigger { padding: 7px; }
.zoom-caption { margin: 0; }
.learn-panel { margin-top: 9px; padding: 12px 14px; }
.learn-panel h3 { margin: 0 0 5px; }
.learn-panel p { margin: 5px 0; line-height: 1.48; }
.word-coding { font-size: 18px; }

/* Mapping and drills: keep active content prominent without tall blank panels. */
.digit-grid, .digitcode-mappings { gap: 7px; margin: 11px 0; }
.digit-tile { padding: 9px 7px; min-height: 0; }
.digit-tile .d, .digit-tile .letter { font-size: 24px; line-height: 1.1; }
.digit-tile .hint { margin-top: 5px; font-size: 11px; line-height: 1.3; }
.quiz-target { min-height: 185px; padding: 8px; border-radius: 12px; }
.quiz-target img { height: 205px; max-height: 31vh; }
.quiz-target .letter-question { font-size: 76px; }
.quiz-panel .center.helper { margin: 7px 0 4px; }
.recall-choices { margin-top: 7px; gap: 7px; }
.recall-choices .btn { min-height: 43px; padding: 6px 12px; font-size: 18px; }
.digit-play { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap: 6px; margin: 10px 0 4px; }
.digit-play button { min-width: 0; min-height: 39px; padding: 5px; font-size: 17px; }
.stat-strip { gap: 5px; margin-top: 8px; }
.stat-strip span { font-size: 10px; padding: 3px 7px; }
.recognition-content { margin-top: 9px; }
.recognition-typed-form { margin: 11px auto 0; }
.recognition-typed-form label { margin-bottom: 5px; }
.recognition-typed-row { gap: 7px; }
.recognition-typed-row .btn { flex: none; }
.recognition-typed-row .answer-input { font-size: 18px; padding: 6px 8px; }

/* Compact training selectors: From and To on the same row whenever feasible. */
.training-range { margin-top: 9px; padding: 11px 13px; }
.training-range-header { display:flex; align-items:center; justify-content:space-between; gap:9px; flex-wrap:wrap; }
.training-range-header h3 { margin:0; font-size:16px; }
.training-range-chip { padding: 4px 9px; font-size: 14px; }
.training-range-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin: 8px 0 7px; }
.training-bound { padding: 7px 10px 5px; border-radius: 9px; }
.training-bound-heading { gap:7px; }
.training-bound-heading label { font-size: 13px; }
.training-select { font-size: 13px; padding: 5px 8px; min-width: 68px; max-width: 112px; }
.training-slider { height: 22px; margin: 3px 0 0; }
.training-bound-ends { font-size: 10px; line-height: 1.2; }
.training-range-footer { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.training-range-stats { margin:0; font-size:12px; padding:5px 9px; }
.training-range-note { margin:0; font-size:11px; line-height:1.35; }
.training-empty { padding:18px; }

/* Reference content: better information density without reducing legibility. */
.glossary-jump { gap:5px; margin:9px 0 12px; }
.glossary-jump a { padding:6px 10px; font-size:12px; }
.glossary-group { margin:13px 0 14px; }
.glossary-group-title { font-size:clamp(18px,2.7vw,21px); margin:0 0 6px; }
.glossary-entries { gap:8px; }
.glossary-entry { padding:12px 14px; border-radius:10px; }
.glossary-entry h3 { font-size:15px; margin:0 0 5px; }
.glossary-entry p { font-size:13px; line-height:1.55; }
.glossary-entry .glossary-example { margin-top:7px; padding:7px 9px; }
.glossary-example-label { margin-bottom:2px; }
.glossary-mapping { margin:11px 0 13px; }
.glossary-mapping h3 { margin:0 0 7px; }
.glossary-mapping h3:not(:first-child) { margin-top:12px; }
.glossary-code-tile { padding:5px 2px; }
.glossary-next { margin-top:11px; }
.glossary-next .buttons { margin-top:8px; }
.public-intro p { font-size:14px; line-height:1.55; }
.public-intro-steps { gap:7px; margin-top:11px; }
.public-intro-steps div { padding:9px; gap:2px; }
.technique-intro { margin-top:10px; margin-bottom:9px; }
.technique-list { gap:9px; }
.technique-card p, .technique-intro p { line-height:1.52; margin:6px 0; }

/* Lessons and dialogs retain full imagery and copy, but shed extra padding. */
.hero h1 { margin:0 0 9px; font-size:clamp(24px,3.8vw,36px); }
.hero .lead { margin:0 0 11px; font-size:clamp(15px,2.3vw,18px); }
.hero p:not(.eyebrow):not(.lead) { line-height:1.5; margin:7px 0; }
.intro-compact h1 { margin-bottom:8px; }
.intro-compact .lead { margin-bottom:9px; }
.intro-compact .brand-duo, .brand-duo { margin:9px auto 10px; padding:8px 9px; gap:18px; }
.intro-compact .brand-duo img, .brand-duo img { width:clamp(96px,15vw,125px); height:clamp(96px,15vw,125px); }
.intro-images { margin-top:10px; padding-top:10px; }
.intro-images .triptych, .triptych { gap:9px; margin:9px 0; }
.memage-card { padding:8px 7px; }
.memage-card img { height:clamp(110px,18vw,150px); }
.memage-hint { margin-top:3px; min-height:22px; }
.intro-scene { max-height:330px; margin-bottom:3px; }
.hero-number { margin:6px 0; }
.recall-promise { margin:12px auto 5px; line-height:1.43; }
.intro-images .next-step { margin-top:9px; }
.lesson-start-controls { margin:7px auto 12px; padding:9px 12px; gap:8px; flex-direction:row; align-items:center; }
.lesson-start-controls .btn { width:auto; }
.startup-lesson-option { gap:8px; font-size:13px; line-height:1.4; }
.startup-lesson-option input[type=checkbox] { width:18px; height:18px; }
.stepper { margin:2px 0 9px; gap:5px; }
.step { height:5px; width:40px; }
.story-grid { gap:15px; }
.story-text { font-size:15px; line-height:1.52; }
.story-text p { margin:8px 0; }
.memory-principle { margin:12px auto 10px; padding:12px 14px; }
.memory-principle h3 { margin-bottom:4px; font-size:17px; }
.memory-principle p { margin:5px 0; line-height:1.5; }
.story-recall { margin:12px auto 3px; }
.story-recall .quiz-form { margin:9px auto 0; }
.quiz-form { margin:10px auto; }
.answer-input { padding:9px; font-size:24px; }
.detail-quiz { margin:13px auto 0; padding:14px; }
.detail-quiz .detail-quiz-description { margin-bottom:10px; }
.detail-quiz h3 { margin-bottom:9px; }
.detail-choice.btn { min-height:42px; padding:7px 10px; }
.lesson-finish-preference { margin-top:10px; }
.success-badge { margin:6px 0 2px; font-size:32px; }

@media (max-width:760px) {
  .topbar { padding:5px 12px; }
  .brand-logo { width:38px; height:38px; }
  .tabs { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding:4px 8px; gap:2px; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tab { flex:0 0 auto; font-size:12px; padding:7px 10px; }
  .content { padding:11px 12px; }
  .footer { padding:7px 12px; font-size:10px; }
  .row-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .section-title { font-size:23px; }
  .section-desc { font-size:12px; }
  .digit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .digit-tile { display:grid; grid-template-columns:25px 25px minmax(0,1fr); text-align:left; align-items:center; gap:5px; padding:7px 8px; }
  .digit-tile .d,.digit-tile .letter { font-size:20px; }
  .digit-tile .hint { display:block; font-size:10px; margin:0; line-height:1.2; }
  .digit-play { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
  .catalog-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-thumb-button { height:52px; flex-basis:52px; }
  .catalog-thumb-button img { width:48px; height:48px; }
  .catalog-item .placeholder { width:52px; height:48px; }
  .catalog-item { padding:7px; }
  .catalog-main { min-height:52px; gap:6px; }
  .catalog-code { font-size:18px; }
  .catalog-word { font-size:12px; }
  .training-range-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .training-bound { padding:6px 7px 4px; }
  .training-select { min-width:59px; padding:4px; font-size:12px; }
  .recognition-typed-row { flex-direction:row; }
  .recognition-typed-row .btn { width:auto; }
  .quiz-target { min-height:165px; }
  .quiz-target img { height:185px; max-height:30vh; }
  .home-challenge { gap:8px; padding:9px 11px; }
  .home-challenge .btn { white-space:nowrap; }
  .lesson-start-controls { flex-direction:row; flex-wrap:nowrap; padding:8px; }
  .startup-lesson-option { flex:1 1 auto; min-width:0; font-size:12px; }
  .lesson-start-controls .btn { width:auto; flex:none; }
  .public-intro-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .public-intro-steps div { padding:7px; }
  .public-intro-steps strong { font-size:12px; }
  .public-intro-steps small { font-size:10px; line-height:1.3; }
  .intro-compact .brand-duo img, .brand-duo img { width:100px; height:100px; }
  .memage-card img { height:clamp(95px,24vw,125px); }
}
@media (max-width:420px) {
  .section-title { font-size:22px; }
  .catalog-heading-row .btn { font-size:12px; padding:6px 10px; }
  .catalog-tools { gap:5px; }
  .search { font-size:12px; padding:7px 8px; }
  .switcher button { padding:6px 5px; font-size:10px; }
  .home-challenge { align-items:flex-start; }
  .home-challenge .btn { white-space:normal; text-align:center; line-height:1.2; }
  .menu-card { padding:10px; }
  .menu-card-head { gap:5px; }
  .menu-card-head h3 { font-size:14px; }
  .menu-card p { font-size:11px; }
  .recall-choices .btn { padding:6px; }
  .training-range-note { flex-basis:100%; }
  .lesson-start-controls { margin:6px auto 8px; }
  .memage-hint { font-size:10px; min-height:20px; }
}
@media (max-width:335px) {
  .row-cards, .catalog-list, .training-range-fields { grid-template-columns:1fr; }
  .home-challenge { flex-wrap:wrap; }
  .catalog-tools { flex-wrap:wrap; }
  .search { flex-basis:100%; }
}


/* v26: Portrait-style Memage catalog tiles, based on the marked 180 x 145 px
   reference. Restrict changes to the catalog grid and its tile descendants. */
.catalog-list {
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 8px;
}
.catalog-item {
  min-height: 145px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
}
.catalog-main {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.catalog-thumb-button {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 9px;
}
.catalog-thumb-button img { width: 83px; height: 83px; }
.catalog-item .placeholder {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
}
.catalog-open {
  width: 100%;
  min-height: 23px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  gap: 3px 5px;
  padding: 0;
}
.catalog-code { font-size: 18px; line-height: 1.1; }
.catalog-word { font-size: 12px; line-height: 1.2; max-width: 100%; }
.catalog-meta { font-size: 9px; line-height: 1.2; }
.catalog-item .thermometer {
  flex: 0 0 6px;
  height: 6px;
  margin-top: 0;
}
@media (max-width: 760px) {
  .catalog-list { grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); }
  .catalog-item { min-height: 145px; padding: 7px; }
  .catalog-thumb-button { flex-basis: 88px; width: 88px; height: 88px; }
  .catalog-thumb-button img { width: 83px; height: 83px; }
  .catalog-item .placeholder { flex-basis: 88px; width: 88px; height: 88px; }
  .catalog-code { font-size: 18px; }
  .catalog-word { font-size: 12px; }
}
@media (max-width: 355px) {
  .catalog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-thumb-button { flex-basis: 78px; width: 78px; height: 78px; }
  .catalog-thumb-button img { width: 73px; height: 73px; }
  .catalog-item .placeholder { flex-basis: 78px; width: 78px; height: 78px; }
  .catalog-open { gap: 2px 4px; }
  .catalog-code { font-size: 17px; }
  .catalog-word { font-size: 11px; }
}

/* v27: Approved Caesar Dressing for large inscriptions and key topics.
   Helvetica remains the workhorse font for all running text, numeric data,
   captions, buttons, training controls and minor headings. The remote font is
   decorative only: no functionality depends on a network font download. */
:root {
  --font-display-anubis: 'Caesar Dressing', 'Copperplate', 'Palatino Linotype', Georgia, serif;
  --font-text-anubis: Helvetica, Arial, 'Liberation Sans', sans-serif;
}
html, body, button, input, select, textarea {
  font-family: var(--font-text-anubis);
}
h1, h2, .section-title, .glossary-group-title, .brand-text,
.feature-title, .public-study-guide summary {
  font-family: var(--font-display-anubis);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .006em;
  line-height: 1.18;
}
/* Minor headings and long labels must remain easy to scan. */
h3, h4, h5, h6, .eyebrow, .menu-card-head h3,
.public-intro-steps strong, .public-study-body h3,
.catalog-code, .catalog-word, .memage-code, .memage-name,
.digit-tile .d, .digit-tile .letter, .tab, .btn {
  font-family: var(--font-text-anubis);
  letter-spacing: normal;
}
h3, h4, h5, h6, .menu-card-head h3, .public-study-body h3 {
  font-weight: 750;
}
.section-title {font-size: clamp(29px, 3.25vw, 36px); line-height: 1.13;}
.hero h1 {font-weight: 400; letter-spacing: .006em;}
.brand-text {font-size: 18px; letter-spacing: .012em;}
.eyebrow {font-size: 11px; line-height: 1.3; letter-spacing: .07em; font-weight: 800;}
.section-desc {font-size: 14px; line-height: 1.38;}
.menu-card-head h3 {font-size: 17px;}
.menu-card p {font-size: 13px; line-height: 1.4;}
.glossary-group-title {font-size: clamp(22px, 2.8vw, 27px);}
.glossary-entry p {font-size: 14px;}
.glossary-entry h3 {font-size: 16px;}
.training-range-note {font-size: 12px;}

/* The Memages entry screen should begin immediately below the navigation.
   The redundant catalog eyebrow has been removed from the markup. */
.content:has(.memages-catalog-screen) {padding-top: 10px;}
.memages-catalog-screen .catalog-heading-row {margin: 0 0 2px;}
.memages-catalog-screen .catalog-summary {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.35;
}
/* Previous .card padding overrode the zero-padding accordion, causing the
   unexpected ~73px closed guide. The more specific rule fixes that. */
.public-study-guide.card {padding: 0; margin: 5px 0 7px; overflow: hidden;}
.public-study-guide summary {
  display: list-item;
  padding: 10px 14px;
  font-size: 18px;
  line-height: 1.25;
  min-height: 43px;
}
.public-study-body {padding: 0 14px 12px;}
.public-study-body h3 {font-size: 16px;}
.public-study-body p {font-size: 14px; line-height: 1.5;}
.memages-catalog-screen .catalog-pages {margin: 5px 0 7px; padding: 1px 1px 3px;}
.catalog-page {font-size: 13px; padding: 7px 10px;}
.memages-catalog-screen .catalog-tools {margin-bottom: 8px;}
.search {font-size: 14px; padding: 8px 11px;}
.switcher button {font-size: 12px; padding: 7px 9px;}
.memages-catalog-screen .catalog-item {min-height: 157px;}
.memages-catalog-screen .catalog-code {font-size: 20px; line-height: 1.1;}
.memages-catalog-screen .catalog-word {font-size: 14px; line-height: 1.2;}
.memages-catalog-screen .catalog-meta {font-size: 11px;}

@media (max-width: 760px) {
  .section-title {font-size: clamp(27px, 6.2vw, 32px);}
  .content:has(.memages-catalog-screen) {padding-top: 8px;}
  .memages-catalog-screen .catalog-summary {font-size: 13px;}
  .public-study-guide summary {font-size: 17px; padding: 9px 12px; min-height: 42px;}
  .catalog-page {font-size: 12px; padding: 7px 9px;}
  .memages-catalog-screen .catalog-item {min-height: 153px;}
  .memages-catalog-screen .catalog-code {font-size: 19px;}
  .memages-catalog-screen .catalog-word {font-size: 13px;}
  .switcher button {font-size: 12px; padding: 7px 6px;}
  .brand-text {font-size: 16px;}
}
@media (max-width: 355px) {
  .section-title {font-size: 26px;}
  .public-study-guide summary {font-size: 16px;}
  .memages-catalog-screen .catalog-code {font-size: 18px;}
  .memages-catalog-screen .catalog-word {font-size: 12px;}
  .memages-catalog-screen .catalog-item {min-height: 151px;}
  .catalog-page {padding: 7px 8px;}
}

/* v28 -- Digitcodes mapping cards, requested horizontal 2 -> N format.
   Number and code letter are twice the size of the compact v27 controls.
   Hints use the same body-ink color and Helvetica as the rest of the app. */
.digitcode-mappings .digit-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  text-align: center;
  padding: 10px 7px;
}
.digitcode-mappings .digit-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  width: 100%;
  font-family: var(--font-text-anubis);
  font-size: 48px;
  font-weight: 850;
  line-height: 1.05;
  color: var(--color-number);
  font-variant-numeric: lining-nums tabular-nums;
}
.digitcode-mappings .digit-pair .d,
.digitcode-mappings .digit-pair .letter {
  color: inherit;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
}
.digitcode-mappings .digit-pair .digit-arrow {
  color: var(--color-text);
  font-size: .52em;
  font-weight: 750;
  line-height: 1;
}
.digitcode-mappings .digit-tile .hint,
.digitcode-mappings .digit-tile .digit-hint {
  display: block;
  margin: 7px 0 0;
  width: 100%;
  font-family: var(--font-text-anubis);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.32;
  color: var(--color-text);
  overflow-wrap: break-word;
}
.digitcode-mappings .digit-tile .digit-hint strong.digit-hint-emphasis {
  color: inherit;
  font-family: inherit;
  font-weight: 800;
}
@media (max-width: 760px) {
  /* Override the old side-by-side mobile tile: mapping stays on ONE line,
     with the explanatory hint directly below. */
  .digitcode-mappings .digit-tile {
    display: flex;
    flex-direction: column;
    padding: 9px 6px;
  }
  .digitcode-mappings .digit-pair { font-size: 40px; gap: 4px; }
  .digitcode-mappings .digit-tile .hint,
  .digitcode-mappings .digit-tile .digit-hint {
    font-size: 12px;
    line-height: 1.34;
    margin-top: 6px;
  }
}
@media (max-width: 355px) {
  .digitcode-mappings .digit-pair { font-size: 37px; gap: 3px; }
}


/* v29: 1.5x larger Memages / Learning image, preserving full image and layout.
   Previous max size: 300px desktop, 250px phone; new: 450px / 375px.
   Use high-resolution 512px original assets for crisp display at 450px. */
.detail-layout {
  grid-template-columns: minmax(0, min(450px, 50%)) minmax(0, 1fr);
}
.detail-image-trigger .detail-image {
  width: 100%;
  max-width: 450px;
  height: auto;
  object-fit: contain;
}
@media (max-width: 620px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-image-trigger .detail-image { max-width: min(375px, 100%); }
}

/* v30: Digitcodes explanatory text uses exactly the heading color token.
   Scoped to Digitcodes to preserve colors on other screens. */
.digitcodes-screen .section-desc,
.digitcodes-screen .digitcode-mappings .digit-tile .digit-hint,
.digitcodes-screen .quiz-panel .center.helper {
  color: var(--color-heading);
  font-family: var(--font-text-anubis);
}


/* v31: The same readable headline-brown text on EVERY screen.
   Align all explanatory copy (not digits, labels, buttons, outcomes or the
   black cinematic scene) with the #58351B color approved in v30 Digitcodes.
   Helvetica is kept for running copy; Caesar Dressing remains display only. */
:root {
  --color-text-subtle: var(--color-heading);
}
.content .section-desc,
.content .helper,
.content .small-label,
.content .catalog-meta,
.content .menu-card p,
.content .glossary dd,
.content .story-text,
.content .note,
.content .hero .lead,
.content .hero p:not(.eyebrow):not(.lead),
.content .intro-compact .lead.secret-copy,
.content .zoom-caption,
.content .technique-card p,
.content .technique-intro p,
.content .glossary-entry p,
.content .glossary-entry .glossary-example,
.content .glossary-check-decoded,
.content .glossary-next p,
.content .public-intro p,
.content .public-intro-steps small,
.content .public-study-body p,
.content .training-bound-ends,
.content .training-empty p,
.content .recognition-typed-form label,
.content .home-challenge span,
.content .memory-principle p,
.content .detail-quiz-description,
.content .detail-quiz-finish p,
.content .stat-strip span,
.content .chip,
.content .catalog-summary {
  color: var(--color-heading);
  font-family: var(--font-text-anubis);
}
/* Keep explanatory copy on the *black* first-lesson scene legible. */
.content .intro-images .soft-card.center .helper {
  color: var(--color-scene-helper);
}
/* Deliberately unchanged: numeric/code accents, selected controls,
   correct/error feedback, top navigation, logo, decorative eyebrow labels. */


/* v32: Larger Memage artwork and single-action catalog cards.
   One accessible button covers the entire tile; no catalog lightbox.
   Learning-screen image zoom remains untouched. */
.memages-catalog-screen .catalog-list { align-items:stretch; }
.memages-catalog-screen .catalog-item {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  width:100%;
  height:198px;
  min-height:198px;
  max-width:100%;
  padding:5px 5px 13px;
  gap:0;
  margin:0;
  text-align:center;
  color:var(--color-text);
  font:inherit;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .14s, box-shadow .14s;
}
.memages-catalog-screen .catalog-item:hover {
  border-color:var(--color-gold);
  box-shadow:0 2px 8px rgba(95,61,22,.12);
}
.memages-catalog-screen .catalog-item:focus-visible {
  outline:3px solid var(--color-focus);
  outline-offset:2px;
}
.memages-catalog-screen .catalog-main {
  display:flex;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  width:100%;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:2px;
}
.memages-catalog-screen .catalog-image {
  display:grid;
  place-items:center;
  flex:0 1 auto;
  width:min(148px,100%);
  aspect-ratio:1;
  max-height:148px;
  overflow:hidden;
  background:rgba(255,253,246,.65);
  border:1px solid #e8d0ab;
  border-radius:9px;
}
.memages-catalog-screen .catalog-image img {
  display:block;
  height:100%;
  width:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  flex:none;
}
.memages-catalog-screen .catalog-image .placeholder {
  display:grid;
  place-items:center;
  flex:none;
  width:100%;
  height:100%;
  color:var(--color-heading);
}
.memages-catalog-screen .catalog-label {
  display:flex;
  flex:0 0 auto;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  column-gap:5px;
  row-gap:0;
  width:100%;
  min-width:0;
  font-family:var(--font-text-anubis);
  font-size:18px;
  font-weight:800;
  line-height:1.12;
  margin:0 0 1px;
}
.memages-catalog-screen .catalog-label .catalog-code,
.memages-catalog-screen .catalog-label .catalog-word {
  display:inline;
  min-width:0;
  width:auto;
  max-width:100%;
  font:inherit;
  line-height:inherit;
  margin:0;
  padding:0;
  overflow-wrap:anywhere;
  text-align:center;
}
.memages-catalog-screen .catalog-label .catalog-word mark {font:inherit;}
.memages-catalog-screen .catalog-meta {
  font-size:11px;
  line-height:1;
}
.memages-catalog-screen .catalog-item .thermometer {
  position:absolute;
  bottom:2px; /* +1px border = 3px visible inset */
  left:50%;
  transform:translateX(-50%);
  display:block;
  flex:none;
  width:80%;
  height:6px;
  margin:0;
  padding:0;
  border-radius:6px;
  pointer-events:none;
}
@media(max-width:760px){
  .memages-catalog-screen .catalog-item {height:192px;min-height:192px;}
  .memages-catalog-screen .catalog-image {width:min(142px,100%);max-height:142px;}
  .memages-catalog-screen .catalog-label {font-size:17px;}
}
@media(max-width:355px){
  .memages-catalog-screen .catalog-item {height:174px;min-height:174px;}
  .memages-catalog-screen .catalog-image {width:min(122px,100%);max-height:122px;}
  .memages-catalog-screen .catalog-label {font-size:16px;}
}

/* v35: prominently placed return action above the Learning information panel.
   Use approved gold/ink semantic tokens, not arbitrary colors. */
.learning-side { min-width: 0; }
.learning-back-row { display:flex; align-items:center; margin:0 0 7px; }
.learning-back-row .learning-back-btn {
  width:auto; min-height:42px; padding:8px 16px; font-size:14px; font-weight:800;
  background:var(--color-button-gold); border-color:var(--color-button-gold);
  color:var(--color-button-gold-ink); white-space:nowrap;
  box-shadow:0 2px 0 var(--color-button-gold-hover);
}
.learning-back-row .learning-back-btn:hover {
  background:var(--color-button-gold-hover); border-color:var(--color-button-gold-hover);
}
.learning-side > .learn-panel { margin-top:0; }
.learning-practice-row { margin-top:8px; }

/* v46: compact installation, cache status and local backup controls. */
.pwa-settings-card{min-width:0;padding:14px 16px}
.pwa-settings-card h3{margin:0 0 6px;color:var(--color-heading)}
.pwa-settings-card .helper{margin:4px 0 7px;line-height:1.42;color:var(--color-heading)}
.pwa-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pwa-version{font:700 12px Helvetica,Arial,sans-serif;color:var(--color-section-heading)}
.pwa-offline-status{margin:7px 0;padding:8px 10px;border-radius:8px;border:1px solid var(--color-border);background:rgba(255,248,236,.8);color:var(--color-heading);font:600 13px/1.35 Helvetica,Arial,sans-serif}
.pwa-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 5px}
.pwa-buttons .btn{min-height:38px}
.pwa-settings-card .pwa-error{color:var(--color-danger)}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;clip:rect(0 0 0 0)!important;overflow:hidden!important;white-space:nowrap!important}
@media(max-width:650px){.pwa-settings-card{padding:12px}.pwa-buttons .btn{flex:1 1 auto}}

@media(max-width:600px){.pwa-card-grid{grid-template-columns:1fr!important}}