/* Learning Center -- conforms to LAYOUT_STANDARD (master rule #32):
   proportional (%, rem, vw), Georgia, centered header, footer pinned
   to the bottom with a % gap, night/pastel palette, high-contrast
   inputs. English text = BLUE, Spanish text = RED (Mr Z's book). */

:root{
  /* Palette tokens this standalone stylesheet relies on.  The Learning
     Center does NOT load mrartin.all.css, so these MUST be defined here or
     the var() references below resolve to nothing and text falls back to
     black-on-navy (the "Learning Center" heading bug, 2026-06-29).
     Values are the canonical palette values from mrartin.all.css. */
  --lavender-pale:#f4f1ff; --lilac-4:#b9a3ff; --btn-deep:#1a1340; --indigo-2:#241a55;

  --bg:#141229; --panel:#211c44; --field:#322e5e; --border:#8b7bd6;
  --text:var(--lavender-pale); --muted:#b7afd6; --accent:var(--lilac-4); --accent-ink:#1a1338;
  --link:#a9c7ff; --line:#322e5e;
  --good:#7ef0c0; --danger:#ff9bb0;
  --en:#5aa6ff; --es:#ff5d6b; --new:#ffe6a0; --new-ink:#2a2000;   /* EN=clear BLUE, ES=clear RED (Mr Z human language coding, strengthened 2026-07-02) */
}
body[data-theme="soft"]{
  --bg:var(--btn-deep); --panel:var(--indigo-2); --field:#2f2769; --border:#9d8be6;
  --text:#ede5ff; --muted:#cdbff5; --accent:var(--lilac-4); --accent-ink:#1a1338;
  --link:#bcd2ff; --line:#3a2f70;
  --en:#7fbcff; --es:#ff5d6b; --new:#ffe6a0; --new-ink:#2a2000;   /* EN=clear BLUE, ES=clear RED (soft theme, 2026-07-02) */
}

*{box-sizing:border-box}
/* Base font: a real 18px floor (bigger than browser default) and it
   grows with the window up to 30px. Everything else is rem, so it all
   scales from here. */
html{font-size:clamp(18px,1.4vw,30px)}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--text);
  font-family:Georgia,"Times New Roman",serif; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Header: full width, title centered, hairline divider ---- */
.lc-top{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:0.4rem;
  padding:0.9rem 1.4%;
  background:var(--panel); border-bottom:1px solid var(--line);
}
.lc-brand{font-size:1.5rem;font-weight:700;color:var(--text);text-align:center}
.lc-brand:hover{text-decoration:none;color:#fff}
.lc-topnav{display:flex;flex-wrap:wrap;justify-content:center;gap:0.4rem;padding:0.1rem 0 0}
.lc-topnav a{
  color:var(--text); background:var(--field); border:1px solid var(--border);
  border-radius:999px; padding:0.35rem 0.8rem; font-size:0.9rem;
}
.lc-topnav a:hover{background:var(--accent);color:var(--accent-ink);text-decoration:none}

/* ---- Main content: proportional, centered, never edge-crunched ----
   width grows with the window (92%) up to a generous cap so the page
   fills the screen instead of hugging the left. Reading pages that
   want a narrow measure add .narrow. */
.lc-wrap{flex:1 0 auto; width:92%; max-width:74rem; margin:0 auto; padding:1.4rem 0 0.6rem}
.lc-wrap.narrow{max-width:48rem}
h1{font-size:2.1rem;color:#fff;margin:0.2em 0 0.3em;line-height:1.25}
h2{font-size:1.3rem;color:#fff;margin:1.2em 0 0.5em}
.lead{font-size:1.1rem}
.muted{color:var(--muted);font-size:1rem}
.text-en{color:var(--en)}
.text-es{color:var(--es)}
.center{text-align:center}

/* ---- Footer: pinned to bottom with a % gap, links centered ---- */
.lc-foot{
  flex:0 0 auto; text-align:center; color:var(--muted);
  font-size:0.95rem; border-top:1px solid var(--line);
  width:92%; max-width:74rem; margin:1.4rem auto 3%; padding-top:0.9rem;
}
.lc-build{display:block;margin-top:0.4rem;font-size:0.72rem;color:var(--border)}

/* ---- Hero / start page ---- */
.hero{background:var(--panel);border:1px solid var(--border);border-radius:1rem;
      padding:1.6rem 1.4rem;text-align:center;margin:0.4rem 0 1rem}
.hero h1{margin-top:0}
.hero .sub{font-size:1.05rem;color:var(--text)}
.hero .sub.es{color:var(--es);font-style:italic}
.cta{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:700;
     border:0;border-radius:0.7rem;padding:0.7rem 1.4rem;font-size:1.05rem;margin-top:1rem}
.cta:hover{text-decoration:none;filter:brightness(1.08)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:0.8rem;margin-top:1rem}
.feature{background:var(--panel);border:1px solid var(--border);border-radius:0.8rem;padding:1rem;text-align:center}
.feature .ic{font-size:1.6rem}
.feature h3{margin:0.3rem 0;color:#fff;font-size:1.05rem}
.feature p{margin:0;color:var(--muted);font-size:0.88rem}
.feature:hover{border-color:var(--accent);text-decoration:none}
.steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:0.8rem;margin-top:0.6rem}
.steps3 .s{background:var(--field);border:1px solid var(--border);border-radius:0.7rem;padding:0.8rem}
.steps3 .n{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:700;
           border-radius:999px;width:1.6rem;height:1.6rem;line-height:1.6rem;text-align:center;margin-bottom:0.3rem}

/* ---- Cards / path picker ----
   Responsive grid: as many columns as fit; fills the width and grows
   with the window instead of hugging the left. */
.list-grid,.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:0.8rem;margin-top:0.6rem}
.col{background:var(--panel);border:1px solid var(--border);border-radius:0.8rem;padding:0.8rem 0.9rem}
.unit-title{font-size:0.9rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:1rem 0 0.4rem}
.card{display:block;background:var(--field);border:1px solid var(--border);border-radius:0.6rem;
      padding:0.75rem 0.85rem;margin-bottom:0.55rem;color:var(--text)}
.card:hover{border-color:var(--accent);text-decoration:none}
.card .ttl{font-weight:700;font-size:1.1rem}
.card .lv{font-size:0.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.card .ds{font-size:0.95rem;color:var(--muted);margin-top:0.2rem}
.badge{float:right;font-size:0.8rem;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:0.05rem 0.55rem}
.badge.done{color:var(--good);border-color:var(--good)}

/* ---- Lesson card: 50/50 English (blue) | Spanish (red), word emphasized ---- */
.lesson-card{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
             align-items:center;padding:1.6rem 1rem;min-height:5rem}
.lesson-card .lc-half{text-align:center;font-weight:700;font-size:2rem;padding:0 0.7rem;line-height:1.2}
.lesson-card .lc-half.text-en{color:var(--en)}
.lesson-card .lc-half.text-es{color:var(--es)}
.lesson-card .lc-half:first-child{border-right:1px solid var(--border)}
.lesson-card .badge{position:absolute;top:0.45rem;right:0.6rem;float:none;font-size:0.7rem;opacity:.7}
@media (max-width:900px){ .lesson-card .lc-half{font-size:1.55rem} }

/* ---- Word-pair LIST (a lesson shown like the book: all pairs at once) ---- */
.pairhead{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin:0.7rem 0 0.35rem}
.pairhead .lbl{text-align:center;font-size:0.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.pairhead .lbl.text-en{color:var(--en)} .pairhead .lbl.text-es{color:var(--es)}
.pairlist{display:flex;flex-direction:column;gap:0.5rem}
.pairrow{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--panel);
         border:1px solid var(--border);border-radius:0.6rem;overflow:hidden}
.pairrow .ph{padding:0.7rem 0.8rem;cursor:pointer;font-size:1.3rem;font-weight:700;
             text-align:center;display:flex;align-items:baseline;justify-content:center;
             gap:0.45rem;min-height:2.7rem;line-height:1.25}
.pairrow .ph:first-child{border-right:1px solid var(--border)}
.pairrow .ph.text-en{color:var(--en)} .pairrow .ph.text-es{color:var(--es)}
.pairrow .ph:hover{background:var(--field)}
.pairrow .phc{font-size:0.72rem;color:var(--muted);font-weight:400}
@media (max-width:900px){ .pairrow .ph{font-size:1.05rem} }

/* ---- Step player ---- */
.progress{background:var(--field);border:1px solid var(--border);border-radius:999px;height:0.6rem;overflow:hidden;margin:0.5rem 0 1.2rem}
.progress-bar{background:var(--accent);height:100%;transition:width .35s}
.phonetic{float:right;font-size:0.95rem;color:var(--text);background:var(--field);border:1px solid var(--border);
          border-radius:0.5rem;padding:0.2rem 0.6rem;font-weight:700}
.sentence-target{font-size:1.7rem;line-height:1.4;color:#fff;text-align:center;
                 background:var(--panel);border:1px solid var(--border);border-radius:0.9rem;
                 padding:1.3rem 1rem;margin:0.4rem 0 0.6rem}
.sentence-native{font-size:1.05rem;text-align:center;font-style:italic;margin-bottom:1rem}
.new-word{background:var(--new);color:var(--new-ink);padding:0 0.3rem;border-radius:0.3rem}

/* ---- 50/50 split lesson panes: native (left) | target (right) ---- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;margin:0.5rem 0 0.9rem;align-items:stretch}
.pair.one{grid-template-columns:1fr}
.pane{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:0.9rem;
      padding:1.7rem 1rem 1.4rem;display:flex;flex-direction:column;justify-content:center;
      align-items:center;text-align:center;min-height:6.5rem;cursor:pointer}
.pane:hover{border-color:var(--accent);background:var(--field)}
.pane:focus{outline:2px solid var(--accent);outline-offset:2px}
.pane-lang{position:absolute;top:0.55rem;left:0;right:0;font-size:0.78rem;font-weight:700;
           text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.pane-text{font-size:2rem;line-height:1.3;font-weight:700}
.pane.text-en .pane-text{color:var(--en)}
.pane.text-es .pane-text{color:var(--es)}
.pane-hear{position:absolute;bottom:0.55rem;left:50%;transform:translateX(-50%);
           background:var(--field);border:1px solid var(--border);color:var(--text);
           border-radius:0.6rem;padding:0.25rem 1rem;font-size:1.1rem;line-height:1;cursor:pointer}
.pane-hear:hover{border-color:var(--accent)}

/* ---- Say-it-and-score (mic -> our STT -> 1-100 pronunciation score) ---- */
.say-wrap{display:inline-flex;align-items:center;gap:0.4rem;font-weight:700}
.pron-score{font-size:1.5rem;font-weight:800;margin-right:0.3rem}
@media (max-width:900px){ .pair{grid-template-columns:1fr} .pane-text{font-size:1.7rem} }
.q-tag{display:inline-block;background:var(--es);color:#2a0a14;font-weight:700;border-radius:999px;
       padding:0.15rem 0.7rem;font-size:0.85rem;margin:0 0 0.4rem}
.recap{background:var(--panel);border:1px solid var(--border);border-radius:0.7rem;padding:0.7rem 0.9rem;margin:0.9rem 0}
.recap h3{margin:0.1em 0 0.4em;font-size:0.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.recap .w{display:inline-block;margin:0.15rem 0.5rem 0.15rem 0;color:var(--en);cursor:pointer}
.recap .w:hover{color:#fff}

/* ---- Buttons (~40px min, weight/color for emphasis) ---- */
.row{display:flex;gap:0.6rem;flex-wrap:wrap;justify-content:center;margin:0.5rem 0 0.9rem}
.btn{display:inline-block;border:0;border-radius:0.6rem;padding:0.55rem 1rem;font-size:0.95rem;font-weight:700;
     font-family:inherit;cursor:pointer;color:var(--accent-ink);background:var(--accent);text-align:center;min-height:2.5rem}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn.alt{background:var(--field);color:var(--text);border:1px solid var(--border)}
.btn.red{background:var(--danger);color:#2a0a14}
.btn.grey{background:var(--field);color:var(--text);border:1px solid var(--border)}
.btn.good{background:var(--good);color:#06281d}
.btn[disabled]{opacity:.5;pointer-events:none}
.nav-row{display:flex;gap:0.6rem;justify-content:space-between;margin-top:1.3rem;flex-wrap:wrap}
.nav-row .btn{flex:1;min-width:7rem}
.heard{min-height:1.4em;text-align:center;margin:0.4rem 0;color:var(--muted)}
.toggle{font-size:0.82rem;color:var(--muted)}

/* ---- High-contrast inputs (LAYOUT_STANDARD §6) ---- */
input,textarea,select{background:var(--field);border:1.5px solid var(--border);color:var(--text);
  border-radius:0.5rem;padding:0.5rem 0.7rem;font-size:1rem;font-family:inherit}
input::placeholder,textarea::placeholder{color:var(--muted)}

/* ---- Phonics grid + key table ---- */
.fam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:0.5rem;margin-top:0.6rem}
.tile{background:var(--field);border:1px solid var(--border);border-radius:0.6rem;padding:0.6rem;text-align:center;cursor:pointer;color:#fff}
.tile:hover{border-color:var(--accent)}
.tile .g{font-size:0.72rem;color:var(--muted);display:block;margin-top:0.2rem}
.tile.lit{background:var(--accent);color:var(--accent-ink)}
table.key{width:100%;max-width:38rem;table-layout:fixed;border-collapse:collapse;margin-top:0.6rem}
table.key col.c-sym{width:8.5rem}
table.key col.c-es{width:40%}
table.key td{border-bottom:1px solid var(--line);padding:0.55rem 0.6rem;vertical-align:middle;overflow-wrap:anywhere}
table.key .sym{font-weight:700;color:#fff}
table.key tr.grp td{background:var(--field);color:var(--muted);font-size:0.85rem;text-transform:uppercase;
                    letter-spacing:.06em;border-bottom:0;padding-top:1rem}
table.key .ex{cursor:pointer;white-space:nowrap}

/* ---- Dictionary ---- */
.dict-form{display:flex;gap:0.5rem;margin:0.6rem 0 1rem}
.dict-form input{flex:1}
.word-head{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:1.5rem;font-weight:700;margin:0.5rem 0}
.defs{margin:0.2rem 0 0.6rem 1.2rem;padding:0}
.defs li{margin:0.3rem 0}
/* whole-line clickable to hear it (reusable pattern) */
.clickline{cursor:pointer;padding:0.25rem 0.4rem;border-radius:0.4rem;list-style-position:outside}
.clickline:hover{background:rgba(255,255,255,.06)}
.defs li.text-en{color:var(--en)}
.defs li.text-es{color:var(--es)}
.defs .ex{font-style:italic;margin:0.1rem 0 0.2rem}
.dword{cursor:pointer}

/* ---- Word detail page ---- */
.word-card{background:var(--panel);border:1px solid var(--border);border-radius:0.9rem;padding:1.3rem 1.4rem;margin:0.4rem 0 1rem}
.word-big{font-size:2.4rem;font-weight:800;line-height:1.1}
.word-es{font-size:1.3rem;font-style:italic;margin-top:0.2rem}
.word-type{display:inline-block;margin-top:0.6rem;background:var(--field);border:1px solid var(--border);
           border-radius:999px;padding:0.15rem 0.7rem;font-size:0.9rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.defs .dtag{display:inline-block;background:var(--field);border:1px solid var(--border);border-radius:0.4rem;
            padding:0 0.4rem;font-size:0.78rem;color:var(--muted);margin-right:0.3rem;text-transform:uppercase}
.spk{cursor:pointer}

/* ---- Super words: ranked table ---- */
table.rank{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:0.6rem}
table.rank col.c-rank{width:3rem}
table.rank col.c-word{width:11rem}
table.rank col.c-num{width:6rem}
table.rank td{border-bottom:1px solid var(--line);padding:0.5rem 0.5rem;vertical-align:middle;overflow-wrap:anywhere}
table.rank .rnum{text-align:center;color:var(--muted)}
table.rank .rnum strong{color:#fff}
table.rank tr.grp td{background:var(--field);color:var(--muted);font-size:0.82rem;text-transform:uppercase;
                     letter-spacing:.05em;border-bottom:0}
table.rank .spk{cursor:pointer;margin-right:0.3rem}
table.rank a{font-weight:700}
@media (max-width:900px){ table.rank col.c-word{width:8rem} table.rank .muted{font-size:0.85rem} }

/* ---- Chips (Keywords / particles page) ---- */
.chip-row{display:flex;flex-wrap:wrap;gap:0.4rem;margin:0.4rem 0 0.8rem}
.chip{display:inline-block;background:var(--field);border:1px solid var(--border);border-radius:999px;
      padding:0.3rem 0.7rem;font-size:0.95rem;color:var(--text);cursor:pointer;text-decoration:none}
.chip:hover{border-color:var(--accent);text-decoration:none}
a.jump{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:700;
       border-radius:999px;padding:0.25rem 0.7rem;text-decoration:none}
a.jump:hover{filter:brightness(1.08);text-decoration:none}

/* ---- Vocabulary chips (Time page) ---- */
.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:0.6rem;margin:0.5rem 0 0.4rem}
.vocab{background:var(--field);border:1px solid var(--border);border-radius:0.6rem;padding:0.55rem 0.7rem;cursor:pointer}
.vocab:hover{border-color:var(--accent)}
.vocab .text-en{display:block;font-weight:700;font-size:1.05rem}
.vocab .text-es{display:block;font-size:0.9rem}

/* ---- Admin login: tidy centered card ---- */
.login-card{max-width:22rem;margin:2.5rem auto;background:var(--panel);
            border:1px solid var(--border);border-radius:0.9rem;padding:1.6rem 1.6rem 1.8rem}
.login-card h1{font-size:1.6rem;text-align:center;margin:0 0 1.1rem}
.login-card label{display:block;font-size:0.95rem;font-weight:600;color:var(--muted);margin-bottom:1rem}
.login-card input{display:block;width:100%;margin-top:0.4rem}
.login-card .btn{display:block;width:100%}

/* ---- Admin authoring forms ----
   Every field on its OWN row with clear vertical space (block layout,
   not inline flow). ~14px+ between rows; more between sections. */
.a-form{background:var(--panel);border:1px solid var(--border);border-radius:0.8rem;
        padding:1.3rem 1.3rem 1.4rem;margin:0.6rem 0 1.6rem}
.a-form label{display:block;margin-bottom:1rem;font-size:1rem;font-weight:600;color:var(--muted)}
.a-form label:last-of-type{margin-bottom:1.2rem}
.a-form input[type=text],.a-form input[type=number],.a-form input[type=password],
.a-form select{display:block;width:100%;max-width:34rem;margin-top:0.45rem}
.a-form input[type=checkbox]{margin-right:0.5rem;transform:scale(1.3)}
.a-form .btn{display:inline-block;margin-top:0.4rem}

.a-step{background:var(--panel);border:1px solid var(--border);border-radius:0.8rem;
        padding:1.2rem;margin-bottom:1.4rem}
.a-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1rem}
.a-row:last-child{margin-bottom:0}
.a-row label{display:flex;flex-direction:column;gap:0.4rem;font-size:0.95rem;font-weight:600;color:var(--muted)}
.a-row label.gr{flex:1;min-width:16rem}
.a-row label.sm{flex:0 0 auto}
.a-row label.gr input{width:100%}
.a-form h2,h2{margin-top:1.8em}

/* ---- Kids theme (brighter, bigger, playful) ---- */
body[data-theme="kids"]{
  --bg:#1a1450; --panel:#2a2270; --field:#3a3290; --border:var(--lilac-4);
  --text:#fff7ff; --muted:#d8ccff; --accent:#ffd166; --accent-ink:#3a2000;
  --link:#9fd3ff; --en:#9fd3ff; --es:#ffb3c7; --new:#a0ffd6; --new-ink:#06281d;
}
body[data-theme="kids"] .lc-wrap{font-size:1.1rem}
body[data-theme="kids"] h1{font-size:2.4rem}
body[data-theme="kids"] .btn,body[data-theme="kids"] .cta{min-height:3rem;font-size:1.12rem;border-radius:0.9rem}
body[data-theme="kids"] .feature .ic{font-size:2.2rem}
.kid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:0.9rem;margin-top:0.8rem}
.kid-tile{background:var(--panel);border:2px solid var(--border);border-radius:1.1rem;padding:1.2rem 0.8rem;text-align:center;color:#fff}
.kid-tile:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}
.kid-tile .ic{font-size:2.6rem;display:block}
.kid-tile .t{font-weight:700;font-size:1.15rem;margin-top:0.3rem}

@media (max-width:900px){
  .lc-wrap,.lc-foot{width:96%}
  .cols{grid-template-columns:1fr}
  .sentence-target{font-size:1.45rem}
  .nav-row .btn{min-width:46%}
  .btn{min-height:2.6rem}
  input,textarea,select{font-size:16px}
}