/* Scope Studio · PERIOD picker (pp-) — presets, compare, painted calendar, refine, readout, quick menu */
.pp{display:flex;flex-direction:column;gap:14px;min-width:0;color:var(--ink);font-size:13px}
.pp-h{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#7b93a3;line-height:1.2}
.pp-mut{color:var(--mut)}
.pp kbd,.pp-qm kbd{font-family:inherit;font-size:10px;font-weight:600;line-height:14px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:#fbfcfd;color:#5a7686}

/* ── presets / rolling / compare ── */
.pp-top{display:flex;flex-direction:column;gap:10px}
.pp-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;min-width:0}
.pp-top .pp-row>.pp-h{flex:0 0 76px}
.pp-presets{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.pp-pre{font-weight:600}
.pp-pre .pp-cd{font-weight:500;color:#3f6378}
.pp-rollrow{margin-top:-4px}
.pp-switch{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:4px 6px 4px 0;border-radius:6px;font-size:12.5px;font-weight:600;color:#2a4250;cursor:pointer}
.pp-tr{position:relative;flex:0 0 auto;width:30px;height:18px;border-radius:9px;background:#c4d2db;transition:background .15s}
.pp-tr::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(6,20,30,.3);transition:transform .15s}
.pp-switch[aria-checked="true"] .pp-tr{background:var(--navy)}
.pp-switch[aria-checked="true"] .pp-tr::after{transform:translateX(12px)}
.pp-note{font-size:12px;color:var(--mut)}
.pp-note.hot{color:#2a4250;font-weight:600}
.pp-cmpw{display:inline-flex;align-items:center;gap:8px}
.pp-cmp button{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.pp-cmp button+button{border-left:1px solid var(--line)}
.pp-cmp button.on+button,.pp-cmp button+button.on{border-left-color:var(--navy)}
.pp-cmp .pp-s{display:none}
.pp-swap{padding:6px 10px}
.pp-swap span[aria-hidden]{font-size:14px;line-height:1}
.pp-bhint{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#5a7686}

/* A / B letter tags (A = navy, B = second categorical colour; ghost = dashed ring) */
.pp-tag{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:18px;height:18px;border-radius:50%;font-size:10.5px;font-weight:800;line-height:1;color:#fff}
.pp-tag.a{background:var(--navy)}
.pp-tag.b{background:var(--st-set-2)}
.pp-tag.b.gh{background:#fff;color:#a63e12;border:1.5px dashed var(--st-set-2)}
.pp-tag.none{background:#eef2f5;color:#9fb2bf}

/* ── calendar card ── */
.pp-calw{min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px 14px 10px;background:#fff}
.pp-calhd{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:10px}
.pp-paint button{padding:6px 11px}
.pp-paint button+button{border-left:1px solid var(--line)}
.pp-legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-left:auto;font-size:11.5px;color:#5a7686}
.pp-lg{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pp-lg b{color:var(--ink);font-weight:700}
.pp-ramp{display:inline-flex;gap:2px}
.pp-ramp i{display:block;width:12px;height:12px;border-radius:3px}
.pp-empty{display:inline-flex;align-items:center;gap:6px;color:#5a7686;white-space:normal}
.pp-sw{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:12px;height:12px;border-radius:3px;overflow:hidden;font-size:8px;font-style:normal;line-height:1}
.pp-sw.hol{background:var(--st-seq-2);color:#0b0b0b}
.pp-sw.closed{background:#e3e9ed;color:#7b93a3}
.pp-sw.out{background:var(--st-seq-2)}
.pp-sw.out::after,.pp-c.out::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(14,39,51,.62) 0 1.2px,rgba(255,255,255,.5) 1.2px 2.4px,transparent 2.4px 4.4px)}
.pp-sw.today{background:#eef2f5;box-shadow:inset 0 0 0 1.5px var(--ink),inset 0 0 0 2.5px #fff}

.pp-arm{display:none}
.pp-arm.on{display:flex;align-items:center;gap:8px;margin:-2px 0 10px;padding:6px 6px 6px 10px;border-radius:9px;background:#eaf3f7;color:var(--navy);font-size:12.5px;font-weight:600}
.pp-arm.on.b{background:#fdf0ea;color:#8f3510}
.pp-armx{margin-left:auto;padding:4px 8px;font-size:12px;color:inherit}

.pp-cal{width:100%;contain:inline-size;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pp-arming .pp-c[data-i]{cursor:crosshair}

/* ── cells (shared) ── */
.pp-c{position:relative;border-radius:3px;background:#eef2f5}
.pp-c[data-i]{cursor:pointer}
.pp-c.t0{background:var(--st-seq-1)}.pp-c.t1{background:var(--st-seq-2)}.pp-c.t2{background:var(--st-seq-3)}.pp-c.t3{background:var(--st-seq-4)}.pp-c.t4{background:var(--st-seq-5)}
.pp-c.tn{background:#eef2f5}
.pp-c.closed{background:#e3e9ed}
.pp-c.blank{visibility:hidden}
.pp-c.fut{background:transparent;box-shadow:inset 0 0 0 1px #e1e8ed}
.pp-c.mx{opacity:.28}
.pp-c i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;line-height:1;color:#0b0b0b;pointer-events:none;z-index:1}
.pp-c.ink i{color:#fff}
.pp-c.closed i{color:#7b93a3}

/* ── desktop: week columns × weekday rows ── */
.pp-hz{overflow-x:auto;overflow-y:hidden;padding-top:2px;scrollbar-width:thin}
.pp-hzin{position:relative}
.pp-mrow,.pp-wrow{position:relative;margin-left:var(--lw)}
.pp-mrow{height:16px}
.pp-wrow{height:14px}
.pp-mon{position:absolute;top:0;margin-left:-3px;padding:0 3px;border:0;border-radius:4px;background:none;font-size:10.5px;font-weight:600;line-height:16px;color:#5a7686;white-space:nowrap;cursor:pointer}
.pp-mon:hover{background:#eaf3f7;color:var(--navy)}
.pp-wk{position:absolute;top:0;bottom:2px;width:var(--p);cursor:pointer}
.pp-wk::after{content:'';position:absolute;left:calc(var(--c) / 2 - 1px);bottom:1px;width:2px;height:3px;border-radius:1px;background:#d9e3ea}
.pp-wk:hover::after{height:6px;background:var(--navy)}
.pp-wl{position:absolute;top:-1px;z-index:2;display:none;transform:translateX(-50%);padding:0 5px;border-radius:4px;background:var(--navy);color:#fff;font-size:9.5px;font-weight:700;line-height:13px;white-space:nowrap;pointer-events:none}
.pp-body{display:flex}
.pp-rlab{flex:0 0 var(--lw);display:grid;grid-template-rows:repeat(7,var(--c));row-gap:var(--g);align-content:start}
.pp-rl{height:var(--c);margin-left:-3px;padding:0 3px;border:0;border-radius:3px;background:none;font-size:9.5px;font-weight:600;line-height:var(--c);text-align:left;color:#7b93a3;cursor:pointer}
.pp-hz .pp-rl{width:calc(var(--lw) - 2px)}
.pp-rl:hover{background:#eaf3f7;color:var(--navy)}
.pp-rl.on{color:var(--navy);font-weight:800}
.pp-rl.off{color:#b9c8d2;text-decoration:line-through}
.pp-gridw{position:relative;padding-bottom:34px}
.pp-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,var(--c));grid-auto-columns:var(--c);gap:var(--g);width:max-content;touch-action:pan-x pan-y}
.pp-hz .pp-c{width:var(--c);height:var(--c)}
.pp-hz .pp-c i{font-size:calc(var(--c) * .68)}
.pp-hz .pp-c.today{box-shadow:inset 0 0 0 1.5px var(--ink),inset 0 0 0 2.5px #fff}
.pp-hz .pp-c[data-i]:hover{outline:1.5px solid var(--ink);outline-offset:0;z-index:2}
.pp-ov{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.pp-oa{fill:none;stroke:var(--navy);stroke-width:2;stroke-linejoin:round}
.pp-ob{fill:none;stroke:var(--st-set-2);stroke-width:2;stroke-linejoin:round}
.pp-ob.gh{stroke-width:1.75;stroke-dasharray:4 3}
.pp-ob.hx{stroke-width:3;stroke-dasharray:1.5 1.5}
.pp-pv{fill:rgba(12,61,94,.06);stroke:var(--navy);stroke-opacity:.55;stroke-width:1.5;stroke-dasharray:1 3;stroke-linecap:round}
.pp-ln{stroke-width:3;stroke-linecap:round}
.pp-ln.a{stroke:var(--navy)}
.pp-ln.b{stroke:var(--st-set-2)}
.pp-ln.b.gh{stroke-width:2.5;stroke-dasharray:4 3}
.pp-ln.b.hx{stroke-width:4;stroke-dasharray:1.5 1.5;stroke-linecap:butt}
.pp-lc.a{fill:var(--navy)}
.pp-lc.b{fill:var(--st-set-2)}
.pp-lc.b.gh{fill:#fff;stroke:var(--st-set-2);stroke-width:1.5;stroke-dasharray:2.5 1.5}
.pp-lt{fill:#fff;font-size:8.5px;font-weight:800;text-anchor:middle;dominant-baseline:central}
.pp-lc.b.gh+.pp-lt{fill:#a63e12}

/* ── phone / narrow: month blocks, rows = weeks, 7 columns ── */
.pp-vscroll{position:relative;max-height:min(440px,58vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin}
.pp-vhead,.pp-vgrid{display:grid;grid-template-columns:30px repeat(7,minmax(0,1fr));gap:3px}
.pp-vhead{padding-bottom:4px;border-bottom:1px solid var(--line);overflow:hidden;scrollbar-gutter:stable;scrollbar-width:thin}
.pp-vt .pp-rl{height:28px;margin:0;padding:0;font-size:11px;line-height:28px;text-align:center;border-radius:6px}
.pp-vm{margin-bottom:8px}
.pp-vm .pp-mon{position:sticky;top:0;z-index:4;display:block;width:100%;margin:0;padding:9px 2px 6px;border-radius:0;background:#fff;font-size:13px;font-weight:700;line-height:1.2;text-align:left;color:var(--ink)}
.pp-vm .pp-mon:hover{background:#fff;color:var(--navy);text-decoration:underline}
.pp-vwk{padding:0;border:0;border-radius:6px;background:none;font-size:9.5px;font-weight:600;color:#9fb2bf;cursor:pointer}
.pp-vwk:hover{background:#eaf3f7;color:var(--navy)}
.pp-vt .pp-c{display:flex;align-items:center;justify-content:center;height:40px;border-radius:8px}
.pp-vt .pp-c i{inset:3px 4px auto auto;display:block;font-size:9px}
.pp-vt .pp-c[data-i]:hover{background-image:linear-gradient(rgba(14,39,51,.1),rgba(14,39,51,.1))}
.pp-vt .pp-c.pre{background:transparent}
.pp-dn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:12.5px;font-weight:600;line-height:1;color:#0b0b0b}
.pp-vt .pp-c.ink .pp-dn{color:#fff}
.pp-vt .pp-c.pre .pp-dn,.pp-vt .pp-c.fut .pp-dn{color:#b9c8d2;font-weight:500}
.pp-vt .pp-c.today .pp-dn{box-shadow:0 0 0 1.5px var(--ink);background:rgba(255,255,255,.55);color:#0b0b0b}
.pp-vt .pp-c.inP{box-shadow:inset 0 0 0 2px rgba(12,61,94,.4)}
.pp-vt .pp-c.inA{box-shadow:inset 0 0 0 2px var(--navy)}
.pp-vt .pp-c.a0,.pp-vt .pp-c.a1{box-shadow:inset 0 0 0 3px var(--navy)}
.pp-vt .pp-c.inB{outline:2px dashed var(--st-set-2);outline-offset:-6px}
.pp-vt .pp-c.inB.bc{outline-style:dotted;outline-width:3px}
.pp-vt .pp-c.pend{box-shadow:inset 0 0 0 3px var(--navy),0 0 0 2px #fff,0 0 0 4px var(--navy)}
.pp-vt .pp-c[data-tag]::before{content:attr(data-tag);position:absolute;left:3px;top:3px;z-index:2;padding:0 3px;border-radius:4px;background:var(--navy);color:#fff;font-size:9px;font-weight:800;line-height:12px}
.pp-vt .pp-c[data-tag="B"]::before{background:var(--st-set-2)}
.pp-vt .pp-c[data-tag="AB"]::before{background:linear-gradient(90deg,var(--navy) 50%,var(--st-set-2) 50%)}

.pp-say{min-height:18px;margin-top:6px;font-size:12px;line-height:1.45;color:#5a7686}
.pp-say b{color:var(--ink)}

/* ── refine ── */
.pp-ref{display:flex;flex-direction:column;gap:8px}
.pp-reft{display:inline-flex;align-items:center;gap:10px;padding:4px 6px 4px 0;border:0;border-radius:6px;background:none;font-size:12.5px;color:#2a4250;cursor:pointer}
.pp-reft .pp-h{width:76px;text-align:left}
.pp-refs{font-weight:600}
.pp-car{font-size:11px;color:#7b93a3}
.pp-mchip{padding:4px 10px}
.pp-refb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-left:86px}
.pp-wds{display:inline-flex;gap:4px}
.pp-wd{width:34px;height:30px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:12px;font-weight:700;color:#7b93a3;cursor:pointer}
.pp-wd:hover{border-color:#c7d6df}
.pp-wd.on{border-color:var(--navy);background:var(--navy);color:#fff}
.pp-wq{display:inline-flex;gap:2px}
.pp-wq .st-btn{padding:5px 8px;font-size:12px;color:var(--navy)}
.pp-refn{flex-basis:100%;font-size:11.5px;color:var(--mut)}
.pp-refn.hot{color:#2a4250;font-weight:600}

/* ── readout ── */
.pp-ro{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--st-raise)}
.pp-rl1{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px;line-height:1.4}
.pp-rd{font-weight:700;color:var(--ink)}
.pp-rm{color:#3f5a69}
.pp-rm b{color:var(--ink)}
.pp-rnone .pp-rm{color:var(--mut)}
.pp-dl{display:inline-flex;align-items:center;gap:4px;font-size:12px}
.pp-rfoot{font-size:11px;color:var(--mut)}

/* ── day tooltip ── */
.pp-tip{position:fixed;z-index:1001;display:none;max-width:290px;padding:8px 10px;border-radius:9px;background:#0e2733;color:#fff;font-size:12px;line-height:1.45;box-shadow:0 6px 20px rgba(6,20,30,.28);pointer-events:none}
.pp-tip b{font-weight:700}
.pp-tip .pp-th{color:#ffd88a}
.pp-tip .pp-to{display:flex;align-items:flex-start;gap:6px;color:#ffc9b5}
.pp-tip .pp-to .pp-sw{margin-top:3px}
.pp-tip .pp-mut{color:#9fb2bf}

/* ── quick menu ── */
.pp-qm{width:330px;padding:6px}
.pp-qm .it.pp-qi{display:grid;grid-template-columns:16px minmax(0,1fr) auto 18px;align-items:center;gap:8px}
.pp-qck{font-size:12px;font-weight:800;text-align:center;color:var(--navy)}
.pp-ql{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pp-qi.on .pp-ql{font-weight:700;color:var(--navy)}
.pp-qd{font-size:11.5px;white-space:nowrap;color:var(--mut)}
.pp-qk{text-align:center}
.pp-qedit .pp-ql{font-weight:600;color:var(--navy)}
.pp-qnote{padding:2px 10px 4px 34px;font-size:11.5px;color:#5a7686}
.pp-qback{position:fixed;inset:0;z-index:949;background:rgba(6,20,30,.4)}
.pp-qm.pp-sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-height:80vh;border-radius:16px 16px 0 0;padding:4px 8px calc(10px + env(safe-area-inset-bottom))}
.pp-sheet .it{min-height:44px}
.pp-sheet .pp-qk{visibility:hidden}
.pp-qgrab{width:40px;height:4px;margin:6px auto 4px;border-radius:2px;background:#d5e0e7}

/* keyboard focus ring wins over hover / B outline */
.pp-cal .pp-c[data-i]:focus-visible{outline:2px solid var(--st-ring);outline-offset:1px;z-index:3}

/* ── narrow container on a wide screen (e.g. the ~480px setup pane): compact compare row ── */
.pp-nw .pp-cmpw{display:flex;flex:1 1 280px;min-width:0}
.pp-nw .pp-cmp{display:flex;flex:1;min-width:0}
.pp-nw .pp-cmp button{flex:1;padding:7px 6px}
.pp-nw .pp-cmp .pp-l{display:none}
.pp-nw .pp-cmp .pp-s{display:inline}
.pp-nw .pp-legend{margin-left:0}
.pp-nw .pp-refb{padding-left:0}

/* ── phone ≤760px ── */
@media (max-width:760px){
  .pp{gap:12px}
  .pp-top .pp-row{flex-direction:column;align-items:stretch;gap:6px}
  .pp-top .pp-row>.pp-h{flex:none}
  .pp-presets{flex-wrap:nowrap;overflow-x:auto;padding:2px 1px 4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pp-presets::-webkit-scrollbar{display:none}
  .pp-pre{min-height:44px;padding:0 14px;font-size:13px;scroll-snap-align:start}
  .pp-top .pp-rollrow{flex-direction:row;align-items:center;flex-wrap:wrap}
  .pp-rollrow>.pp-h{display:none}
  .pp-switch{min-height:44px}
  .pp-cmpw{display:flex;width:100%}
  .pp-cmp{display:flex;flex:1}
  .pp-cmp button{flex:1;min-height:44px;padding:6px 4px}
  .pp-cmp .pp-l{display:none}
  .pp-cmp .pp-s{display:inline}
  .pp-swap{min-width:44px;min-height:44px;justify-content:center}
  .pp-swap .pp-l{display:none}
  .pp-calw{padding:10px 10px 8px}
  .pp-calhd{flex-direction:column;align-items:stretch}
  .pp-calhd .pp-paint{display:flex}
  .pp-paint button{flex:1;min-height:40px}
  .pp-legend{margin-left:0;gap:6px 12px}
  .pp-vt .pp-c{height:44px}
  .pp-vt .pp-rl{height:34px;line-height:34px}
  .pp-arm.on{min-height:44px}
  .pp-armx{min-height:36px}
  .pp-reft{min-height:44px}
  .pp-refb{padding-left:0}
  .pp-wds{display:flex;width:100%}
  .pp-wd{flex:1;width:auto;height:44px}
  .pp-wq .st-btn{min-height:40px}
  .pp-rl1{font-size:12.5px}
}