/* Phase 0 static board walk. Ported from phase0/app.py's _LAYOUT_CSS
   (mobile-first, one column, high contrast for outdoors — the owner's own
   words, 24 Sept: "the page is too wide, text is too little, and too
   verbose ... too many layers and dimensions of text"). This build has no
   Gradio to fight with, so the Gradio-specific overrides in the original
   (waveform shadow-root hacks, icon-button-wrapper hiding, footer hiding)
   are dropped; everything else — palette, sizes, spacing, button styling —
   is kept so the two builds look the same. */

:root {
  --p0-bg: #f6f3ea;
  --p0-ink: #1c2a1e;
  --p0-muted: #5b5646;
  --p0-line: #d8d2c0;
  --p0-forest: #2f5233;
  --p0-forest-ink: #ffffff;
  /* #9c5310 measures 5.74:1 against --p0-bg (sRGB relative-luminance
     formula), same amber app.py uses for its primary buttons. */
  --p0-amber: #9c5310;
  --p0-warn: #a3321f;
  --p0-card-bg: #ffffff;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  background: var(--p0-bg);
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
}

body {
  color: var(--p0-ink);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#app {
  max-width: 480px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

p, li, span {
  color: var(--p0-ink);
  font-size: 17px;
  line-height: 1.5;
}

h1, h2, h3 {
  color: var(--p0-ink);
  line-height: 1.15;
  margin: 0 0 10px;
}
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 19px; font-weight: 700; }

a, a:visited { color: var(--p0-forest); }

em, i, strong, b { color: inherit; }

.phase0-quiet, .phase0-quiet p {
  color: var(--p0-muted);
  font-size: 15px;
  margin-top: -6px;
}
.phase0-gaia, .phase0-gaia p {
  font-style: italic;
  color: var(--p0-muted);
  margin: 4px 0 18px;
}
.phase0-footnote, .phase0-footnote p {
  color: var(--p0-muted);
  font-size: 15px;
  margin-top: 18px;
}
.phase0-rule { border-top: 1px solid var(--p0-line); margin: 20px 0; }
.phase0-over-budget { color: var(--p0-warn); font-weight: 700; }

/* Each tree its own card on the Result -> Listen step, so three trees
   read as three separate things rather than one undifferentiated block. */
.phase0-tree-card {
  background: var(--p0-card-bg);
  border: 1px solid var(--p0-line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 18px;
}
.phase0-tree-card h3 { margin-top: 0; }

button, a.phase0-btn {
  font-family: inherit;
  cursor: pointer;
}

.phase0-primary-btn {
  display: block;
  min-height: 60px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 12px;
  background: var(--p0-amber);
  color: #ffffff;
  border: none;
  width: 100%;
  white-space: normal;
  text-decoration: none;
  text-align: center;
  line-height: 1.3;
  margin: 6px 0;
  padding: 10px 14px;
}
.phase0-primary-btn:disabled { opacity: 0.5; cursor: default; }

.phase0-answer-btn {
  display: block;
  min-height: 68px;
  width: 100%;
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid var(--p0-line);
  background: var(--p0-card-bg);
  color: var(--p0-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  white-space: pre-line;
  text-align: left;
  text-decoration: none;
}
.phase0-answer-btn .phase0-answer-cost {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--p0-muted);
  margin-top: 4px;
}
.phase0-answer-btn.selected {
  border-color: var(--p0-forest);
  background: var(--p0-forest);
  color: var(--p0-forest-ink);
}
.phase0-answer-btn.selected .phase0-answer-cost { color: var(--p0-forest-ink); }

/* A tap target of at least 44px tall while still reading as a plain text
   link, not a button. */
.phase0-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: transparent;
  border: none;
  color: var(--p0-forest);
  font-size: 15px;
  text-decoration: underline;
  padding: 10px 8px;
  width: auto;
}

.phase0-budget-line { font-size: 17px; font-weight: 600; margin: 10px 0 18px; }

audio { width: 100%; display: block; margin: 10px 0; }

details.phase0-accordion { margin-top: 10px; }
details.phase0-accordion summary {
  cursor: pointer;
  color: var(--p0-forest);
  font-size: 15px;
  font-weight: 600;
  padding: 8px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.phase0-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 20px;
}
.phase0-compare-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--p0-muted);
  margin-bottom: 4px;
}
.phase0-compare label {
  background: var(--p0-card-bg);
  border: 2px solid var(--p0-line);
  border-radius: 10px;
  color: var(--p0-ink);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
}
.phase0-compare label:has(input:checked) {
  background: var(--p0-forest);
  border-color: var(--p0-forest);
  color: var(--p0-forest-ink);
}

/* Links used in place of a QR scan (owner request 2): a plain <ul> reads
   as list navigation, not a call to action, which is what "tap instead of
   scan" wants to feel like. */
ul.phase0-link-list {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
}
ul.phase0-link-list li { margin-bottom: 4px; }
ul.phase0-link-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
}

/* The cumulative budget bar (request 3): track spans the hard cap
   (budget total + the allowed slight overspend), filled up to what has
   actually been spent so far, with a thin marker at the budget total
   itself. */
.phase0-budget-bar {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--p0-line);
  overflow: hidden;
  margin: 10px 0 6px;
}
.phase0-budget-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--p0-forest);
  border-radius: 7px 0 0 7px;
}
.phase0-budget-bar-fill.over { background: var(--p0-warn); }
.phase0-budget-bar-mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--p0-ink);
  opacity: 0.55;
}

/* An answer that would push the plan more than the allowed sliver over
   budget: disabled outright, with a short reason in place of the cost. */
.phase0-answer-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.phase0-answer-btn .phase0-answer-reason {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--p0-warn);
  margin-top: 4px;
}

/* "Your plan" recap: each decision is its own tappable row, expanding into
   the same costed answer buttons the tree page uses (request 5). */
button.phase0-recap-line {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--p0-card-bg);
  border: 2px solid var(--p0-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-family: inherit;
}
.phase0-recap-line-name {
  display: block;
  font-weight: 700;
  font-size: 16px;
}
.phase0-recap-line-answer {
  display: block;
  font-size: 15px;
  margin-top: 2px;
}
.phase0-recap-line-tap {
  display: block;
  font-size: 13px;
  color: var(--p0-forest);
  text-decoration: underline;
  margin-top: 6px;
}
.phase0-recap-line-options {
  margin: -2px 0 14px;
  padding: 12px 0 0;
}

.phase0-recap-readonly p { margin: 4px 0; }

/* The questionnaire's 1-5 scale: five equal-width tap targets in a row,
   labelled only at the two ends (request 7), never a numeric-only slider
   that is fiddly on a touchscreen. */
.phase0-likert { margin: 14px 0 20px; }
.phase0-likert-row {
  display: flex;
  gap: 8px;
}
.phase0-likert-option {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border: 2px solid var(--p0-line);
  border-radius: 10px;
  background: var(--p0-card-bg);
  font-size: 17px;
  font-weight: 700;
}
.phase0-likert-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.phase0-likert-option:has(input:checked) {
  border-color: var(--p0-forest);
  background: var(--p0-forest);
  color: var(--p0-forest-ink);
}
.phase0-likert-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 13px;
  color: var(--p0-muted);
}

textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  font-family: inherit;
  font-size: 16px;
  color: var(--p0-ink);
  background: var(--p0-card-bg);
  border: 2px solid var(--p0-line);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 6px 0 14px;
  resize: vertical;
}

.phase0-send-disclosure { margin-bottom: 12px; }