/* Plan an outfit for a later day. Additive: one pill on the Home board and one sheet. */
.plan-pill { position:absolute; top:12px; left:12px; z-index:9; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); font:inherit; font-size:14px; font-weight:700; box-shadow:0 2px 8px rgba(32,34,31,.1); cursor:pointer; }
.plan-pill svg { flex:none; color:var(--ink); }
.plan-pill.on { background:var(--hero); border-color:var(--hero); color:var(--on-hero); }
.plan-pill.on svg { color:var(--on-hero); }
.plan-pill:focus-visible, .plan-day:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
/* Short screens: the weather and style rails reach the top of the board, so sit the pill between them. */
@media(max-height:700px) { .plan-pill { top:8px; left:52px; width:40px; height:40px; padding:0; } }
.plan-look { margin:4px 0 6px; }
.plan-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin:6px 0 4px; }
.plan-day { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:72px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); color:var(--ink); font:inherit; cursor:pointer; }
.plan-day small { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.plan-day b { font-size:19px; font-weight:700; }
@media(max-width:359px) { .plan-day small { font-size:10px; letter-spacing:0; } .plan-day b { font-size:16px; } .plan-days { gap:4px; } }
.plan-day[aria-pressed="true"] { background:var(--hero); border-color:var(--hero); color:var(--on-hero); }
.plan-day[aria-pressed="true"] small { color:var(--on-hero); opacity:.8; }
.plan-day .plan-dot { position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:99px; background:#c9833f; }
.plan-legend { display:flex; align-items:center; gap:8px; margin:10px 2px 14px; font-size:12px; color:var(--muted); }
.plan-legend .plan-dot { width:7px; height:7px; border-radius:99px; background:#c9833f; display:inline-block; }
.outfit-plan { position:absolute; top:18px; left:18px; z-index:2; display:flex; align-items:center; min-height:38px; padding:0 13px; border-radius:99px; background:rgba(255,255,255,.85); color:#20221f; font-size:13px; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.12); cursor:pointer; }
.outfit-plan:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.cal-day.cal-planned { position:relative; opacity:1; }
.cal-day.cal-planned::after { content:''; position:absolute; inset:2px; border:2px dashed var(--hero); border-radius:inherit; pointer-events:none; z-index:3; }