/* 5 by Peaceful World — calm completion-screen actions */
.done-kicker{
  margin-bottom:24px;
  padding-left:0;
  color:var(--muted);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:0;
  line-height:1.4;
}

.done-action{
  width:min(100%,300px);
  min-height:46px;
  margin-top:10px;
  padding:0 20px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--text);
  font-size:.92rem;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 7px 20px rgba(33,41,36,.025);
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;
}

.done-subtitle + .done-action{margin-top:22px}
.done-action:hover{background:#fff;border-color:#DDE1DB;box-shadow:0 9px 24px rgba(33,41,36,.04)}
.done-action:active{transform:scale(.985)}
.done-support-action{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  color:var(--muted);
  font-weight:500;
}

/* When installation is available, make it the first quiet completion action. */
.done-install-area{
  width:min(100%,300px);
  margin-top:22px;
}
.done-install-area .done-action{
  width:100%;
  margin-top:0;
}
.done-install-area .install-help{margin-top:10px}
.done-install-area[hidden] + .done-action{margin-top:22px}

@media(max-height:620px){
  .done-kicker{margin-bottom:14px;font-size:.82rem}
  .done-subtitle + .done-action{margin-top:15px}
  .done-action{min-height:42px;margin-top:8px}
  .done-install-area{margin-top:15px}
  .done-install-area[hidden] + .done-action{margin-top:15px}
}

@media(orientation:landscape) and (max-height:520px){
  .done-kicker{margin-bottom:7px;font-size:.76rem}
  .done-subtitle + .done-action{margin-top:9px}
  .done-action{width:min(100%,280px);min-height:38px;margin-top:6px;font-size:.84rem}
  .done-install-area{width:min(100%,280px);margin-top:9px}
  .done-install-area[hidden] + .done-action{margin-top:9px}
}

/* Production design system: interface recedes, practice remains. */
:root{
  --bg:#F9F8F4;
  --surface:#FFFFFF;
  --ink:#202522;
  --text:#3D4541;
  --muted:#6B716D;
  --accent:#7B8D7B;
  --accent-text:#677667;
  --accent-soft:#E9EEE8;
  --line:#E5E5E0;
  --shadow:none;
}

.five-word{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  font-size:1.12rem;
  font-style:normal;
  font-weight:650;
  letter-spacing:.02em;
}
.five-byline{letter-spacing:.175em}

.primary{
  background:#202522;
  box-shadow:0 8px 20px rgba(32,37,34,.065);
}

.home-install-area{margin-top:5px}
.home-install-cta{
  width:auto;
  min-height:44px;
  padding:0 14px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--muted);
  font-weight:520;
  box-shadow:none!important;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-decoration-color:rgba(107,113,109,.38);
  text-underline-offset:5px;
}
.home-install-cta:hover{background:transparent;color:var(--text);box-shadow:none}
.home-install-area + .howto{margin-top:2px}

.howto{
  width:min(100%,380px);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.howto summary{
  min-height:44px;
  padding:11px 32px 11px 18px;
  color:var(--muted);
  font-weight:560;
}
.howto summary::after{right:10px}
.howto[open] summary{border-bottom:1px solid var(--line)}
.howto-body{padding-left:14px;padding-right:14px}

/* No visible card: keep the grid, remove only the furniture. */
.practice-card,
.practice-card.is-prep,
.practice-card.is-practice{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.practice-card{max-width:510px}
#stepTitle{
  max-width:460px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
}
.step-guide{
  max-width:420px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
}
.step-number{color:rgba(103,118,103,.20)}

/* Stronger sage is functional state, not decoration. */
.timer-progress{stroke:#6E866E}
.dot.active::before{
  background:#6E866E;
  box-shadow:0 0 0 5px rgba(110,134,110,.08);
}
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible{outline-color:#6E866E}

/* During the minute the clock recedes slightly. */
.timer-shell.is-practice:not(.ending):not(.paused) .timer-center{opacity:.56}
.timer-shell.is-practice:not(.ending):not(.paused) .timer-ring{opacity:.66}

.round-btn,
.secondary,
.done-mark{box-shadow:none!important}
.done-mark{background:transparent}
.feedback-text,
.feedback-email{box-shadow:none;background:rgba(255,255,255,.76)}

/* Utility text is quiet by scale and placement, not by low contrast. */
.build-version,
.home-privacy-link{color:var(--muted);opacity:1!important}
.locale-switcher,
.locale-switcher button{color:var(--muted)}

/* Language and theme controls live outside the practice itself. */
.pw-utilities{
  position:fixed;
  inset:0;
  z-index:9000;
  pointer-events:none;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
}
.pw-utilities[hidden]{display:none!important}
.pw-utility-button{
  position:fixed;
  top:max(12px,env(safe-area-inset-top));
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(107,113,109,.22);
  border-radius:50%;
  background:rgba(255,255,255,.60);
  color:var(--muted);
  display:grid;
  place-items:center;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:none;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:color .16s ease,background .16s ease,border-color .16s ease,transform .12s ease;
}
.pw-language-button{left:max(10px,calc(50vw - 268px),env(safe-area-inset-left))}
.pw-theme-button{right:max(10px,calc(50vw - 268px),env(safe-area-inset-right))}
.pw-utility-button:hover{color:var(--text);background:rgba(255,255,255,.88);border-color:rgba(107,113,109,.34)}
.pw-utility-button:active{transform:scale(.96)}
.pw-language-button[aria-expanded="true"]{color:var(--text);background:rgba(255,255,255,.92);border-color:rgba(107,113,109,.36)}
.pw-utility-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.pw-utility-button[hidden]{display:none!important}

.pw-language-panel{
  position:fixed;
  top:max(62px,calc(env(safe-area-inset-top) + 62px));
  left:max(10px,calc(50vw - 268px),env(safe-area-inset-left));
  z-index:8999;
  min-width:184px;
  max-width:min(280px,calc(100vw - 20px));
  padding:7px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.96);
  color:var(--text);
  box-shadow:0 14px 42px rgba(32,37,34,.10);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.pw-language-panel[hidden]{display:none!important}
.pw-language-title{
  margin:4px 8px 6px;
  color:var(--muted);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pw-language-option{
  width:100%;
  min-height:42px;
  padding:0 10px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-align:left;
  font:600 .9rem/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  cursor:pointer;
}
.pw-language-option:hover{background:rgba(103,118,103,.08)}
.pw-language-option[aria-checked="true"]{font-weight:700}
.pw-language-check{width:14px;color:var(--accent-text);font-size:.9rem;text-align:center}
.pw-language-option:focus-visible,
.pw-utility-button:focus-visible{outline:2px solid #6E866E;outline-offset:2px}

/* Warm graphite dark mode. Keep the same hierarchy; only luminance changes. */
:root[data-pw-theme="dark"]{
  --bg:#171A18;
  --surface:#1D211E;
  --ink:#ECEDE8;
  --text:#E2E5E0;
  --muted:#A8B0AA;
  --accent:#8FA68F;
  --accent-text:#9CB19C;
  --accent-soft:#273129;
  --line:#3A413B;
  --shadow:none;
}
html[data-pw-theme="dark"] .five-mark{filter:invert(94%)}
html[data-pw-theme="dark"] .primary{
  background:#E8EAE5!important;
  color:#171A18!important;
  box-shadow:none!important;
}
html[data-pw-theme="dark"] .primary:hover{box-shadow:none!important}
html[data-pw-theme="dark"] .round-btn,
html[data-pw-theme="dark"] .secondary,
html[data-pw-theme="dark"] .done-action,
html[data-pw-theme="dark"] .install-help,
html[data-pw-theme="dark"] .feedback-text,
html[data-pw-theme="dark"] .feedback-email{
  background:#1D211E!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
  box-shadow:none!important;
}
html[data-pw-theme="dark"] .done-action:hover{background:#232824!important;border-color:#454C46!important;box-shadow:none!important}
html[data-pw-theme="dark"] .sound-on{background:#273129!important;color:#9CB19C!important}
html[data-pw-theme="dark"] .timer-track{stroke:#3A403B!important}
html[data-pw-theme="dark"] .timer-shell.preparing .timer-track{stroke:#343A35!important}

/* Slightly stronger legibility for quiet structural markers in dark mode. */
html[data-pw-theme="dark"] .step-number{color:rgba(156,177,156,.24)}
html[data-pw-theme="dark"] .timer-shell.is-practice:not(.ending):not(.paused) .timer-center{opacity:.64}
html[data-pw-theme="dark"] .dot::before{background:#4A514B}
html[data-pw-theme="dark"] .dot:not(:last-child)::after{background:#404741}
html[data-pw-theme="dark"] .dot.done::before{background:#778479}
html[data-pw-theme="dark"] .dot.done::after{background:#566158}

html[data-pw-theme="dark"] .feedback-text::placeholder,
html[data-pw-theme="dark"] .feedback-email::placeholder{color:#7F8781}
html[data-pw-theme="dark"] .feedback-audio,
html[data-pw-theme="dark"] .audio-player-row,
html[data-pw-theme="dark"] .audio-record-btn,
html[data-pw-theme="dark"] .feedback-success-mark{
  background:#1D211E!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
  box-shadow:none!important;
}
html[data-pw-theme="dark"] .feedback-audio.recorded{background:#1D211E!important}
html[data-pw-theme="dark"] .feedback-audio.recording{background:#241F1E!important;border-color:#55413F!important}
html[data-pw-theme="dark"] .audio-record-btn.recording{background:#302524!important;border-color:#624845!important;color:#D7AAA5!important}
html[data-pw-theme="dark"] .audio-status,
html[data-pw-theme="dark"] .audio-player-meta,
html[data-pw-theme="dark"] .feedback-success p{color:var(--muted)!important}

html[data-pw-theme="dark"] .ios-install-guide-sheet{background:#171A18!important;border-color:#343A35!important;color:var(--text)!important}
html[data-pw-theme="dark"] .ios-install-guide-close{background:#1D211E!important;color:var(--text)!important;border-color:var(--line)!important}
html[data-pw-theme="dark"] .ios-install-guide-actions{background:rgba(23,26,24,.97)!important;border-color:var(--line)!important}
html[data-pw-theme="dark"] .ios-install-guide-image{background:#212622!important}
html[data-pw-theme="dark"] .ios-install-guide-done{background:#E8EAE5!important;color:#171A18!important}

html[data-pw-theme="dark"] .pw-analytics-notice{
  background:rgba(29,33,30,.98)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
  box-shadow:0 14px 44px rgba(0,0,0,.28)!important;
}
html[data-pw-theme="dark"] .pw-analytics-copy{color:var(--muted)!important}
html[data-pw-theme="dark"] .pw-analytics-copy strong{color:var(--text)!important}
html[data-pw-theme="dark"] .pw-analytics-btn{
  background:#1D211E!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
html[data-pw-theme="dark"] .pw-analytics-btn.is-primary{
  background:#E8EAE5!important;
  color:#171A18!important;
  border-color:#E8EAE5!important;
}

html[data-pw-theme="dark"] .pw-utility-button{
  background:rgba(29,33,30,.70);
  border-color:rgba(168,176,170,.18);
  color:#AAB2AC;
}
html[data-pw-theme="dark"] .pw-utility-button:hover,
html[data-pw-theme="dark"] .pw-language-button[aria-expanded="true"]{
  background:#252A26;
  border-color:rgba(168,176,170,.30);
  color:#ECEDE8;
}
html[data-pw-theme="dark"] .pw-language-panel{
  background:rgba(29,33,30,.97);
  border-color:#3B423C;
  box-shadow:0 16px 46px rgba(0,0,0,.28);
}
html[data-pw-theme="dark"] .pw-language-option:hover{background:rgba(143,166,143,.10)}

@media(max-width:520px){
  .pw-utility-button{top:max(9px,env(safe-area-inset-top));width:40px;height:40px}
  .pw-language-button{left:max(9px,env(safe-area-inset-left))}
  .pw-theme-button{right:max(9px,env(safe-area-inset-right))}
  .pw-language-panel{top:max(58px,calc(env(safe-area-inset-top) + 58px));left:max(9px,env(safe-area-inset-left))}
}

@media(prefers-reduced-motion:reduce){
  .timer-center,
  .timer-ring,
  .pw-utility-button{transition-duration:.001ms!important}
}