/* Shared MasterIt design tokens + base styles, included by every page in the
   app family (the landing page, ConjugateIt, and any future tool) so the
   palette/typography/spacing can't silently drift apart between them the way
   it already had before this file existed -- same reasoning as auth.js and
   layout.js: one shared source instead of a copy per tool.

   Anything here is meant to be genuinely common. Page-specific layout
   (card contents, tab bars, practice-screen structure, etc.) stays in each
   page's own <style> block. */

:root{
  --bg:#faf8f4; --card:#fff; --ink:#1f2422; --muted:#636c68; --line:#e7e3da;
  --accent:#0f6e4a;
  --green:#15803d; --green-soft:#dcfce7;
  --red:#dc2626; --red-soft:#fee2e2;
  --amber:#b45309; --amber-soft:#fef3c7;
  /* "Mastered" reuses the brand accent (a deeper green than --green) so it
     reads as a step beyond "solid" rather than a same-tier variant. */
  --mastered-soft:#c8e6d9;
  --untested-soft:#eceae4;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased;
}

.wrap{max-width:720px; margin:0 auto; padding:20px 16px 64px}

.flag{height:4px; border-radius:2px; margin-bottom:16px;
  background:linear-gradient(90deg,#15803d 0 33.3%,#f4f1ea 33.3% 66.6%,#dc2626 66.6% 100%)}

h1{font-family:Georgia,"Times New Roman",serif; font-weight:600; letter-spacing:-.01em; margin:0}

.home-badge{display:inline-flex; align-items:center; gap:6px; margin-bottom:10px;
  padding:5px 12px 5px 6px; border-radius:999px; background:#f0ede6;
  color:var(--muted); font-size:12px; font-weight:600; text-decoration:none}
.home-badge:hover{color:var(--accent)}
.home-badge-icon{width:20px; height:20px; border-radius:50%; flex:0 0 auto}

/* Shared "card" surface -- used for MasterIt's tool/account rows and each
   tool's own in-page header, so the visual language matches between the
   hub and the tools it links to. Pages can override just `padding` if a
   different inset is needed, rather than redeclaring the whole shell. */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.03)}

/* Same tool icon swatch used on the MasterIt overview and (left of the name)
   in each tool's own header card, so a tool's icon reads as the same visual
   identity in both places. */
.icon{width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:20px; background:#eef4f1; color:var(--accent)}

/* Visually-hidden but screen-reader-visible label, for inputs whose visible
   placeholder isn't a substitute for a real accessible name. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Shared tool-page shell: the header card (icon + name + tab bar) that every
   tool page (ConjugateIt, PronounceIt, ...) uses, plus the descriptive line
   underneath it. The landing page overrides `.sub` locally since its tagline
   plays a different visual role than a tool's one-line description. */
header{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.header-title{display:flex; align-items:center; gap:12px}
/* Generic horizontally-scrollable-row-with-edge-fade pattern, used for the
   nav tabs and any other row of options that might not fit (e.g. Settings'
   autoplay-speed picker) -- horizontally scrollable rather than
   wrapped/clipped, since on a narrow phone (or with larger accessibility
   text sizes) a row of options can be wider than its card, and real Safari
   doesn't always leave the safety margin a desktop browser or Playwright's
   WebKit shows for the same viewport width. Scrolling contains that instead
   of letting the last option get cut off (and, for `overflow:hidden`
   containers like `.seg`, made completely unreachable) by the card's own
   rounded corner. Apply `.hscroll-wrap` to the positioning parent and
   `.hscroll-fade` as its sibling; the scrollable row itself just needs
   `overflow-x:auto` (already true of `.navtabs` and `.seg`). */
.hscroll-wrap{position:relative; max-width:100%; min-width:0}
.navtabs{display:flex; gap:4px; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.navtabs::-webkit-scrollbar{display:none}
.navtab{border:none; background:transparent; color:var(--muted); font-size:13px; font-weight:600;
  padding:6px 12px; border-radius:20px; cursor:pointer; flex:0 0 auto}
.navtab.active{background:var(--ink); color:#fff}
/* Scrolling (above) fixes options getting clipped/unreachable, but on its
   own gives no hint that there's more to scroll to once it no longer all
   fits -- this fades the edge to signal "more this way", shown only when
   nav.js's updateScrollFades() confirms the row actually overflows (never
   shown when everything already fits). */
.hscroll-fade{position:absolute; top:0; bottom:0; right:0; width:28px; pointer-events:none;
  background:linear-gradient(to right, transparent, var(--card)); opacity:0; transition:opacity .15s}
.hscroll-fade.show{opacity:1}
.sub{color:var(--muted); font-size:13px; margin:2px 0 16px}

/* ---------- Pronunciation breakdown card + inline "listen" trigger ----------
   Shared between ConjugateIt (click a verb/corrected answer during Practice)
   and PronounceIt (Theory tab example words) -- see site/pron.js for the JS
   that renders and wires these up (openPronBreakdown, bindPronBreakdown,
   pronChip). Moved here rather than kept in ConjugateIt's own <style> block
   once a second page needed the same look -- same reasoning as auth.js. */
.vtxt{cursor:pointer; border-bottom:2px dotted var(--line); border-radius:2px}
.vtxt:hover, .vtxt:focus-visible{border-color:var(--accent); color:var(--accent); outline:none}

/* A more explicit "there's audio here" affordance than .vtxt's dotted
   underline alone -- a small pill badge with a speaker icon. Still a .vtxt
   under the hood (same click-to-open-breakdown wiring via bindPronBreakdown),
   just styled as an unmissable button rather than emphasized text. */
.pron-chip{display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 7px;
  border-radius:20px; background:#eef4f1; color:var(--accent); font-weight:600;
  font-family:Georgia,serif; border-bottom:none; white-space:nowrap}
.pron-chip svg{width:13px; height:13px; flex:0 0 auto}
.pron-chip:hover, .pron-chip:focus-visible{background:var(--accent); color:#fff; outline:none}

/* Icon-only listen button (pron.js's pronIconBtn) -- for long text (a full
   sentence) where baking the words into a nowrap pill like .pron-chip would
   stop it wrapping. The text sits next to this as normal flowing text. */
.pron-icon-btn{border:none; border-bottom:none; background:#eef4f1; color:var(--accent); cursor:pointer;
  width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; vertical-align:-7px; margin-right:7px; padding:0}
.pron-icon-btn svg{width:14px; height:14px; display:block}
.pron-icon-btn:hover, .pron-icon-btn:focus-visible{background:var(--accent); color:#fff; outline:none}

.bd-overlay{position:fixed; inset:0; background:rgba(20,20,18,.45); display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:50}
.bd-card{background:var(--card); border-radius:16px; max-width:420px; width:100%;
  max-height:85vh; overflow-y:auto; padding:22px; box-shadow:0 8px 30px rgba(0,0,0,.22)}
.bd-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:2px}
.bd-word{font-family:Georgia,serif; font-size:21px; font-weight:600}
.bd-close{border:none; background:transparent; font-size:22px; line-height:1; color:var(--muted);
  cursor:pointer; padding:4px 9px; border-radius:8px; margin:-4px -6px 0 0}
.bd-close:hover{color:var(--ink); background:var(--bg)}
.bd-ipa-row{display:flex; align-items:center; gap:8px; background:var(--bg); border-radius:12px;
  padding:8px 10px 8px 6px; margin:14px 0 18px}
.bd-play{border:none; background:transparent; padding:9px; color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:8px}
.bd-play svg{width:20px; height:20px; display:block}
.bd-play:hover{color:var(--accent); background:var(--card)}
.bd-play:active{transform:translateY(1px)}
.bd-slow{font-size:12.5px; font-weight:700; font-family:-apple-system,sans-serif; padding:9px 10px}
.bd-ipa{flex:1; font-family:Georgia,serif; font-size:26px; text-align:center;
  letter-spacing:.03em; word-break:break-word}
.bd-ipa .stress{color:var(--accent)}
.bd-ipa .openv{color:var(--red)}
.bd-section-title{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--accent); margin:0 0 9px}
.bd-symlist{display:flex; flex-direction:column; gap:9px; margin-bottom:16px}
.bd-sym{display:flex; gap:11px; align-items:flex-start}
.bd-sym-glyph{font-family:Georgia,serif; font-size:16px; font-weight:700; flex:0 0 32px; text-align:center;
  background:var(--bg); border-radius:7px; padding:3px 0}
.bd-sym-glyph.openv{color:var(--red)}
.bd-sym-desc{font-size:13px; line-height:1.4; padding-top:3px}
.bd-sym-desc .ex{color:var(--muted)}
.bd-note{font-size:13.5px; line-height:1.5; padding:11px 13px; border-radius:10px; margin-top:9px}
.bd-note:first-of-type{margin-top:0}
.bd-note.stress-note{background:#eef4f1; color:var(--ink)}
.bd-note.open-warn{background:var(--amber-soft); color:#78350f}

/* ---------- Theory tab content (ConjugateIt's grammar explainer, PronounceIt's course) ---------- */
.theory{font-size:14.5px; line-height:1.62}
.theory h3{font-family:Georgia,serif; font-size:18px; font-weight:600; margin:20px 0 6px; letter-spacing:-.01em}
.theory h3:first-of-type{margin-top:16px}
.theory h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); font-weight:700; margin:16px 0 5px}
.theory p{margin:7px 0; color:var(--ink)}
.theory ul{margin:7px 0; padding-left:20px}
.theory li{margin:5px 0}
.theory .it{font-family:Georgia,serif}
.theory .end{font-family:Georgia,serif; font-weight:600; color:var(--accent)}
.theory table{min-width:0; width:100%; margin:8px 0; border:1px solid var(--line); border-radius:8px; overflow:hidden; border-collapse:collapse}
.theory th,.theory td{padding:5px 11px; font-size:13px; text-align:left; border:1px solid var(--line)}
.theory thead th{background:#f7f5f0; font-weight:600}
.theory td.g{font-weight:600; background:#faf8f4; font-family:Georgia,serif}
.theory .ref{margin:18px 0 4px; padding:12px 14px; background:#eef4f1; border-radius:11px; font-size:13px; color:#14532d}
.theory .lead{color:var(--muted); font-size:13.5px; margin:2px 0 10px}
/* Long-text items (e.g. tongue twisters) as a list rather than a table --
   a table forces each row's text into a fixed-width column, which a full
   sentence doesn't wrap inside cleanly. */
.theory .twister-list{list-style:none; margin:10px 0; padding:0}
.theory .twister-list li{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px}
.theory .twister-list li:last-child{margin-bottom:0}
.theory .tw-num{font-size:11px; font-weight:700; color:var(--accent); margin-bottom:4px}
.theory .tw-text{line-height:1.55}
.theory .tw-meta{font-size:12.5px; color:var(--muted); margin-top:6px}
.theory .tw-label{font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:.04em; color:var(--ink); margin-right:5px}

/* ---------- Generic labeled dropdown (ConjugateIt's tense/lesson pickers, PronounceIt's lesson picker) ---------- */
.cfg-field{display:block; margin-bottom:10px}
.cfg-field:last-child{margin-bottom:0}
.cfg-label{display:block; font-size:12px; font-weight:600; color:var(--ink); margin-bottom:4px}
.cfg-select{width:100%; height:50px; padding:0 40px 0 16px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink); font-size:15px; font-weight:600; line-height:50px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a827e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px}
.cfg-select:focus{outline:none; border-color:var(--accent)}

/* ---------- Collapsible multiselect (ConjugateIt's tense picker, PronounceIt's language-tips picker) ---------- */
.config{margin-top:14px; border:1px solid var(--line); border-radius:14px; background:#fff; padding:13px 14px}
.config-title{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent)}
.config-hint{font-size:12px; color:var(--muted); margin:2px 0 11px}
.cfg-drop{border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden}
.cfg-drop summary{list-style:none; cursor:pointer; padding:14px 16px; font-size:15px; font-weight:600;
  display:flex; justify-content:space-between; align-items:center; gap:8px}
.cfg-drop summary::-webkit-details-marker{display:none}
.cfg-drop summary .car{color:var(--muted); font-size:11px; transition:transform .15s}
.cfg-drop[open] summary .car{transform:rotate(180deg)}
.cfg-panel{border-top:1px solid var(--line); padding:5px 4px}
.cfg-panel label{display:flex; align-items:center; gap:11px; padding:9px 10px; font-size:14px; cursor:pointer; border-radius:8px}
.cfg-panel label:active{background:var(--bg)}
.cfg-panel input{width:18px; height:18px; flex:0 0 auto}

/* Small round flag icons (PronounceIt's language-tips picker) -- inline in
   plain text flow (.theory h4, the picker's summary line) as well as inside
   .cfg-panel's flex rows, so align via vertical-align (works everywhere)
   rather than relying on flex centering (only works in the flex case). */
.lang-flag{width:16px; height:16px; border-radius:50%; object-fit:cover;
  vertical-align:-3px; margin-right:5px; flex:0 0 auto; display:inline-block}