/* ═════════════════════════════════════════════════════════════
   Sweetlab × Y2K — TRIAL on the recipes section only (#recipes.y2k).
   Base = Cocoa + Warm Cream + Olive. Pink (Dusty / Soft / Deep Rose) is a
   SUPPORTING accent only: hard shadows, tiny tags, dots, the progress bar —
   target ≤10% of the section's area (measured in tools/pink_share.py).
   Pink may be far more prominent only inside the future "PC games" section.
   No Amber, no Honey, no Burnt Brown here (they don't pair with pink by default).
   Roll-out = add the `y2k` class to another section. Remove = delete this file
   + the `y2k` class; the store falls back to the base styles.
   Contrast (measured): cocoa on soft-rose 5.3 · cocoa on cream 8.4 · cream on
   cocoa 8.4. Deep Rose is used for fills/shadows/focus only, never small text.
   ═════════════════════════════════════════════════════════════ */
.rc-sec.y2k{
  --y-cocoa:#6E351F;--y-cream:#FFEDD2;--y-olive:#8F7C34;
  --y-dusty:#C98F91;--y-soft:#E5B6B5;--y-deep:#A85F68;
  --y-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;
  background-color:var(--y-cream);
  background-image:radial-gradient(circle,color-mix(in srgb,var(--y-dusty) 55%,transparent) 1.2px,transparent 1.7px);
  background-size:18px 18px;
  color:var(--y-cocoa);
}

/* header */
.rc-sec.y2k .eyebrow{display:inline-flex;background:var(--y-cocoa);color:var(--y-cream);padding:5px 10px 5px 12px;border-radius:2px;font:700 11.5px/1 var(--y-mono);letter-spacing:.14em;box-shadow:3px 3px 0 var(--y-dusty)}
.rc-sec.y2k .eyebrow::before{border-radius:0;background:var(--y-dusty);width:8px;height:8px}
.rc-sec.y2k .h2{color:var(--y-cocoa)}
.rc-sec.y2k .h2::after{content:'';display:inline-block;width:.42em;height:.72em;margin-inline-start:.32em;transform:translateY(.06em);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 17'%3E%3Cpath d='M.5.5v14l3.5-3.2 2.4 5.4 2-.9-2.4-5.3h4.5z' fill='%23FFEDD2' stroke='%236E351F'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:y2k-nudge 2.8s steps(2,end) infinite}
.rc-sec.y2k .lede{color:var(--y-cocoa)!important}

/* window chrome (cards + detail) */
.y2k-win{border:2px solid var(--y-cocoa);border-radius:6px;background:var(--y-cream);overflow:hidden}
.y2k-bar{display:flex;align-items:center;gap:10px;height:30px;padding:0 8px;background:var(--y-cocoa);color:var(--y-cream);direction:ltr;font:700 11px/1 var(--y-mono);letter-spacing:.1em}
.y2k-dots{display:flex;gap:4px;font-style:normal}
.y2k-dots b{width:8px;height:8px;background:var(--y-dusty);border:1px solid var(--y-cream)}
.y2k-dots b:nth-child(2){background:var(--y-soft)}.y2k-dots b:nth-child(3){background:var(--y-olive)}
.y2k-name{white-space:nowrap}
.y2k-x{margin-left:auto;margin-right:-8px;align-self:stretch;min-width:40px;display:grid;place-items:center;border:0;border-left:2px solid var(--y-cream);background:var(--y-cream);color:var(--y-cocoa);cursor:pointer}
.y2k-x .ic{width:16px;height:16px;stroke-width:3}
.y2k-x:hover{background:var(--y-dusty)}

/* recipe cards = small windows */
body .rc-sec.y2k .rc-card{flex:0 0 min(78vw,250px);display:flex;flex-direction:column;padding:0;background:var(--y-cream);border:2px solid var(--y-cocoa)!important;border-radius:6px;box-shadow:4px 4px 0 var(--y-dusty);text-align:start;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
body .rc-sec.y2k .rc-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--y-dusty)}
body .rc-sec.y2k .rc-card:has(.rc-open[aria-expanded="true"]){box-shadow:4px 4px 0 var(--y-deep)}
.rc-open{display:block;width:100%;flex:1;padding:0;border:0;background:none;color:var(--y-cocoa);font:inherit;text-align:start;cursor:pointer}
.rc-open:focus-visible,.y2k-step:focus-visible,.y2k-x:focus-visible{outline:3px solid var(--y-deep);outline-offset:-3px}
.y2k-shot{display:block;border-bottom:2px solid var(--y-cocoa);background:color-mix(in srgb,var(--y-olive) 16%,var(--y-cream))}
.rc-sec.y2k .y2k-shot img,.rc-sec.y2k .y2k-shot .rc-ph{display:block;width:100%;height:132px;object-fit:cover}
.rc-sec.y2k .rc-card .rc-ph{background:color-mix(in srgb,var(--y-olive) 16%,var(--y-cream)) conic-gradient(color-mix(in srgb,var(--y-olive) 22%,transparent) 25%,transparent 0 50%,color-mix(in srgb,var(--y-olive) 22%,transparent) 0 75%,transparent 0) 0 0/14px 14px}
.rc-sec.y2k .rc-body{display:block;padding:12px 14px 16px}
.rc-sec.y2k .rc-name{display:block;font:700 15px/1.4 var(--font-ui);color:var(--y-cocoa);margin-bottom:4px}
.rc-sec.y2k .rc-sum{display:block;font:500 12.5px/1.65 var(--font-ui);color:var(--y-cocoa)}
.rc-sec.y2k .rc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rc-sec.y2k .rc-meta span{font:700 11.5px/1 var(--font-ui);padding:4px 7px;border:1.5px solid var(--y-cocoa);border-radius:2px;color:var(--y-cocoa);background:transparent}

/* detail window */
body .rc-sec.y2k .rc-detail{background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin:18px 0 0}
.rc-sec.y2k .y2k-big{box-shadow:6px 6px 0 var(--y-dusty)}
.y2k-content{padding:18px 18px 22px;font-family:var(--font-ui);color:var(--y-cocoa)}
.rc-sec.y2k .rc-detail h4{font:700 clamp(22px,5vw,28px)/1.3 var(--font-display);color:var(--y-cocoa);margin:0 0 6px;outline:none}
.rc-sec.y2k .rc-detail .rc-lead{font:500 14px/1.8 var(--font-ui);color:var(--y-cocoa)}
.rc-sec.y2k .rc-detail h5{display:flex;align-items:center;gap:10px;font:700 14.5px/1.2 var(--font-ui);color:var(--y-cocoa);margin:20px 0 10px;letter-spacing:0}
.y2k-tag{direction:ltr;font:700 10.5px/1 var(--y-mono);letter-spacing:.12em;padding:3px 6px;border:1.5px solid var(--y-cocoa);background:var(--y-cream);color:var(--y-cocoa)}

/* inventory (ingredients) */
.y2k-inv{list-style:none;margin:0;padding:0;display:grid;gap:6px 18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.rc-sec.y2k .rc-detail .y2k-inv{padding:0;color:var(--y-cocoa)}
.y2k-inv li{position:relative;padding-inline-start:20px;font:500 14px/1.8 var(--font-ui)}
.y2k-inv li::before{content:'';position:absolute;inset-inline-start:0;top:.62em;width:9px;height:9px;background:var(--y-dusty);border:1.5px solid var(--y-cocoa)}

/* steps = checklist + loading bar */
.y2k-meter-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;direction:ltr}
.y2k-meter{position:relative;flex:1;height:18px;border:2px solid var(--y-cocoa);background:var(--y-cream);--p:0}
.y2k-fill{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) * var(--p));
  background:repeating-linear-gradient(90deg,var(--y-deep) 0 8px,transparent 8px 10px);transition:width .28s steps(6,end)}
.y2k-meter.is-done .y2k-fill{background:repeating-linear-gradient(90deg,var(--y-olive) 0 8px,transparent 8px 10px)}
.y2k-count{font:700 12px/1 var(--y-mono);letter-spacing:.06em;min-width:3.2em;text-align:end}
.y2k-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rc-sec.y2k .rc-detail .y2k-steps{padding:0}
.y2k-step{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:46px;padding:10px 12px;border:1.5px solid var(--y-cocoa);border-radius:4px;background:var(--y-cream);color:var(--y-cocoa);font:500 14px/1.7 var(--font-ui);text-align:start;cursor:pointer;box-shadow:2px 2px 0 var(--y-olive);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.y2k-step:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--y-olive)}
.y2k-box{flex:none;position:relative;width:20px;height:20px;margin-top:2px;border:2px solid var(--y-cocoa);background:var(--y-cream)}
.y2k-step[aria-pressed="true"]{background:color-mix(in srgb,var(--y-olive) 14%,var(--y-cream))}
.y2k-step[aria-pressed="true"] .y2k-box{background:var(--y-cocoa)}
.y2k-step[aria-pressed="true"] .y2k-box::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--y-cream);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.y2k-step[aria-pressed="true"] span:last-child{text-decoration:line-through;text-decoration-thickness:1.5px}

.rc-sec.y2k .rc-tip{margin-top:18px;border:1.5px dashed var(--y-cocoa);border-radius:4px;background:color-mix(in srgb,var(--y-olive) 10%,var(--y-cream));color:var(--y-cocoa)}

/* add-to-cart panel */
.y2k-buy{margin-top:22px;padding-top:16px;border-top:2px dashed var(--y-cocoa)}
.y2k-pick{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
body .rc-sec.y2k .size-btn{box-shadow:2px 2px 0 var(--y-olive);border-radius:4px;border-color:var(--y-cocoa)!important}
body .rc-sec.y2k .size-btn:hover{box-shadow:3px 3px 0 var(--y-olive)}
body .rc-sec.y2k .size-btn.selected{box-shadow:2px 2px 0 var(--y-dusty)}
body .rc-sec.y2k .size-btn:focus-visible,body .rc-sec.y2k .btn:focus-visible{outline:3px solid var(--y-deep);outline-offset:2px}
.y2k-buy-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
.y2k-hint{font:600 13.5px var(--font-ui)}
body .rc-sec.y2k .add-btn.y2k-start{--btn-bg:var(--y-cocoa);--btn-ink:var(--y-cream);--btn-ofs:var(--y-dusty);border-radius:4px;border-color:var(--y-cocoa)!important}
.y2k-cursor{width:11px;height:19px;flex:none;margin-inline-end:2px;transform:translateY(1px)}
body .rc-sec.y2k .add-btn.y2k-start:hover .y2k-cursor{animation:y2k-nudge .5s steps(2,end) 2}

@keyframes y2k-nudge{50%{transform:translate(-3px,3px)}}
@media (max-width:420px){.y2k-content{padding:16px 14px 20px}.y2k-name{font-size:10px}}
@media (prefers-reduced-motion:reduce){
  .rc-sec.y2k .h2::after,body .rc-sec.y2k .add-btn.y2k-start:hover .y2k-cursor{animation:none}
  .y2k-fill,.y2k-step,body .rc-sec.y2k .rc-card{transition:none}
}