/* Phase 17: the plan page. Loaded only on /:l/plan. */
:root .fz .plan-page { width:calc(100% - 32px); max-width:1200px; margin:auto; padding:32px 0 64px; }
:root .fz .plan-form { display:grid; gap:16px; margin-bottom:32px; }
:root .fz .plan-form .plan-grid { display:grid; grid-template-columns:1fr; gap:12px; padding:16px; border-radius:12px; background:var(--accent-soft); }
/* Owner: dropdowns show three suggestions, scroll for the rest. */
:root .fz .plan-form .choices__list--dropdown .choices__list { max-height:126px; }
:root .fz .plan-form .choices__list--dropdown { z-index:5; }
:root .fz .plan-form .field { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; }
:root .fz .plan-form :is(input,select,textarea) { font:inherit; font-weight:400; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--white); min-height:44px; }
:root .fz .plan-form textarea { min-height:88px; }
:root .fz .plan-cats { border:0; padding:0; margin:0; }
:root .fz .plan-cats legend { font-size:14px; font-weight:600; margin-bottom:8px; }
:root .fz .plan-cats .chips { display:flex; flex-wrap:wrap; gap:8px; }
:root .fz .plan-cats .chip input { position:absolute; opacity:0; }
:root .fz .plan-form .btn { justify-self:start; }
:root .fz .plan-form .choices { margin:0; }
:root .fz .plan-form .choices__inner { min-height:44px; border:1px solid var(--line); border-radius:10px; background:var(--white); font-weight:400; }
:root .fz .plan-pick .result-footer { gap:8px; flex-wrap:wrap; }
:root .fz .plan-pick .popup-btn { font-size:13px; padding:8px 12px; }
:root .fz .plan-head h2 { font-size:28px; letter-spacing:-.5px; margin:0 0 4px; }
:root .fz .plan-row { margin-top:24px; }
:root .fz .plan-row .card-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; margin-bottom:16px; }
:root .fz .plan-row h3 { font-size:20px; margin:0; }
:root .fz .plan-empty { color:var(--muted); }
:root .fz .plan-pick { position:relative; display:flex; flex-direction:column; gap:8px; }
:root .fz .plan-pick--top .result-card { outline:2px solid var(--accent); }
:root .fz .plan-top { position:absolute; top:-10px; left:12px; z-index:3; background:var(--accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; border-radius:999px; }
:root .fz .plan-estimate { font-size:14px; margin:0; }
:root .fz .reasons { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
:root .fz .reasons li { font-size:12px; padding:3px 8px; border-radius:999px; background:var(--accent-soft, #eef2ff); color:var(--accent); }
:root .fz .plan-total { margin-top:24px; }
:root .fz .plan-total .card-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
:root .fz .plan-total strong { font-size:20px; }
:root .fz .plan-page .muted { color:var(--muted); font-size:13px; }
:root .fz .plan-split { border:0; padding:16px; margin:0; border-radius:12px; background:var(--white); border:1px solid var(--line); display:grid; gap:12px; }
:root .fz .plan-split legend { font-size:14px; font-weight:600; padding:0 4px; }
:root .fz .plan-split > .muted { margin:0; }
:root .fz .split-row { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; font-size:14px; }
:root .fz .split-row input { grid-column:1 / -1; grid-row:2; width:100%; min-height:0; padding:0; border:0; accent-color:var(--accent); }
:root .fz .split-row output { font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px; }
@media(min-width:640px) {
 :root .fz .plan-page { width:calc(100% - 48px); }
 :root .fz .plan-form .plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:900px) {
 :root .fz .plan-page { width:calc(100% - 64px); }
 :root .fz .plan-form .plan-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}