/* css/collection-wall.css — the Collection as a studio wall (js/collection-wall.js; Alex picked "Studio wall", 2026-10-18).
   The approved design is _claude/scratch/studio-wall/studio-wall.html. Colours are the window's own tokens, so the
   wall follows the hour like every other Window. Laid out by the width of the Window, not the screen (container
   queries): a Window made narrow, a phone sheet and a maximised page each get the layout that fits them. */
.afw{
  --afw-ink:var(--surface-tx,#141414); --afw-sheet:var(--surface-bg,#f6f5f1); --afw-sheet2:var(--surface-bg-2,#efede7);
  --afw-line:rgba(var(--ink),.12); --afw-line2:rgba(var(--ink),.22); --afw-q:rgba(var(--ink),.62);
  --afw-cap:#d2502a; --afw-work:#2f5fa8; --afw-game:#2f7d5a; --afw-deck:#8a5bb5; --afw-order:#b8862a; --afw-bad:#b3261e;
  display:grid; grid-template-columns:216px minmax(0,1fr); align-items:start; min-height:100%;
  font:14px/1.45 var(--ff-sans); color:var(--afw-ink);
}
/* the Window's body is the container, so the wall itself can change shape inside it */
.af-fmod-body:has(> .afw){container-type:inline-size;container-name:afw}
.afw *{box-sizing:border-box}
.afw button{font:inherit;color:inherit}
.afw :focus-visible{outline:2px solid var(--focus-ring,#2266cc);outline-offset:2px}

/* the list */
.afw-nav{position:sticky;top:0;display:flex;flex-direction:column;gap:2px;padding:12px 14px 16px;border-right:1px solid var(--afw-line);min-height:100%}
.afw-nav-i{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border:0;border-radius:10px;background:none;cursor:pointer;font-size:15px;color:var(--afw-q);text-align:left}
.afw-nav-i:hover{background:rgba(var(--ink),.05);color:var(--afw-ink)}
.afw-nav-i.is-on{background:var(--afw-sheet2);color:var(--afw-ink);font-weight:600}
.afw-nav-i small{font-size:13px;color:var(--afw-q);font-variant-numeric:tabular-nums;font-weight:400}
.afw-sep{height:1px;background:var(--afw-line);margin:8px 4px}
.afw-acct{display:grid;gap:6px;padding:12px;border-radius:12px;background:var(--afw-sheet2);font-size:13px}
.afw-acct b{font-weight:600;overflow-wrap:anywhere}
.afw-acct .afw-btn{justify-self:start}
.afw-acct--nav{margin-top:16px}
.afw-acct--foot{display:none}

/* the right */
.afw-main{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start;padding:8px 24px 24px;min-width:0}
.afw-note{margin:0;padding:8px 12px;border-radius:10px;background:var(--afw-sheet2);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.afw-note[hidden]{display:none}
.afw-note.is-bad{color:var(--afw-bad)}
.afw-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.afw-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.afw-sp{justify-content:space-between}
.afw-q{color:var(--afw-q);font-size:13px}
.afw-small{margin:10px 0 0}
.afw-h1{font:300 clamp(28px,4cqi,44px)/1.04 var(--ff-head);letter-spacing:-.01em;margin:0}
.afw-h{display:flex;align-items:center;gap:8px;margin:0;font:400 15px/1.2 var(--ff-h2);letter-spacing:.01em}
.afw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.afw-sell{font-size:15px;line-height:1.45;color:var(--afw-q);max-width:52ch;margin:0}
.afw-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.afw-dot--cap{background:var(--afw-cap)}.afw-dot--work{background:var(--afw-work)}.afw-dot--game{background:var(--afw-game)}
.afw-dot--deck{background:var(--afw-deck)}.afw-dot--order{background:var(--afw-order)}
.afw-soon{font-size:13px;padding:2px 9px;border-radius:999px;border:1px solid var(--afw-line2);color:var(--afw-q)}
.afw-btn{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 15px;border:1px solid var(--afw-line2);border-radius:999px;background:transparent;font-size:14px;white-space:nowrap;cursor:pointer}
.afw-btn:hover{background:rgba(var(--ink),.06)}
.afw-btn:disabled{opacity:.55;cursor:default}
.afw-btn--ink{background:var(--afw-ink);border-color:var(--afw-ink);color:var(--afw-sheet) !important;font-weight:600}
.afw-btn--ink:hover{background:var(--afw-ink);opacity:.88}
.afw-btn--light{background:var(--afw-sheet);border-color:transparent;color:var(--afw-ink) !important;font-weight:600}
.afw-danger{color:var(--afw-bad) !important;border-color:color-mix(in srgb,var(--afw-bad) 45%,transparent)}
.afw-danger.is-armed{background:var(--afw-bad);color:#fff !important}
.afw-link{border:0;background:none;padding:2px 0;font-size:13px;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.afw-spin{width:13px;height:13px;animation:afw-spin .9s linear infinite}
@keyframes afw-spin{to{transform:rotate(360deg)}}
.afw-in,.afw-select{min-width:0;min-height:36px;padding:7px 14px;border:1px solid var(--afw-line2);border-radius:999px;background:var(--surface-input-bg,transparent);color:inherit;font:14px var(--ff-sans)}

/* cards: the bento */
.afw-card{grid-template-columns:minmax(0,1fr);background:var(--afw-sheet);border:1px solid var(--afw-line);border-radius:16px;padding:18px;display:grid;gap:14px;align-content:start;min-width:0}
.afw-deep{box-shadow:0 18px 50px rgba(0,0,0,.08)}
.afw-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-content:start}
.afw-span8{grid-column:span 8}.afw-span7{grid-column:span 7}.afw-span6{grid-column:span 6}.afw-span5{grid-column:span 5}.afw-span4{grid-column:span 4}
.afw-hero{justify-items:start;padding:36px;gap:16px}

/* the keep-it strip */
.afw-keep{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 16px;border-radius:14px;background:var(--afw-ink);color:var(--afw-sheet)}
.afw-keep-t{display:grid;gap:2px;flex:1 1 260px;min-width:0}
.afw-keep-t span{font-size:14px;opacity:.75}
.afw-keep-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 320px;justify-content:flex-end}
.afw-keep .afw-in{flex:1 1 180px;max-width:260px;border-color:color-mix(in srgb,var(--afw-sheet) 35%,transparent);background:transparent;color:var(--afw-sheet)}
.afw-keep .afw-in::placeholder{color:color-mix(in srgb,var(--afw-sheet) 55%,transparent)}
.afw-keep .afw-in[hidden]{display:none}
.afw-keep .afw-link{color:var(--afw-sheet)}

/* the invitations: a shutter you want to press, a deep stack of tiles */
.afw-cta{display:flex;align-items:center;gap:18px;min-width:0}
.afw-cta-t{display:grid;gap:4px;min-width:0}
.afw-cta-t strong{font:300 22px/1.1 var(--ff-head)}
.afw-shutter{position:relative;width:var(--s,84px);height:var(--s,84px);border-radius:50%;border:0;cursor:pointer;flex:none;padding:0;
  background:var(--afw-ink);box-shadow:0 0 0 4px var(--afw-sheet),0 0 0 5px var(--afw-line2),0 10px 26px rgba(0,0,0,.25)}
.afw-shutter::before{content:"";position:absolute;inset:16%;border-radius:50%;
  background:repeating-conic-gradient(from 12deg,var(--afw-sheet) 0 9deg,transparent 9deg 60deg);opacity:.9;
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 31%);mask:radial-gradient(circle,transparent 30%,#000 31%)}
.afw-shutter::after{content:"";position:absolute;inset:38%;border-radius:50%;background:var(--afw-cap);box-shadow:0 0 12px rgba(210,80,42,.6)}
.afw-shutter:hover::before{transform:rotate(30deg);transition:transform .35s var(--ease,ease)}
.afw-dzi{position:relative;width:var(--s,84px);height:var(--s,84px);flex:none;cursor:pointer;border:0;background:none;padding:0}
.afw-dzi i{position:absolute;inset:0;border-radius:12px;background:var(--afw-sheet2) center/cover;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.afw-dzi i:nth-child(1){transform:translate(10px,-10px) scale(.86);opacity:.5}
.afw-dzi i:nth-child(2){transform:translate(5px,-5px) scale(.93);opacity:.75}
.afw-dzi b{position:absolute;right:-6px;bottom:-6px;width:32px;height:32px;border-radius:50%;background:var(--afw-ink);color:var(--afw-sheet);display:grid;place-items:center}
.afw-dzi b svg,.afw-dlo-ic svg,.afw-cartnote svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* justified rows: each picture its own shape, never cropped */
.afw-just{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.afw-just::after{content:"";flex:999 1 0}
.afw-jc{position:relative;display:grid;gap:6px;min-width:0;max-width:100%}
.afw-pic{display:block;width:100%;padding:8px;border:0;border-radius:10px;background:var(--afw-sheet2);cursor:pointer}
.afw-pic img{display:block;width:100%;height:auto;box-shadow:0 6px 16px rgba(0,0,0,.16)}
.afw-pic.is-none{min-height:calc(var(--h,110px) * .8)}
.afw-jc.is-cur .afw-pic,.afw-jc.is-sel .afw-pic{outline:2px solid var(--afw-ink);outline-offset:2px}
.afw-meta{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--afw-q);min-width:0}
.afw-meta i{font:italic 15px/1.2 var(--ff-read);color:var(--afw-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.afw-meta span{white-space:nowrap}
.afw-ck{position:absolute;left:14px;top:14px;width:24px;height:24px;border-radius:7px;border:1.5px solid #fff;background:rgba(0,0,0,.28);box-shadow:0 1px 3px rgba(0,0,0,.3);cursor:pointer;padding:0}
.afw-ck.is-on{background:var(--afw-ink);border-color:var(--afw-ink)}
.afw-ck.is-on::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.afw-x{position:absolute;right:14px;top:14px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff !important;font-size:18px;line-height:1;cursor:pointer;opacity:0}
.afw-jc:hover .afw-x,.afw-x:focus-visible{opacity:1}
@media (hover:none){.afw-x{opacity:1}}

/* the captures' desk */
.afw-pick{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.afw-desk{position:sticky;top:8px;gap:12px}
.afw-desk-h{display:grid;gap:6px}
.afw-title{width:100%;min-width:0;border:0;border-bottom:1px solid transparent;background:none;padding:2px 0;font:300 28px/1.1 var(--ff-head);color:inherit}
.afw-title:hover,.afw-title:focus{border-bottom-color:var(--afw-line2);outline:0}
.afw-key{display:inline-block;margin-left:8px;padding:2px 7px;border:1px dashed var(--afw-line2);border-radius:7px;font:600 13px/1.3 var(--ff-keys,var(--ff-sans));letter-spacing:.06em;color:var(--afw-ink)}
.afw-dl{display:grid;gap:8px}
.afw-dlo{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;text-align:left;border:1px solid var(--afw-line2);border-radius:12px;padding:12px;background:transparent;cursor:pointer}
.afw-dlo.is-on{border-color:var(--afw-ink);box-shadow:inset 0 0 0 1px var(--afw-ink)}
.afw-dlo-ic{width:36px;height:36px;border-radius:10px;background:var(--afw-sheet2);display:grid;place-items:center}
.afw-dlo b{display:block;font-weight:600}
.afw-dlo small{display:block;color:var(--afw-q);font-size:13px;line-height:1.35}
.afw-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--afw-q)}
.afw-zip{display:grid;gap:4px;padding:10px 12px;border-radius:10px;background:var(--afw-sheet2)}
.afw-zip code{font:13px/1.35 ui-monospace,"SF Mono",Menlo,monospace;color:var(--afw-q);overflow-wrap:anywhere}
.afw-sizes{display:flex;flex-wrap:wrap;gap:6px}
.afw-cartnote{display:flex;gap:8px;align-items:center;margin:0;font-size:13px;color:var(--afw-q)}

/* games */
.afw-gt{display:grid;gap:2px;font-variant-numeric:tabular-nums}
.afw-gt-r{display:grid;grid-template-columns:minmax(0,1fr) 56px 44px 52px;gap:8px;align-items:center;padding:6px 8px;border:0;border-radius:8px;background:none;text-align:left;font-size:14px}
button.afw-gt-r{cursor:pointer}
button.afw-gt-r:hover{background:rgba(var(--ink),.05)}
.afw-gt-hd{font-size:13px;color:var(--afw-q)}
.afw-gt-r > :not(:first-child){text-align:right}

/* the deck, coming */
.afw-deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;max-width:420px}
.afw-deckc{aspect-ratio:4/5;border-radius:12px;border:1px solid var(--afw-line2);background:linear-gradient(160deg,var(--afw-sheet2),var(--afw-sheet));display:grid;place-items:center;position:relative;overflow:hidden}
.afw-deckc::after{content:"";width:46%;aspect-ratio:1;border-radius:50% 50% 46% 54%;background:radial-gradient(circle at 40% 35%,rgba(138,91,181,.55),rgba(138,91,181,.12) 70%)}
.afw-deckc span{position:absolute;left:9px;bottom:7px;font-size:13px;color:var(--afw-q)}

/* orders */
.afw-orders{display:grid;gap:10px}
.afw-order{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.afw-order-pic{width:64px;flex:none}
.afw-order-pic img{display:block;max-width:100%;height:auto}
.afw-order-t{display:grid;gap:2px;flex:1 1 160px;min-width:0}

/* the key box (js/key-box.js keeps its own classes; the wall gives them room) */
.afw-keys .af-col-zone{border-bottom:0;padding-bottom:0;gap:10px}
.afw-keys .af-hub-zlabel{font:400 15px/1.2 var(--ff-h2);text-transform:none;letter-spacing:.01em;opacity:1}
.afw-keys .af-col-key{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.afw-keys .af-col-key-in{flex:1 1 200px;min-width:0;min-height:36px;padding:7px 14px;border:1px dashed var(--afw-line2);border-radius:10px;background:transparent;color:inherit;font:600 14px var(--ff-sans)}
.afw-keys .af-col-act{min-height:36px;padding:7px 15px;border-radius:999px;font-size:14px}
.afw-keys .af-col-row-sub,.afw-keys .af-col-key-hint{font-size:13px;white-space:normal}

/* preferences */
.afw-prefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.afw-pr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;padding:9px 0;border-top:1px solid var(--afw-line)}
.afw-h + .afw-pr{border-top:0}
.afw-pr b{font-weight:500}
.afw-pr small{grid-column:1;color:var(--afw-q);font-size:13px}
.afw-pr > :nth-child(2){grid-row:span 2;justify-self:end}
.afw-seg{display:flex;gap:2px;padding:2px;border:1px solid var(--afw-line2);border-radius:999px;flex-wrap:wrap;justify-content:flex-end}
.afw-seg button{border:0;background:none;padding:5px 11px;border-radius:999px;font-size:13px;color:var(--afw-q);cursor:pointer}
.afw-seg button.is-on{background:var(--afw-ink);color:var(--afw-sheet)}
.afw-tg{width:42px;height:24px;border-radius:999px;border:0;background:var(--afw-line2);position:relative;cursor:pointer;padding:0;flex:none}
.afw-tg::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--afw-sheet);transition:left .15s}
.afw-tg.is-on{background:var(--afw-ink)}.afw-tg.is-on::after{left:21px}
.afw-pr .afw-row{justify-content:flex-end}
.afw-pr .afw-in{width:180px}

/* narrower Windows */
@container afw (max-width:1080px){
  .afw-pick{grid-template-columns:minmax(0,1fr) 300px}
  .afw-span8,.afw-span7,.afw-span6,.afw-span5,.afw-span4{grid-column:span 12}
}
@container afw (max-width:860px){
  .afw-pick{grid-template-columns:1fr}
  .afw-desk{position:static}
  .afw-prefs{grid-template-columns:1fr}
}
/* a phone, or a Window as narrow as one: the list becomes a row of chips over the wall, the account box goes to the foot */
@container afw (max-width:640px){
  .afw{display:block}
  .afw-nav{position:sticky;top:0;z-index:2;flex-direction:row;overflow-x:auto;gap:6px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--afw-line);background:var(--afw-sheet);min-height:0;scrollbar-width:none}
  .afw-nav::-webkit-scrollbar{display:none}
  .afw-nav-i{flex:none;padding:6px 12px;border:1px solid var(--afw-line2);border-radius:999px;font-size:14px}
  .afw-nav-i.is-on{background:var(--afw-ink);color:var(--afw-sheet);border-color:var(--afw-ink)}
  .afw-nav-i.is-on small{color:inherit;opacity:.75}
  .afw-sep,.afw-acct--nav{display:none}
  .afw-acct--foot{display:grid}
  .afw-main{padding:12px 12px 20px;gap:12px}
  .afw-card{padding:14px;border-radius:14px}
  .afw-hero{padding:20px}
  .afw-keep-f{justify-content:flex-start}
  .afw-keep .afw-in{max-width:none}
  .afw-pr{grid-template-columns:1fr}
  .afw-pr > :nth-child(2){grid-row:auto;justify-self:start;margin:4px 0}
  .afw-pr small{grid-column:1}
  .afw-pr .afw-row{justify-content:flex-start}
  .afw-gt-r{grid-template-columns:minmax(0,1fr) 50px 40px 48px}
}
@media (prefers-reduced-motion:reduce){.afw-spin{animation:none}.afw-shutter:hover::before{transform:none}}