/* Shourei — Linen & Forest. Visual-only skin for the local application.
   Layout, controls, learning state and audio behavior stay in their original files. */
:root {
  --accent:#315b43;
  --border:#d8ded5;
  --muted:#59695e;
  --linen-paper:#f6f4ed;
  --linen-surface:#fffdf8;
  --linen-ink:#1d2921;
  --linen-green:#315b43;
  --linen-green-dark:#214b36;
  --linen-green-wash:#e7eee5;
  --linen-brown:#795943;
  --linen-brown-wash:#f5ede3;
  --linen-error:#795943;
  --linen-error-wash:#fff0ce;
}
html,body{background:var(--linen-paper);color:var(--linen-ink);font-family:Arial,Helvetica,sans-serif}
::selection{background:#ead3ab;color:var(--linen-ink)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--linen-green);outline-offset:3px}
:where(input,select,textarea){accent-color:var(--linen-green)}
:where(input:not([type=checkbox]):not([type=radio]),select,textarea){background-color:var(--linen-surface);color:var(--linen-ink);border-color:var(--border)}
:where(h1,h2,h3){color:var(--linen-ink)}
:where(.small,.subtle,.muted){color:var(--muted)}
a:hover{color:var(--linen-green-dark)}

/* One brand in every header, with the selected three-line E wordmark. */
.header{border-bottom-color:var(--border);background:var(--linen-paper)}
.linen-brand{gap:7px;color:var(--linen-ink);text-decoration:none!important}
.linen-brand>img{width:34px;height:34px;flex:none}
.linen-wordmark{display:inline-flex;align-items:center;white-space:nowrap;font:normal 29px/.96 Georgia,'Times New Roman',serif;letter-spacing:-.065em}
.linen-wordmark em{font-style:normal;margin-left:5px}
.linen-e{width:19px;height:23px;margin:1px 1px 0 0;display:flex;flex-direction:column;justify-content:space-between}
.linen-e i{display:block;width:100%;height:2px;background:currentColor}
.linen-e i:nth-child(2){width:73%}
.header nav a{color:#536557}
.header nav a:hover,.header nav a[aria-current]{color:var(--linen-green-dark);background:var(--linen-green-wash);text-decoration:none}
.profile-picker select,.profile-add,.language-picker button{border-color:var(--border);background:var(--linen-surface);color:var(--linen-ink)}
.language-picker button[aria-pressed=true],.language-picker button[aria-current=true]{border-color:var(--linen-brown);color:var(--linen-brown);background:var(--linen-brown-wash)}
.updates-nav-link .updates-nav-star{color:var(--linen-brown);text-shadow:none}
header nav a.updates-nav-link[data-update-unread="true"]{color:var(--linen-green-dark);background:var(--linen-green-wash)}
.updates-announcement-inner{border-color:#d3e1d2;background:#eaf1e9;color:#284633;box-shadow:0 5px 20px #315b430b}
.updates-announcement-star,.updates-announcement-copy strong{color:var(--linen-green-dark)}
.updates-announcement-action{background:var(--linen-green);color:#fff}
.updates-announcement-action:hover{background:var(--linen-green-dark);color:#fff}
.updates-announcement-close{color:var(--linen-green-dark)}
.updates-announcement-close:hover{background:#d6e5d5}
.updates-announcement :is(a,button):focus-visible,.updates-nav-link:focus-visible{outline-color:var(--linen-green)}

/* Shared actions and cards. Error/status colors below remain semantic. */
.primary,.button-primary,.game-main .game-primary,.vl-actions .vl-primary,.qa-save,
.update-primary,.daily-open,.completion-actions .completion-primary,.onboarding #onboarding-save,
.pilot-login button[type=submit]{background:var(--linen-green);border-color:var(--linen-green);color:#fff}
.primary:hover,.button-primary:hover,.game-main .game-primary:hover,.vl-actions .vl-primary:hover,
.qa-save:hover,.update-primary:hover,.daily-open:hover{background:var(--linen-green-dark);border-color:var(--linen-green-dark);color:#fff}
.secondary,.quiet,.update-secondary{background:var(--linen-surface);border-color:var(--border);color:var(--linen-green-dark)}
.secondary:hover,.quiet:hover,.update-secondary:hover{background:var(--linen-green-wash);color:var(--linen-green-dark)}
.text-button,.section-title a,.library-change{color:var(--linen-brown)}
:where(.clip,.content-card,.dictionary-panel,.game-card,.progress-card,.progress-panel,
  .qa-feature,.update-entry,.issue-entry,.vl-stage,.settings-content,.practice-panel,
  .phrases-panel,.library-panel,.daily-practice,.study-hud){border-color:var(--border)}

/* Catalog and daily plan: keep the live card and filter composition. */
.content-hero h1{font-family:Arial,Helvetica,sans-serif;letter-spacing:-.04em;color:var(--linen-ink)}
.content-hero p,.content-summary p,.content-profile-note{color:var(--muted)}
.content-add{border-color:#c8ad92;background:var(--linen-surface);color:var(--linen-brown)}
.content-type-filters button[aria-pressed=true],.dictionary-filters button[aria-pressed=true],
.progress-period button[aria-pressed=true]{background:var(--linen-green-wash);border-color:var(--linen-green);color:var(--linen-green-dark)}
.content-card{background:var(--linen-surface);border-color:var(--border)}
.content-card h2 a,.content-card h2{color:var(--linen-ink)}
.content-card-meta,.content-selects label,.content-summary,.content-known-detail,
.content-level-detail,.content-method{color:var(--muted)}
.content-cover.text{background:var(--linen-green-wash);color:var(--linen-green-dark)}
.content-cover.text[data-level=B1],.content-cover.text[data-level=B2]{background:#ece9dc}
.content-cover.text[data-level=C1],.content-cover.text[data-level=C2]{background:#e3eae0}
.clip:hover{border-color:#a9c1ab}
.clip.active{border-color:var(--linen-green);box-shadow:0 0 0 2px var(--linen-green-wash)}
.clip .creator{color:var(--linen-brown)}
.daily-practice,.daily-practice.finished{background:#eaf1e9;border-color:#d3e1d2;color:#284633}
.daily-eyebrow,.daily-date,.daily-budget,.daily-reason{color:#4f6854}
.daily-heading h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.035em;color:#284633}
.daily-symbol{background:#d9e9d9;color:var(--linen-green)}
.daily-step-line,.daily-footer{border-color:#d3dfd2}
.daily-open{border-radius:9px}

/* The existing HUD and command panel remain in place. */
.study-hud,.study-settings form{background:var(--linen-surface);border-color:var(--border)}
.study-goal>div,.study-material-strip>div+div{border-color:var(--border)}
.study-goal span,.study-metric-label,.study-material-strip small{color:var(--muted)}
.study-goal progress,.completion-goals progress{accent-color:var(--linen-green)}
.study-goal progress::-webkit-progress-value,.completion-goals progress::-webkit-progress-value{background:var(--linen-green)}
.study-goal progress::-moz-progress-bar,.completion-goals progress::-moz-progress-bar{background:var(--linen-green)}
.study-edit,.study-material-heading button{color:var(--linen-green-dark)}
.study-settings h1{font-family:Georgia,'Times New Roman',serif;font-weight:400}
.lesson-page .lesson-command-bar,.lesson-page .transport,.lesson-page #library,
.lesson-page .audio-lesson-card,.lesson-page .settings-content{background:var(--linen-surface);border-color:var(--border);color:var(--linen-ink)}
.lesson-page .lesson-command-bar>.study-words-goal{background:#f8f2e9;border-color:#ded5c6}
.lesson-page .lesson-command-main .watch-mode,.lesson-page .lesson-command-main .lesson-scope,
.lesson-page .lesson-command-main .study-modes{background:#e9eee8;border-color:#e9eee8}
.lesson-page .lesson-command-main .watch-mode button[aria-pressed=true],
.lesson-page .lesson-command-main .lesson-scope button[aria-pressed=true],
.lesson-page .lesson-command-main .study-modes button[aria-pressed=true]{background:var(--linen-surface);color:var(--linen-ink);border-color:var(--border)}
.lesson-page .lesson-command-head #library>summary,.lesson-page .lesson-command-head .lesson-settings>summary{color:var(--linen-green-dark)}
.lesson-page #translate-current-btn{background:var(--linen-surface);border-color:#b79372;color:var(--linen-brown)}
.lesson-page #listen-btn,.lesson-page .primary{background:var(--linen-green);border-color:var(--linen-green);color:#fff}
.lesson-page #clear-listen-btn{background:#f0f5ef;border-color:#d6e2d5;color:var(--linen-green-dark)}
.lesson-page #prev-btn,.lesson-page #next-btn,.lesson-page #restart-phrase-btn{background:#eef1ed;border-color:var(--border);color:var(--linen-green-dark)}
.lesson-page .transport .record{background:var(--linen-brown-wash);border-color:#c8ad92;color:#704b35}
.lesson-page .transport .record.is-recording{background:#a13d37;border-color:#a13d37;color:#fff}
.lesson-page .transport-controls{background:var(--linen-surface);border-color:var(--border)}
.lesson-page .sentence-option.selected{background:#edf2ec;border-color:#cadbcd}
.lesson-page .sentence-option:hover{background:#eff4ef}
.lesson-page .transcript-word.speaking{background:#f3dfbb;color:#5d432d;box-shadow:0 0 0 2px #e7c999}
.lesson-page .transcript-word.recognized{color:#245f42}
.lesson-page .transcript-word.vocab-new{background:#e8ede7;color:#2c4434;box-shadow:inset 0 -2px #96ad99}
.lesson-page .heard-other,.lesson-page .heard-extra{color:#795943}
.lesson-page .sentence-translation,.lesson-page .success-translation{background:var(--linen-brown-wash);border-color:#e2d1bd;color:#5d432d}
.lesson-page .sentence-translation{border-left-color:#977354}
.lesson-page .sentence-translation-label,.lesson-page .success-translation-label{color:#75563e}
.lesson-page .sentence-translation mark,.lesson-page .translation-link-active,
.lesson-page .success-translation-text .translation-link-active{background:#e8c88f;color:#49361f}
.lesson-page[data-mode=shorts]{--fused-bg:#17271f;--fused-fg:#f4f4ea;--fused-fade:linear-gradient(transparent,#17271f);--fused-hit-bg:#19402d;--fused-hit-fg:#c4f4d6;--fused-heard:#f4c177;--fused-extra-bg:#3a2a1b}
.lesson-page[data-mode=shorts][data-fused-theme=light]{--fused-bg:var(--linen-surface);--fused-fg:var(--linen-ink);--fused-fade:linear-gradient(transparent,#fffdf8);--fused-hit-bg:#e5f2e8;--fused-hit-fg:#245f42;--fused-heard:#795943;--fused-extra-bg:#f5ede3}
.lesson-page[data-mode=shorts][data-fused-theme=dark] .sentence-translation,
.lesson-page[data-mode=shorts][data-fused-theme=dark] .success-translation{background:#30291f;border-color:#d1a775;color:#f1dfc2}
.lesson-page[data-mode=shorts][data-fused-theme=dark] .sentence-translation-label,
.lesson-page[data-mode=shorts][data-fused-theme=dark] .success-translation-label{color:#f1d3a5}
.lesson-page[data-mode=shorts][data-fused-theme=dark] .full-transcript .transcript-word.vocab-new{background:#2d3d33;color:#d6e7d7;box-shadow:inset 0 -2px #90aa91}
.lesson-page[data-mode=shorts][data-fused-theme=dark] .full-transcript .transcript-word.vocab-new .transcript-letters{background:transparent;color:#d6e7d7}
.lesson-page .native-video-controls input{accent-color:#977354}
.lesson-page .transcript-word.vocab-word:focus-visible,
.lesson-page button:focus-visible,.lesson-page summary:focus-visible,
.lesson-page select:focus-visible,.lesson-page .sentence-option:focus-visible,
.vocab-word:focus-visible,.dictionary-info:focus-visible,
.language-picker button:focus-visible{outline-color:var(--linen-green)}

/* Dictionary, word laboratory, and game. */
.dictionary-heading h1,.game-heading h1,.progress-hero h1,.qa-intro h1,
.vl-intro h1,.updates-main h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.04em}
.dictionary-panel,.dictionary-row,.game-card,.progress-card,.progress-panel,
.vl-stage{background:var(--linen-surface);border-color:var(--border)}
.dictionary-row{border-bottom-color:var(--border)}
.dictionary-word,.vl-prompt{color:var(--linen-ink)}
.dictionary-hint,.dictionary-heading p,.game-heading p,.game-hint,.game-note,
.vl-intro p,.vl-hint{color:var(--muted)}
.dictionary-play{color:var(--linen-green-dark);background:var(--linen-green-wash);border-color:#cbdcca}
.dictionary-select[data-status=unknown]{color:#795943;background:#fff0ce}
.dictionary-select[data-status=unsure]{color:#795943;background:#eee6dc}
.game-pill,.vl-source{background:var(--linen-brown-wash);border-color:#decab6;color:var(--linen-brown)}
.game-scene{background:#e5efe6}
.game-hills{background:#b9d3bc}
.game-gate{background:#c8d7c5;box-shadow:4px 3px 12px #69866b44;color:#284633}
.game-track{background:#a9987e;border-top-color:#6d614f;border-bottom-color:#6d614f}
.game-runner{background:#ec7445;box-shadow:inset -8px -6px #c7522d}
.game-scene-caption{color:#4e6954}
.game-progress>div{background:var(--linen-green)}
.vl-modes button,.vl-token,.vl-choice,.vl-actions button{background:var(--linen-surface);border-color:var(--border);color:var(--linen-ink)}
.vl-modes button[aria-current=true],.vl-choice[aria-pressed=true]{background:var(--linen-green-wash);border-color:var(--linen-green);color:var(--linen-green-dark)}
.vl-stage-top,.vl-context a,.vl-note a{color:var(--linen-brown)}
.vl-note{border-color:var(--linen-brown);background:var(--linen-brown-wash);color:#5d432d}
.vl-feedback[data-result=correct]{color:#245f42}
.vl-feedback[data-result=wrong]{color:#795943}

/* Progress, settings, updates, QA, and issue review. */
.progress-hero p,.progress-card p,.progress-next p,.progress-caption{color:var(--muted)}
.progress-next{background:var(--linen-green-wash);border-color:#d3e1d2}
.progress-next a{background:var(--linen-green);border-color:var(--linen-green);color:#fff}
.progress-words button[data-status=unknown]{background:var(--linen-error-wash);color:var(--linen-error)}
.progress-period button{background:var(--linen-surface);border-color:var(--border)}
.study-settings input[type=number],.study-weekdays span{background:var(--linen-surface);border-color:var(--border);color:var(--linen-ink)}
.study-weekdays input:checked+span{background:var(--linen-green-wash);border-color:var(--linen-green);color:var(--linen-green-dark)}
.updates-main,.qa-main,.issues-main{color:var(--linen-ink)}
.update-entry,.qa-feature,.issue-entry{background:var(--linen-surface);border-color:var(--border)}
.updates-kicker,.update-number,.qa-eyebrow,.qa-number,.update-entry-meta{color:var(--linen-brown)}
.update-entry-title,.updates-main h1,.qa-feature h2{color:var(--linen-ink)}
.updates-lead,.update-entry-copy,.qa-intro p,.qa-hint{color:var(--muted)}
.update-toc,.qa-privacy,.issue-context{background:var(--linen-brown-wash);border-color:#e2d1bd}
.qa-index a,.qa-second{background:var(--linen-surface);border-color:var(--border);color:var(--linen-green-dark)}
.qa-open,.qa-save,.issue-actions button[type=submit]{background:var(--linen-green);border-color:var(--linen-green);color:#fff}
.qa-check,.qa-verdict label{border-color:var(--border);background:var(--linen-surface)}
.issue-dialog{background:var(--linen-surface);color:var(--linen-ink)}
.issue-actions button,.issue-review-actions button{border-color:var(--border);background:var(--linen-green-wash);color:var(--linen-green-dark)}
.issue-status-badge{background:#eee6dc;color:#725941}
.issue-resolved .issue-status-badge{background:#e5f2e8;color:#245f42}
.completion-dialog{background:var(--linen-surface);color:var(--linen-ink)}
.completion-goals{background:var(--linen-paper);border-color:var(--border)}
.completion-emblem,.completion-badge{background:var(--linen-green-wash);color:var(--linen-green-dark)}
.completion-actions .completion-primary{background:var(--linen-green);border-color:var(--linen-green)}
.completion-sparks i{background:#b99667}

/* Standalone entry and pilot pages use the same identity. */
.onboarding,.pilot-login{background:var(--linen-paper);color:var(--linen-ink)}
.onboarding-brand{font:normal 24px Georgia,'Times New Roman',serif;letter-spacing:-.04em}
.onboarding h1,.pilot-login h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.04em}
.onboarding-intro,.onboarding-step,.onboarding small,.onboarding fieldset p,.onboarding-note{color:var(--muted)}
.onboarding-days span,.onboarding input[type=number],.pilot-login main{background:var(--linen-surface);border-color:var(--border)}
.onboarding-days input:checked+span{background:var(--linen-green-wash);border-color:var(--linen-green);color:var(--linen-green-dark)}
.pilot-login main{color:var(--linen-ink)}
.pilot-login input{background:var(--linen-surface);border-color:var(--border);color:var(--linen-ink)}

@media(max-width:760px){
  .linen-brand>img{width:26px;height:26px}
  .linen-wordmark{font-size:23px}
  .linen-e{width:16px;height:19px}
  .header nav a[aria-current]{background:var(--linen-green-wash)}
}
@media(prefers-reduced-motion:reduce){
  .content-card,.vl-stage button,.daily-open{transition:none}
}

/* Keep the learner's sentence and navigation text readable at every width. */
body :is(h1,h2,h3){text-wrap:balance}
body p{text-wrap:pretty}
body :is(li,figcaption){text-wrap:pretty}
