/* Plantan.is Christmas-light calculator v5: isolated, no global CSS changes. */
/* V5 - Colour and custom sequence preview; all rules scoped to .jl-app. */
.jl-app{
  --forest:#1b4b3a;--forest-dark:#12362b;--leaf:#346e4c;
  --muted:#5c6e61;--line:#d8e1d7;--ink:#1e2e26;
  --shadow:0 14px 40px #0e382015;
  box-sizing:border-box;max-width:1110px;margin:auto;padding:clamp(16px,4vw,36px);
  color:var(--ink);font:400 1rem/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light;
}
.jl-app :where(*){box-sizing:border-box}
.jl-app :where(button,input,select){font:inherit}
.jl-app button{cursor:pointer}
.jl-app a{color:#245c44}
.jl-app :where(a,input,button,select,summary):focus-visible{outline:3px solid #e1a83b;outline-offset:3px}
.jl-app .intro{margin-bottom:24px}
.jl-app .eyebrow{font-weight:750;text-transform:uppercase;letter-spacing:.15em;color:#52725b;font-size:.78rem}
.jl-app .main-title{font-size:clamp(1.8rem,4vw,3.1rem);line-height:1.12;max-width:840px;margin:.35rem 0 .75rem}
.jl-app .intro p{max-width:730px;margin:0;color:var(--muted);font-size:1.08rem}
.jl-app .layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:20px;align-items:start}
.jl-app .card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.jl-app .inputs{padding:clamp(20px,3vw,28px)}
.jl-app .section-heading{font-size:1.19rem;margin:0 0 18px}
.jl-app .field{margin-bottom:22px}
.jl-app .field-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.jl-app .field-title{font-weight:700}
.jl-app .measure{display:flex;align-items:center;gap:4px;background:#f4f7f2;border:1px solid var(--line);padding:3px 8px;border-radius:10px}
.jl-app .measure input{background:transparent;border:0;width:65px;text-align:right;font-size:1.05rem;font-weight:750;color:var(--forest);min-height:32px}
.jl-app .measure span{font-size:.9rem;color:var(--muted);padding-right:4px}
.jl-app .range{width:100%;accent-color:var(--forest);min-height:30px;cursor:pointer;touch-action:pan-y;scroll-margin-block:1rem}
.jl-app .ends{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.78rem;margin-top:-3px}
.jl-app .group-title{font-weight:700;margin:0 0 10px}
.jl-app .radio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.jl-app .choice{position:relative;display:block}
.jl-app .choice input{position:absolute;opacity:0;width:1px;height:1px;top:50%;left:50%}
.jl-app .choice label{min-height:78px;border:1.5px solid var(--line);background:#fafbf8;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 8px;cursor:pointer;font-weight:750;transition:background .15s,border-color .15s}
.jl-app .choice label small{display:block;font-size:.78rem;font-weight:450;color:var(--muted);line-height:1.35;margin-top:3px}
.jl-app .choice input:checked+label{background:#ebf4ec;border-color:#2c6950;box-shadow:inset 0 0 0 1px #2c6950}
.jl-app .choice input:focus-visible+label{outline:3px solid #e1a83b;outline-offset:2px}
.jl-app .helper{font-size:.81rem;color:var(--muted);margin:8px 0 0}
.jl-app .spacing-panel,.jl-app .field-slider{border:1px solid #d5e2d3;background:#fafbf8;border-radius:14px;padding:15px 16px}
.jl-app .spacing-panel{border-color:#cbdcc9;background:#f6f9f4}
.jl-app .spacing-panel .field-top,.jl-app .field-slider .field-top{margin-bottom:5px}
.jl-app .spacing-reading{font-size:1.3rem;font-weight:800;color:var(--forest);font-variant-numeric:tabular-nums;white-space:nowrap}
.jl-app .spacing-reading output{font-size:inherit}
.jl-app .spacing-panel .ends,.jl-app .field-slider .ends{font-size:.79rem;margin-top:-2px}
.jl-app .spacing-panel .helper{margin-top:10px}
.jl-app .method-explanation{font-size:.88rem;color:#345943;border-left:3px solid #96bd9c;padding:8px 11px;margin-top:11px;background:#f5faf4;border-radius:0 8px 8px 0}
.jl-app .bulb-panel{background:#f9f7eb;border-color:#e7ddc4}
.jl-app .bulb-panel .range{accent-color:#a5792a}
.jl-app .light-spec-note{margin:9px 0 0;color:var(--muted);font-size:.8rem}
.jl-app .result{display:flex;flex-direction:column}
.jl-app .result-head{padding:22px clamp(20px,3vw,28px) 16px}
.jl-app .result-label{font-size:.88rem;text-transform:uppercase;letter-spacing:.08em;font-weight:780;color:var(--muted);margin:0 0 7px}
.jl-app .result-big{font-weight:800;font-size:clamp(3rem,6vw,4.6rem);line-height:1.1;color:var(--forest);font-variant-numeric:tabular-nums}
.jl-app .result-big span{font-size:1.4rem}
.jl-app .result-sub{color:var(--muted);font-size:.9rem;margin:4px 0 0}
.jl-app .tree-stage{background:radial-gradient(circle at 50% 46%,#2d654d 0%,#204c3d 55%,#12352d 100%);height:334px;display:flex;align-items:center;justify-content:center;padding:10px 10px 24px;position:relative}
.jl-app .tree-stage svg{width:100%;height:100%;max-width:370px;overflow:visible}
.jl-app .tree-stage .tag{position:absolute;top:15px;left:17px;background:#ffffff20;color:#fff;letter-spacing:.02em;font-weight:550;font-size:.78rem;padding:5px 10px;border:1px solid #ffffff30;border-radius:22px}
.jl-app .stage-tag{position:absolute;top:15px;right:15px;background:#ffffff15;color:#e0efe2;letter-spacing:.01em;font-size:.75rem;padding:5px 10px;border:1px solid #ffffff30;border-radius:20px}
.jl-app .tree-caption{text-align:center;padding:8px 16px;color:#d3e8d9;font-size:.81rem;line-height:1.45;background:#204739}
.jl-app .wire-zoom{background:#153d30;border-top:1px solid #80a08150;padding:14px 18px 12px;color:#f6f2df}
.jl-app .wire-zoom-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:.82rem}
.jl-app .wire-zoom-head strong{white-space:nowrap;color:#ffe5a3;font-size:.95rem;font-variant-numeric:tabular-nums}
.jl-app .wire-zoom svg{display:block;width:100%;max-width:540px;height:auto;margin:3px auto 0;overflow:visible}
.jl-app .wire-zoom-scale{display:flex;justify-content:space-between;max-width:500px;margin:-2px auto 0;font-size:.72rem;color:#c6daca}
.jl-app .result-body{padding:20px clamp(20px,3vw,28px) 24px}
.jl-app .metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);gap:15px;padding:17px 0 8px}
.jl-app .metric strong{font-size:1.6rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.jl-app .metric small{display:block;color:var(--muted);font-size:.83rem}
.jl-app .purchase{font-size:.85rem;margin:10px 0 12px;color:#42644d;padding:12px 14px;background:#f8f9f3;border:1px solid #e2e9dd;border-radius:10px}
.jl-app .purchase .purchase-detail{display:block;margin-top:3px}
.jl-app .mini-note{background:#f2f6eb;border-radius:12px;padding:12px 14px;margin-top:12px;font-size:.88rem;color:#385441}
.jl-app .copy{background:var(--forest);border:0;color:white;border-radius:10px;min-height:44px;padding:10px 16px;font-weight:650;margin-top:14px;width:100%}
.jl-app .copy:hover{background:var(--forest-dark)}
.jl-app .mobile-summary,.jl-app .inline-density{display:none}
@media(min-width:771px){
  .jl-app .result{position:sticky;top:var(--jl-sticky-top,88px)}
}
@media(max-width:770px){
  .jl-app{padding:16px}
  .jl-app .layout{grid-template-columns:1fr}
  .jl-app .card{border-radius:16px}
  .jl-app .inputs{overflow:visible}
  .jl-app .tree-stage{height:294px}
  .jl-app .result-big{font-size:3.4rem}
  .jl-app .radio-grid label{font-size:.91rem}
  /* A compact, live estimate stays visible while the long set of controls scrolls. */
  .jl-app .mobile-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:sticky;top:0;z-index:3;padding:10px 13px;margin:0 0 20px;background:#e8f3e8;border:1px solid #8bb69a;border-radius:12px;box-shadow:0 6px 14px #12362b18}
  .jl-app .mobile-summary span{display:block;color:#385441;font-size:.75rem;font-weight:650}
  .jl-app .mobile-summary strong{display:block;color:var(--forest);font-size:1.45rem;line-height:1.25;font-variant-numeric:tabular-nums}
  .jl-app .mobile-summary .to-buy strong{font-size:1.15rem;padding-top:3px}
  /* The same one-metre diagram sits directly under the LED spacing control. */
  .jl-app .wire-zoom{display:none}
  .jl-app .inline-density{display:block;margin-top:12px;padding:11px 12px 8px;background:#153d30;border:1px solid #4c735e;border-radius:10px}
  .jl-app .inline-density-title{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:.83rem;color:#f3efe1}
  .jl-app .inline-density-title strong{color:#ffe5a3;font-variant-numeric:tabular-nums}
  .jl-app .inline-density svg{display:block;width:100%;height:auto;max-width:490px;margin:3px auto 0}
  .jl-app .inline-density-scale{display:flex;justify-content:space-between;color:#c8dacd;font-size:.72rem;max-width:470px;margin:-2px auto 0}
}
@media(max-width:430px){
  .jl-app .radio-grid .choice label{min-height:96px}
  .jl-app .spacing-panel,.jl-app .field-slider{padding:12px}
  .jl-app .field-top{align-items:flex-start}
  .jl-app .spacing-reading{font-size:1.13rem}
  .jl-app .inline-density{padding:12px}
  .jl-app .inline-density-title{font-size:.77rem}
  .jl-app .inline-density-title strong{font-size:.85rem}
}
@media(max-width:390px){
  .jl-app .radio-grid{gap:6px}
  .jl-app .choice label{padding:8px 3px;font-size:.86rem}
  .jl-app .choice label small{font-size:.72rem}
  .jl-app .metrics{gap:8px}
  .jl-app .mobile-summary{gap:8px;padding:10px}
  .jl-app .mobile-summary strong{font-size:1.3rem}
  .jl-app .mobile-summary .to-buy strong{font-size:1.03rem}
}

/* V5 – clear default choices with optional nerd controls. */
.jl-app .color-panel{padding:15px 16px;border-radius:14px;border:1px solid #cfdfcf;background:#f5f9f4}
.jl-app .color-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.jl-app .color-choice{display:block;position:relative;min-width:0}
.jl-app .color-choice input{position:absolute;opacity:0;width:1px;height:1px;top:50%;left:50%}
.jl-app .color-choice label{border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:54px;padding:8px 9px;font-size:.86rem;font-weight:700;line-height:1.2}
.jl-app .color-choice input:checked+label{border-color:#2c6950;box-shadow:inset 0 0 0 1px #2c6950;background:#e5f3e6}
.jl-app .color-choice input:focus-visible+label{outline:3px solid #e1a83b;outline-offset:2px}
.jl-app .color-swatch{width:19px;height:19px;flex-shrink:0;border:1px solid #b9c9bb;border-radius:50%;background:var(--swatch,#ffe5af);box-shadow:0 0 6px var(--swatch,#ffe5af)}
.jl-app .color-swatch-multi{width:27px;flex-shrink:0;display:flex;gap:2px}
.jl-app .color-swatch-multi i{display:block;width:8px;height:20px;border-radius:4px;background:var(--swatch);border:1px solid #0000001c}
.jl-app .color-options{border:1px solid #cfdfcf;background:#fff;padding:13px;border-radius:11px;margin:12px 0 0}
.jl-app .color-options[hidden]{display:none}
.jl-app .color-picker-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.86rem;font-weight:650}
.jl-app input[type=color]{display:block;width:49px;height:41px;min-width:49px;border:1px solid #c6d4c8;border-radius:8px;padding:3px;background:#fff;cursor:pointer}
.jl-app .color-demo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border-radius:10px;background:#163e32;color:#e5f1e9;font-size:.78rem}
.jl-app .color-preview{display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-height:18px}
.jl-app .color-preview-dot{height:14px;width:14px;display:inline-block;border-radius:100%;border:1px solid #ffffff90;flex-shrink:0}
.jl-app .color-note{color:var(--muted);font-size:.78rem;margin:10px 1px 0}
.jl-app .nerd-settings{margin-top:12px;border-top:1px solid #dce6dd;padding-top:10px}
.jl-app .nerd-settings summary{cursor:pointer;font-weight:750;color:#245c44;padding:4px 0}
.jl-app .nerd-settings .helper{margin:5px 0 12px}
.jl-app .palette-presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}
.jl-app .palette-presets button,.jl-app .palette-add,.jl-app .palette-move,.jl-app .palette-remove{border:1px solid #bccfbe;border-radius:9px;background:#fff;color:#244735;cursor:pointer;min-height:42px;padding:8px 12px;font-weight:650;font-size:.86rem}
.jl-app .palette-presets button[aria-pressed=true]{background:#e4f1e6;border-color:#2c6950}
.jl-app .palette-rows{display:grid;gap:8px;margin-bottom:12px}
.jl-app .palette-item{display:flex;align-items:center;gap:7px;min-width:0;border:1px solid #dfe9df;border-radius:10px;padding:7px 8px;background:#fafcf9}
.jl-app .palette-item label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-weight:650;font-size:.86rem}
.jl-app .palette-item .palette-tools{display:flex;gap:4px;margin-left:auto}
.jl-app .palette-move,.jl-app .palette-remove{min-width:39px;padding:6px 8px;font-size:1.06rem}
.jl-app .palette-remove{color:#954040}
.jl-app .palette-item button:disabled,.jl-app .palette-add:disabled{opacity:.35;cursor:not-allowed}
.jl-app .palette-add{width:100%;border-style:dashed;background:#f7faf7}
.jl-app .color-options :where(button,input):focus-visible{outline:3px solid #e1a83b;outline-offset:2px}
@media(max-width:770px){.jl-app .color-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:390px){.jl-app .color-panel{padding:12px}.jl-app .color-choice label{font-size:.82rem;gap:6px;padding:7px}.jl-app .palette-item{gap:4px;padding:6px}.jl-app .palette-item label{gap:5px}.jl-app .palette-move,.jl-app .palette-remove{min-width:35px;padding:6px 5px}}

@media(prefers-reduced-motion:reduce){.jl-app :where(*){transition:none!important;animation:none!important}}
/* Wide calculator within the otherwise narrow Joomla article. */
#jl-app{position:relative;width:min(1110px,calc(100vw - 32px));max-width:none;margin:0;left:50%;transform:translateX(-50%)}
/* T4 has a sticky header. Confirm exact offset in Joomla visual QA. */
@media(max-width:770px){#jl-app .mobile-summary{top:var(--jl-sticky-top,76px)}}

/* Keep the calculator's hierarchy and touch controls stable inside Joomla. */
#jl-app .section-heading,#jl-app .result-label{margin-top:0}
#jl-app .group-title{font-size:1rem;line-height:1.4;float:none;width:auto}
#jl-app .palette-move,#jl-app .palette-remove,#jl-app .palette-add,#jl-app .palette-presets button{min-width:44px;min-height:44px}
@media(max-width:430px){
 #jl-app .palette-item{flex-wrap:wrap}
 #jl-app .palette-item label{flex-basis:100%}
 #jl-app .palette-item .palette-tools{justify-content:flex-end;width:100%}
}

#jl-app .helper,#jl-app .color-note,#jl-app .light-spec-note{font-size:.9rem}