/* Fixture planner (assets/js/planner-ui.js). Loaded on /planner and /planer only.
   Template tokens throughout, so light/dark and the accessibility panel apply. */

.pln-sec{padding-block:var(--s5) var(--s6)}
.pln{min-height:420px}
.pln-msg{min-height:320px;display:grid;place-items:center;align-content:center;gap:20px;text-align:center;border:1px dashed var(--line);padding:32px}
.pln-msg .lead{margin:0 auto}
.pln-spin{width:28px;height:28px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:pln-spin .8s linear infinite}
@keyframes pln-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pln-spin{animation:none}}

/* progress */
.pln-steps ol{list-style:none;margin:0 0 40px;padding:0;display:flex;gap:6px;border-bottom:1px solid var(--line)}
.pln-steps li{flex:1;min-width:0}
.pln-steps button{display:flex;align-items:center;gap:10px;width:100%;padding:12px 0 14px;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;color:var(--ink-3);font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer}
.pln-steps button:disabled{cursor:default}
.pln-steps .is-done button{color:var(--ink-2)}
.pln-steps .is-done button:hover{color:var(--ink)}
.pln-steps .is-cur button{color:var(--ink);border-bottom-color:var(--accent)}
.pln-dot{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid currentColor;border-radius:50%;font-size:11px;letter-spacing:0}
.pln-steps .is-cur .pln-dot{background:var(--accent);border-color:var(--accent);color:var(--cta-ink)}
.pln-steps .is-done .pln-dot{border-color:var(--accent)}
.pln-steps span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* step head */
.pln-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 24px;margin-bottom:28px}
.pln-h{font-size:clamp(28px,3.2vw,42px);line-height:1.05;letter-spacing:-.03em;margin:0}
.pln-h:focus{outline:none}
.pln-h:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.pln-intro,.pln-sum{margin:10px 0 0;color:var(--ink-2);font-size:17px;line-height:1.5;max-width:62ch}
.pln-sum span:first-child{color:var(--ink);font-weight:700}

/* segmented control (units) */
.pln-seg{display:inline-flex;border:1px solid var(--line-2)}
.pln-seg button{min-width:76px;min-height:42px;padding:0 14px;border:0;background:none;color:var(--ink);font:700 14px var(--sans);cursor:pointer;white-space:nowrap}
.pln-seg button+button{border-left:1px solid var(--line-2)}
.pln-seg button.is-on{background:var(--ink);color:var(--bg)}

/* step 1: crops */
.pln-group{display:block;margin:32px 0 12px}
.pln-step>.pln-group:first-of-type{margin-top:8px}
.pln-crops{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.pln-crop{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pln-crop:hover{border-color:var(--line-2)}
.pln-crop.is-on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pln-crop-ic{flex:none;position:relative;display:grid;place-items:center;width:44px;height:44px;background:var(--panel);overflow:hidden}
.pln-crop-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pln-crop-ic.has-img .pln-crop-init{visibility:hidden}
.pln-crop-init{font:700 18px var(--sans);color:var(--ink-3)}
.pln-crop-txt{display:grid;gap:3px;min-width:0}
.pln-crop-name{font-weight:700;font-size:16px;line-height:1.25}
.pln-crop-meta{font:500 11.5px/1.3 var(--mono);color:var(--ink-3);letter-spacing:.02em}

/* step 2: space */
.pln-block{margin-top:32px}
.pln-block>.lbl{display:block;margin-bottom:12px}
.pln-presets{display:flex;flex-wrap:wrap;gap:8px}
.pln-preset{display:grid;gap:2px;min-width:112px;padding:10px 14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.pln-preset:hover{border-color:var(--line-2)}
.pln-preset.is-on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pln-preset-size{font:700 15px var(--sans);font-variant-numeric:tabular-nums}
.pln-preset-type{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.pln-dims{display:flex;align-items:flex-end;gap:12px}
.pln-x{padding-bottom:14px;color:var(--ink-3);font-size:18px}
.pln-field{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start;min-width:0}
.pln-dims .pln-field{flex:0 1 200px}
.pln-field>label{font-weight:700;font-size:15px}
.pln-field small{color:var(--ink-3);font-size:13.5px;line-height:1.45}
.pln-input{display:flex;align-items:center;min-height:50px;border:1px solid var(--line-2);background:var(--bg)}
.pln-input:focus-within{outline:3px solid var(--accent);outline-offset:1px}
.pln-input input{flex:1;min-width:0;height:48px;padding:0 12px;border:0;background:none;color:var(--ink);font:400 16px var(--sans);font-variant-numeric:tabular-nums}
.pln-input input:focus{outline:none}
.pln-input input::placeholder{color:var(--ink-3);opacity:1}
.pln-input:has(input[aria-invalid=true]){border-color:#C2410C}
.pln-unit{padding:0 12px 0 0;font:500 13px var(--mono);color:var(--ink-3);white-space:nowrap}
.pln-unit.pre{padding:0 0 0 12px}
.pln-err{margin:12px 0 0;color:#C2410C;font-size:14px}
:root[data-theme="dark"] .pln-err{color:#FF8A5B}
.pln-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pln-type{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.pln-type:hover{border-color:var(--line-2)}
.pln-type.is-on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pln-type-ic{flex:none;color:var(--hi)}
.pln-ic{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pln-type-txt{display:grid;gap:4px}
.pln-type-t{font-weight:700;font-size:16px}
.pln-type-d{color:var(--ink-2);font-size:14px;line-height:1.4}
.pln-adv{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pln-adv summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font:700 16px var(--sans);cursor:pointer}
.pln-adv summary::-webkit-details-marker{display:none}
.pln-adv summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--ink-3)}
.pln-adv[open] summary::after{content:"−"}
.pln-adv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:4px 0 24px}
.pln-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:36px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--cta);border-color:var(--cta);color:var(--cta-ink)}
.pln-link{padding:4px 0;border:0;background:none;color:var(--ink);font:700 15px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pln-link:hover{color:var(--hi)}
.pln-sum .pln-link{font-size:15px;margin-left:4px}

/* step 3: results */
.pln-note{border-left:3px solid var(--tbc);background:var(--tbc-bg);padding:16px 20px;margin-bottom:24px;display:grid;gap:6px}
.pln-note p{margin:0;color:var(--ink);line-height:1.5}
.pln-note .pln-note-t{font-weight:700}
.pln-note.is-bad{border-left-color:#C2410C}
.pln-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pln-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:600 14px var(--sans);cursor:pointer}
.pln-chip:hover{background:var(--ink);color:var(--bg)}
.pln-chip.is-static{cursor:default;border-style:dashed}
.pln-chip.is-static:hover{background:var(--bg);color:var(--ink)}
.pln-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;align-items:start}
.pln-card{display:flex;flex-direction:column;gap:22px;padding:24px;border:1px solid var(--line);background:var(--surface);position:relative;min-width:0}
.pln-card.is-rec{border-color:var(--accent);box-shadow:inset 0 3px 0 var(--accent)}
.pln-card.is-closest{border-style:dashed}
.pln-card-h{display:grid;gap:6px}
.pln-kind{color:var(--hi)}
.pln-card-t{margin:0;font-size:28px;line-height:1.1;letter-spacing:-.02em}
.pln-grid{margin:0;color:var(--ink-2);font-size:14.5px}
.pln-traits{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.pln-traits li{color:var(--ink-2);font-size:14px;line-height:1.45}
.pln-traits li.is-head{color:var(--ink);font-weight:700;font-size:15px}
.pln-small{margin:0;color:var(--ink-2);font-size:14px;line-height:1.45}

/* light distribution map (planner-core ppfdMap + mapScene) */
.pln-map{margin:0;display:grid;gap:10px}
.pln-map-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pln-select{min-height:36px;max-width:100%;padding:0 30px 0 10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:600 13.5px var(--sans);border-radius:0}
.pln-map-b{display:grid;gap:12px}
.pln-map-s{display:grid;gap:8px}
.pln-map-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px 18px;margin:0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pln-map-dl dt{overflow-wrap:anywhere;hyphens:auto;font:500 10.5px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.pln-map-dl dd{margin:3px 0 0;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.pln-map-note{font-size:12.5px;color:var(--ink-3)}
.pln-mode{display:inline-flex;justify-self:start;border:1px solid var(--line-2)}
.pln-mode button{min-height:36px;padding:0 12px;border:0;background:var(--bg);color:var(--ink-2);font:600 13.5px var(--sans);cursor:pointer}
.pln-mode button+button{border-left:1px solid var(--line-2)}
.pln-mode button.is-on{background:var(--ink);color:var(--bg)}
.pln-map-cap{font-size:13px}
.pln-keep{margin:4px 0 0;padding:10px 12px;border-left:3px solid var(--accent);background:var(--panel);color:var(--ink);font-weight:600;font-size:14.5px;line-height:1.45}

/* hang + phases + stats */
.pln-hang{display:grid;gap:6px}
.pln-hang-v{margin:0;font:700 22px/1.25 var(--sans);letter-spacing:-.01em}
.pln-phases ul{list-style:none;margin:8px 0 0;padding:0}
.pln-phase{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.pln-phase:last-child{border-bottom:1px solid var(--line)}
.pln-phase-m{display:grid;gap:2px;min-width:0}
.pln-phase-n{font-weight:700}
.pln-phase .pln-small{font-size:13px;color:var(--ink-3)}
.pln-side{display:grid;justify-items:end;gap:4px}
.pln-bright{font:700 22px/1 var(--sans);font-variant-numeric:tabular-nums}
.pln-tag{display:inline-block;padding:3px 7px;font:500 11px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);color:var(--ink-3);white-space:nowrap}
.pln-tag.is-warn{border-color:var(--tbc-line);background:var(--tbc-bg);color:var(--tbc)}
.pln-phase.is-off .pln-phase-n{color:var(--ink-2)}
.pln-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin:0}
.pln-stats div{min-width:0}
.pln-stats dt{font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pln-stats dd{margin:4px 0 0;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.pln-warn{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid var(--tbc);display:grid;gap:6px;color:var(--ink-2);font-size:13.5px;line-height:1.45}
.pln-buy{display:grid;gap:10px;margin-top:auto}
.pln-buy .btn{justify-content:center}

/* below the cards */
.pln-guide{margin-top:40px;padding-top:28px;border-top:1px solid var(--line-2)}
.pln-guide-l{margin:14px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink-2);line-height:1.5;max-width:70ch}
.pln-app{margin:18px 0 0;color:var(--ink);font-weight:600}
.pln-app a{color:inherit;text-underline-offset:3px}
.pln-disc{margin:18px 0 0;color:var(--ink-3);font-size:13.5px;line-height:1.5;max-width:80ch}
.pln-copied{font:500 13px var(--mono);color:var(--hi)}
.pln-url{min-width:min(100%,360px);height:42px;padding:0 10px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font:400 14px var(--mono)}
.pln-appsec .lead{max-width:60ch}

@media (max-width:900px){
  .pln-types,.pln-adv-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pln-steps ol{margin-bottom:28px}
  .pln-steps button{gap:6px;font-size:11px;letter-spacing:.04em}
  .pln-crops{grid-template-columns:1fr 1fr;gap:8px}
  .pln-crop{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .pln-preset{min-width:0;flex:1 1 calc(33% - 8px)}
  .pln-card{padding:18px}
  .pln-head{align-items:flex-start}
}

/* Option card parts: controls, height slider, coverage chart, layout plan, details */
.pln-ctl{display:grid;gap:10px}
.pln-mode{display:grid;grid-template-columns:1fr 1fr;width:100%;justify-self:stretch}
.pln-mode button{min-width:0;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pln-slider{display:grid;gap:8px}
.pln-h-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pln-h-row label{font-weight:700;font-size:14.5px}
.pln-h-out{font:700 20px/1 var(--sans);font-variant-numeric:tabular-nums}
.pln-h-track{position:relative;padding-bottom:18px}
.pln-h-in{width:100%;height:30px;margin:0;accent-color:var(--accent);cursor:pointer}
.pln-h-rec{position:absolute;left:calc(var(--p,.5) * (100% - 18px) + 9px);bottom:0;transform:translateX(calc(-100% * var(--p,.5)));font:500 10.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.pln-h-rec::before{content:"";position:absolute;left:calc(100% * var(--p,.5));top:-12px;width:1px;height:8px;background:var(--ink-3)}
.pln-cap{font-size:clamp(16px,1.3vw,18px)!important;margin:2px 0 0}
.pln-chart{margin:0}
.lc-svg{display:block;width:100%;max-width:460px;height:auto;overflow:visible}
.lc-band{fill:var(--accent);opacity:.12}
.lc-axis{stroke:var(--line-2,var(--line));stroke-width:1}
.lc-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.lc-tick,.lc-lbl{fill:var(--ink-3);font:500 9.5px var(--mono);letter-spacing:.03em}
.lc-lbl{text-transform:uppercase}
.lc-line{fill:none;stroke:var(--accent-ink,var(--accent));stroke-width:2;stroke-linejoin:round}
.lc-cur{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.lc-dot{fill:var(--bg);stroke:var(--accent-ink,var(--accent));stroke-width:2.5}
.pln-plan{display:grid;gap:8px}
.lp2-svg{display:block;width:100%;max-width:460px;height:auto;overflow:visible}
.lp2-space{fill:none;stroke:var(--ink-2);stroke-width:1.2}
.lp2-light{fill:var(--ink);fill-opacity:.85;stroke:var(--ink);stroke-width:.8}
.lp2-dim line{stroke:var(--ink-3);stroke-width:.9}
.lp2-dim text,.lp2-touch{fill:var(--ink-2);font:500 10px var(--mono);letter-spacing:.02em}
.lp2-dim.is-gap line{stroke:var(--accent-ink,var(--accent))}
.lp2-dim.is-gap text{fill:var(--accent-ink,var(--accent));font-weight:700}
.lp2-touch{fill:var(--accent-ink,var(--accent));font-weight:700}
.pln-plan-note{font-size:13px}
.pln-details{border-top:1px solid var(--line)}
.pln-details>summary{cursor:pointer;padding:14px 0 4px;font-weight:700;font-size:15px}
.pln-details[open]>summary{margin-bottom:8px}
.pln-dsec{margin-top:18px}
.pln-details .pln-map-cap{margin-top:4px}
.is-empty{display:none}

/* Side-by-side option cards: every part starts on the same line in all cards of a row (CSS
   subgrid; each card spans the same 11 rows of .pln-cards). A missing part keeps its row empty;
   spacing is margin on the parts (no row gap), so empty rows take no space. Without subgrid the
   cards stay a flex column. Phones: stacked as before. */
@supports (grid-template-rows: subgrid) {
  .pln-cards{row-gap:16px}
  .pln-card{display:grid;grid-template-rows:subgrid;grid-row:span 11;row-gap:0;align-content:start}
  .pln-card > *{min-width:0}
  .pln-kind{grid-row:1;margin:0 0 6px}
  .pln-card-t{grid-row:2;margin:0}
  .pln-traits{grid-row:3;margin:10px 0 0}
  .pln-ctl{grid-row:4;margin:20px 0 0;align-self:end}
  .pln-card > .lm-stage{grid-row:5;margin:14px 0 0;align-self:start}
  .pln-slider{grid-row:6;margin:14px 0 0;align-self:start}
  .pln-chart{grid-row:7;margin:12px 0 0;align-self:start}
  .pln-card > .lm-legend{grid-row:8;margin:14px 0 0;align-self:start}
  .pln-plan{grid-row:9;margin:22px 0 0;align-self:start}
  .pln-buy{grid-row:10;margin:22px 0 0;align-self:end}
  .pln-details{grid-row:11;margin:18px 0 0;align-self:start}
  .pln-card > .is-empty{display:block}
}
.lp2-touch-mark{stroke:var(--accent-ink,var(--accent));stroke-width:1.5}