/* Phone controls are additive: the desktop journey keeps its original layout. */
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.app-tools { max-width:1192px; margin: 12px auto 0; display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--muted); font-size:14px; }
.app-tools button { min-height:44px; flex-shrink:0; }
.app-tools span:empty { display:none; }
.app-tools:has(span:empty) { justify-content:flex-end; }
.install-instructions { padding-left:24px; }
.install-instructions li { margin-bottom:12px; }
.install-note { border-left:3px solid var(--gold); padding:12px 15px; background:#eee5d5; font-size:14px; }
dialog { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
[hidden] { display:none!important; }
@media(max-width:1240px) { .app-tools { margin-left:32px; margin-right:32px; } }
@media(max-width:760px) {
  header { padding-top:max(18px, env(safe-area-inset-top)); gap:10px; }
  header .brand { min-width:0; }
  .brand small { letter-spacing:.25px; line-height:1.5; }
  .header-right select { min-width:95px; }
  input, textarea, select { font-size:16px; min-height:48px; }
  button, .chip { min-height:44px; touch-action:manipulation; }
  button.link { padding:10px 4px; }
  .app-tools { margin:8px 20px 0; font-size:13px; }
  main { padding-top:22px; }
  .steps { gap:8px; align-items:flex-start; }
  .steps li { flex:1; min-width:0; align-items:flex-start; }
  .steps b { flex-shrink:0; margin-top:2px; }
  .field { font-size:15px; }
  .actions { display:grid; grid-template-columns:1fr; gap:12px; }
  .actions button { width:100%; }
  .role-card { padding:18px; }
  .role-top { align-items:flex-start; }
  .role-top>div { min-width:0; overflow-wrap:anywhere; }
  .role-top>button { flex-shrink:0; }
  .chips { gap:8px; }
  .chip { max-width:100%; overflow-wrap:anywhere; }
  .modes { gap:6px; }
  .modes button { flex:1; min-width:0; }
  h1 { font-size:clamp(30px,8vw,39px); overflow-wrap:break-word; }
  h3, .timeline p, .preview-card p { overflow-wrap:anywhere; }
  dialog { padding:24px; border-radius:18px; }
  dialog button { width:100%; }
  footer { padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
  summary { min-height:44px; padding:8px 0; }
}
@media(max-width:360px) { header { flex-wrap:wrap; } .header-right { margin-left:auto; } .row { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
@media print { .app-tools { display:none; } }