/* planner.css (v13, 2026-11-07) — Store Planner. Mood B: riq3 vars (--ink, --acc #E6007E, --acc2 #1f6feb), neon #ff4fa8 on dark. */
.pl-hero{padding:30px 0 22px}
.pl-hero h1{max-width:none}
.pl-hero .lede{margin-bottom:0}
.pl{padding-top:32px}
.pl-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pl-grid{display:grid;grid-template-columns:minmax(300px,360px) 1fr;gap:24px;align-items:start}

/* inputs */
.pl-in{display:grid;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.pl-fs{border:0;margin:0;padding:0;min-width:0}
.pl-fs legend,.pl-fs>label,.pl-size>label:first-child{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:700 .8rem/1.2 Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0 0 10px;padding:0}
.pl-size output{font:800 1rem Montserrat,sans-serif;letter-spacing:0;text-transform:none;color:var(--acc)}
.pl-chips{display:flex;flex-wrap:wrap;gap:7px}
.pl-chips label{position:relative;cursor:pointer}
.pl-chips input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pl-chips span{display:inline-block;border:1px solid var(--line);background:var(--bg2);border-radius:999px;padding:8px 13px;font-size:.86rem;line-height:1.2;color:var(--ink);transition:.15s}
.pl-chips input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.pl-multi input:checked+span{background:var(--acc);border-color:var(--acc)}
.pl-multi input:checked+span::before{content:"✓ "}
.pl-chips input:focus-visible+span{outline:3px solid var(--acc2);outline-offset:2px}
.pl-size input[type=range]{width:100%;accent-color:var(--acc);margin:0;height:28px}
#pl-form .pl-win-note{font-size:.75rem;color:#6e6e73!important;margin:4px 0 0}#pl-form .pl-win-auto{color:#B6461F!important;border:0;background:none;padding:0;margin-left:6px;font:inherit;font-weight:700;color:var(--acc);text-decoration:underline;cursor:pointer}
.pl-scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mute);margin-top:2px}
.pl-exact{white-space:nowrap;display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:.8rem;color:var(--mute);margin-top:8px}
.pl-exact input{width:120px}
.pl-in input[type=date],.pl-in input[type=number],.pl-cod input{font:inherit;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;width:100%;min-height:44px}
.pl-in input:focus-visible,.pl-cod input:focus-visible{outline:3px solid var(--acc2);outline-offset:1px}

/* output: the focal visual */
.pl-out{background:#0d1020;color:rgba(255,255,255,.8);border-radius:var(--r);padding:24px 24px 22px;position:relative;overflow:hidden;min-width:0}
.pl-out::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 260px at 85% 0%,rgba(230,0,126,.22),transparent 70%),radial-gradient(500px 240px at 0% 100%,rgba(31,111,235,.18),transparent 70%);pointer-events:none}
.pl-out>*{position:relative}
.pl-kick{font:700 .74rem Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#ff4fa8;margin:0 0 4px}
.pl-big{font:800 clamp(1.6rem,3vw,2.3rem)/1.1 Montserrat,sans-serif;color:#fff;margin:0}
.pl-sub{margin:6px 0 0;font-size:.92rem;color:rgba(255,255,255,.72)}
.pl-tight{padding:18px 0 8px;display:grid;gap:16px;justify-items:start}
.pl-key{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 10px;font-size:.76rem;color:rgba(255,255,255,.7)}
.pl-key span::before{content:"";display:inline-block;width:18px;height:8px;border-radius:4px;margin-right:6px;vertical-align:middle;background:var(--k)}
.k-both{--k:#c9cede}.k-site{--k:#ff4fa8}.k-shop{--k:#5b9bff}.k-open{--k:#ffd166}
.pl-key .k-open::before{width:3px;height:12px;border-radius:2px}

.pl-gantt{position:relative;--lab:230px;--win:190px;--gap:14px;--open:80%}
.pl-row,.pl-axis{display:grid;grid-template-columns:var(--lab) 1fr var(--win);gap:var(--gap);align-items:center;min-height:36px}
.pl-row{border-top:1px solid rgba(255,255,255,.07)}
.pl-row:hover{background:rgba(255,255,255,.04)}
.pl-lab{display:flex;align-items:baseline;gap:8px;min-width:0;padding:5px 0}
.pl-lab i{font:700 .72rem Montserrat,sans-serif;font-style:normal;color:rgba(255,255,255,.45);flex:none;width:18px}
.pl-lab b{font:600 .84rem/1.25 Roboto,sans-serif;color:#fff}
.pl-trk{position:relative;height:22px}
.pl-axis .pl-trk{height:18px;font-size:.68rem;color:rgba(255,255,255,.5)}
.pl-axis .pl-trk span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.pl-axis .pl-win{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.pl-bar{position:absolute;top:5px;height:12px;border-radius:6px;background:var(--b,#c9cede);transform:scaleX(0);transform-origin:right center;transition:transform .55s cubic-bezier(.2,.7,.2,1),left .4s ease,width .4s ease}
.pl-gantt.drawn .pl-bar{transform:scaleX(1)}
.l-site{--b:#ff4fa8}.l-shop{--b:#5b9bff}.l-both{--b:#c9cede}
.l-span{--b:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 6px,transparent 6px 10px)}
.l-span .pl-bar{height:4px;top:9px}
.pl-row.post .pl-bar{opacity:.45}
.pl-row[data-no="16"] .pl-bar{background:linear-gradient(90deg,#c9cede,transparent)}
.pl-win{display:grid;font-size:.74rem;line-height:1.25;color:rgba(255,255,255,.82);white-space:nowrap;min-width:0}
.pl-win small{font-size:.66rem;color:rgba(255,255,255,.5);overflow:hidden;text-overflow:ellipsis}
.pl-open{position:absolute;top:0;bottom:0;left:calc(var(--lab) + var(--gap) + (100% - var(--lab) - var(--win) - 2 * var(--gap)) * var(--open) / 100%);width:2px;background:#ffd166;box-shadow:0 0 12px rgba(255,209,102,.6);pointer-events:none}
.pl-open em{position:absolute;top:-1px;left:5px;font:700 .62rem/1.4 Montserrat,sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#ffd166;background:#0d1020;padding:0 4px}
.pl-disc{margin:16px 0 0;font-size:.82rem;color:rgba(255,255,255,.7)}
.pl-disc b{color:#fff}
.pl-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pl-out .btn-o{color:#fff}.pl-out .btn-o:hover{background:#fff;color:var(--ink)}

/* cost of delay line */
.pl-cod{margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px 14px;align-items:end;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.pl-cod-h{grid-column:1/-1;margin:0;font:800 1rem Montserrat,sans-serif;color:var(--ink)}
.pl-cod label{display:grid;gap:5px;font-size:.78rem;color:var(--ink2)}
.pl-cod-o{grid-column:1/5;margin:0;font-size:.95rem;color:var(--ink2)}
.pl-cod-o b{font:800 1.15rem Montserrat,sans-serif;color:var(--acc)}
.pl-cod-o i{font-style:normal}
.pl-cod-more{grid-column:5;justify-self:end;font-weight:700;font-size:.88rem;white-space:nowrap}

.pl-sheet{display:none}

@media (max-width:1100px){.pl-grid{grid-template-columns:1fr}}
@media (max-width:760px){
 .pl-hero{padding:28px 0 18px}
 .pl{padding-top:18px}
 .pl-in{padding:16px}
 .pl-out{padding:18px 14px}
 .pl-gantt{--lab:0px;--win:0px;--gap:0px}
 .pl-row{grid-template-columns:1fr auto;grid-template-areas:"lab win" "trk trk";gap:0 10px;padding:6px 0 4px}
 .pl-axis{grid-template-columns:1fr;min-height:20px}
 .pl-axis .pl-lab,.pl-axis .pl-win{display:none}
 .pl-lab{grid-area:lab;padding:0}
 .pl-win{grid-area:win;text-align:right;align-self:baseline}
 .pl-win small{display:none}
 .pl-trk{grid-area:trk;height:18px}
 .pl-bar{top:4px;height:10px}
 .pl-lab b{font-size:.8rem}
 .pl-open{left:var(--open)}
 .pl-axis .pl-trk{grid-area:auto}
 .pl-lab b,.pl-win span{position:relative;z-index:1;background:#0d1020;padding:0 3px}
 .pl-open em{right:6px;left:auto}
 .pl-cod{grid-template-columns:1fr 1fr;padding:16px}
 .pl-cod-o{grid-column:1/-1}
 .pl-cod-more{grid-column:1/-1;justify-self:start}
 .pl-acts .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.pl-bar,.pl-win{transition:none}}

/* print: branded plan sheet only (pattern of pages/my-selection.html) */
@media print{
 @page{size:A4;margin:14mm}
 body{background:#fff}
 .hdr,.ftr,.fab,.stg,.ctaband,.jump,.ckb,#ckb,.skip,.wa,main>section,.hdr2:before{display:none!important}
 body,body:has(#ckb:not([hidden])){padding:0!important}
 main{padding:0}
 .pl-sheet{display:block;font:11.5px/1.45 Roboto,Arial,sans-serif;color:#111522}
 .pl-sh-hd{display:flex;gap:16px;align-items:center;border-bottom:3px solid #E6007E;padding-bottom:10px;margin-bottom:12px}
 .pl-sh-hd h1{font-size:20px;margin:0}.pl-sh-hd p{margin:0}.pl-sh-hd .eyebrow{margin:0 0 2px}
 .pl-sh-in{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 16px;margin:0 0 10px}
 .pl-sh-in dt{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:#6b7285}.pl-sh-in dd{margin:0;font-weight:700}
 .pl-sh-disc{border:1px solid #f5a524;background:#fff4e0;border-radius:6px;padding:6px 10px;margin:0 0 10px}
 .pl-sh-tbl{width:100%;border-collapse:collapse}
 .pl-sh-tbl th,.pl-sh-tbl td{text-align:left;padding:4px 6px;border-bottom:1px solid #e3e6ee;vertical-align:top}
 .pl-sh-tbl th{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:#6b7285}
 .pl-sh-tbl tr{break-inside:avoid}
 .pl-sh-bar{display:block;position:relative;height:6px;background:#eceff6;border-radius:3px;margin-top:3px;width:150px}
 .pl-sh-bar i{position:absolute;top:0;height:6px;border-radius:3px;background:#9aa2b8}
 .pl-sh-bar.l-site i{background:#E6007E}.pl-sh-bar.l-shop i{background:#1f6feb}.pl-sh-bar.l-span i{background:#6b7285;height:2px;top:2px}
 .pl-sh-bar b{position:absolute;top:-2px;width:2px;height:10px;background:#d99a00}
 .pl-sheet,.pl-sheet *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .pl-sh-ft{margin-top:12px;display:grid;gap:3px;border-top:1px solid #e3e6ee;padding-top:8px}
}