/* The Living Master — shared shell & component styles
   Shared across every screen so we build components once (per CLAUDE_PROMPT.md
   "Build shared components listed in the specification rather than duplicating markup"). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ivory-50);
  color: var(--ink-900);
  font-family: var(--font-ui);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { margin: 0; font-weight: normal; }
p { margin: 0; }
button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* focus visibility — never remove focus outlines */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- safe area container ---------- */
.safe-area-top { padding-top: env(safe-area-inset-top, 0); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* ---------- AppHeader / BackHeader ---------- */
.app-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--forest-900);
  color: var(--ivory-50);
  height: calc(var(--header-height) + env(safe-area-inset-top, 0));
  padding-top: env(safe-area-inset-top, 0);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.app-header__inner {
  position: relative;
  width: 100%; max-width: var(--content-max-width);
  height: var(--header-height);
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--content-padding-x);
}
.app-header__wordmark {
  font-family: var(--font-display);
  font-size: var(--wordmark-size); font-weight: var(--wordmark-weight); line-height: var(--wordmark-lh);
}
.app-header__back,
.app-header__close {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--touch-target-min); height: var(--touch-target-min);
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ivory-50); cursor: pointer;
  border-radius: var(--radius-button);
}
.app-header__back { left: var(--content-padding-x); margin-left: calc(var(--content-padding-x) * -1 + 4px); }
.app-header__close { right: var(--content-padding-x); margin-right: calc(var(--content-padding-x) * -1 + 4px); }
.app-header__back:hover, .app-header__close:hover { background: rgba(255,255,255,0.08); }
.app-header__sessions-link,
.app-header__desktop-nav { display: none; }

/* ---------- BottomTabs ---------- */
.bottom-tabs {
  position: sticky; bottom: 0; z-index: 10;
  background: var(--forest-900);
  border-top: var(--border-thin) solid rgba(255,255,255,0.08);
  display: flex; justify-content: center;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-tabs__inner {
  width: 100%; max-width: var(--content-max-width);
  height: var(--tabbar-height);
  display: flex;
}
.tab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; background: none; border: none; cursor: pointer;
  color: rgba(251,247,238,0.62);
  min-height: var(--touch-target-min);
  text-decoration: none;
  font-size: var(--small-size);
}
.tab-btn svg { width: 22px; height: 22px; }
.tab-btn[aria-current="page"] { color: var(--ivory-50); }
.tab-btn:hover { color: var(--ivory-50); }

/* ---------- page scaffolding ---------- */
.page {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}
.page__scroll {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
}
.page__content {
  width: 100%; max-width: var(--content-max-width);
  padding: var(--space-6) var(--content-padding-x) var(--space-10);
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--pageTitle-size); font-weight: var(--pageTitle-weight); line-height: var(--pageTitle-lh);
  margin-bottom: var(--space-6);
}

/* ---------- botanical illustration ---------- */
.illustration {
  position: fixed; left: 0; bottom: var(--tabbar-height);
  width: min(60vw, 340px); pointer-events: none; z-index: 0;
}
.illustration--full { opacity: var(--illustration-opacity-practice); }
.illustration--faint { opacity: var(--illustration-opacity-textheavy); }
/* Placeholder until the real botanical asset is supplied (DESIGN_SPEC 7a):
   flat ivory background, i.e. nothing rendered. See implementation report. */

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-6);
  border-radius: var(--radius-button);
  font-family: var(--font-ui); font-size: var(--body-size); font-weight: 500;
  border: var(--border-thin) solid transparent;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-easing);
}
.btn--primary { background: var(--forest-900); color: var(--ivory-50); width: 100%; }
.btn--primary:hover { background: var(--forest-800); }
.btn--primary:disabled { opacity: 0.5; cursor: default; }
.btn--secondary { background: var(--surface); color: var(--ink-900); border-color: var(--line); width: 100%; }
.btn--secondary:hover { background: var(--ivory-100); }
.btn--outline-small {
  min-height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-round);
  background: none; border-color: var(--line); color: var(--ink-600); font-size: var(--small-size);
}
.btn--outline-small:hover { border-color: var(--ink-600); color: var(--ink-900); }
.btn--outline-small[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--forest-800); text-decoration: underline; font: inherit;
}

/* ---------- forms ---------- */
.field { margin-bottom: var(--space-5); }
.field label {
  display: block; font-size: var(--small-size); color: var(--ink-600); margin-bottom: var(--space-2);
}
.field input {
  width: 100%; min-height: var(--touch-target-min);
  padding: 0 var(--space-4);
  border: var(--border-thin) solid var(--line); border-radius: var(--radius-field);
  background: var(--surface); color: var(--ink-900);
}
.field--password { position: relative; }
.field--password input { padding-right: 64px; }
.field__toggle {
  position: absolute; right: var(--space-2); top: calc(50% + 10px); transform: translateY(-50%);
  background: none; border: none; color: var(--forest-800); cursor: pointer;
  min-height: var(--touch-target-min); padding: 0 var(--space-3);
}
.divider {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--ink-600); font-size: var(--small-size); margin: var(--space-5) 0;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: 100%; min-height: var(--touch-target-min);
  background: var(--surface); border: var(--border-thin) solid var(--line); border-radius: var(--radius-button);
  cursor: pointer; font-weight: 500;
}
.google-btn:hover { background: var(--ivory-100); }
.reassurance { font-size: var(--small-size); color: var(--ink-600); text-align: center; margin-top: var(--space-2); }

/* ---------- settings (You screen) ---------- */
.settings-section { margin-bottom: var(--space-8); }
.settings-section__label {
  font-family: var(--font-ui);
  font-size: var(--sectionLabel-size); font-weight: var(--sectionLabel-weight); line-height: var(--sectionLabel-lh);
  letter-spacing: var(--sectionLabel-tracking); text-transform: uppercase;
  color: var(--ink-600); margin-bottom: var(--space-3);
}
.settings-row, .info-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--touch-target-min);
  padding: var(--space-3) 0;
  border-bottom: var(--border-thin) solid var(--line);
  background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left; cursor: pointer; color: var(--ink-900); text-decoration: none;
}
.info-row { cursor: default; }
.settings-row__text, .info-row__text { display: flex; flex-direction: column; gap: 2px; }
.settings-row__secondary, .info-row__secondary { font-size: var(--small-size); color: var(--ink-600); }
.settings-row__chevron { color: var(--ink-600); flex-shrink: 0; }
.settings-row--danger .settings-row__text { color: var(--danger); }

/* ---------- session/composer ---------- */
.composer-wrap {
  border-top: var(--border-thin) solid var(--line);
  background: var(--ivory-50);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.composer {
  max-width: 720px; margin: 0 auto;
  display: flex; gap: var(--space-2); align-items: flex-end;
  padding: var(--space-4) var(--content-padding-x) var(--space-2);
}
.composer textarea {
  flex: 1; resize: none; min-height: 54px; max-height: 140px;
  border: var(--border-thin) solid var(--line); border-radius: var(--radius-field);
  background: var(--surface); padding: var(--space-3) var(--space-4);
  line-height: var(--body-lh);
}
.composer .send-btn {
  width: 54px; height: 54px; flex-shrink: 0;
  border-radius: 15px; border: var(--border-thin) solid var(--line);
  background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--motion-fast) var(--motion-easing), transform var(--motion-fast) var(--motion-easing), opacity var(--motion-fast) var(--motion-easing);
}
.composer .send-btn { background: var(--forest-900); border-color: var(--forest-900); color: var(--ivory-50); }
.composer .send-btn:hover:not(:disabled) { background: var(--forest-700); transform: translateY(-1px); }
.composer .send-btn:disabled { background: var(--ivory-200); border-color: var(--ivory-200); color: var(--ink-600); cursor: default; }
.composer .send-btn.is-sending svg { animation: send-breathe 1s ease-in-out infinite; }
@keyframes send-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.86); } }
.dictation-tip {
  max-width: 720px; margin: 0 auto var(--space-2);
  display: grid; grid-template-columns: 22px minmax(0, 1fr) var(--touch-target-min);
  align-items: center; gap: var(--space-2);
  border: 0; background: transparent; padding: var(--space-1) 0;
  color: var(--ink-600); font-size: 12px; line-height: 1.4; text-align: left;
}
.practice-composer-block .dictation-tip { margin-bottom: 0; }
.dictation-tip__icon { display: flex; align-items: center; justify-content: center; color: var(--forest-700); }
.dictation-tip__copy strong { color: var(--ink-900); font-weight: 600; }
.dictation-tip__dismiss {
  width: var(--touch-target-min); height: var(--touch-target-min); border: 0; background: transparent;
  color: var(--ink-600); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.dictation-tip__dismiss:hover { color: var(--ink-900); }
@media (max-width: 640px) {
  .dictation-tip { margin-left: var(--content-padding-x); margin-right: var(--content-padding-x); }
  .practice-composer-block .dictation-tip { margin-left: 0; margin-right: 0; }
}

/* ---------- messages ---------- */
.message-companion {
  font-family: var(--font-display); font-size: 18px; line-height: 1.68;
  color: var(--ink-900);
  margin: var(--message-companion-spaceY) 0;
}
.message-companion p { margin: 0 0 var(--space-4); }
.message-companion p:last-child { margin-bottom: 0; }
.message-companion strong { color: var(--forest-900); font-weight: 600; }
.message-companion blockquote { margin: var(--space-5) 0; padding: var(--space-1) 0 var(--space-1) var(--space-4); border-left: 3px solid var(--forest-700); color: var(--forest-800); font-style: italic; }
.message-companion ul, .message-companion ol { list-style: initial; margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.message-companion ol { list-style: decimal; }
.message-companion li { margin-bottom: var(--space-2); }
.message-user {
  font-family: var(--font-ui); font-size: var(--body-size); line-height: var(--body-lh);
  background: var(--message-user-bg); border-radius: var(--message-user-radius);
  padding: var(--message-user-paddingY) var(--message-user-paddingX);
  max-width: 82%; margin: var(--message-user-spaceY) 0 var(--message-user-spaceY) auto;
  white-space: pre-wrap;
}
.pending-mark { color: var(--ink-600); font-family: var(--font-display); font-size: var(--body-size); margin: var(--message-companion-spaceY) 0; }
.session-error { font-family: var(--font-ui); font-size: var(--small-size); color: var(--ink-600); text-align: center; margin: var(--space-4) 0; }
.session-actions { display: flex; gap: var(--space-2); padding: var(--space-2) var(--content-padding-x); max-width: 720px; margin: 0 auto; width: 100%; }
.gate-a-exit { border-top: var(--border-thin) solid var(--line); padding-top: var(--space-5); }
.gate-a-exit__closed { color: var(--ink-600); font-family: var(--font-ui); font-size: var(--small-size); margin-top: var(--space-4); }

/* ---------- helpline row ---------- */
.helpline-row {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left; cursor: pointer; text-decoration: none;
  background: var(--surface); border: var(--border-thin) solid var(--line); border-radius: var(--radius-row);
  padding: var(--space-3) var(--space-4); margin: var(--space-2) 0 var(--space-6);
  font-family: var(--font-ui); color: var(--ink-900);
}
.helpline-row:hover { background: var(--ivory-100); }
.helpline-row__icon { flex-shrink: 0; color: var(--forest-800); }
.helpline-row__text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.helpline-row__secondary { font-size: var(--small-size); color: var(--ink-600); }
.helpline-row__chevron { color: var(--ink-600); }

/* ---------- lapsed practice panel ---------- */
.lapsed-panel {
  border: var(--border-thin) solid var(--line); border-radius: var(--radius-panel);
  background: var(--surface); padding: var(--space-6); margin-top: var(--space-8);
  text-align: center;
}
.lapsed-panel p { font-size: var(--body-size); color: var(--ink-900); margin-bottom: var(--space-5); }
.lapsed-panel .btn--primary { margin-bottom: var(--space-3); }
.lapsed-panel .fine-print { font-size: var(--small-size); color: var(--ink-600); }

/* ---------- course ---------- */
.module-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 56px; padding: var(--space-3) 0; border-bottom: var(--border-thin) solid var(--line);
  width: 100%; background: none; border-left: none; border-right: none; border-top: none;
  text-align: left; cursor: pointer; color: var(--ink-900); text-decoration: none;
}
.module-row__text { display: flex; flex-direction: column; gap: 2px; }
.module-row__number { font-size: var(--small-size); color: var(--ink-600); }
.module-row__title { font-size: var(--body-size); }
.watched-marker { width: 20px; height: 20px; border-radius: 50%; border: var(--border-thin) solid var(--forest-800); flex-shrink: 0; }
.watched-marker--watched { background: var(--forest-800); }

.video-player {
  width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-panel); overflow: hidden;
  background: var(--forest-800); position: relative; display: flex; align-items: center; justify-content: center;
  color: var(--ivory-50); margin-bottom: var(--space-5);
}
.video-player__poster-number { font-family: var(--font-display); font-size: 48px; opacity: 0.5; }
.module-number-label { font-size: var(--small-size); color: var(--ink-600); margin-bottom: var(--space-2); }
.module-title { font-family: var(--font-display); font-size: var(--pageTitle-size); line-height: var(--pageTitle-lh); margin-bottom: var(--space-5); }
.materials-row {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--touch-target-min); padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--line); border-radius: var(--radius-row);
  background: var(--surface); text-decoration: none; color: var(--ink-900); margin-bottom: var(--space-5);
}
.next-module-link { font-size: var(--small-size); }

/* ---------- responsive ---------- */
@media (max-width: 340px) {
  .page__content { padding-left: var(--space-4); padding-right: var(--space-4); }
}

@media (min-width: 768px) {
  .app-header__inner { max-width: 1040px; }
  .app-header__sessions-link { display: block; position: absolute; left: var(--content-padding-x); color: var(--ivory-50); text-decoration: none; font-size: var(--small-size); opacity: .82; }
  .app-header__desktop-nav { display: flex; position: absolute; right: var(--content-padding-x); height: 100%; align-items: center; gap: var(--space-6); }
  .app-header__desktop-nav a { display: flex; align-items: center; height: 100%; padding-top: 2px; border-bottom: 2px solid transparent; color: var(--ivory-50); text-decoration: none; font-size: var(--small-size); opacity: .64; }
  .app-header__desktop-nav a:hover { opacity: 1; }
  .app-header__desktop-nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--ivory-100); }
  .bottom-tabs { display: none; }
  .illustration { bottom: 0; }
  #thread { max-width: 720px; padding-top: var(--space-8); }
}

@media (max-width: 767px) {
  .composer, .dictation-tip, .session-actions { max-width: var(--content-max-width); }
  .composer textarea { min-height: var(--touch-target-min); }
  .composer .send-btn { width: var(--touch-target-min); height: var(--touch-target-min); border-radius: var(--radius-button); }
  .message-companion { font-size: var(--body-size); line-height: var(--companion-lh); }
  .message-user { max-width: calc(100% - var(--message-user-indent)); }
}

@media (prefers-reduced-motion: reduce) {
  .composer .send-btn.is-sending svg { animation: none; }
}