/* Svaram beta (s300-008; Hindi s300-015). Matches wireframe screens 3 and 4. No external fonts. */
/* Noto Sans Telugu (SIL OFL 1.1, /fonts/OFL.txt), served from this site: same letters on every phone. */
@font-face{font-family:"Svaram Telugu";font-style:normal;font-weight:400 500;font-display:swap;
  src:url(/fonts/noto-sans-telugu-telugu-400-normal.woff2) format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CDA,U+1CF2,U+200C-200D,U+25CC}
@font-face{font-family:"Svaram Telugu";font-style:normal;font-weight:600 700;font-display:swap;
  src:url(/fonts/noto-sans-telugu-telugu-600-normal.woff2) format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0C00-0C7F,U+1CDA,U+1CF2,U+200C-200D,U+25CC}
/* Noto Sans Devanagari (SIL OFL 1.1, @fontsource 5.3.0), served from this site (s300-015). */
@font-face{font-family:"Svaram Devanagari";font-style:normal;font-weight:400 500;font-display:swap;
  src:url(/fonts/noto-sans-devanagari-devanagari-400-normal.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"Svaram Devanagari";font-style:normal;font-weight:600 700;font-display:swap;
  src:url(/fonts/noto-sans-devanagari-devanagari-600-normal.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+25CC,U+A830-A839,U+A8E0-A8FF}
:root{
  --bg:#F7F7F5; --surface:#FFFFFF; --fg:#1C1C1A; --muted:#5C5C57; --line:#E4E4DF;
  --accent:#15803D; --accent-soft:#DCFCE7; --on-accent:#FFFFFF;
  --warn-bg:#FEF3C7; --warn-line:#F59E0B; --warn-mark:#FDE68A; --warn-ink:#B45309;
  --box-line:#1C1C1A;
  --font: "Svaram Telugu","Svaram Devanagari",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Telugu","Telugu Sangam MN","Nirmala UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141413; --surface:#1E1E1C; --fg:#F2F2EE; --muted:#B5B5AE; --line:#33332F;
    --accent:#22C55E; --accent-soft:#14532D; --on-accent:#0B2614;
    --warn-bg:#3A2A0A; --warn-line:#B45309; --warn-mark:#78350F; --warn-ink:#FBBF24;
    --box-line:#B5B5AE;
  }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font:16px/1.5 var(--font);-webkit-text-size-adjust:100%}
a{color:var(--accent)}
.page{min-height:100vh;min-height:100dvh;max-width:560px;margin:0 auto;display:flex;flex-direction:column}

.bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.logo-link{display:block;line-height:0}
.logo{height:40px;width:auto}
.badge{font-weight:600;font-size:12px;color:var(--accent);background:var(--accent-soft);padding:6px 10px;border-radius:999px}

main{flex:1;display:flex;flex-direction:column;padding:0 16px}
.steps{list-style:none;margin:0;padding:16px 0 4px;display:flex;flex-direction:column;gap:8px}
.steps li{display:flex;gap:10px;align-items:baseline;font-size:15px;line-height:1.45}
.num{font-weight:700;font-size:14px;color:var(--accent);width:16px;flex:none}
.en{color:var(--muted);font-size:13px}

.field{display:flex;flex-direction:column;gap:6px;padding-top:12px;flex:1}
label{font-weight:600;font-size:13px;color:var(--muted)}
textarea{flex:1;width:100%;min-height:200px;border:2px solid var(--box-line);border-radius:16px;padding:14px 16px;
  font:500 22px/1.5 var(--font);color:var(--fg);background:var(--surface);resize:none}
textarea:focus{outline:3px solid var(--accent);outline-offset:2px}
textarea.has-issue{border-color:var(--warn-ink)}
.meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}
.meta #count{flex:none}

.check{margin-top:10px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;padding:12px 14px;font-size:14px}
.check p{margin:0 0 6px}
.check-text{font-size:17px;line-height:1.6;word-break:break-word}
.check-text mark{background:var(--warn-mark);color:inherit;border-bottom:2px solid var(--warn-ink);border-radius:4px;padding:0 3px}
.check-title{font-weight:600}
.check-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.check-actions button{min-height:44px;padding:0 14px;border-radius:10px;font:600 14px var(--font);cursor:pointer}
.btn-outline{border:1px solid var(--fg);background:var(--surface);color:var(--fg)}
.btn-dark{border:0;background:var(--fg);color:var(--bg)}

.speak{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 0 8px}
.status{margin:0;min-height:20px;font-size:13px;font-weight:600;color:var(--accent);text-align:center}
.status.err{color:var(--warn-ink)}
.speak-btn{width:88px;height:88px;border-radius:999px;border:0;background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 18px rgba(21,128,61,.35);-webkit-tap-highlight-color:transparent}
.speak-btn:focus-visible{outline:3px solid var(--fg);outline-offset:4px}
.speak-btn:active{transform:scale(.97)}
.speak-btn .ic-stop{display:none}
.speak-btn.busy{background:var(--surface);color:var(--accent);border:3px solid var(--accent);box-shadow:none}
.speak-btn.busy .ic-speak{display:none}
.speak-btn.busy .ic-stop{display:block}
.speak-label{font-weight:600;font-size:15px}

.foot{padding:10px 16px 18px;font-size:11px;line-height:1.5;color:var(--muted);text-align:center}

/* About page */
.doc{padding:20px 16px 40px;font-size:16px;line-height:1.6}
.doc h1{font-size:24px;margin:0 0 12px}
.doc h2{font-size:18px;margin:28px 0 8px}
.doc blockquote{margin:8px 0;padding:10px 14px;border-left:4px solid var(--accent);background:var(--surface);border-radius:0 8px 8px 0}
.doc ul{padding-left:20px}

@media (min-width:600px){ .steps li{font-size:16px} }
@media (prefers-reduced-motion:reduce){ .speak-btn:active{transform:none} }

/* s300-010: English -> Telugu tester page */
.lang-line{margin:14px 0 0;font-size:14px;color:var(--muted)}
.lang-line strong{color:var(--fg)}
textarea.en-input{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:20px;min-height:150px}
.te-card{margin-top:10px;background:var(--accent-soft);border:2px solid var(--accent);border-radius:16px;padding:12px 14px}
.te-label{display:block;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.te-text{margin:4px 0 6px;font-size:22px;line-height:1.55;word-break:break-word}
.te-note{margin:0;font-size:12px;color:var(--muted)}
.num-warn{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:10px 12px;margin:0 0 8px;font-size:14px}
.num-warn p{margin:0 0 8px}
.num-warn button{min-height:44px;padding:0 14px;border-radius:10px;font:600 14px var(--font);cursor:pointer}
.switch-mode{text-align:center;margin:0 0 6px;font-size:14px}

/* s300-012: quick phrases */
.qp-wrap{padding-top:12px}
.qp-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:13px;color:var(--muted);margin-bottom:6px}
.qp-more{border:0;background:none;color:var(--accent);font:600 13px var(--font);padding:6px 0;cursor:pointer}
.qp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.qp{min-height:52px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);text-align:left;
  padding:6px 9px;display:flex;flex-direction:column;justify-content:center;gap:1px;cursor:pointer;font:inherit}
.qp[hidden]{display:none}
.qp:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.qp.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.qp-en{font-weight:600;font-size:14px;line-height:1.25}
.qp-te{font-size:12px;color:var(--muted);line-height:1.3}
.qp.on .qp-te{color:inherit;opacity:.85}
@media (max-width:340px){.qp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* s300-015: Hindi. "Svaram speaks" switch on the home page (wireframe screen 9) */
.lang-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.lang-switch > span{font-weight:600;font-size:14px}
.seg{display:inline-flex;border:2px solid var(--accent);border-radius:999px;padding:2px;background:var(--surface)}
.seg-btn{min-width:84px;min-height:44px;border:0;border-radius:999px;background:none;color:var(--fg);font:600 17px var(--font);padding:4px 14px;cursor:pointer}
.seg-btn[aria-checked="true"]{background:var(--accent);color:var(--on-accent)}
.seg-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.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}
.te-text:lang(hi){line-height:1.7}