/* Silabear — brand-aligned stylesheet. System fonts only. */
:root{
  /* ---- Brand ---- */
  --brand-primary:#E63946;
  --brand-primary-hover:#C92A3A;
  --brand-dark:#2C1810;
  --brand-warm:#8B5A3C;

  /* ---- Neutrals (light mode) ---- */
  --bg:#FDFBF7;
  --surface:#FFFFFF;
  --text-primary:#1a1a1a;
  --text-secondary:#5C5C5C;
  --border:#E8E4DC;

  /* ---- Derived brand tints ---- */
  --brand-soft:#FDF4F5;
  --brand-soft-strong:#FBE7E9;

  /* ---- Quiz feedback (correct vs. incorrect) ---- */
  --quiz-correct:#2D8659;
  --quiz-correct-soft:#E5F3EC;

  /* ---- Ambiguity warning ---- */
  --ambig:#B45309;
  --ambig-soft:#FFFBEB;

  /* ---- Layout ---- */
  --radius:8px;
  --max:780px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#1a1410;
    --surface:#2C1810;
    --text-primary:#F5F0E8;
    --text-secondary:#A89F93;
    --border:#3A2A20;
    --brand-soft:#3A1F23;
    --brand-soft-strong:#4A2329;
    --quiz-correct:#7BC79A;
    --quiz-correct-soft:#142A1F;
    --ambig:#FBBF24;
    --ambig-soft:#422006;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text-primary);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand-primary);text-decoration:none}
a:hover{color:var(--brand-primary-hover);text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.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}

/* ---------- Header ---------- */
.site-header{border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:10}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;max-width:var(--max);margin:0 auto}
.logo-link{display:inline-flex;align-items:center;line-height:0}
.logo-img{height:40px;width:auto;display:block}
.nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.nav a{color:var(--text-primary);font-weight:500}
.nav a:hover{color:var(--brand-primary);text-decoration:none}
@media (max-width:520px){
  .logo-img{height:32px}
  .nav{gap:12px;font-size:13px}
}

/* ---------- Hero ---------- */
.hero{padding:40px 0 16px}
.hero h1{font-size:clamp(26px,4vw,36px);line-height:1.2;margin:0 0 12px;color:var(--text-primary)}
.hero h1 em{font-style:normal;color:var(--brand-primary)}
.lede{color:var(--text-secondary);margin:0;font-size:17px;max-width:60ch}

/* ---------- Tool ---------- */
.tool{margin:24px 0 32px}
.tool form{display:flex;flex-direction:column;gap:10px}
#silabear-input{width:100%;min-height:72px;padding:14px 16px;font-size:17px;font-family:var(--sans);color:var(--text-primary);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);resize:vertical}
#silabear-input:focus{outline:2px solid var(--brand-primary);outline-offset:1px;border-color:transparent}
.form-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-primary{background:var(--brand-primary);color:#fff;border:0;padding:10px 18px;border-radius:var(--radius);font-weight:600;cursor:pointer;font-size:15px;font-family:var(--sans);transition:background .15s ease}
.btn-primary:hover{background:var(--brand-primary-hover)}
.btn-primary:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border);padding:10px 14px;border-radius:var(--radius);cursor:pointer;font-size:15px;font-family:var(--sans)}
.btn-ghost:hover{color:var(--text-primary);border-color:var(--text-secondary)}
.hint{color:var(--text-secondary);font-size:13px}

/* ---------- Result card ---------- */
.result:empty{display:none}
.result{margin-top:20px}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;background:var(--surface)}
.card h3{margin:0 0 8px;font-size:18px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:var(--text-primary)}
.card .pill{font-size:12px;padding:2px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand-primary);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.card .verdict-ok{color:var(--brand-primary);font-weight:600}
.card .verdict-no{color:var(--text-secondary)}
.syl-chain{font-size:22px;letter-spacing:.02em;margin:6px 0 10px;word-break:break-word;color:var(--text-primary)}
.syl-chain .syl{padding:2px 4px;border-radius:4px}
.syl-chain .syl.tonic{background:var(--brand-soft);color:var(--brand-primary);font-weight:700}
.rule{color:var(--text-secondary);font-size:14px;margin:4px 0 0}
.paragraph-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px;color:var(--text-primary)}
.paragraph-table th,.paragraph-table td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--border)}
.paragraph-table th{color:var(--text-secondary);font-weight:600}
.paragraph-table td.tilde-yes{color:var(--brand-primary);font-weight:600}
.paragraph-table td.tilde-no{color:var(--text-secondary)}

/* ---------- Word page ---------- */
.word-page{padding:24px 0}
.word-hero h1{margin:0 0 12px;font-size:clamp(26px,4vw,36px);color:var(--text-primary)}
.word-hero h1 strong{color:var(--brand-primary);font-weight:700}
.verdict{font-size:17px;margin:0 0 20px;padding:14px 16px;border-radius:var(--radius);border-left:4px solid var(--brand-primary);background:var(--brand-soft)}
.verdict[data-verdict="yes"]{background:var(--brand-primary);border-left-color:var(--brand-primary-hover)}
.verdict[data-verdict="yes"] .verdict-label{color:#fff;font-weight:700;display:block}
.verdict[data-verdict="yes"] .verdict-rule{color:#fff;opacity:.92}
.verdict[data-verdict="no"]{background:var(--surface);border-left-color:var(--text-secondary)}
.verdict[data-verdict="no"] .verdict-label{color:var(--text-secondary);font-weight:700;display:block}
.verdict[data-verdict="no"] .verdict-rule{color:var(--text-secondary)}
.verdict-rule{font-size:14px;color:var(--text-primary);opacity:.85;margin-top:2px}

.word-breakdown{margin:16px 0 20px}
.syllable-row{font-size:32px;letter-spacing:.02em;margin:4px 0 16px;word-break:break-word;color:var(--text-primary)}
.syllable-row .syllable{padding:2px 6px;border-radius:6px}
.syllable-row .syllable.tonic{background:var(--brand-soft);color:var(--brand-primary);font-weight:700}
.syllable-row .sep{color:var(--text-secondary);margin:0 2px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:0}
.stat-grid div{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;background:var(--surface)}
.stat-grid dt{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin:0}
.stat-grid dd{margin:2px 0 0;font-size:16px;font-weight:600;color:var(--text-primary)}

.related,.see-also,.explainer{margin:28px 0}
.related h2,.see-also h2,.explainer h2{font-size:20px;margin:0 0 10px;color:var(--text-primary)}
.related-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.related-list a{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid var(--border);color:var(--text-primary);font-size:14px;background:var(--surface)}
.related-list a:hover{border-color:var(--brand-primary);color:var(--brand-primary);text-decoration:none}

/* Rule box on the per-word page (inside the verdict pattern handles primary state;
   this is a softer aside used in the explainer section). */
.explainer .rule-box{background:var(--brand-soft);border-left:4px solid var(--brand-primary);border-radius:var(--radius);padding:12px 14px}

/* ---------- Feature grid ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:28px 0}
.feature{display:block;border:1px solid var(--border);border-radius:var(--radius);padding:16px;color:var(--text-primary);background:var(--surface);transition:border-color .15s ease,transform .15s ease}
.feature:hover{border-color:var(--brand-primary);text-decoration:none;transform:translateY(-1px)}
.feature h2{margin:0 0 4px;font-size:17px;color:var(--brand-primary)}
.feature p{margin:0;color:var(--text-secondary);font-size:14px}

/* ---------- Word cloud / chips ---------- */
.word-cloud{margin:28px 0}
.word-cloud h2{font-size:20px;margin:0 0 10px;color:var(--text-primary)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 12px;border:1px solid var(--border);border-radius:999px;font-size:14px;color:var(--text-primary);background:var(--surface)}
.chip:hover{border-color:var(--brand-primary);color:var(--brand-primary);text-decoration:none}

/* ---------- Doc / explainer pages ---------- */
.doc-page{padding:28px 0;max-width:680px}
.doc-page h1{margin:0 0 12px;font-size:clamp(26px,4vw,34px);color:var(--text-primary)}
.doc-page .lede{font-size:17px;margin:0 0 18px}
.prose h2{margin:28px 0 10px;font-size:22px;color:var(--text-primary)}
.prose h3{margin:20px 0 8px;font-size:18px;color:var(--text-primary)}
.prose p{margin:0 0 14px;color:var(--text-primary)}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose li{margin:4px 0}
.prose code{background:var(--brand-soft);padding:1px 5px;border-radius:4px;font-size:.92em;color:var(--brand-primary)}
.prose strong{color:var(--text-primary)}
.prose table{border-collapse:collapse;margin:0 0 16px;font-size:14px}
.prose th,.prose td{padding:6px 10px;border-bottom:1px solid var(--border);text-align:left}
.prose th{color:var(--text-secondary);font-weight:600}
.prose blockquote{border-left:4px solid var(--brand-primary);background:var(--brand-soft);padding:8px 14px;margin:0 0 14px;border-radius:0 var(--radius) var(--radius) 0}
.index-list{list-style:none;padding:0;margin:16px 0;columns:2;column-gap:24px}
.index-list li{break-inside:avoid;margin:2px 0}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);padding:24px 0 40px;margin-top:48px;background:var(--bg)}
.footer-nav,.footer-meta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px;font-size:14px}
.footer-nav a{color:var(--text-primary)}
.footer-meta a{color:var(--text-secondary)}
.footer-copy{color:var(--text-secondary);font-size:13px;margin:10px 0 0}

/* ---------- Ads ---------- */
.ad-slot{margin:20px 0;min-height:90px;display:flex;justify-content:center}
.ad-footer{margin:28px auto 0;max-width:var(--max);padding:0 20px}

.muted{color:var(--text-secondary);font-size:14px}

/* ---------- Missing-tilde correction ---------- */
.correction-banner{border:1px solid var(--border);border-left:4px solid var(--brand-primary);border-radius:var(--radius);padding:12px 14px;margin:0 0 12px;background:var(--brand-soft)}
.correction-banner .correction-q{margin:0 0 6px;font-size:16px;color:var(--text-primary)}
.correction-banner .correction-q strong{color:var(--brand-primary)}
.correction-banner .correction-note{margin:0;color:var(--text-primary);font-size:13px;opacity:.85}
.correction-ambiguous{border-left-color:var(--ambig);background:var(--ambig-soft)}
.correction-ambiguous .correction-q strong{color:var(--ambig)}
.correction-choices{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.correction-choice{padding:6px 14px;font-size:15px;font-weight:600;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);cursor:pointer;font-family:var(--sans)}
.correction-choice:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.correction-choice.is-active{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary)}
.correction-choice:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}

/* Paragraph-table word-cell variants */
.para-summary{margin:0 0 10px;color:var(--text-secondary);font-size:14px}
.para-summary .para-corrections{color:var(--brand-primary)}
.col-word{line-height:1.4}
.para-original{color:var(--text-secondary);text-decoration:line-through;text-decoration-thickness:1px;margin-right:4px}
.para-arrow{color:var(--text-secondary);margin:0 4px}
.para-corrected{font-weight:700;color:var(--brand-primary)}
.para-badge{display:inline-block;margin-left:4px;font-size:12px;color:var(--brand-primary);vertical-align:baseline;cursor:help}
.para-badge.para-ambig{color:var(--ambig)}
.para-swaps{display:block;margin-top:2px;font-size:12px;color:var(--text-secondary)}
.para-swap{color:var(--text-secondary);text-decoration:underline;text-decoration-style:dotted}
.para-swap:hover{color:var(--brand-primary)}

/* ---------- Quiz ---------- */
.quiz{padding:24px 0 8px}
.quiz-hero h1{margin:0 0 10px;font-size:clamp(26px,4vw,34px);color:var(--text-primary)}
.quiz-hero .lede{margin:0 0 18px;color:var(--text-secondary);font-size:17px;max-width:56ch}
.quiz-hero kbd{display:inline-block;padding:0 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;background:var(--surface);font-family:var(--sans);font-size:12px;color:var(--text-primary);vertical-align:baseline}
.quiz-stage{border:1px solid var(--border);border-radius:var(--radius);padding:22px 18px;margin:0 0 20px;background:var(--surface);min-height:280px;display:flex;flex-direction:column;justify-content:center}
.quiz-view[hidden]{display:none !important}
.quiz-view{text-align:center}
.quiz-help{color:var(--text-secondary);max-width:44ch;margin:0 auto 18px;font-size:16px}
.quiz-kbd{margin-top:14px;color:var(--text-secondary);font-size:13px}
.quiz-kbd kbd{display:inline-block;padding:0 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;background:var(--surface);font-size:12px;color:var(--text-primary);margin:0 2px}

/* Progress bar (filled by JS via --progress on the parent). */
.quiz-progress-bar{height:4px;background:var(--border);border-radius:2px;margin:0 0 12px;overflow:hidden;position:relative}
.quiz-progress-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--progress,0)*100%);background:var(--brand-primary);transition:width .25s ease}
.quiz-progress{color:var(--text-secondary);font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px}
.quiz-prompt{margin:0 0 6px;color:var(--text-secondary);font-size:15px}
.quiz-word{font-size:clamp(40px,8vw,64px);font-weight:700;letter-spacing:.01em;margin:10px 0 24px;word-break:break-word;color:var(--text-primary)}
.quiz-choices{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn-choice{flex:1 1 180px;min-height:56px;padding:14px 18px;font-size:17px;font-weight:600;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text-primary);cursor:pointer;font-family:var(--sans);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:border-color .15s ease,color .15s ease}
.btn-choice:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
.btn-choice:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
.btn-yes{border-left:4px solid var(--brand-primary)}
.btn-no{border-left:4px solid var(--text-secondary)}
.key-hint{font-size:12px;color:var(--text-secondary);border:1px solid var(--border);border-radius:4px;padding:0 5px;font-weight:500}
.quiz-verdict{font-size:22px;font-weight:700;margin:0 0 16px}
.quiz-verdict.is-correct{color:var(--quiz-correct)}
.quiz-verdict.is-wrong{color:var(--brand-primary)}
.quiz-reveal{font-size:clamp(36px,7vw,56px);font-weight:700;margin:0 0 14px;color:var(--text-primary)}
.quiz-reveal .accented{color:var(--brand-primary)}
.quiz-rule{margin:0 auto 20px;max-width:48ch;color:var(--text-primary);font-size:15px;line-height:1.5}
.quiz-next{min-height:48px;min-width:160px}
.quiz-score{font-size:48px;font-weight:700;margin:0 0 8px;color:var(--brand-primary)}
.quiz-score .score-sep,.quiz-score .score-tot{color:var(--text-secondary);font-weight:500}
.quiz-summary{color:var(--text-secondary);margin:0 0 20px;font-size:16px}
.quiz-missed{margin:0 0 22px;text-align:left}
.quiz-missed h3{font-size:16px;color:var(--text-secondary);margin:0 0 10px;text-align:center;text-transform:uppercase;letter-spacing:.04em}
.missed-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.missed-list li{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;background:var(--surface)}
.missed-list strong{font-size:18px;font-weight:700;color:var(--text-primary)}
.missed-list .accented{color:var(--brand-primary)}
.missed-class{color:var(--text-secondary);font-size:14px;margin-left:6px}
.missed-rule{color:var(--text-secondary);font-size:14px;margin-top:4px}
.quiz-actions{margin:0 0 20px}
.quiz-restart{min-height:48px;min-width:180px}
.quiz-variants{margin-top:12px}
.quiz-variants ul,.quiz-variants-inline ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.quiz-variants li a,.quiz-variants-inline li a{padding:6px 12px;border:1px solid var(--border);border-radius:999px;color:var(--text-primary);font-size:14px;background:var(--surface)}
.quiz-variants li a:hover,.quiz-variants-inline li a:hover{border-color:var(--brand-primary);color:var(--brand-primary);text-decoration:none}
.quiz-variants-inline{margin:22px 0;text-align:center}
.quiz-prose{margin:28px 0 0}
.quiz-prose h2{margin-top:28px}

/* CTA card on the homepage */
.quiz-cta{margin:24px 0;border:1px solid var(--border);border-left:4px solid var(--brand-primary);border-radius:var(--radius);padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--brand-soft)}
.quiz-cta h2{margin:0 0 4px;font-size:18px;color:var(--brand-primary)}
.quiz-cta p{margin:0;color:var(--text-primary);font-size:14px}
.quiz-cta .btn-primary{flex-shrink:0}

/* Per-word-page quiz nudge */
.word-page .quiz-nudge{margin:28px 0 0;padding:14px 16px;border:1px dashed var(--border);border-radius:var(--radius);text-align:center;font-size:15px;color:var(--text-secondary)}
.word-page .quiz-nudge a{font-weight:600}

@media (max-width:520px){
  .btn-choice{min-height:52px;font-size:16px}
  .quiz-stage{padding:18px 12px}
}