// Ailment journey: loading state, journey detail (day-by-day editable), custom builder
const { Icon, Phone, TabBar, HomeIndicator, Label } = window;

// ═══════════════════════════════════════════════════════════
// 1. JOURNEY LOADING — what user sees right after picking a condition
// ═══════════════════════════════════════════════════════════
function JourneyLoading() {
  const T = UN.d;
  return (
    <Phone mode="d" time="2:14">
      <div style={{ height: '100%', overflow: 'hidden' }}>
        <div style={{ padding: '8px 22px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
          <button style={{
            width: 36, height: 36, borderRadius: 99,
            background: T.surface, border: `1px solid ${T.line2}`, color: T.text,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
          </button>
        </div>

        <div style={{ padding: '14px 22px 4px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <div style={{
              width: 36, height: 36, borderRadius: 11, background: T.sageSoft,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="pill" size={18} color={T.sage} strokeWidth={1.9}/>
            </div>
            <div>
              <h1 style={{
                margin: 0, fontSize: 22, fontWeight: 700, color: T.text, letterSpacing: -0.4, lineHeight: 1.1,
              }}>Tonsillitis</h1>
              <div style={{ fontSize: 12, color: T.textDim, marginTop: 2 }}>
                For Maeve · 15.4 kg · 4 yrs
              </div>
            </div>
          </div>
        </div>

        {/* Loading hero */}
        <div style={{
          margin: '22px 22px 14px',
          background: T.surface, border: `1px solid ${T.line}`, borderRadius: 18,
          padding: '20px 18px',
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          {/* Spinner */}
          <div style={{
            width: 44, height: 44, position: 'relative', flexShrink: 0,
          }}>
            <svg width="44" height="44" viewBox="0 0 44 44">
              <circle cx="22" cy="22" r="18" fill="none" stroke={T.line2} strokeWidth="3"/>
              <circle cx="22" cy="22" r="18" fill="none" stroke={T.sage} strokeWidth="3"
                      strokeDasharray="28 100" strokeLinecap="round"
                      transform="rotate(-90 22 22)"/>
            </svg>
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 9.5, color: T.sage, fontWeight: 700,
            }}>67%</div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{
              fontSize: 11, color: T.sage, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase',
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: 6, background: T.sage,
                boxShadow: `0 0 0 3px ${T.sageSoft}`,
              }}/>
              Loading
            </div>
            <div style={{ fontSize: 15, color: T.text, fontWeight: 700, letterSpacing: -0.2, marginTop: 4 }}>
              Building tonsillitis plan
            </div>
            <div style={{ fontSize: 11, color: T.textDim, marginTop: 2 }}>
              AAP guidelines · weight-adjusted dosing for 15.4 kg
            </div>
          </div>
        </div>

        {/* Skeleton list */}
        <div style={{ padding: '0 22px' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            fontSize: 10.5, color: T.textMute, fontWeight: 700, letterSpacing: 0.7, textTransform: 'uppercase',
            marginBottom: 10,
          }}>
            Building your plan
            <span style={{ display: 'inline-flex', gap: 3 }}>
              {[0,1,2].map(i => (
                <span key={i} style={{
                  width: 4, height: 4, borderRadius: 4, background: T.sage,
                  opacity: 0.3 + i * 0.3,
                }}/>
              ))}
            </span>
          </div>

          {[
            { i: 'thermo', t: 'Temperature thresholds',  done: true },
            { i: 'pill',   t: 'Amoxicillin · 400mg/5mL · twice daily',  done: true, sub: 'Adjusted for 15.4 kg' },
            { i: 'pill',   t: 'PRN Tylenol / Motrin for pain', done: true },
            { i: 'camera', t: 'Throat photo prompts · day 1, 3, 7', done: true },
            { i: 'alert',  t: 'Swallow-pain scale', done: false, active: true },
            { i: 'drop',   t: 'Hydration thresholds', done: false },
            { i: 'doc',    t: 'Red-flag rules', done: false },
          ].map((row, i) => (
            <div key={i} style={{
              padding: '10px 0', display: 'flex', alignItems: 'center', gap: 10,
              borderBottom: i < 6 ? `1px solid ${T.line}` : 'none',
            }}>
              <div style={{
                width: 24, height: 24, borderRadius: 24,
                background: row.done ? T.sageSoft : T.surface2,
                border: `1px solid ${row.done ? T.sageEdge : T.line2}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                {row.done ? (
                  <Icon name="check" size={13} color={T.sage} strokeWidth={2.6}/>
                ) : row.active ? (
                  <div style={{
                    width: 8, height: 8, borderRadius: 8, background: T.sage,
                    boxShadow: `0 0 0 4px ${T.sageSoft}`,
                  }}/>
                ) : null}
              </div>
              <div style={{
                width: 28, height: 28, borderRadius: 9, background: T.surface2,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                opacity: row.done ? 1 : 0.4, flexShrink: 0,
              }}>
                <Icon name={row.i} size={13} color={T.textDim} strokeWidth={1.9}/>
              </div>
              <div style={{ flex: 1, opacity: row.done ? 1 : row.active ? 0.85 : 0.45 }}>
                <div style={{ fontSize: 13, color: T.text, fontWeight: 500, letterSpacing: -0.1 }}>
                  {row.t}
                </div>
                {row.sub && (
                  <div style={{ fontSize: 11, color: T.textDim, marginTop: 1 }}>{row.sub}</div>
                )}
              </div>
            </div>
          ))}
        </div>
        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

// ═══════════════════════════════════════════════════════════
// 2. JOURNEY DETAIL — what you see after loading. Day-by-day, editable.
// ═══════════════════════════════════════════════════════════
function JourneyDetail() {
  const T = UN.d;

  return (
    <Phone mode="d" time="2:14">
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div style={{ flex: 1, overflowY: 'auto', padding: '4px 0 100px' }}>
          {/* Header */}
          <div style={{ padding: '8px 22px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <button style={{
              width: 36, height: 36, borderRadius: 99,
              background: T.surface, border: `1px solid ${T.line2}`, color: T.text,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
            </button>
            <button style={{
              fontSize: 12.5, color: T.sage, fontWeight: 700,
              padding: '8px 14px', borderRadius: 99,
              background: T.sageSoft, border: `1px solid ${T.sageEdge}`,
            }}>Save changes</button>
          </div>

          {/* Title */}
          <div style={{ padding: '12px 22px 0' }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 5,
              fontSize: 11, color: T.sage, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase',
              padding: '3px 9px', borderRadius: 99,
              background: T.sageSoft, border: `1px solid ${T.sageEdge}`,
            }}>
              <Icon name="check" size={11} color={T.sage} strokeWidth={2.6}/>
              Plan ready
            </div>
            <h1 style={{ margin: '8px 0 4px', fontSize: 28, fontWeight: 700, color: T.text, letterSpacing: -0.6 }}>
              Tonsillitis
            </h1>
            <p style={{ margin: 0, fontSize: 13, color: T.textDim, lineHeight: 1.45 }}>
              7–10 day course · Maeve · 15.4 kg · everything below is editable.
            </p>
          </div>

          {/* Day timeline */}
          <div style={{ padding: '14px 22px 0' }}>
            <Label>Suggested medications</Label>
          </div>
          <div style={{ padding: '8px 22px 0', display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              { name: 'Amoxicillin',     sub: 'antibiotic course · 10 days', cad: '10mL · twice daily', tone: 'trust', typical: true },
              { name: 'Tylenol',         sub: 'children\u2019s liquid · 160mg/5mL', cad: '5mL · every 4–6h PRN', tone: 'sage' },
              { name: 'Motrin',          sub: 'children\u2019s liquid · 100mg/5mL', cad: '5mL · every 6–8h PRN', tone: 'sage' },
            ].map((m, i) => (
              <div key={i} style={{
                background: T.surface, border: `1px solid ${T.line2}`,
                borderRadius: 14, padding: '12px 14px',
                display: 'flex', alignItems: 'center', gap: 12,
              }}>
                <div style={{
                  width: 34, height: 34, borderRadius: 10,
                  background: m.tone === 'trust' ? UN.d.trustSoft : T.sageSoft,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name="pill" size={16} color={m.tone === 'trust' ? UN.d.trust : T.sage} strokeWidth={1.9}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 14, color: T.text, fontWeight: 700, letterSpacing: -0.1,
                    display: 'flex', alignItems: 'center', gap: 6,
                  }}>
                    {m.name}
                    {m.typical && (
                      <span style={{
                        fontSize: 9, color: UN.d.trust, fontWeight: 700, letterSpacing: 0.4,
                        padding: '1px 5px', borderRadius: 3, background: UN.d.trustSoft,
                      }}>TYPICAL</span>
                    )}
                  </div>
                  <div style={{ fontSize: 10.5, color: T.textMute, marginTop: 1 }}>{m.sub}</div>
                  <div style={{
                    fontSize: 11.5, color: T.text, fontWeight: 600, marginTop: 4,
                    fontVariantNumeric: 'tabular-nums', display: 'flex', alignItems: 'center', gap: 5,
                  }}>
                    <Icon name="clock" size={11} color={T.textDim} strokeWidth={1.9}/>
                    {m.cad}
                  </div>
                </div>
                <button style={{
                  width: 30, height: 30, borderRadius: 99,
                  background: T.surface2, border: `1px solid ${T.line2}`,
                  color: T.textDim,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M16.5 3.5a2.12 2.12 0 1 1 3 3L7 19l-4 1 1-4Z"/>
                  </svg>
                </button>
              </div>
            ))}
            <button style={{
              padding: '10px', borderRadius: 12,
              background: 'transparent', border: `1.5px dashed ${T.line2}`,
              color: T.textMute, fontFamily: UN.font.body, fontSize: 12.5, fontWeight: 500,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>
              <Icon name="plus" size={13} color={T.textMute} strokeWidth={2.2}/>
              Add a different medication
            </button>
          </div>

          {/* Day timeline */}
          <div style={{ padding: '18px 22px 0' }}>
            <Label>Day-by-day</Label>
          </div>
          <div style={{
            margin: '10px 22px 14px',
            display: 'flex', gap: 6, overflowX: 'auto',
          }}>
            {[1,2,3,4,5,6,7,8,9,10].map(d => {
              const today = d === 3;
              const past = d < 3;
              return (
                <div key={d} style={{
                  flexShrink: 0, width: 38,
                  padding: '8px 0', borderRadius: 11,
                  background: today ? T.sage : past ? T.surface2 : T.surface,
                  border: `1.5px solid ${today ? T.sage : past ? T.line2 : T.line2}`,
                  textAlign: 'center',
                }}>
                  <div style={{
                    fontSize: 9, color: today ? '#0E1A14' : T.textMute,
                    fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase',
                  }}>Day</div>
                  <div style={{
                    fontFamily: UN.font.num, fontSize: 16, fontWeight: 700,
                    color: today ? '#0E1A14' : past ? T.textDim : T.text,
                    letterSpacing: -0.4, marginTop: -1,
                  }}>{d}</div>
                </div>
              );
            })}
          </div>

          {/* Today's plan card */}
          <div style={{
            margin: '0 22px 16px',
            background: T.surface, border: `1px solid ${T.line}`, borderRadius: 18,
            overflow: 'hidden',
          }}>
            <div style={{
              padding: '14px 18px',
              borderBottom: `1px solid ${T.line}`,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <div>
                <div style={{ fontSize: 11, color: T.sage, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>
                  Today · Day 3
                </div>
                <div style={{ fontSize: 17, fontWeight: 700, color: T.text, letterSpacing: -0.3, marginTop: 2 }}>
                  Course mid-point
                </div>
              </div>
              <button style={{
                fontSize: 11, color: T.textDim, fontWeight: 600,
                padding: '6px 10px', borderRadius: 8,
                background: T.surface2, border: `1px solid ${T.line2}`,
              }}>Edit day</button>
            </div>

            {/* Suggested doses */}
            <div style={{ padding: '14px 18px 6px' }}>
              <Label>Suggested doses</Label>
            </div>
            {[
              { time: '8:00 am', med: 'Amoxicillin', dose: '10 mL', sub: '400mg · with food', course: true, status: 'done' },
              { time: '12:00 pm', med: 'Motrin', dose: '5 mL', sub: 'PRN if temp > 38°C', status: 'taken' },
              { time: '4:00 pm', med: 'Tylenol', dose: '5 mL', sub: 'alternate with Motrin', status: 'upcoming' },
              { time: '8:00 pm', med: 'Amoxicillin', dose: '10 mL', sub: 'with food', course: true, status: 'upcoming' },
            ].map((d,i,arr) => (
              <div key={i} style={{
                padding: '11px 18px',
                borderBottom: i < arr.length - 1 ? `1px solid ${T.line}` : 'none',
                display: 'flex', alignItems: 'center', gap: 12,
              }}>
                <div style={{
                  width: 56, fontFamily: UN.font.num, fontSize: 11.5,
                  color: d.status === 'done' ? T.textMute : T.text, fontWeight: 600,
                  fontVariantNumeric: 'tabular-nums',
                  textDecoration: d.status === 'done' ? 'line-through' : 'none',
                }}>{d.time}</div>
                <div style={{
                  width: 32, height: 32, borderRadius: 10,
                  background: d.course ? UN.d.trustSoft : T.surface2,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  <Icon name="pill" size={15} color={d.course ? UN.d.trust : T.textDim} strokeWidth={1.9}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, color: T.text, fontWeight: 600, letterSpacing: -0.1 }}>
                    {d.med} · {d.dose}
                  </div>
                  <div style={{ fontSize: 11, color: T.textMute, marginTop: 1 }}>{d.sub}</div>
                </div>
                {d.status === 'done' && (
                  <div style={{
                    width: 22, height: 22, borderRadius: 22, background: T.sageSoft,
                    border: `1px solid ${T.sageEdge}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <Icon name="check" size={12} color={T.sage} strokeWidth={2.6}/>
                  </div>
                )}
                {d.status === 'taken' && (
                  <span style={{
                    fontSize: 10, color: T.sage, fontWeight: 700, letterSpacing: 0.4,
                    padding: '3px 7px', borderRadius: 99,
                    background: T.sageSoft, border: `1px solid ${T.sageEdge}`,
                  }}>DONE</span>
                )}
                {d.status === 'upcoming' && (
                  <button style={{
                    fontSize: 10.5, color: T.text, fontWeight: 700, letterSpacing: 0.3,
                    padding: '5px 10px', borderRadius: 99,
                    background: T.surface2, border: `1px solid ${T.line2}`,
                  }}>EDIT</button>
                )}
              </div>
            ))}

            {/* Prompts */}
            <div style={{ padding: '14px 18px 6px' }}>
              <Label>Today's prompts</Label>
            </div>
            <div style={{ padding: '4px 18px 14px', display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {[
                { i: 'camera', t: 'Throat photo' },
                { i: 'thermo', t: 'Morning temp' },
                { i: 'alert',  t: 'Pain rating' },
                { i: 'drop',   t: 'Fluid check' },
              ].map((p,i) => (
                <div key={i} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  padding: '7px 10px', borderRadius: 99,
                  background: T.surface2, border: `1px solid ${T.line2}`,
                  fontSize: 12, color: T.textDim, fontWeight: 500,
                }}>
                  <Icon name={p.i} size={12} color={T.textDim} strokeWidth={1.9}/>
                  {p.t}
                </div>
              ))}
            </div>
          </div>

          {/* Adjustments callout */}
          <div style={{
            margin: '0 22px 16px', padding: '14px 16px',
            background: 'linear-gradient(135deg, rgba(112,144,201,0.10), rgba(143,181,162,0.05))',
            border: `1px solid rgba(112,144,201,0.32)`,
            borderRadius: 14,
          }}>
            <div style={{
              fontSize: 11, color: T.trust, letterSpacing: 0.5, fontWeight: 700, textTransform: 'uppercase',
              marginBottom: 5,
            }}>Want to adjust?</div>
            <div style={{ fontSize: 13, color: T.text, fontWeight: 500, lineHeight: 1.4 }}>
              Brand-name swap, different concentration, schedule change — tap any row.
            </div>
            <div style={{ marginTop: 10, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {['Change to Advil', 'Use bottle we have', 'Different schedule', 'Add an alarm'].map((t,i) => (
                <button key={i} style={{
                  padding: '5px 10px', borderRadius: 99,
                  background: T.surface, border: `1px solid ${T.line2}`,
                  fontSize: 11.5, color: T.text, fontWeight: 500,
                }}>{t}</button>
              ))}
            </div>
          </div>
        </div>

        {/* Sticky bottom CTA */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 30,
          padding: '0 22px',
        }}>
          <button style={{
            width: '100%', height: 56, borderRadius: 18,
            background: T.sage, color: '#0E1A14', border: 'none',
            fontFamily: UN.font.body, fontSize: 16, fontWeight: 700,
            letterSpacing: -0.1,
            boxShadow: '0 12px 28px rgba(0,0,0,0.5)',
          }}>Start tracking →</button>
        </div>
        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

// ═══════════════════════════════════════════════════════════
// 3. CUSTOM CONDITION BUILDER — when nothing in the library fits
// ═══════════════════════════════════════════════════════════
function CustomCondition() {
  const T = UN.d;

  return (
    <Phone mode="d" time="2:14">
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div style={{ flex: 1, overflowY: 'auto', padding: '4px 0 100px' }}>
          <div style={{ padding: '8px 22px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <button style={{
              width: 36, height: 36, borderRadius: 99,
              background: T.surface, border: `1px solid ${T.line2}`, color: T.text,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="x" size={16} color={T.text} strokeWidth={2}/>
            </button>
            <div style={{
              fontSize: 11, color: T.textMute, letterSpacing: 0.4, fontWeight: 600,
            }}>Step 2 of 3</div>
          </div>

          {/* Header */}
          <div style={{ padding: '14px 22px 4px' }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '4px 10px', borderRadius: 99,
              background: UN.d.trustSoft, color: T.trust,
              fontSize: 10.5, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase',
              marginBottom: 12,
            }}>
              <Icon name="plus" size={11} color={T.trust} strokeWidth={2.4}/>
              Custom condition
            </div>
            <h1 style={{ margin: 0, fontSize: 28, fontWeight: 700, color: T.text, letterSpacing: -0.6 }}>
              Build it.
            </h1>
            <p style={{ margin: '6px 0 0', fontSize: 13.5, color: T.textDim, lineHeight: 1.5 }}>
              Tell us what to track. We'll save it to your library.
            </p>
          </div>

          {/* Name */}
          <div style={{ padding: '20px 22px 14px' }}>
            <Label>What do you call it?</Label>
            <div style={{
              marginTop: 8,
              padding: '14px 16px', borderRadius: 14,
              background: T.surface, border: `1.5px solid ${T.sage}`,
              fontSize: 16, color: T.text, fontWeight: 500, letterSpacing: -0.2,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              Hand, foot & mouth
              <span style={{
                fontSize: 10.5, color: T.sage, fontWeight: 700, letterSpacing: 0.4,
                padding: '2px 6px', borderRadius: 4, background: T.sageSoft,
              }}>SAVED</span>
            </div>
            <div style={{ marginTop: 6, fontSize: 11.5, color: T.textMute }}>
              Show up next time as a tappable template.
            </div>
          </div>

          {/* Track these */}
          <div style={{ padding: '8px 22px' }}>
            <Label>Track these</Label>
            <div style={{ marginTop: 8, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {[
                { i: 'thermo', t: 'Temperature',    on: true },
                { i: 'camera', t: 'Rash photos',    on: true, badge: 'daily' },
                { i: 'alert',  t: 'Mouth pain',     on: true },
                { i: 'drop',   t: 'Fluid intake',   on: true },
                { i: 'food',   t: 'Food refusal',   on: false },
                { i: 'clock',  t: 'Sleep',          on: false },
                { i: 'pill',   t: 'PRN pain meds',  on: true },
                { i: 'plus',   t: 'Add a track…',   add: true },
              ].map((tr, i) => (
                <div key={i} style={{
                  padding: '12px',
                  background: tr.on ? T.sageSoft : tr.add ? 'transparent' : T.surface,
                  border: `1.5px ${tr.add ? 'dashed' : 'solid'} ${tr.on ? T.sage : T.line2}`,
                  borderRadius: 12,
                  display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6,
                  opacity: tr.on || tr.add ? 1 : 0.6,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
                    <Icon name={tr.i} size={16}
                          color={tr.on ? T.sage : T.textDim} strokeWidth={1.9}/>
                    {tr.badge && (
                      <span style={{
                        fontSize: 9, color: T.sage, fontWeight: 700, letterSpacing: 0.4,
                        padding: '1px 5px', borderRadius: 3, background: T.surface,
                      }}>{tr.badge.toUpperCase()}</span>
                    )}
                  </div>
                  <div style={{ fontSize: 12.5, color: T.text, fontWeight: 600, letterSpacing: -0.1 }}>
                    {tr.t}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Photo schedule */}
          <div style={{ padding: '14px 22px' }}>
            <Label>Rash photo schedule</Label>
            <div style={{
              marginTop: 8,
              background: T.surface, border: `1px solid ${T.line2}`, borderRadius: 14,
              overflow: 'hidden',
            }}>
              {[
                { l: 'Frequency',         v: 'Daily · 8 am' },
                { l: 'Body map',          v: 'Hands · feet · mouth · butt' },
                { l: 'Reminder',          v: 'Push + lock screen' },
              ].map((r,i,a) => (
                <div key={i} style={{
                  padding: '12px 16px',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  borderBottom: i < a.length - 1 ? `1px solid ${T.line}` : 'none',
                }}>
                  <span style={{ fontSize: 12.5, color: T.textDim, fontWeight: 500 }}>{r.l}</span>
                  <span style={{
                    fontSize: 13, color: T.text, fontWeight: 600, letterSpacing: -0.1,
                    display: 'flex', alignItems: 'center', gap: 4,
                  }}>
                    {r.v}
                    <Icon name="chev" size={12} color={T.textMute} strokeWidth={2}/>
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Red flags */}
          <div style={{ padding: '14px 22px' }}>
            <Label>Red flags · let me know when…</Label>
            <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', gap: 5 }}>
              {[
                { t: 'Temp > 39.5°C', on: true },
                { t: 'Refusing fluids 6h+', on: true },
                { t: 'New rash spread', on: true },
                { t: 'Severe pain (4–5)', on: true },
                { t: '+ add a rule', add: true },
              ].map((r,i) => (
                <div key={i} style={{
                  padding: '6px 10px', borderRadius: 99,
                  background: r.add ? 'transparent' : `${UN.d.sev.hot}1c`,
                  border: `1px ${r.add ? 'dashed' : 'solid'} ${r.add ? T.line2 : `${UN.d.sev.hot}44`}`,
                  fontSize: 11.5, color: r.add ? T.textMute : UN.d.sev.hot, fontWeight: 500,
                }}>{r.t}</div>
              ))}
            </div>
          </div>
        </div>

        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 30,
          padding: '0 22px',
        }}>
          <button style={{
            width: '100%', height: 56, borderRadius: 18,
            background: T.sage, color: '#0E1A14', border: 'none',
            fontFamily: UN.font.body, fontSize: 16, fontWeight: 700,
            letterSpacing: -0.1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            boxShadow: '0 12px 28px rgba(0,0,0,0.5)',
          }}>
            Save & start tracking
            <Icon name="chev" size={18} color="#0E1A14" strokeWidth={2.4}/>
          </button>
        </div>

        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

Object.assign(window, { JourneyLoading, JourneyDetail, CustomCondition });