/* CADEELI polish layer. Part 1 pairs with assets/js/cadeeli-motion.js (Motion) and is only
   active once that script adds .motion-enhanced (never under reduced motion). */
.motion-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Motion drives the hero entrance; the CSS keyframe stays as the no-JS fallback. */
.motion-enhanced .home-hero-art { animation:none; will-change:translate; }

/* Count-up digits keep their width so the layout never jumps while counting. */
.motion-enhanced .diversity-fact > strong,.motion-enhanced .learn-ornament { font-variant-numeric:tabular-nums; }

/* Tactile press feedback for primary actions (CSS, so it never fights Motion's inline styles). */
@media (prefers-reduced-motion:no-preference) {
  .motion-enhanced :is(.home-cta,.text-cta,.app-nav-item,.result-card,.photo-wall-item,.map-discovery-list button,.language-card,.word-entry-footer a):active { scale:.975; transition:scale .08s ease-out; }
}

@media print {
  .motion-enhanced [style*="opacity"] { opacity:1 !important; transform:none !important; }
}

/* ---------------------------------------------------------------------------
   UI/UX Pro Max pre-delivery pass (2026-10-04), measured with an automated audit
   at 390 and 1366 px on Inicio, Mapa, Archivo, Lenguas and Proyecto.
   Same palette; each color is only darkened enough to reach WCAG AA. */

/* Focus not obscured: anchors and focused controls clear the sticky header. */
html { scroll-padding-top:calc(var(--site-header-h,80px) + 12px); }

/* Contrast: small turquoise and grey text on ivory reached 4.0–4.3:1; now ≥ 4.5:1. */
.catalog-route span,.register-letter { color:#0d6b73; }
.catalog-ledger dd { color:#5d7c80; }
.register-source { color:#4a6873; opacity:1; }
.learn-search span { color:#52646d; }
.contribute-steps span,body.site-page .method-flow b,body.site-page .method-grid li > span { color:#0d6b73; }
body.site-page .method-flow i { color:#52707f; }
body.site-page .method-definitions small { color:#0b5f69; }
/* Prominence colors are tuned for map markers; as card text they are mixed toward night blue. */
.result-card-kicker em,.result-card-arrow { color:color-mix(in srgb,var(--marker-color) 42%,#07172b); }
.result-card-arrow { opacity:1; }

/* Target size: stand-alone links and buttons get at least 24 px (44 px for primary text actions). */
.hero-scroll { display:inline-flex; align-items:center; min-height:44px; }
.atlas-language-links button,.atlas-language-links a,.language-catalog-heading > a,.vocabulary-meta a,.word-entry-footer a { display:inline-flex; align-items:center; min-height:24px; }
.catalog-archive .text-cta { display:inline-flex; align-items:center; min-height:44px; }
#clear-filters { min-height:32px; padding-inline:.55rem; }
.inline-check { min-height:32px; display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; }
.inline-check input[type="checkbox"] { width:18px; height:18px; flex:none; }

/* Icons are SVG, never glyphs or emoji. */
.global-assistant-trigger svg,.global-assistant-head svg { display:block; width:58%; height:58%; fill:currentColor; }

/* ---------------------------------------------------------------------------
   Photo-first screens (UI/UX Pro Max: museum/gallery, storytelling). Images are the
   published Supabase photographs; cadeeli-gallery.js builds the new chapters. */
body:not(.app-view-archive) :is(.archive-mosaic,.archive-communities) { display:none; }
.archive-mosaic[hidden],.archive-communities[hidden],.record-anatomy[hidden] { display:none !important; }

/* Shared photo tile: image fills, label sits on a short scrim at the bottom. */
:is(.archive-mosaic-tile,.archive-community) { position:relative; display:block; padding:0; overflow:hidden; border:0; background:#12384e; color:#fff; cursor:pointer; text-align:left; }
:is(.archive-mosaic-tile,.archive-community) img { display:block; width:100%; height:100%; object-fit:cover; transition:scale .5s cubic-bezier(.2,.7,.2,1),filter .3s ease; }
:is(.archive-mosaic-tile,.archive-community):is(:hover,:focus-visible) img { scale:1.04; filter:saturate(1.08); }
:is(.archive-mosaic-tile,.archive-community,.record-anatomy-figure):focus-visible { outline:3px solid #2d9eb4; outline-offset:3px; }
.archive-mosaic-tile > span { position:absolute; inset:auto 0 0; padding:2.2rem .8rem .7rem; background:linear-gradient(transparent,rgba(4,18,33,.82)); font:700 .66rem var(--font-sans); letter-spacing:.08em; text-transform:uppercase; }

/* Archivo · mosaic */
.archive-mosaic { display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:.45rem; height:clamp(360px,34vw,500px); }
.archive-mosaic-tile:first-child { grid-row:1 / 3; }
.archive-mosaic:has(> :nth-child(3):last-child) { grid-template-columns:1.25fr 1fr; }

/* Archivo · por comunidad */
.archive-communities { margin:2.6rem 0 1rem; padding-top:1.6rem; border-top:1px solid #afc7c3; }
.archive-communities-head { margin-bottom:1.1rem; }
body.site-page .archive-communities-head .section-index { margin:0 0 .45rem; color:#0d6b73; font:800 .68rem var(--font-sans); letter-spacing:.16em; }
.archive-communities-head h2 { margin:0; color:#071f39; font:400 clamp(1.7rem,2.6vw,2.4rem)/1.05 Georgia,serif; letter-spacing:-.03em; }
.archive-communities-list { display:grid; grid-auto-flow:column; grid-auto-columns:clamp(172px,15vw,214px); gap:.85rem; overflow-x:auto; padding:.25rem .1rem 1rem; scroll-snap-type:x proximity; overscroll-behavior-inline:contain; scrollbar-width:thin; scrollbar-color:#8fb3b6 transparent; }
.archive-community { display:grid; grid-template-rows:auto 1fr; scroll-snap-align:start; border:1px solid #c6d5d2; border-radius:3px; background:#fff; color:#071f39; transition:border-color .2s ease,box-shadow .2s ease,translate .2s ease; }
.archive-community img { aspect-ratio:4 / 3; height:auto; }
.archive-community-copy { display:grid; gap:.25rem; padding:.7rem .75rem .8rem; }
.archive-community-copy strong { font:400 1.08rem/1.15 Georgia,serif; }
.archive-community-copy small { color:#4a6873; font:600 .7rem var(--font-sans); }
.archive-community:hover { border-color:#49a9ae; box-shadow:0 10px 24px rgba(7,31,57,.12); translate:0 -2px; }
.archive-community[aria-pressed="true"] { border-color:#073968; box-shadow:inset 0 -4px #49d1d1,0 10px 24px rgba(7,31,57,.14); }
.archive-community[aria-pressed="true"] .archive-community-copy strong::after { content:'  ✓'; color:#0d6b73; font:700 .9rem var(--font-sans); }

/* Archivo · records as photographs first */
body.site-page.app-view-archive .result-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:2rem 1.3rem; overflow:visible; }
body.site-page.app-view-archive .result-card { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:.8rem; width:100%; min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; transition:translate .25s ease; }
body.site-page.app-view-archive .result-card:hover,body.site-page.app-view-archive .result-card.active { padding:0; background:transparent; translate:0 -3px; }
body.site-page.app-view-archive .result-card-photo { width:100%; height:auto; min-height:0; aspect-ratio:4 / 3; border-radius:3px; object-fit:cover; box-shadow:0 1px 0 rgba(7,31,57,.08); transition:box-shadow .25s ease,filter .25s ease; }
body.site-page.app-view-archive .result-card:hover .result-card-photo { box-shadow:0 14px 30px rgba(7,31,57,.2); filter:saturate(1.08); }
body.site-page.app-view-archive .result-card.active .result-card-photo { box-shadow:0 0 0 3px #f6f5ef,0 0 0 6px #49d1d1; }
body.site-page.app-view-archive .result-card-placeholder { height:auto; aspect-ratio:4 / 3; }
body.site-page.app-view-archive .result-card-copy { padding:0 .1rem; }
body.site-page.app-view-archive .result-card-kicker { font-size:.62rem; }
body.site-page.app-view-archive .result-card-kicker em { display:inline; }
body.site-page.app-view-archive .result-card-title { font-size:1.22rem; line-height:1.15; }
body.site-page.app-view-archive .result-card-arrow { top:.65rem; right:.65rem; bottom:auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(246,245,239,.94); font-size:.8rem; }
body.site-page.app-view-archive .result-photo-count { position:absolute; top:.65rem; left:.65rem; margin:0; padding:.25rem .5rem; border-radius:99px; background:rgba(7,23,43,.82); color:#fff; font:700 .62rem var(--font-sans); }

/* Archivo · every photograph, larger and portrait like the field captures */
body.site-page.app-view-archive .photo-wall { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1.6rem 1.1rem; }
body.site-page.app-view-archive .photo-wall-item { border:0; background:transparent; transition:translate .25s ease; }
body.site-page.app-view-archive .photo-wall-item img { aspect-ratio:3 / 4; border-radius:3px; transition:box-shadow .25s ease; }
body.site-page.app-view-archive .photo-wall-item:hover { translate:0 -3px; }
body.site-page.app-view-archive .photo-wall-item:hover img { box-shadow:0 14px 30px rgba(7,31,57,.2); }
body.site-page.app-view-archive .photo-wall-caption { padding:.7rem .1rem 0; }

/* Archivo · desktop: title beside the mosaic, sticky filter rail beside the gallery. */
@media (min-width:1024px) {
  body.site-page.app-view-archive .explorer-panel { display:grid; grid-template-columns:minmax(240px,280px) minmax(0,1fr) minmax(0,.95fr); grid-template-rows:auto auto auto auto auto 1fr; column-gap:clamp(2rem,4vw,4.5rem); align-items:start;
    grid-template-areas:"bar bar mosaic" "eyebrow eyebrow mosaic" "title title mosaic" "intro intro mosaic" "links links mosaic" "pulse pulse mosaic" "comm comm comm" "tours tours tours" "notice notice notice" "search heading heading" "filters switch switch" "filters list list" "filters wall wall"; }
  body.site-page.app-view-archive .explorer-panel::before { grid-area:bar; }
  body.site-page.app-view-archive .explorer-panel > .eyebrow { grid-area:eyebrow; }
  body.site-page.app-view-archive .explorer-panel > h1 { grid-area:title; }
  body.site-page.app-view-archive .explorer-panel > .intro { grid-area:intro; }
  body.site-page.app-view-archive .atlas-language-links { grid-area:links; }
  body.site-page.app-view-archive .atlas-pulse { grid-area:pulse; align-self:end; margin-bottom:0; }
  body.site-page.app-view-archive .archive-mosaic { grid-area:mosaic; align-self:stretch; height:auto; min-height:clamp(380px,36vw,540px); }
  body.site-page.app-view-archive .archive-communities { grid-area:comm; min-width:0; }
  body.site-page.app-view-archive .archive-tours { grid-area:tours; min-width:0; }
  body.site-page.app-view-archive .archive-connection { grid-area:notice; }
  body.site-page.app-view-archive .search-box { grid-area:search; max-width:none; margin:2.1rem 0 1rem; }
  body.site-page.app-view-archive .results-heading { grid-area:heading; align-self:end; margin:2.1rem 0 1rem; }
  body.site-page.app-view-archive .archive-view-switch { grid-area:switch; margin-top:0; }
  body.site-page.app-view-archive .result-list { grid-area:list; }
  body.site-page.app-view-archive .photo-wall { grid-area:wall; }
  body.site-page.app-view-archive :is(.mobile-sheet-toolbar,.mobile-filter-toggle) { display:none; }
  body.site-page.app-view-archive .filter-drawer { grid-area:filters; margin:0; position:sticky; top:1.2rem; display:block; max-height:calc(100svh - var(--site-header-h,80px) - 2.4rem); overflow-y:auto; padding:1rem 1rem 1.2rem; border:1px solid #c6d5d2; border-radius:4px; background:#fff; scrollbar-width:thin; }
  body.site-page.app-view-archive .filter-drawer .segmented { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
  body.site-page.app-view-archive .filter-drawer .segmented button:first-child { grid-column:1 / -1; }
  body.site-page.app-view-archive .filter-drawer .filter-grid { grid-template-columns:1fr; }
}

/* Archivo · phones and tablets: photographs open the page. */
@media (max-width:1023px) {
  body.site-page.app-view-archive .archive-mosaic { grid-template-columns:none; grid-template-rows:none; grid-auto-flow:column; grid-auto-columns:minmax(150px,46%); height:clamp(190px,52vw,300px); margin:0 0 1.6rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  body.site-page.app-view-archive .archive-mosaic-tile { scroll-snap-align:start; }
  body.site-page.app-view-archive .archive-mosaic-tile:first-child { grid-row:auto; grid-column:span 1; }
  body.site-page.app-view-archive .archive-mosaic { grid-auto-columns:minmax(150px,46%); }
  body.site-page.app-view-archive .archive-mosaic-tile:first-child { min-width:72vw; }
  .archive-communities { margin-top:1.8rem; }
}
@media (max-width:560px) {
  body.site-page.app-view-archive .result-list { grid-template-columns:1fr 1fr; gap:1.4rem .8rem; }
  body.site-page.app-view-archive .result-card-title { font-size:1.02rem; }
  body.site-page.app-view-archive .result-card .result-meta,body.site-page.app-view-archive .result-card-kicker em { display:none; }
  body.site-page.app-view-archive .photo-wall { grid-template-columns:1fr 1fr; gap:1.2rem .8rem; }
  body.site-page.app-view-archive .photo-wall-caption strong { font-size:.98rem; }
}

/* Mapa · phone sheet: the collapsed sheet opens on a carousel of photographed records;
   search and filters follow. (Visual order only; the list keeps its own focus order.) */
@media (max-width:820px) {
  body.site-page:not(.app-view-archive):not(.mobile-list-open) .explorer-panel { display:flex; flex-direction:column; }
  body.site-page:not(.app-view-archive):not(.mobile-list-open) .explorer-panel > * { flex:none; }
  body.site-page:not(.app-view-archive):not(.mobile-list-open) .result-list { order:1; margin:.15rem 0 .9rem; }
  body.site-page:not(.app-view-archive):not(.mobile-list-open) .search-box { order:2; }
  body.site-page:not(.app-view-archive):not(.mobile-list-open) :is(.mobile-filter-toggle,.filter-drawer) { order:3; }
  body.site-page:not(.app-view-archive):not(.mobile-list-open) :is(.results-heading,.archive-view-switch,.atlas-language-links) { order:4; }
  body.site-page:not(.app-view-archive):not(.mobile-list-open) .result-list { display:flex; flex-direction:row; overflow-x:auto; gap:.6rem; }
  body.site-page:not(.app-view-archive):not(.mobile-list-open) .result-card { flex:0 0 auto; display:grid; grid-template-columns:none; grid-template-rows:auto 1fr; align-items:start; gap:.45rem; width:min(58vw,224px); min-width:0; min-height:0; padding:.4rem .4rem .55rem; }
  body.site-page:not(.app-view-archive):not(.mobile-list-open) .result-card-photo { width:100%; height:auto; min-height:0; aspect-ratio:16 / 9; }
  body.site-page:not(.app-view-archive):not(.mobile-list-open) .result-card :is(.result-meta,.result-languages,.result-photo-count) { display:none; }
  body.site-page:not(.app-view-archive):not(.mobile-list-open) .result-card-title { font-size:.98rem; }
}

/* Proyecto · a real record, field by field */
.record-anatomy { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,5.5rem); align-items:center; padding:clamp(3.5rem,7vw,7rem) clamp(1.5rem,7vw,7rem); background:#07172b; color:#fff; }
.record-anatomy-figure { position:relative; margin:0; }
.record-anatomy-figure img { display:block; width:100%; aspect-ratio:4 / 5; max-height:78svh; object-fit:cover; border-radius:3px; background:#12384e; }
.record-anatomy-figure figcaption { margin-top:.7rem; color:#9fbfca; font:600 .72rem var(--font-sans); letter-spacing:.1em; text-transform:uppercase; }
body.site-page .record-anatomy .section-index { margin:0 0 .9rem; color:#7ed9dc; font:800 .68rem var(--font-sans); letter-spacing:.16em; }
body.site-page .record-anatomy h2 { max-width:560px; margin:0; font:400 clamp(2.3rem,4vw,3.8rem)/1.02 Georgia,serif; letter-spacing:-.045em; text-wrap:balance; }
.record-anatomy-intro { max-width:520px; margin:1.1rem 0 1.8rem; color:#c3d6dc; line-height:1.65; }
.record-anatomy-fields { display:grid; margin:0 0 2rem; border-top:1px solid rgba(159,233,232,.28); }
.record-anatomy-fields > div { display:grid; grid-template-columns:minmax(150px,.7fr) minmax(0,1.3fr); gap:1rem; padding:.85rem 0; border-bottom:1px solid rgba(159,233,232,.18); }
.record-anatomy-fields dt { display:flex; gap:.6rem; color:#9fbfca; font:700 .7rem/1.5 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; }
.record-anatomy-fields dt span { color:#49d1d1; font-variant-numeric:tabular-nums; }
.record-anatomy-fields dd { margin:0; color:#fff; font:400 1.06rem/1.4 Georgia,serif; overflow-wrap:anywhere; }
.record-anatomy-fields dd[lang="yua"] { color:#9fe9e8; font-style:italic; }
.record-anatomy .home-cta-dark { background:#49d1d1; color:#071f39; }
.record-anatomy :focus-visible { outline-color:#ffd166; }
@media (max-width:820px) {
  .record-anatomy { grid-template-columns:1fr; padding:3rem 1.35rem; }
  .record-anatomy-figure img { aspect-ratio:4 / 3; }
  .record-anatomy-fields > div { grid-template-columns:1fr; gap:.25rem; }
}

/* Aportar · the wizard opens with the same night-blue masthead as the site. */
body.site-page .contribution-modal .wizard-header { background:#07172b; color:#fff; border-bottom:0; }
body.site-page .contribution-modal .wizard-header .eyebrow { color:#7ed9dc; }
body.site-page .contribution-modal .wizard-header h2 { color:#fff; }
body.site-page .contribution-modal .wizard-header .wizard-progress-label { color:#c3d6dc; }
body.site-page .contribution-modal .wizard-header .modal-close { border-color:rgba(255,255,255,.55); background:transparent; color:#fff; }
body.site-page .contribution-modal .wizard-header .modal-close:hover { background:#fff; color:#07172b; }
body.site-page .contribution-modal .wizard-header :focus-visible { outline-color:#ffd166; }

/* Inicio · the 68-name register: the names sit inline with no spaces between them, so a
   line had no wrap point and ran ~3000 px wide. Wrapping between items fixes it. */
.home-register-list { display:flex; flex-wrap:wrap; align-items:baseline; }
.home-register-list li { display:inline-block; }

/* ---------------------------------------------------------------------------
   UI/UX Pro Max pre-delivery checklist · touch (phones and touch screens).
   Apple and Android ask for 44 pt / 48 dp. Compact header and index controls keep
   their look and get an invisible 44 px hit area; standalone actions grow to 44 px. */
@media (max-width:820px), (pointer:coarse) {
  body.site-page :is(.lang-btn,.brand,.mobile-view-switch button) { position:relative; }
  body.site-page :is(.lang-btn,.brand,.mobile-view-switch button)::before { content:''; position:absolute; inset:min(0px,calc((100% - 44px) / 2)) 0; }
  body.site-page .header-actions :is(.connection-pill,#auth-button) { min-height:44px; }
  body.site-page .header-actions .connection-pill { width:44px; }
  body.site-page .catalog-letters button { height:44px; min-width:44px; }
  body.site-page :is(.text-cta,.register-action,.atlas-language-links button,.atlas-language-links a,.language-catalog-heading > a,.vocabulary-meta a,.word-entry-footer a,.home-footer button,.skip-link) { display:inline-flex; align-items:center; min-height:44px; }
  body.site-page :is(.archive-view-switch button,.vocabulary-categories button,.mobile-filter-toggle,.map-reset,#clear-filters,.archive-more button) { min-height:44px; }
  body.site-page .map-stage :is(.map-tools button,.maplibregl-ctrl-group button) { width:44px !important; height:44px !important; }
}
/* Focus not obscured: on phones the bottom tab bar is fixed too. */
@media (max-width:820px) { html { scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)); } }

/* Password visibility toggle (added by cadeeli-ux.js) */
.password-field { position:relative; display:block; }
.password-field input { width:100%; padding-right:3.4rem; }
.password-toggle { position:absolute; top:50%; right:.3rem; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:4px; background:transparent; color:#073968; cursor:pointer; translate:0 -50%; }
.password-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.password-toggle:focus-visible { outline:3px solid #2d9eb4; outline-offset:1px; }
/* Invalid wizard fields are marked by shape and text, not color alone. */
.wizard-step [aria-invalid="true"] { border-color:#b3412c !important; box-shadow:0 0 0 2px rgba(179,65,44,.18) !important; }

/* Navigation · phones keep five destinations in the bottom bar (UI/UX Pro Max: bottom nav ≤ 5).
   Proyecto is informational: it is reached from the Inicio footer and only joins the bar,
   highlighted, while it is the current page. */
@media (max-width:820px) {
  body.site-page .app-navigation [data-app-view="project"]:not([aria-current="page"]) { display:none; }
  body.site-page .app-navigation .app-nav-item { flex:1 1 0; width:auto; }
}

/* Record sheet · the photograph gets more room on wide screens, the shadow uses the
   night-blue tint, and the actions read as one primary + secondary + quiet link. */
body.site-page .detail-panel { box-shadow:-24px 0 60px rgba(7,23,43,.2); }
@media (min-width:1280px) { body.site-page.app-view-archive .detail-panel { width:clamp(420px,38vw,600px); } }
body.site-page .detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
body.site-page .detail-actions :is(.button,a) { justify-content:center; min-height:44px; padding:.55rem .7rem; font-size:.86rem; text-align:center; }
body.site-page .detail-actions [data-detail-action="angles"] { grid-column:1 / -1; border-color:#073968; background:#073968; color:#fff; }
body.site-page .detail-actions [data-detail-action="angles"]:hover { background:#07172b; }
body.site-page .detail-actions [data-detail-action="report"] { grid-column:1 / -1; border-color:transparent; background:transparent; color:#4a6873; text-decoration:underline; text-underline-offset:3px; }
/* The floating assistant would cover the sheet's last lines and actions. */
body.site-page:has(.detail-panel.open) .global-assistant-trigger { display:none; }

/* ---------------------------------------------------------------------------
   Lenguas, simplified (user request: "un orden correcto, no tanto"). One path, general to
   particular: 68 groupings → maaya t’aan in archive photos → first words → translator.
   Removed from view: the 01/02/03 route, the A–Z strip (search already filters), the quiz,
   repeated "Verificada"/category labels and three of the six archive photos. */
body.site-page .learn-page :is(.catalog-route,.catalog-letters,.learn-challenge) { display:none; }

/* 68 groupings: compact register; the external mark stays an arrow (link text still names INALI). */
body.site-page .catalog-toolbar { grid-template-columns:minmax(220px,420px) minmax(0,1fr); grid-template-areas:'search status'; align-items:end; }
body.site-page .catalog-toolbar .language-catalog-status { align-self:end; margin:0 0 .7rem; }
body.site-page .register-entry:not(.is-archived) .register-source { font-size:0; letter-spacing:0; }
body.site-page .register-entry:not(.is-archived) .register-source::after { content:'↗'; font-size:.8rem; }
body.site-page .register-link { min-height:40px; padding-block:.4rem; }
@media (max-width:820px) {
  body.site-page .catalog-toolbar { grid-template-columns:1fr; grid-template-areas:'search' 'status'; }
  body.site-page .language-register { columns:2; column-gap:1rem; }
  body.site-page .register-group { grid-template-columns:1.4rem minmax(0,1fr); padding-bottom:1rem; }
  body.site-page .register-link { min-height:44px; }
  body.site-page .register-name { font-size:.98rem; }
}

/* maaya t’aan in the archive: three photographs are enough to make the bridge. */
body.site-page .catalog-archive-photos > li:nth-child(n+4) { display:none; }
body.site-page .catalog-archive-photos { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.site-page .catalog-archive-photo { background:#12384e; }

/* First words: a grid of cards, twelve at a time. */
body.site-page .learn-workspace { grid-template-columns:minmax(0,1fr); gap:1.4rem; margin-top:2.2rem; }
body.site-page .learn-search { min-width:0; grid-template-columns:minmax(0,1fr); }
body.site-page .learn-search :is(input,.vocabulary-controls) { min-width:0; max-width:100%; }
body.site-page .learn-search { max-width:720px; }
body.site-page .word-results { grid-column:1; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.75rem; border-top:0; }
body.site-page .word-results > :not(.word-entry) { grid-column:1 / -1; }
body.site-page .word-entry { position:relative; grid-template-columns:1fr; gap:.15rem; padding:1rem 1.1rem 1.05rem; border:1px solid #c6d5d2; border-radius:3px; background:#fff; }
body.site-page .word-entry small { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
body.site-page .word-entry > div:first-child strong { color:#40596b; font:400 1rem/1.3 Georgia,serif; }
body.site-page .word-entry > div:nth-child(2) strong { color:#073968; font:400 1.75rem/1.15 Georgia,serif; letter-spacing:-.02em; }
body.site-page .word-entry-footer { margin-top:.55rem; }
body.site-page .word-entry-footer :is(.word-category,.word-badge) { display:none; }
body.site-page .word-entry-footer a { font-size:.72rem; color:#4a6873; }
body.site-page #word-results:not(.is-expanded) > .word-entry:nth-of-type(n+13) { display:none; }
.word-more { display:flex; justify-content:center; margin:1.2rem 0 0; }
.word-more[hidden] { display:none; }
.word-more button { min-height:44px; padding:.6rem 1.3rem; border:1px solid #073968; border-radius:99px; background:transparent; color:#073968; font:600 .88rem var(--font-sans); cursor:pointer; }
.word-more button:hover { background:#073968; color:#fff; }
.word-more button:focus-visible { outline:3px solid #2d9eb4; outline-offset:2px; }
@media (max-width:560px) {
  body.site-page .word-results { grid-template-columns:1fr 1fr; gap:.55rem; }
  body.site-page .word-entry { padding:.8rem .85rem .85rem; }
  body.site-page .word-entry > div:nth-child(2) strong { font-size:1.4rem; }
}
/* Lenguas · numbered chapters make the order explicit (CSS counters keep the translated labels intact). */
body.site-page .learn-page { counter-reset:learn-chapter; }
body.site-page .learn-page :is(.language-catalog-heading .section-index,.catalog-archive .section-index,.maya-vocabulary > .learn-intro .section-index,.all-language-translator > .section-index)::before { counter-increment:learn-chapter; content:counter(learn-chapter,decimal-leading-zero) ' / '; }
body.site-page .all-language-translator { width:auto; margin:3.5rem 0 2rem; }

/* Typography tokens (fonts declared in cadeeli-fonts.css). */
:root { --font-sans:'Public Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display:'Newsreader', Georgia, serif; }
body { font-family:var(--font-sans); font-feature-settings:'kern','liga'; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
:is(h1,h2,h3) { font-optical-sizing:auto; }

/* ---------------------------------------------------------------------------
   Language: globe menu instead of the visible ES/MAYA/EN switch, and the first-visit welcome
   (both built by cadeeli-language.js). */
body.site-page .lang-picker.is-replaced { display:none; }
.lang-menu-wrap { position:relative; }
.lang-menu-toggle { display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:0 .8rem 0 .7rem; border:1px solid rgba(255,255,255,.28); border-radius:99px; background:transparent; color:#e7f1f3; font:700 .7rem var(--font-sans); letter-spacing:.08em; cursor:pointer; transition:background-color .18s ease,border-color .18s ease; }
.lang-menu-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; }
.lang-menu-toggle:hover,.lang-menu-toggle[aria-expanded="true"] { border-color:#49d1d1; background:rgba(73,209,209,.12); }
.lang-menu-toggle:focus-visible { outline:3px solid #ffd166; outline-offset:2px; }
.lang-menu { position:absolute; z-index:60; top:calc(100% + .5rem); right:0; display:grid; gap:.15rem; min-width:250px; padding:.55rem; border:1px solid #c6d5d2; border-radius:6px; background:#f6f5ef; box-shadow:0 18px 40px rgba(7,23,43,.28); }
.lang-menu[hidden] { display:none; }
.lang-menu-title { margin:.25rem .55rem .35rem; color:#4a6873; font:800 .62rem var(--font-sans); letter-spacing:.14em; text-transform:uppercase; }
.lang-menu-option { display:grid; gap:.1rem; min-height:44px; padding:.55rem .7rem; border:0; border-radius:4px; background:transparent; color:#071f39; text-align:left; cursor:pointer; }
.lang-menu-option strong { font:500 1.08rem/1.2 var(--font-display); }
.lang-menu-option small { color:#4a6873; font:500 .72rem var(--font-sans); }
.lang-menu-option:hover { background:#e6eff0; }
.lang-menu-option[aria-pressed="true"] { background:#073968; color:#fff; }
.lang-menu-option[aria-pressed="true"] small { color:#c3d6dc; }
.lang-menu-more { min-height:44px; margin-top:.3rem; padding:.5rem .7rem; border:0; border-top:1px solid #c6d5d2; background:transparent; color:#073968; font:700 .8rem var(--font-sans); text-align:left; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.lang-menu :focus-visible { outline:3px solid #2d9eb4; outline-offset:-3px; }
@media (max-width:820px) {
  .lang-menu-toggle { width:44px; justify-content:center; padding:0; }
  .lang-menu-toggle .lang-menu-code { display:none; }
  .lang-menu { position:fixed; top:calc(var(--site-header-h,58px) + .4rem); right:.75rem; left:.75rem; min-width:0; }
}

.welcome-dialog { width:min(640px,calc(100% - 1.5rem)); max-height:calc(100dvh - 1.5rem); margin:auto; padding:0; overflow:auto; border:0; border-radius:8px; background:#f6f5ef; color:#071f39; box-shadow:0 30px 80px rgba(2,12,24,.5); }
.welcome-dialog::backdrop { background:rgba(4,15,28,.82); }
.welcome-card { display:grid; gap:1.5rem; margin:0; padding:0 0 1.5rem; }
.welcome-head { padding:2rem 2rem 1.6rem; background:#07172b; color:#fff; }
.welcome-mark { display:block; width:56px; height:56px; margin-bottom:1rem; }
.welcome-eyebrow { margin:0 0 .5rem; color:#7ed9dc; font:800 .66rem var(--font-sans); letter-spacing:.16em; text-transform:uppercase; }
.welcome-head h2 { margin:0; font:400 clamp(2rem,6vw,2.9rem)/1.02 var(--font-display); letter-spacing:-.03em; }
.welcome-lead { margin:.7rem 0 0; color:#c3d6dc; font-size:1rem; line-height:1.5; }
.welcome-step { margin:0; padding:0 2rem; border:0; min-width:0; }
.welcome-step legend,.welcome-select-label { display:block; margin-bottom:.7rem; padding:0; color:#0d6b73; font:800 .7rem/1.4 var(--font-sans); letter-spacing:.1em; text-transform:uppercase; }
.welcome-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.welcome-choice { position:relative; display:grid; align-content:start; gap:.25rem; min-height:92px; padding:.9rem .95rem; border:1px solid #c6d5d2; border-radius:5px; background:#fff; cursor:pointer; transition:border-color .18s ease,box-shadow .18s ease; }
.welcome-choice input { position:absolute; opacity:0; pointer-events:none; }
.welcome-choice strong { font:500 1.3rem/1.1 var(--font-display); }
.welcome-choice small { color:#4a6873; font:500 .74rem/1.35 var(--font-sans); }
.welcome-choice:hover { border-color:#49a9ae; }
.welcome-choice:has(input:checked) { border-color:#073968; box-shadow:inset 0 0 0 1px #073968,inset 0 -4px #49d1d1; }
.welcome-choice:has(input:checked) strong::after { content:' ✓'; color:#0d6b73; font:700 .9rem var(--font-sans); }
.welcome-choice:has(input:focus-visible) { outline:3px solid #2d9eb4; outline-offset:2px; }
.welcome-step select { width:100%; min-height:48px; padding:.6rem .8rem; border:1px solid #9fb8bb; border-radius:5px; background:#fff; color:#071f39; font:500 1rem var(--font-sans); }
.welcome-step select:focus-visible { outline:3px solid #2d9eb4; outline-offset:2px; }
.welcome-hint { margin:.6rem 0 0; color:#4a6873; font-size:.84rem; line-height:1.5; }
.welcome-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.8rem 1.2rem; padding:.4rem 2rem 0; }
.welcome-later { min-height:44px; padding:0 .4rem; border:0; background:transparent; color:#4a6873; font:600 .9rem var(--font-sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.welcome-later:focus-visible { outline:3px solid #2d9eb4; outline-offset:2px; }
.welcome-enter { min-height:48px; }
@media (max-width:560px) {
  .welcome-head { padding:1.5rem 1.25rem 1.3rem; }
  .welcome-step,.welcome-actions { padding-inline:1.25rem; }
  .welcome-choices { grid-template-columns:1fr; }
  .welcome-choice { min-height:0; grid-template-columns:auto 1fr; align-items:baseline; gap:.2rem .7rem; padding:.75rem .9rem; }
  .welcome-actions { justify-content:space-between; }
}
/* One translator on Lenguas: the 68-grouping translator already covers maaya t’aan. */
body.site-page .learn-page .learn-assistant { display:none !important; }
.translation-source { max-width:480px; margin:.55rem 0 0; padding-left:.8rem; border-left:3px solid #e69c82; color:#4a6873; font:500 .78rem/1.45 var(--font-sans); }
.translation-source.is-verified { border-left-color:#49d1d1; color:#0d6b73; font-weight:700; }
.translation-source[hidden] { display:none; }

/* ---------------------------------------------------------------------------
   Proyecto · "Lo que dicen los datos" (cadeeli-data.js). Single-series bars in one hue
   (navy), value at the bar end, table twin, hover detail; no legend needed. */
.archive-data { padding:clamp(3.5rem,7vw,7rem) clamp(1.5rem,7vw,7rem); background:#f6f5ef; color:#071f39; }
.archive-data-intro { max-width:760px; }
body.site-page .archive-data .section-index { margin:0 0 .9rem; color:#0d6b73; font:800 .68rem var(--font-sans); letter-spacing:.16em; }
.archive-data h2 { margin:0; font:400 clamp(2.4rem,4.4vw,4rem)/1.02 var(--font-display); letter-spacing:-.035em; }
.archive-data-intro > p:last-child { margin:1rem 0 0; color:#40596b; font-size:1.02rem; line-height:1.6; }
.archive-data-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:1rem 3rem; align-items:end; margin:2.6rem 0 3rem; padding:2rem 0; border-block:1px solid #b9c9c9; }
.data-hero-number { margin:0; font-family:var(--font-display); line-height:.9; }
.data-hero-number strong { font-size:clamp(5rem,11vw,9rem); font-weight:400; letter-spacing:-.05em; color:#073968; }
.data-hero-number span { color:#4a6873; font-size:clamp(1.6rem,3vw,2.4rem); }
.data-hero-text { grid-column:1; max-width:520px; margin:0; color:#40596b; line-height:1.6; }
.data-tiles { grid-column:2; grid-row:1 / span 2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:0; }
.data-tiles div { padding-top:.7rem; border-top:3px solid #49d1d1; }
.data-tiles dt { color:#4a6873; font:700 .66rem var(--font-sans); letter-spacing:.1em; text-transform:uppercase; }
.data-tiles dd { margin:.3rem 0 0; font:400 clamp(2rem,3.5vw,2.8rem)/1 var(--font-display); color:#071f39; }
.data-charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:2.6rem 3.5rem; }
.data-chart { margin:0; min-width:0; }
.data-chart figcaption h3 { margin:0; font:500 1.35rem/1.2 var(--font-display); }
.data-chart figcaption p { margin:.3rem 0 0; color:#4a6873; font-size:.82rem; line-height:1.5; }
.data-bars { display:grid; gap:.45rem; margin:1rem 0 .6rem; padding:0; list-style:none; }
.data-row { display:grid; grid-template-columns:minmax(96px,34%) minmax(0,1fr) auto; align-items:center; gap:.7rem; min-height:28px; border-radius:3px; }
.data-label { overflow:hidden; color:#071f39; font-size:.84rem; text-overflow:ellipsis; white-space:nowrap; }
.data-bar { position:relative; height:14px; }
.data-bar::before { content:''; position:absolute; inset:0 auto 0 0; width:var(--share); border-radius:0 4px 4px 0; background:#073968; transition:background-color .15s ease; }
.data-value { min-width:2.5ch; color:#071f39; font:700 .84rem var(--font-sans); font-variant-numeric:tabular-nums; text-align:right; }
.data-row:hover { background:#e8f2f0; }
.data-row:hover .data-bar::before { background:#0d6b73; }
.data-tooltip { position:fixed; z-index:80; top:0; left:0; max-width:280px; padding:.45rem .65rem; border-radius:4px; background:#07172b; color:#fff; font:600 .78rem var(--font-sans); pointer-events:none; box-shadow:0 8px 22px rgba(7,23,43,.25); }
.data-tooltip[hidden] { display:none; }
.data-table summary { display:inline-flex; align-items:center; min-height:44px; color:#073968; font:700 .8rem var(--font-sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.data-table summary:focus-visible { outline:3px solid #2d9eb4; outline-offset:2px; }
.data-table table { width:100%; margin-top:.4rem; border-collapse:collapse; font-size:.84rem; }
.data-table :is(th,td) { padding:.45rem .5rem; border-bottom:1px solid #d3dedd; text-align:left; font-weight:400; }
.data-table thead th { color:#4a6873; font:700 .66rem var(--font-sans); letter-spacing:.1em; text-transform:uppercase; }
.data-table td { font-variant-numeric:tabular-nums; }
.archive-data-open { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.4rem 3rem; margin-top:3.2rem; padding:2rem; background:#fff; border:1px solid #c6d5d2; border-radius:4px; }
.data-open-text { grid-column:1; margin:0; color:#40596b; line-height:1.6; }
.data-downloads { grid-column:1; display:flex; flex-wrap:wrap; gap:.7rem; }
.data-citation { grid-column:2; grid-row:1 / span 2; }
.data-citation h3 { margin:0 0 .5rem; font:500 1.2rem var(--font-display); }
.data-citation p { margin:0 0 .6rem; padding:.8rem .9rem; border-left:3px solid #49d1d1; background:#f6f5ef; font:400 .92rem/1.5 var(--font-display); overflow-wrap:anywhere; }
.data-copy { min-height:44px; padding:0 .2rem; border:0; background:transparent; color:#073968; font:700 .82rem var(--font-sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.data-copy:focus-visible { outline:3px solid #2d9eb4; outline-offset:2px; }
@media (max-width:820px) {
  .archive-data { padding:3rem 1.35rem; }
  .archive-data-hero,.archive-data-open { grid-template-columns:1fr; }
  .data-tiles,.data-citation,.data-hero-text,.data-open-text,.data-downloads { grid-column:1; grid-row:auto; }
  .archive-data-open { padding:1.3rem; }
  .data-row { grid-template-columns:minmax(84px,38%) minmax(0,1fr) auto; }
}

/* ---------------------------------------------------------------------------
   Archivo · photo tours by community (cadeeli-tours.js) */
body:not(.app-view-archive) .archive-tours { display:none; }
.archive-tours[hidden] { display:none !important; }
.archive-tours { margin:1.6rem 0 1rem; padding:2rem; background:#07172b; color:#fff; border-radius:4px; }
.archive-tours-head { max-width:680px; margin-bottom:1.3rem; }
body.site-page .archive-tours-head .section-index { margin:0 0 .45rem; color:#7ed9dc; font:800 .68rem var(--font-sans); letter-spacing:.16em; }
.archive-tours-head h2 { margin:0; font:400 clamp(1.7rem,2.6vw,2.4rem)/1.05 var(--font-display); letter-spacing:-.03em; }
.archive-tours-head > p:last-child { margin:.5rem 0 0; color:#c3d6dc; font-size:.92rem; line-height:1.55; }
.archive-tours-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.9rem; }
.archive-tour { position:relative; display:block; aspect-ratio:4 / 5; padding:0; overflow:hidden; border:0; border-radius:3px; background:#12384e; color:#fff; text-align:left; cursor:pointer; }
.archive-tour img { width:100%; height:100%; object-fit:cover; transition:scale .5s cubic-bezier(.2,.7,.2,1); }
.archive-tour:is(:hover,:focus-visible) img { scale:1.05; }
.archive-tour:focus-visible { outline:3px solid #ffd166; outline-offset:3px; }
.archive-tour-copy { position:absolute; inset:auto 0 0; display:grid; gap:.25rem; padding:3rem 1rem 1rem; background:linear-gradient(transparent,rgba(4,18,33,.9) 45%); }
.archive-tour-copy small { color:#9fe9e8; font:700 .66rem var(--font-sans); letter-spacing:.08em; text-transform:uppercase; }
.archive-tour-copy strong { font:400 1.35rem/1.1 var(--font-display); }
.archive-tour-cta { margin-top:.3rem; color:#fff; font:700 .78rem var(--font-sans); }
@media (max-width:1023px) {
  .archive-tours { padding:1.5rem 1.1rem; margin-inline:-.2rem; }
  .archive-tours-list { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(180px,62%); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .archive-tour { scroll-snap-align:start; }
}

.tour-dialog { width:min(1080px,calc(100% - 1.5rem)); max-height:calc(100dvh - 1.5rem); margin:auto; padding:0; overflow:hidden; border:0; border-radius:8px; background:#07172b; color:#fff; box-shadow:0 30px 80px rgba(2,12,24,.55); }
.tour-dialog::backdrop { background:rgba(4,15,28,.88); }
.tour-card { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); grid-template-rows:auto minmax(0,1fr) auto; grid-template-areas:"head head" "figure copy" "nav nav"; max-height:calc(100dvh - 1.5rem); }
.tour-head { grid-area:head; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.1rem 1.3rem .8rem; border-bottom:1px solid rgba(159,233,232,.18); }
.tour-kicker { margin:0 0 .2rem; color:#7ed9dc; font:800 .64rem var(--font-sans); letter-spacing:.16em; }
.tour-head h2 { margin:0; font:400 clamp(1.5rem,3vw,2.2rem)/1.05 var(--font-display); letter-spacing:-.02em; }
.tour-close { display:grid; place-items:center; flex:none; width:44px; height:44px; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:transparent; color:#fff; font-size:1.5rem; cursor:pointer; }
.tour-figure { grid-area:figure; position:relative; display:grid; place-items:center; min-height:0; margin:0; background:#020c18; touch-action:pan-y; }
.tour-figure img { display:block; width:100%; height:100%; max-height:min(68dvh,680px); object-fit:contain; }
.tour-step { position:absolute; top:.8rem; left:.8rem; padding:.3rem .65rem; border-radius:99px; background:rgba(7,23,43,.85); font:700 .72rem var(--font-sans); }
.tour-copy { grid-area:copy; overflow-y:auto; padding:1.4rem 1.4rem 1rem; }
.tour-name { margin:0; font:400 1.7rem/1.1 var(--font-display); }
.tour-meta { margin:.5rem 0 0; color:#9fbfca; font:600 .76rem/1.5 var(--font-sans); }
.tour-desc { margin:1rem 0 0; color:#dce8eb; font-size:.95rem; line-height:1.6; }
.tour-maya { margin:1rem 0 0; padding:.7rem .9rem; border-left:3px solid #49d1d1; background:rgba(73,209,209,.08); color:#9fe9e8; font:italic 400 1.05rem/1.45 var(--font-display); }
.tour-maya[hidden] { display:none; }
.tour-nav { grid-area:nav; display:flex; align-items:center; gap:.8rem; padding:.8rem 1.3rem 1rem; border-top:1px solid rgba(159,233,232,.18); }
.tour-nav :is(.tour-prev,.tour-next) { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:transparent; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; }
.tour-nav :is(.tour-prev,.tour-next):disabled { opacity:.35; cursor:default; }
.tour-dots { display:flex; flex:1; gap:.35rem; margin:0; padding:0; list-style:none; }
.tour-dots li { flex:1; max-width:46px; height:3px; border-radius:2px; background:rgba(255,255,255,.25); }
.tour-dots li.is-current { background:#49d1d1; }
.tour-open { margin-left:auto; background:#49d1d1; color:#071f39; }
.tour-dialog :focus-visible { outline:3px solid #ffd166; outline-offset:2px; }
@media (max-width:820px) {
  .tour-card { grid-template-columns:1fr; grid-template-rows:auto auto minmax(0,1fr) auto; grid-template-areas:"head" "figure" "copy" "nav"; }
  .tour-figure img { max-height:42dvh; }
  .tour-copy { padding:1rem 1.1rem; }
  .tour-name { font-size:1.4rem; }
  .tour-nav { flex-wrap:wrap; }
  .tour-open { flex:1 0 100%; justify-content:center; margin-left:0; }
}

/* ---------------------------------------------------------------------------
   Lenguas · practice cards and pronunciation (cadeeli-learn.js) */
.practice-open { display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:0 1rem; border:1px solid #073968; border-radius:99px; background:#073968; color:#fff; font:700 .82rem var(--font-sans); cursor:pointer; }
.practice-open:hover { background:#07172b; }
.practice-open:focus-visible { outline:3px solid #2d9eb4; outline-offset:2px; }
.practice-dialog { width:min(520px,calc(100% - 1.5rem)); max-height:calc(100dvh - 1.5rem); margin:auto; padding:0; border:0; border-radius:8px; background:#f6f5ef; color:#071f39; box-shadow:0 30px 80px rgba(2,12,24,.45); }
.practice-dialog::backdrop { background:rgba(4,15,28,.8); }
.practice-card { display:grid; gap:1.2rem; padding:0 0 1.4rem; }
.practice-head { position:relative; padding:1.4rem 4.5rem 1.2rem 1.6rem; background:#07172b; color:#fff; }
.practice-progress { margin:0 0 .3rem; color:#7ed9dc; font:800 .66rem var(--font-sans); letter-spacing:.14em; text-transform:uppercase; }
.practice-head h2 { margin:0; font:400 1.9rem/1.05 var(--font-display); }
.practice-close { position:absolute; top:1rem; right:1rem; display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:transparent; color:#fff; font-size:1.5rem; cursor:pointer; }
.practice-face { display:grid; justify-items:center; gap:.2rem; min-height:210px; align-content:center; margin:0 1.6rem; padding:1.6rem 1rem; border:1px solid #c6d5d2; border-radius:6px; background:#fff; text-align:center; }
.practice-label { color:#4a6873; font:800 .62rem var(--font-sans); letter-spacing:.14em; }
.practice-word { margin:0 0 .6rem; font:400 2.3rem/1.1 var(--font-display); }
.practice-answer { margin:0; color:#073968; font:400 2.8rem/1.1 var(--font-display); letter-spacing:-.02em; }
.practice-hint { margin:.3rem 0 0; color:#4a6873; font-size:.9rem; }
.practice-done { margin:0; font:400 1.8rem/1.2 var(--font-display); }
.practice-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin:0 1.6rem; }
.practice-actions .home-cta { min-height:48px; }
.practice-again,.practice-link { min-height:48px; padding:0 1.1rem; border:1px solid #073968; border-radius:99px; background:transparent; color:#073968; font:700 .88rem var(--font-sans); cursor:pointer; }
.practice-link { border-color:transparent; text-decoration:underline; text-underline-offset:3px; }
.practice-source { margin:0 1.6rem; color:#4a6873; font-size:.76rem; text-align:center; }
.practice-dialog :focus-visible { outline:3px solid #2d9eb4; outline-offset:2px; }
.practice-head :focus-visible { outline-color:#ffd166; }
.pronounce-button { display:inline-grid; place-items:center; width:44px; height:44px; margin-top:.4rem; padding:0; border:1px solid #0d6b73; border-radius:50%; background:#fff; color:#0d6b73; cursor:pointer; vertical-align:middle; }
.pronounce-button svg { width:18px; height:18px; fill:currentColor; }
.pronounce-button.is-playing { background:#0d6b73; color:#fff; }
.pronounce-button:focus-visible { outline:3px solid #2d9eb4; outline-offset:2px; }
body.site-page .practice-open span { color:inherit; font:inherit; letter-spacing:0; }