/* The practice itself is the home screen. Keep controls close to the inner core. */
.app-shell { max-width: 980px; min-height: 100svh; margin: auto; display: flex; flex-direction: column; }
.app-header { min-height: 84px; padding: 20px 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.app-brand { display: flex; align-items: center; gap: 10px; padding: 0; background: none; color: var(--gold); font: 23px var(--serif); letter-spacing: .1em; }
.app-brand > span { font: 31px var(--serif); }
.app-brand small { margin-left: 4px; font: 10px var(--sans); letter-spacing: .14em; color: var(--dim); }
.my-button { padding: 8px 18px; border: 1px solid var(--line); border-radius: 24px; min-height: 40px; }
.back-button { padding-left: 0; }
.app-main { width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 32px 0; flex: 1; }
.app-footer { padding: 14px 24px 20px; text-align: center; color: #82918b; font-size: 11px; }
.app-footer a { padding: 8px; }
.app-footer .text-button { font-size: inherit; padding: 8px; min-height: 44px; }
.motion-access .eyebrow { font-size: 11px; margin-bottom: 8px; }
.motion-access-status { color: var(--dim); margin: 8px 0 22px; font-size: 14px; line-height: 1.8; }
.motion-access-status.has-error { color: var(--red); }
.motion-access .primary { width: 100%; }
.motion-access-note { margin-top: 12px; text-align: center; }
.motion-help { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 14px; color: var(--dim); font-size: 13px; line-height: 1.8; }
.motion-help summary { padding: 6px 0; color: var(--gold); cursor: pointer; }
.motion-help p { margin-top: 10px; }
.motion-help ol { padding-left: 20px; margin: 12px 0; }
.motion-help li + li { margin-top: 10px; }
.motion-help .text-button { margin-top: 6px; font-size: 12px; text-align: left; }
.connection-banner:empty { display: none; }
.is-focusing .app-header { opacity: .5; }
.practice-home { max-width: 380px; margin: 12px auto 0; text-align: center; }
.practice-intro .eyebrow { font-size: 11px; letter-spacing: .2em; color: #9cac9e; }
.practice-intro h1 { font-size: 34px; letter-spacing: .14em; margin-top: 5px; }
.practice-home .orb-stage.dan-stage { width: 100%; height: clamp(175px, 28svh, 260px); margin: -4px auto -10px; }
.core-caption { color: #c8d4c5; font: 15px var(--serif); letter-spacing: .09em; }
.core-caption i { padding: 0 9px; font-style: normal; opacity: .45; }
.core-caption p { margin-top: 8px; font: 12px var(--sans); color: var(--dim); letter-spacing: .025em; }
#solo-form { margin-top: 24px; }
.duration-picker { padding: 0; margin: 0; border: 0; min-width: 0; }
.duration-picker legend { width: 100%; font-size: 12px; color: var(--dim); margin-bottom: 10px; }
.duration-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.duration-options label { position: relative; margin: 0; cursor: pointer; }
.duration-options input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.duration-options label > span { min-height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: #172321; color: #b8c6bc; font-size: 16px; }
.duration-options label > span small { font-size: 10px; margin-left: 3px; }
.duration-options input:checked + span { background: #314638; border-color: #9bab886b; color: #eff1dd; }
.duration-options input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.duration-options label:last-child > span { font-size: 12px; }
.custom-minutes { display: flex; align-items: center; gap: 10px; margin-top: 14px; text-align: left; }
.custom-minutes label { margin: 0; font-size: 12px; white-space: nowrap; }
.custom-minutes input { width: 95px; padding: 8px 12px; min-height: 44px; }
.custom-minutes > span { font-size: 11px; color: var(--dim); }
#solo-form .primary { margin-top: 16px; min-height: 54px; letter-spacing: .1em; font-weight: 500; font-size: 17px; }
.form-error:empty { display: none; }
.practice-rule { margin-top: 12px; font-size: 11px; color: #93a199; }
.secondary-links { display: flex; align-items: center; justify-content: center; gap: 27px; margin-top: 15px; }
.secondary-links .text-button { min-height: 44px; font-size: 12px; color: #b1c0b5; }
.secondary-links span { margin-left: 3px; opacity: .7; }
.login-hint { color: #b3bcb4; background: none; font-size: 11px; min-height: 40px; padding: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.group-home { max-width: 380px; margin: 9svh auto 40px; }
.group-home h1 { font-size: 31px; margin: 6px 0 12px; }
.group-home form { margin-top: 28px; }
.group-home .code-input { font: 25px var(--serif); letter-spacing: .2em; min-height: 65px; }
.group-home .primary { margin-top: 14px; }
.group-home .group-rule { text-align: center; margin-top: 24px; }
.group-entry-action { margin-top: 28px; }
.group-entry-action .duration-picker { margin-bottom: 18px; }
.group-entry-action .form-error { margin-bottom: 18px; }
.invite-note { margin-top: 14px; text-align: center; }
.room-layout { max-width: 520px; }
.room-layout .section-heading { margin-bottom: 16px; }
.room-layout .members { grid-template-columns: 1fr; margin: 18px 0 12px; }
.room-layout .member { padding: 11px 14px; }
.invite-panel { text-align: center; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.invite-qr { width: 216px; max-width: 100%; margin: 12px auto; line-height: 0; background: white; border-radius: 12px; padding: 5px; }
.invite-qr svg { width: 100%; height: auto; display: block; }
.invite-actions { display: flex; justify-content: center; gap: 24px; margin-top: 3px; }
.invite-actions button { min-height: 44px; font-size: 12px; }
#invite-countdown { font-variant-numeric: tabular-nums; color: var(--gold); }
.qr-expired { width: 216px; height: 120px; max-width: 100%; margin: 12px auto; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 12px; color: var(--dim); }
.joined-note { padding: 18px 0; color: var(--gold); border-bottom: 1px solid var(--line); font-size: 14px; }
.room-rule { color: var(--dim); font-size: 13px; margin: 16px 0 22px; line-height: 1.8; }
.group-result .orb-stage.dan-stage { height: 145px; width: 230px; margin: 0 auto; }
.end-person { margin: 3px 0 20px; }
.end-person strong { display: block; color: var(--red); font: 28px var(--serif); margin: 6px 0; overflow-wrap: anywhere; }
.end-person > p:last-child { font-size: 13px; color: var(--dim); }
.shared-time { margin: 8px 0 16px; }
.shared-time strong { font: 34px var(--serif); color: var(--gold); display: block; }
.shared-time > span { color: var(--dim); font-size: 12px; }
.group-result-members { margin-top: 20px; font-size: 13px; color: var(--dim); }
.group-result-members summary { cursor: pointer; padding: 8px; }
.time-stat strong { font-size: 23px; line-height: 1.6; overflow-wrap: anywhere; }
.login-entry { margin-top: 25px; }
.login-entry .micro { text-align: center; margin-top: 12px; }
.google-button { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 12px; border: 1px solid #747775; border-radius: 7px; background: #fff; color: #1f1f1f; font: 500 14px Arial, sans-serif; cursor: pointer; letter-spacing: .25px; }
.google-button img { flex: 0 0 20px; }
.google-button:hover:not(:disabled) { background: #f0f4f9; }
.google-button:disabled { cursor: not-allowed; opacity: .55; }
.google-button:focus-visible { outline: 3px solid #8cab98; outline-offset: 3px; }
.restore-link { display: block; margin: 18px auto 0; font-size: 12px; }
.guest-options { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--line); }
.guest-options summary { padding: 10px 0; color: var(--dim); font-size: 13px; cursor: pointer; }
.guest-options .secondary { margin-top: 14px; }
.account-note, .guest-note { border-top: 1px solid var(--line); margin-top: 25px; padding-top: 20px; color: #9baa9e; font-size: 12px; line-height: 1.7; }
.account-note { display: flex; gap: 10px; align-items: center; }
.account-dot { width: 6px; height: 6px; border-radius: 50%; background: #88b995; }
.account-note small { display: block; opacity: .8; overflow-wrap: anywhere; }
.guest-note .google-button { margin-top: 12px; }
dialog .account-note, dialog .guest-note { margin-bottom: 20px; }
.history-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.history-title h2 { margin: 0; }
.realm-path-details { border-block: 1px solid var(--line); margin-top: 24px; padding: 16px 0; }
.realm-path-details summary { color: var(--gold); font-size: 14px; cursor: pointer; }
.realm-path-details .path { margin: 28px 0; }
.solo-ready { max-width: 500px; margin: 20px auto 40px; }
.solo-ready .orb-stage.dan-stage { margin: 0 auto; width: min(400px,100%); height: 240px; }
.solo-ready-copy { text-align: center; }
.solo-ready-copy .primary { margin-top: 28px; }
.focus-screen { padding-top: 28px; }
.focus-screen h1 { margin-top: 9px; font-size: 29px; }
.focus-screen .orb-stage.dan-stage { height: clamp(180px,30svh,300px); }
.result { padding-top: 22px; }
.result h1 { font-size: 30px; margin-top: 8px; }
.result .orb-stage.dan-stage { height: clamp(170px,27svh,260px); }
.result .earned { font-size: 48px; margin-top: 4px; }
.privacy-page { max-width: 700px; margin: 0 auto; padding: 45px 24px 70px; line-height: 1.9; color: #c5cec8; }
.privacy-page h1 { margin: 30px 0 20px; font-size: 34px; }
.privacy-page h2 { margin: 26px 0 8px; font-size: 19px; color: #e1e7dd; }
.privacy-page a { color: #b4d4ba; }
.privacy-page .micro { margin: 8px 0 28px; }
@media (max-width: 650px) {
  .app-header { min-height: 66px; padding: calc(10px + env(safe-area-inset-top)) 22px 10px; }
  .app-brand { font-size: 21px; }
  .app-brand small { display: none; }
  .app-main { padding: 0 24px; }
  .app-footer { padding: 10px 24px calc(12px + env(safe-area-inset-bottom)); }
  .practice-home { margin-top: 8px; }
  .practice-intro h1 { font-size: 30px; }
  .practice-home .orb-stage.dan-stage { height: clamp(155px,27svh,230px); }
  #solo-form { margin-top: 20px; }
  .duration-options { gap: 6px; }
  .duration-options label > span { min-height: 44px; }
  .solo-ready { margin-top: 14px; }
  .solo-ready .section-heading h1 { font-size: 27px; }
  .solo-ready-copy p { font-size: 13px; }
  .history-title { align-items: flex-start; flex-direction: column; }
  .journey-head { padding-top: 14px; padding-bottom: 20px; }
  .journey-head .orb-stage.dan-stage { width: 145px; height: 170px; }
  .journey-head h1 { font-size: 36px; }
  .focus-screen { padding-top: 18px; }
  .focus-screen .orb-stage.dan-stage { height: clamp(165px,28svh,260px); }
  .focus-screen .micro { font-size: 11px; }
  .result .orb-stage.dan-stage { height: clamp(145px,25svh,210px); }
  .result-actions { gap: 10px; margin-top: 22px; }
  .room-layout .member { flex-wrap: nowrap; gap: 9px; }
  .room-layout .member .state { flex-basis: auto; padding: 0; margin: 0; }
  .room-layout .member .person small { font-size: 11px; }
  .room-layout .room-actions { position: sticky; bottom: env(safe-area-inset-bottom, 0px); z-index: 2; padding: 12px 0; background: var(--bg); }
  .time-stat strong { font-size: 19px; }
  dialog { padding: 24px; }
  dialog h2 { font-size: 25px; }
}
@media (max-height: 700px) and (max-width: 650px) {
  .practice-home { margin-top: 0; }
  .practice-home .orb-stage.dan-stage { height: 150px; }
  .practice-intro h1 { font-size: 27px; }
  #solo-form { margin-top: 16px; }
  .secondary-links { margin-top: 8px; }
}