/* 2.8.0 Permit help after intake (web/permit-handoff.js). Same look as the Permit tab (x-c.css .ph-*), plus the form
   pieces the guided panel needs. Phone first: nothing is wider than the screen. */
.phx { max-width: 760px; margin-top: var(--sp-3, 12px); }
.phx h2 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.phx h2:focus-visible { outline: 2px solid var(--mod, #C2417A); outline-offset: 3px; border-radius: 6px; }
.phx .ph-sub { margin: 0; }
.phx-stage.good { background: var(--ph-mint-soft); color: var(--ph-mint); }
.phx-stage.wait { background: var(--ph-peach-soft); color: var(--ph-peach-ink); }
.phx-stage.rose { background: var(--ph-rose-soft); color: var(--mod); }
.phx-stage.stop { background: var(--ph-coral-soft); color: var(--ph-coral); }
.phx .ph-chip.good { background: var(--ph-mint-soft); color: var(--ph-mint); }
.phx .ph-chip.wait { background: var(--ph-peach-soft); color: var(--ph-peach-ink); }
.phx .ph-chip.rose { background: var(--ph-rose-soft); color: var(--mod); }
.phx-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.phx-seg button { flex: 1 1 220px; min-height: 40px; border: 1px solid var(--ph-sep); background: rgb(255 255 255 / .85); border-radius: 12px; padding: 8px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; text-align: left; }
.phx-seg button.on { border-color: var(--mod); background: var(--ph-rose-soft); color: var(--ink); }
.phx-seg button:focus-visible, .phx-cand input:focus-visible, .phx-form input:focus-visible, .phx-form select:focus-visible, .phx-form textarea:focus-visible { outline: 2px solid var(--mod); outline-offset: 2px; }
.phx-left { text-align: left !important; }
.phx-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; }
.phx-form label, .phx-cands label.phx-wide { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); font-weight: 600; min-width: 0; }
.phx-form input, .phx-form select, .phx-form textarea, .phx-cands select, .phx-cands input[type=url], .phx-cands input:not([type]) { font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); border: 1px solid var(--ph-sep); background: #fff; border-radius: 10px; padding: 8px 10px; min-width: 0; width: 100%; box-sizing: border-box; }
.phx-form textarea { resize: vertical; line-height: 1.45; }
.phx-wide { grid-column: 1 / -1; }
.phx-wrap { white-space: normal !important; overflow-wrap: anywhere; }
.phx-cands { border: 0; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.phx-cands legend { font-weight: 700; font-size: 12.5px; padding: 0; margin-bottom: 4px; }
.phx-cand { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 8px; font-size: 12.5px !important; color: var(--ink) !important; font-weight: 500 !important; cursor: pointer; }
.phx-cand input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.phx-cand > span { display: flex; flex-direction: column; min-width: 0; }
.phx-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.phx-links .btn { white-space: normal; text-align: left; }
.phx-block { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--ph-chip); border-radius: 10px; padding: 9px 11px; margin: 0 0 8px; max-width: 100%; box-sizing: border-box; }
.phx-code { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.phx-preview { border: 1px dashed var(--ph-sep); border-radius: 12px; padding: 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.phx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.phx-hist summary { cursor: pointer; list-style: none; }
.phx-hist summary::-webkit-details-marker { display: none; }
.phx-ev { align-items: flex-start; }
.phx-ev .ph-cs { flex: 0 0 96px; margin: 0; }
.phx .ph-split { flex-wrap: wrap; }
.phx .ph-banner .ph-split { margin-top: 8px; }
@media (max-width: 560px) {
  .phx .ph-widget { padding: 11px 11px 13px; }
  .phx-form { grid-template-columns: 1fr; }
  .phx .ph-row { flex-wrap: wrap; }
  .phx .ph-lab { flex: 0 0 100%; }
  .phx-ev .ph-cs { flex: 0 0 100%; }
}
.ph-wrap > .phx { margin: 0 0 12px; }