/* Wish-list tags page (wishlists.html). Uses the site colors from site.css. */
.wl{--band:var(--brick);--gold:var(--ochre);--tagpaper:#FFF9EE;--tagink:#2A211A;--soft:#F7ECD6}
@media (prefers-color-scheme: dark){.wl{--tagpaper:var(--card);--tagink:var(--ink);--soft:#3A321F}}

.wl-top{display:grid;gap:22px;align-items:start;margin-bottom:22px}
@media(min-width:880px){.wl-top{grid-template-columns:1.4fr 1fr;gap:34px}}
.wl-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.wl-steps li{counter-increment:s;padding-left:46px;position:relative;color:var(--muted)}
.wl-steps li strong{display:block;color:var(--ink)}
.wl-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:var(--brick);color:#fff;display:grid;place-items:center;font-weight:700}
.wl-due{background:var(--card);border:2px solid var(--ochre);border-radius:var(--r);padding:16px 18px}
.wl-due strong{display:block;font-family:"Zilla Slab",Georgia,serif;font-size:1.3rem;color:var(--brick)}
@media (prefers-color-scheme: dark){.wl-due strong{color:#E58A71}}
.wl-due p{margin:4px 0 0;color:var(--muted)}
.wl-due .wl-prog{margin:12px 0 6px;color:var(--ink)}

.wl-filters{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
@media(min-width:900px){.wl-filters{position:sticky;top:66px;z-index:5}}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.seg button{border:0;background:none;color:var(--ink);font:inherit;font-size:.95rem;padding:8px 14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--petrol);color:#fff;font-weight:700}
.wl-open{display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.wl-count{margin-left:auto;color:var(--muted);font-size:.92rem}
@media(max-width:700px){.wl-count{margin-left:0;width:100%}}

/* gift tags */
.wl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:44px 22px;padding:46px 0 28px}
.gtag{--band:var(--brick);position:relative;background:var(--tagpaper);color:var(--tagink);border-radius:14px;
  box-shadow:0 1px 0 var(--line),0 6px 18px rgba(20,40,30,.08);display:flex;flex-direction:column}
.gtag:nth-child(even){--band:var(--petrol)}
.gtag::before{content:"";position:absolute;left:50%;top:-30px;width:2px;height:40px;background:var(--ochre);transform:translateX(-50%) rotate(8deg);z-index:2}
.band{position:relative;background:var(--band);color:#fff;border-radius:14px 14px 0 0;padding:30px 18px 14px;text-align:center;
  background-image:radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 2px);background-size:16px 16px}
.band::before{content:"";position:absolute;left:50%;top:10px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 3px var(--ochre)}
.holly{position:absolute;right:12px;top:10px;width:38px;height:30px}
.tagno{font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:2.4rem;line-height:1}
.who{margin:6px 0 0;font-weight:700;font-size:1.02rem;color:#fff}
.status{position:absolute;left:12px;top:10px;font-size:.78rem;font-weight:700;background:rgba(255,255,255,.92);color:#1B2420;border-radius:999px;padding:2px 9px}
.gbody{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.gbody p{max-width:none}
.dept{margin:0 0 10px;font-size:.96rem}
.dept b{color:var(--band)}
@media (prefers-color-scheme: dark){.dept b{color:var(--ochre)}}
.sizes{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 14px;padding:10px 12px;border:1px dashed var(--ochre);border-radius:10px;background:var(--card);font-size:.95rem}
.sizes dt{color:var(--muted)}.sizes dd{margin:0;font-weight:700}
.wish{margin:0 0 10px;padding-left:26px;position:relative;font-size:.97rem}
.wish::before{content:"★";position:absolute;left:2px;top:-1px;color:var(--ochre);font-size:1.15rem}
.home{margin:0 0 10px;background:var(--soft);border-radius:8px;padding:8px 10px;font-size:.95rem}
.gcard{margin:0 0 14px;font-size:.92rem;color:var(--muted)}
.pick{margin-top:auto;font:inherit;font-weight:700;font-size:1rem;border-radius:999px;padding:11px 16px;cursor:pointer;border:2px solid var(--brick);background:var(--brick);color:#fff}
.pick:hover{background:var(--brick-dk);border-color:var(--brick-dk)}
.pick[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol)}
.gtag.taken{filter:grayscale(.75)}
.gtag.taken .band{opacity:.75}
.gtag.taken .pick{display:none}
.stamp{display:none;margin-top:auto;text-align:center;font-family:"Zilla Slab",Georgia,serif;font-weight:700;font-size:1.25rem;color:var(--petrol);border:3px double var(--ochre);border-radius:10px;padding:6px;transform:rotate(-3deg)}
@media (prefers-color-scheme: dark){.stamp{color:var(--link)}}
.gtag.taken .stamp{display:block}
.wl .empty{grid-column:1/-1}

/* selection tray: sits above the phone tab bar */
.wl-tray{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));background:var(--petrol);color:#fff;transform:translateY(calc(100% + 80px));transition:transform .25s ease;z-index:55;border-top:4px solid var(--ochre)}
@media(min-width:900px){.wl-tray{bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}}
.wl-tray.show{transform:none}
.wl-tray .wrap{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.wl-tray p{margin:0;font-weight:700;flex:1 1 220px;color:#fff}
body.tray-open{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
@media(min-width:900px){body.tray-open{padding-bottom:90px}}

/* hold dialog */
dialog{border:0;border-radius:14px;padding:0;max-width:min(520px,calc(100vw - 32px));width:100%;background:var(--card);color:var(--ink);border-top:6px solid var(--brick)}
dialog::backdrop{background:rgba(10,20,15,.55)}
.dlg{padding:24px}
.dlg h2{font-size:1.5rem;margin:0 0 6px;color:var(--ink)}
.dlg p{margin:0 0 16px;color:var(--muted)}
.dlg label{display:block;font-weight:700;margin:0 0 12px}
.dlg input,.dlg textarea{display:block;width:100%;margin-top:4px;font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.dlg input:focus,.dlg textarea:focus{border-color:var(--link);outline:none}
.dlg .hp{position:absolute;left:-9999px}
.dlg .row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.dlg .err{color:var(--brick);font-weight:700;min-height:1.2em;margin:6px 0 0}