/* The World lens (Explore → World) and its Fashion section: js/world.js.
   Reuses app.css building blocks (.palette, .pal-names, .mini-pal, .z-hero, .p-hero, .fig, .facts, .srcs)
   wherever they already fit; this file only adds what's new. */

/* ---------- the lens: Fashion's four-tile contents row ---------- */
.wd-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.wd-tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 14px;border:1px solid var(--rule);border-radius:var(--r-1);text-align:left;min-height:84px;transition:border-color .2s,background .2s}
.wd-tile:active{background:var(--lift);border-color:var(--rule-2)}
.wd-tile b{font:400 22px/1.05 var(--serif);letter-spacing:-.01em}
.wd-tile span{font:italic 400 17px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint)}

/* ---------- list screens: decades / houses / history ---------- */
.wd-list{display:flex;flex-direction:column;margin-top:8px}
.wd-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 0;border-bottom:1px solid var(--rule)}
.wd-card .mini-pal{flex:none;width:52px;height:30px;border-radius:var(--r-1);overflow:hidden;gap:0}
.wd-card b{display:block;font:400 21px/1.1 var(--serif);letter-spacing:-.01em}
.wd-card small{display:block;font:italic 400 17px/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--soft);margin-top:3px}

/* ---------- decade detail ---------- */
.wd-dpal{margin-top:14px}
.wd-sec{margin-top:30px}
.wd-sec h3{font:400 24px/1.1 var(--serif);letter-spacing:-.01em;margin-bottom:10px}
.wd-sec p{font-size:16px;line-height:1.6;color:#DAD5C9;text-wrap:pretty}
.wd-pieces{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.wd-pieces li{font-size:15.5px;line-height:1.55;color:#DAD5C9;padding-top:12px;border-top:1px solid var(--rule-2)}
.wd-pieces li:first-child{padding-top:0;border-top:0}
.wd-p{font-size:16.5px;line-height:1.65;color:#DAD5C9;text-wrap:pretty;margin-top:14px}
.wd-p:first-of-type{margin-top:22px}

/* ---------- Color of the Year list ---------- */
.wd-coty{margin-top:18px}
.wd-coty .pal-name span{grid-column:2;font-size:13px}
.wd-coty .pal-name em{align-self:start}

/* ---------- "In fashion" row on a color page ---------- */
.wd-in-strip{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;margin:14px calc(-1 * var(--g)) 4px;padding:2px var(--g) 8px;scrollbar-width:none}
.wd-in-strip::-webkit-scrollbar{display:none}
.wd-in{flex:none;width:132px;text-align:left;padding:10px;border:1px solid var(--rule);border-radius:var(--r-1)}
.wd-in i{display:block;width:100%;height:40px;background:var(--c);border-radius:var(--r-1);margin-bottom:8px}
.wd-in b{display:block;font:400 17px/1.1 var(--serif)}
.wd-in small{display:block;font-size:13px;color:var(--soft);margin-top:2px}

/* World tiles as small covers: a picture or a color graphic, then the title */
.wd-cover{padding:0;overflow:hidden;gap:0;border:0;background:var(--lift)}
.wd-cover .wd-art{display:block;width:100%;height:118px;overflow:hidden;background:#1a1914}
.wd-cover .wd-art img{width:100%;height:100%;object-fit:cover;display:block}
.wd-cover b{padding:12px 12px 0}
.wd-cover .wd-sub{padding:5px 12px 13px;font:italic 400 17px/1.35 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint)}
.wd-rows{display:flex;flex-direction:column;height:100%}
.wd-rows i{flex:1;display:flex}
.wd-rows em,.wd-grid em,.wd-bars em{display:block;background:var(--c)}
.wd-rows em{flex:1}
.wd-grid{display:grid;grid-template-columns:repeat(7,1fr);height:100%}
.wd-bars{display:flex;height:100%}
.wd-bars em{flex:1}
/* craft pass 2026-10-08: the fashion list rows (history, decades, houses) drew an empty 52px gap (the mini palette's
   stripes had no width) and squeezed the title into a one-word-per-line column beside its dek. Palette left, title
   over dek right. */
.wd-card{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;row-gap:0;align-items:center}
.wd-card .mini-pal{grid-row:1/3;align-self:start;margin-top:3px}
.wd-card .mini-pal i{flex:1}
.wd-card b,.wd-card small{grid-column:2}

/* Brand colors (js/brands.js): the page hero, the color-history timeline, and the brand browser grid. */
.bd-hero{display:flex;gap:10px;margin:18px 0 10px}
.bd-hero i{flex:1;height:84px;border-radius:var(--r-1);background:var(--c)}
.bd-tl{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.bd-tl-step{display:grid;grid-template-columns:52px 1fr;column-gap:14px;row-gap:2px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.bd-tl-step:last-child{border-bottom:0;padding-bottom:0}
.bd-tl-step i{grid-row:1/3;align-self:start;width:52px;height:52px;border-radius:var(--r-1);background:var(--c)}
.bd-tl-step b{font:400 20px/1.1 var(--serif)}
.bd-tl-d{font-size:13px;color:var(--soft);justify-self:end}
.bd-tl-step p{grid-column:2;margin:2px 0 0;font:italic 400 17px/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--faint)}
.bd-tl-step small{grid-column:2;font-size:13px;color:var(--soft)}
.bd-last{margin-top:28px}
.bd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.bd-card{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--rule);border-radius:var(--r-1);text-align:left}
.bd-card i{display:block;width:100%;height:48px;border-radius:var(--r-1);background:var(--c)}
.bd-card b{font:400 18px/1.1 var(--serif)}
.bd-card small{font-size:13px;color:var(--soft)}
.bd-tile-sw{display:flex;gap:4px;width:100%;height:100%}
.bd-tile-sw i{flex:1;background:var(--c);border-radius:var(--r-2,6px)}

/* Design objects (js/designobjects.js): one horizontal shelf per category on the room page, a facet-chip
   grid per category, and a 3-6 color-count control on an object's own page (its 6-color pool is smaller than a
   painting's 24-color one, so this is a simple show/hide, not glPoolPick's re-clustering). */
.do-shelf{display:flex;gap:10px;overflow-x:auto;margin:12px calc(-1 * var(--g)) 4px;padding:0 var(--g) 4px;scrollbar-width:none}
.do-shelf::-webkit-scrollbar{display:none}
.do-shelf-item{flex:none;width:104px;height:104px;border-radius:var(--r-1);overflow:hidden;position:relative;background:var(--c,var(--surface-1));text-align:left}
.do-shelf-item img{display:block;width:100%;height:100%;object-fit:cover}
.do-shelf-item .mini-pal{position:absolute;left:0;right:0;bottom:0;display:flex;height:10px}
.do-shelf-item .mini-pal i{flex:1}
.do-shelf-more{flex:none;width:104px;height:104px;border-radius:var(--r-1);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;text-align:center;font:400 14px/1.3 var(--serif);color:var(--soft);padding:8px}
.do-size-row{margin:10px 0}