/* Meld — v3: airy, attention-first */
@font-face{font-family:'Suisse Intl';font-weight:400;font-display:swap;src:url('/fonts/SuisseIntl-Book.ttf') format('truetype')}
@font-face{font-family:'Suisse Intl';font-weight:500;font-display:swap;src:url('/fonts/SuisseIntl-Medium.ttf') format('truetype')}
@font-face{font-family:'Lyon Text';font-weight:400;font-display:swap;src:url('/fonts/LyonText.ttf') format('truetype')}

:root{
  --ink:#1f1f1f; --ink2:#525252; --ink3:#707070; --ink4:#a1a1a1;
  --fill:rgba(20,20,20,.06); --fill2:rgba(20,20,20,.10); --line:rgba(20,20,20,.10);
  --bg:#f4f5f4; --surface:#ffffff; --surface2:#eaebef;
  --blue:#0000ff; --blue-deep:#0000c4;
  --r:8px; --r2:12px; --r3:20px; --pill:999px;
  --sans:'Suisse Intl',-apple-system,'Segoe UI',sans-serif;
  --serif:'Lyon Text',Georgia,serif;
  --ease:cubic-bezier(0,0,.2,1);
  --sh1:0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.04);
  --sh2:0 10px 30px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.05);
  --sh3:0 30px 80px rgba(0,0,0,.20),0 6px 16px rgba(0,0,0,.08);
  --pad:40px; --gutter:20px; --ctl:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);background-size:1016px 1016px;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum"}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer;transition-property:background-color,color,opacity,transform,box-shadow;transition-duration:.15s;transition-timing-function:var(--ease)}
button:active{transform:scale(.98)}
input{font-family:inherit;font-size:inherit;color:inherit;border:none;outline:none;background:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:rgba(0,0,255,.12)}
.hide{display:none !important}
.lbl{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink4)}
.serif{font-family:var(--serif);font-weight:400}
.muted{color:var(--ink3)}
h2.sec-title{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.2;letter-spacing:-.005em}

/* ---------- header: logo · nav · search · actions ---------- */
.topnav{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr minmax(360px,640px) 1fr;align-items:center;gap:32px;height:72px;padding:0 var(--pad);background:rgba(244,245,244,.86);backdrop-filter:blur(16px)}
.nav-left{display:flex;align-items:center;gap:28px}
.logo{font-weight:500;font-size:15px;letter-spacing:-.01em}
.nav-tabs{display:flex;gap:4px}
.nav-tab{padding:9px 14px;border-radius:var(--pill);color:var(--ink3);font-size:15px}
.nav-tab:hover{color:var(--ink);background:var(--fill)}
.nav-tab.active{color:var(--ink);font-weight:500;background:var(--fill)}
.hsearch{display:flex;align-items:center;gap:12px;height:48px;padding:0 18px;border-radius:var(--pill);background:var(--fill);color:var(--ink3);transition:background-color .15s var(--ease),box-shadow .15s var(--ease)}
.hsearch:hover{background:var(--fill2)}
.hsearch:focus-within{background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--sh2)}
.hsearch input{flex:1;font-size:15px;color:var(--ink)}
.hsearch input::placeholder{color:var(--ink4)}
.hsearch svg{color:var(--ink4);flex:0 0 auto}
.hsearch .clear{color:var(--ink4);padding:4px;border-radius:var(--pill)}
.hsearch .clear:hover{color:var(--ink);background:var(--fill)}
.nav-right{display:flex;align-items:center;gap:6px;justify-self:end}
.nav-link{color:var(--ink2);font-size:15px;padding:9px 14px;border-radius:var(--pill)}
.nav-link:hover{background:var(--fill);color:var(--ink)}
.bell{position:relative;color:var(--ink2);display:grid;place-items:center;width:40px;height:40px;border-radius:var(--pill)}
.bell:hover{background:var(--fill);color:var(--ink)}
.bell .badge{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:999px;background:var(--blue)}
.avatar{width:32px;height:32px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:500;flex:0 0 auto;margin-left:8px}
.avatar.lg{width:64px;height:64px;font-size:20px;margin:0}

/* ---------- screens ---------- */
.screen{display:none}
.screen.active{display:block}
#screen-discover.active{display:flex;height:calc(100vh - 72px)}
#d-left{flex:0 0 auto;overflow-y:auto;padding:28px 16px 60px 24px}
#d-left:empty{display:none}
#d-left.rail{width:288px}
#d-main{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-width:0}
#d-top{flex:0 0 auto;padding:28px var(--pad) 0}
#d-scroll{flex:1;overflow-y:auto;padding:0 var(--pad) 140px;position:relative}

/* segmented control (fill) */
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--fill);border-radius:var(--pill)}
.seg button{height:34px;padding:0 16px;border-radius:var(--pill);font-size:15px;color:var(--ink3);display:inline-flex;align-items:center;gap:6px}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:var(--sh1)}
.seg .n{color:var(--ink4);font-weight:400;font-size:13px}
.seg button.on .n{color:var(--ink3)}
.types{display:flex;align-items:center;gap:16px}
.types .right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--ink3)}

/* dropdown pill */
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--pill);background:var(--fill);font-size:13px;color:var(--ink2)}
.chip:hover{background:var(--fill2);color:var(--ink)}
.chip.on{background:var(--ink);color:#fff}
.chip img{width:14px;height:14px;border-radius:3px}
.chip-x{margin-left:2px;opacity:.6}
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;background:var(--surface);border-radius:var(--r2);box-shadow:var(--sh2);padding:6px;z-index:60;animation:pop .14s var(--ease)}
.dd-menu.right{left:auto;right:0}
@keyframes pop{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.dd-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:var(--r);font-size:15px;text-align:left}
.dd-item:hover{background:var(--fill)}
.dd-item .ck{margin-left:auto;color:var(--blue)}

/* sections */
.sec{margin:36px 0 18px;display:flex;align-items:baseline;gap:16px}
.sec .more{margin-left:auto;font-size:15px;color:var(--ink3)}
.sec .more:hover{color:var(--ink)}
.sec:first-child{margin-top:36px}
.meta-line{font-size:13px;color:var(--ink4);padding:36px 0 14px}
.row-scroll{display:flex;gap:24px;overflow-x:auto;padding:4px 0 8px;margin-right:calc(-1 * var(--pad));padding-right:var(--pad);scrollbar-width:none}
.row-scroll::-webkit-scrollbar{display:none}

/* masonry */
.masonry{columns:270px;column-gap:var(--gutter)}
.card{break-inside:avoid;margin-bottom:var(--gutter);position:relative;border-radius:var(--r2);overflow:hidden;cursor:pointer;background:var(--surface2)}
.card img{width:100%}
.card .dim{position:absolute;inset:0;background:rgba(0,0,0,.34);opacity:0;transition:opacity .15s var(--ease);pointer-events:none}
.card:hover .dim{opacity:1}
.card .save-btn{position:absolute;top:12px;right:12px;height:36px;padding:0 14px;border-radius:var(--pill);background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;opacity:0;transition:opacity .15s var(--ease),background-color .15s}
.card:hover .save-btn{opacity:1}
.card .save-btn:hover{background:var(--ink);color:#fff}
.card .src-pill{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:7px;color:#fff;font-size:13px;opacity:0;transition:opacity .15s var(--ease);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.card:hover .src-pill{opacity:1}
.card .src-pill img,.card .src-pill .fallback-ic{width:16px;height:16px;border-radius:4px}
.card .post-pill{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:7px;color:#fff;font-size:13px;opacity:0;transition:opacity .15s var(--ease);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.card:hover .post-pill{opacity:1}
.card .post-pill .avatar{width:20px;height:20px;font-size:11px;margin:0;background:#fff;color:var(--ink)}
.card .post-cap{position:absolute;left:12px;right:12px;bottom:40px;color:#fff;font-size:13px;line-height:1.4;opacity:0;transition:opacity .15s var(--ease);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.card:hover .post-cap{opacity:1}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card.animate{animation:cardIn .45s var(--ease) both}

/* collection cards */
.ccard{flex:0 0 300px;cursor:pointer}
.ccard .collage{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:4px;height:190px;border-radius:var(--r2);overflow:hidden;background:var(--surface2);transition:transform .2s var(--ease)}
.ccard .collage img{width:100%;height:100%;object-fit:cover}
.ccard .collage .a{grid-row:1/3}
.ccard .collage .empty{background:var(--surface2)}
.ccard .cm{display:flex;align-items:center;gap:10px;margin-top:14px}
.ccard .cm .avatar{width:22px;height:22px;font-size:11px;margin:0}
.ccard .cm .nm{font-weight:500;font-size:15px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard .own{font-size:13px;color:var(--ink3);margin-top:3px;padding-left:32px}
.ccard:hover .collage{transform:translateY(-3px)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:36px 24px}
.cgrid .ccard{flex:none}

/* people */
.pcard{flex:0 0 280px;display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--surface);border-radius:var(--r2);cursor:pointer;transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.pcard:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.pcard .ph{display:flex;align-items:center;gap:12px}
.pcard .ph .avatar{width:40px;height:40px;font-size:13px;margin:0}
.pcard .ph b{font-weight:500;font-size:15px;display:block}
.pcard .ph span{font-size:13px;color:var(--ink3)}
.pcard .strip{display:flex;gap:4px;height:64px}
.pcard .strip img{flex:1;min-width:0;object-fit:cover;border-radius:6px}
.pcard .pst{font-size:13px;color:var(--ink3)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.pgrid .pcard{flex:none}

/* sidebar */
.side-head{padding:0 8px 10px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink4)}
.side-block{margin-bottom:28px}
.side-search{margin:0 0 20px}
.side-search .sfield{height:40px;border-radius:var(--pill);background:var(--fill);padding:0 14px;display:flex;align-items:center;gap:8px;color:var(--ink3)}
.side-search .sfield input{flex:1;font-size:15px}
.src-group{margin-bottom:2px}
.src-row{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border-radius:var(--r);font-size:15px;color:var(--ink);text-align:left}
.src-row:hover{background:var(--fill)}
.src-row img,.src-row .fallback-ic{width:16px;height:16px;border-radius:4px;flex:0 0 auto}
.src-row .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-row .ct{font-size:13px;color:var(--ink4)}
.src-row:not(.on){color:var(--ink4)}
.src-row:not(.on) img,.src-row:not(.on) .fallback-ic{opacity:.4}
.src-row .dot{display:none}
.grp-toggle{display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 10px;border-radius:var(--r);font-size:15px;color:var(--ink2);text-align:left}
.grp-toggle:hover{background:var(--fill)}
.grp-toggle .chev{font-size:11px;color:var(--ink4);transition:transform .15s var(--ease);width:10px}
.grp-toggle .gct{margin-left:auto;font-size:13px;color:var(--ink4)}
.src-group.closed .grp-toggle .chev{transform:rotate(-90deg)}
.src-group.closed .src-row{display:none}
.src-group:not(.closed) .src-row{padding-left:28px}
.fallback-ic{background:var(--surface2);color:var(--ink3);display:grid;place-items:center;font-size:11px;font-weight:500;border-radius:4px;flex:0 0 auto}
.facet-grp{margin-bottom:24px}
.facet-row{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border-radius:var(--r);font-size:15px;color:var(--ink2);text-align:left}
.facet-row:hover{background:var(--fill)}
.facet-row .ct{margin-left:auto;font-size:13px;color:var(--ink4)}
.facet-row.on{color:var(--ink);font-weight:500;background:var(--fill)}
.swatch{width:12px;height:12px;border-radius:999px}
.facet-inline{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px}
.facet-inline .chip{height:32px;padding:0 12px;font-size:13px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:var(--ctl);border-radius:var(--pill);padding:0 18px;font-weight:500;font-size:15px}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-deep)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#000}
.btn.ghost{background:var(--fill);color:var(--ink)}
.btn.ghost:hover{background:var(--fill2)}
.btn.text{padding:0 8px;color:var(--ink2)}
.btn.text:hover{color:var(--ink)}
.split{display:inline-flex;align-items:stretch;height:var(--ctl);border-radius:var(--pill);overflow:hidden;background:var(--fill);color:var(--ink);font-weight:500;font-size:15px}
.split.primary{background:var(--blue);color:#fff}
.split .main{padding:0 18px;display:flex;align-items:center}
.split .main:hover{background:rgba(0,0,0,.06)}
.split.primary .main:hover{background:var(--blue-deep)}
.split .chev{padding:0 12px;border-left:1px solid rgba(0,0,0,.08);display:grid;place-items:center}
.split.primary .chev{border-left-color:rgba(255,255,255,.22)}
.split .chev:hover{background:rgba(0,0,0,.06)}
.split.primary .chev:hover{background:var(--blue-deep)}
.link{color:var(--blue)}
.link:hover{text-decoration:underline}

/* layout switcher */
.vdock{position:fixed;left:24px;bottom:24px;z-index:80;display:flex;align-items:center;gap:4px;height:40px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-radius:var(--pill);padding:0 6px 0 14px;font-size:13px;box-shadow:var(--sh2);color:var(--ink4)}
.vdock b{font-weight:500;color:var(--ink2)}
.vdock button{color:var(--ink3);border-radius:var(--pill);height:28px;padding:0 8px;font-size:13px}
.vdock button:hover{background:var(--fill);color:var(--ink)}
.vdock .vgrid-btn{color:var(--ink);font-weight:500}
.vsheet{position:fixed;left:24px;bottom:72px;z-index:81;width:360px;max-height:66vh;overflow-y:auto;background:var(--surface);border-radius:var(--r3);box-shadow:var(--sh3);padding:10px;animation:pop .16s var(--ease)}
.vsheet h4{padding:12px 12px 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink4);font-weight:500}
.v-item{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:var(--r2)}
.v-item:hover{background:var(--fill)}
.v-item.on{background:var(--fill)}
.v-item b{display:block;font-size:15px;font-weight:500}
.v-item span{display:block;font-size:13px;color:var(--ink3);margin-top:1px}

/* modal */
.overlay{position:fixed;inset:0;z-index:90;background:rgba(20,20,20,.55);display:none;align-items:center;justify-content:center;padding:32px;animation:fade .16s}
.overlay.open{display:flex}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:var(--r3);width:min(1180px,96vw);max-height:90vh;overflow:hidden;display:flex;position:relative;box-shadow:var(--sh3);animation:pop .2s var(--ease)}
.modal .m-media{flex:1.4;background:var(--surface2);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:32px}
.modal .m-media img{max-height:calc(90vh - 64px);object-fit:contain;border-radius:var(--r)}
.modal .m-rail{flex:1;min-width:400px;max-width:460px;overflow-y:auto;padding:32px 36px 40px}
.m-actions{display:flex;align-items:center;gap:8px;margin-bottom:28px}
.m-actions .sp{flex:1}
.m-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:var(--pill);background:var(--fill);display:grid;place-items:center;z-index:5}
.m-close:hover{background:var(--fill2)}
.m-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:var(--pill);background:rgba(255,255,255,.92);display:grid;place-items:center;z-index:5;font-size:20px;color:var(--ink2);box-shadow:var(--sh1)}
.m-nav:hover{background:#fff}
.m-nav.prev{left:16px}.m-nav.next{right:calc(460px + 16px)}
.m-src{font-size:15px;color:var(--ink2);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.m-src img,.m-src .fallback-ic{width:16px;height:16px;border-radius:4px}
.m-src u{text-decoration:underline;text-decoration-color:var(--ink4);text-underline-offset:3px}
.m-title{font-family:var(--serif);font-size:30px;line-height:1.15;letter-spacing:-.005em}
.m-sub{font-size:15px;color:var(--ink3);margin-top:8px}
.m-desc{font-size:15px;line-height:1.55;color:var(--ink2);margin-top:16px}
.m-sec{margin-top:32px}
.m-sec h5{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink4);margin-bottom:12px}
.meta-row{display:flex;gap:12px;align-items:baseline;font-size:15px;padding:5px 0}
.meta-row .k{flex:0 0 96px;color:var(--ink4)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:var(--fill);border-radius:var(--pill);padding:5px 11px;font-size:13px;color:var(--ink2)}
.pal{display:flex;gap:8px}
.pal .sw{width:36px;height:36px;border-radius:999px;cursor:pointer;transition:transform .12s var(--ease)}
.pal .sw:hover{transform:translateY(-2px)}
.comment{display:flex;gap:10px;padding:8px 0;font-size:15px}
.comment .avatar{width:24px;height:24px;font-size:11px;margin:0}
.comment b{font-weight:500}
.comment .t{color:var(--ink2)}
.incol{display:flex;align-items:center;gap:12px;width:100%;padding:8px 0;text-align:left;border-radius:var(--r)}
.incol img{width:40px;height:40px;object-fit:cover;border-radius:var(--r)}
.incol b{font-weight:500;display:block;font-size:15px}
.incol span{font-size:13px;color:var(--ink3)}
.incol:hover b{color:var(--blue)}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(6px);background:var(--ink);color:#fff;border-radius:var(--pill);padding:10px 16px;font-size:15px;z-index:120;opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}

/* collections screen */
#screen-collections{max-width:1240px;margin:0 auto;padding:48px var(--pad) 140px}
.identity{display:flex;align-items:center;gap:22px}
.identity h1{font-family:var(--serif);font-size:40px;line-height:1.05;letter-spacing:-.005em}
.identity .hd{font-size:15px;color:var(--ink3);margin-top:8px;display:flex;gap:12px;align-items:center}
.identity .hd button{color:var(--ink4);font-size:13px}
.identity .hd button:hover{color:var(--ink)}
.col-top{display:flex;align-items:center;justify-content:space-between;margin:48px 0 0}
.scope{display:inline-flex;gap:2px;padding:3px;background:var(--fill);border-radius:var(--pill)}
.scope button{height:34px;padding:0 16px;border-radius:var(--pill);font-size:15px;color:var(--ink3)}
.scope button.on{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:var(--sh1)}
.scope .n{color:var(--ink4);font-size:13px;margin-left:6px}
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:40px 28px;margin-top:32px}
.col-card{cursor:pointer}
.col-visual{border-radius:var(--r2);overflow:hidden;background:var(--surface);position:relative;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.col-card:hover .col-visual{transform:translateY(-3px);box-shadow:var(--sh2)}
.col-meta{padding:14px 2px 0}
.col-meta .nm{font-size:15px;font-weight:500}
.col-meta .ct{font-size:13px;color:var(--ink3);margin-top:3px;display:flex;gap:7px;align-items:center}
.col-meta .ct .avatar{width:18px;height:18px;font-size:11px;margin:0}
.cv-shingle{height:200px;padding:18px}
.cv-shingle .sh{position:absolute;border-radius:var(--r);overflow:hidden;background:var(--surface2);transition:transform .28s var(--ease)}
.cv-shingle .sh img{width:100%;height:100%;object-fit:cover}
.cv-shingle .sh.s1{right:22px;top:46px;width:48%;height:120px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.cv-shingle .sh.s2{right:42px;top:32px;width:48%;height:120px;opacity:.6}
.cv-shingle .sh.s3{right:62px;top:18px;width:48%;height:120px;opacity:.3}
.col-card:hover .cv-shingle .s1{transform:translateY(-6px)}
.col-card:hover .cv-shingle .s2{transform:translate(3px,4px)}
.cv-shingle .nmi{position:absolute;left:20px;bottom:18px;font-family:var(--serif);font-size:22px;line-height:1.15;max-width:42%}
.cv-strip{height:200px;display:flex;align-items:stretch;gap:4px;padding:4px}
.cv-strip .fs{flex:1;border-radius:var(--r);overflow:hidden;background:var(--surface2)}
.cv-strip .fs img{width:100%;height:100%;object-fit:cover}
.cv-strip .fs.more{display:grid;place-items:center;font-size:15px;color:var(--ink3)}
.cv-mosaic{height:200px;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:4px;padding:4px}
.cv-mosaic .mq{overflow:hidden;background:var(--surface2);border-radius:var(--r)}
.cv-mosaic .mq:first-child{grid-row:1/3}
.cv-mosaic .mq img{width:100%;height:100%;object-fit:cover}
.cv-index{height:96px;display:flex;align-items:center;padding:0 22px;gap:16px}
.cv-index .big{font-family:var(--serif);font-size:22px;flex:1}
.cv-index .th{width:64px;height:64px;border-radius:var(--r);overflow:hidden;flex:0 0 auto;background:var(--surface2)}
.cv-index .th img{width:100%;height:100%;object-fit:cover}
.col-index-list{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.new-col{border:1px dashed var(--fill2);border-radius:var(--r2);display:grid;place-items:center;color:var(--ink3);min-height:200px;font-weight:500;font-size:15px}
.new-col:hover{border-color:var(--ink4);color:var(--ink)}

/* collection detail */
#screen-detail{max-width:1240px;margin:0 auto;padding:32px var(--pad) 140px}
.crumb{font-size:15px;color:var(--ink3);display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 8px;border-radius:var(--pill);margin-left:-8px}
.crumb:hover{background:var(--fill);color:var(--ink)}
.detail-head{display:flex;align-items:flex-end;gap:16px;margin-top:20px}
.detail-head h1{font-family:var(--serif);font-size:40px;line-height:1.05;letter-spacing:-.005em}
.detail-head .sub{font-size:15px;color:var(--ink3);margin-top:12px;display:flex;gap:10px;align-items:center}
.detail-head .sub .avatar{width:20px;height:20px;font-size:11px;margin:0}
.priv-chip{display:inline-flex;align-items:center;gap:6px;background:var(--fill);border-radius:var(--pill);padding:3px 10px;font-size:13px;color:var(--ink2)}
.detail-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.detail-tabs{display:inline-flex;gap:2px;padding:3px;background:var(--fill);border-radius:var(--pill);margin:36px 0 28px}
.detail-tabs button{height:34px;padding:0 16px;border-radius:var(--pill);font-size:15px;color:var(--ink3)}
.detail-tabs button.on{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:var(--sh1)}
.summary{max-width:720px;margin:12px auto 0}
.sum-intro{font-family:var(--serif);font-size:22px;line-height:1.4;color:var(--ink)}
.sum-sec{margin-top:48px}
.sum-sec h3{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink4);margin-bottom:16px}
.sum-line{display:flex;gap:20px;align-items:center;padding:14px 0}
.sum-line .txt{font-size:15px;line-height:1.5;flex:1}
.sum-line .thumbs{display:flex;gap:6px;flex:0 0 auto}
.sum-line .thumbs img{width:56px;height:56px;object-fit:cover;border-radius:var(--r)}
.vocab{display:flex;flex-wrap:wrap;gap:6px}
.brief{background:var(--surface);border-radius:var(--r2);padding:24px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;line-height:1.6;white-space:pre-wrap;color:var(--ink2);max-height:460px;overflow-y:auto}

/* export */
.targets{display:flex;flex-direction:column;gap:6px;margin-top:20px}
.target{display:flex;align-items:center;gap:14px;border-radius:var(--r2);padding:14px;text-align:left;width:100%;background:var(--fill)}
.target:hover{background:var(--fill2)}
.target img,.target .fallback-ic{width:28px;height:28px;border-radius:var(--r)}
.target b{display:block;font-size:15px;font-weight:500}
.target span{display:block;font-size:13px;color:var(--ink3)}
.target .arr{margin-left:auto;color:var(--ink4)}
.med-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}

/* ask meld */
.askpanel{position:fixed;right:24px;top:80px;z-index:71;width:400px;max-height:70vh;background:var(--surface);border-radius:var(--r3);box-shadow:var(--sh3);padding:24px;display:none;flex-direction:column;gap:14px;animation:pop .16s var(--ease)}
.askpanel.open{display:flex}
.askpanel h4{font-family:var(--serif);font-size:22px}
.askpanel .hint{font-size:15px;color:var(--ink3);line-height:1.5}
.ask-chips{display:flex;flex-wrap:wrap;gap:6px}
.ask-input{display:flex;gap:8px;align-items:center;background:var(--fill);border-radius:var(--pill);padding:6px 6px 6px 16px}
.ask-input input{flex:1}

/* drawers / docks */
.drawer-wrap #d-left{position:fixed;top:72px;bottom:0;left:0;width:320px;z-index:65;background:var(--bg);transform:translateX(-102%);transition:transform .25s var(--ease);box-shadow:var(--sh3)}
.drawer-wrap.open-src #d-left{transform:none}
.scrim{position:fixed;inset:0;background:rgba(20,20,20,.3);z-index:64;opacity:0;pointer-events:none;transition:opacity .2s}
.open-src .scrim{opacity:1;pointer-events:auto}
.dockbar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:66;display:flex;gap:6px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-radius:var(--pill);padding:6px;box-shadow:var(--sh2)}
.dockbar .btn{position:relative}
.badge-n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:500;display:grid;place-items:center;padding:0 5px}
.iconrail{width:64px !important;padding:24px 0 !important;display:flex;flex-direction:column;align-items:center;gap:4px}
.iconrail .ir{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;position:relative}
.iconrail .ir img,.iconrail .ir .fallback-ic{width:20px;height:20px;border-radius:4px}
.iconrail .ir:hover{background:var(--fill)}
.iconrail .ir.off{opacity:.3}
.iconrail .ir .tip{position:absolute;left:48px;background:var(--ink);color:#fff;font-size:13px;border-radius:var(--r);padding:5px 9px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:70}
.iconrail .ir:hover .tip{opacity:1}
.iconrail .ir .ct{display:none}
.capsule{position:fixed;top:84px;left:50%;transform:translateX(-50%) translateY(-6px);z-index:60;display:flex;gap:4px;opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-radius:var(--pill);padding:6px;box-shadow:var(--sh2)}
.capsule.show{opacity:1;transform:translateX(-50%);pointer-events:auto}
.sfield{display:flex;align-items:center;gap:10px;height:var(--ctl);border-radius:var(--pill);background:var(--fill);padding:0 16px;color:var(--ink3)}
.sfield input{flex:1}

@media (max-width:900px){
  .topnav{grid-template-columns:auto 1fr auto;gap:12px;padding:0 16px}
  .masonry{columns:2 !important;column-gap:10px}
  .modal{flex-direction:column;overflow-y:auto}
  .modal .m-rail{max-width:none;min-width:0}
  .m-nav.next{right:16px}
  #d-left{display:none}
  :root{--pad:16px}
}

/* js masonry */
.masonry.js{columns:auto;display:flex;gap:var(--gutter);align-items:flex-start}
.masonry.js .mcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--gutter)}
.masonry.js .card{margin-bottom:0}
/* keyboard focus */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r)}
.card:focus-visible{outline-offset:3px}
button:focus:not(:focus-visible){outline:none}

/* mobile: two-row header, full-width search */
@media (max-width:900px){
  .topnav{display:grid;grid-template-columns:1fr auto;grid-template-areas:"left right" "search search";height:auto;padding:10px 16px 12px;row-gap:10px;column-gap:8px}
  .nav-left{grid-area:left;gap:12px}
  .nav-tab{padding:8px 10px;font-size:15px}
  .nav-right{grid-area:right}
  #ask-nav{display:none}
  .hsearch{grid-area:search;height:44px}
  #screen-discover.active{height:auto;min-height:calc(100vh - 116px)}
  #d-main,#d-scroll{overflow:visible}
  #d-top{padding:20px 16px 0}
  .types{gap:10px;overflow-x:auto;scrollbar-width:none}
  .types .right .cnt{display:none}
  .seg button{padding:0 12px;font-size:13px}
  .sec{margin:28px 0 14px}
  h2.sec-title{font-size:20px}
  .ccard{flex:0 0 240px}
  .ccard .collage{height:150px}
  .vdock,.vsheet{display:none}
  .col-grid{gap:28px 16px}
  #screen-collections,#screen-detail{padding-left:16px;padding-right:16px}
  .identity h1,.detail-head h1{font-size:30px}
  .detail-head{flex-wrap:wrap}
  .detail-actions{margin-left:0;width:100%}
}

/* ===== v4: type scale, contrast, one blue, new components ===== */
:root{--ink4:#a1a1a1;--label:#6f6f6f}
.lbl,.side-head,.m-sec h5,.sum-sec h3,.vsheet h4,.dd-h{color:var(--label)}
.dd-h{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px 4px}
/* scale: 12 / 13 / 15 / 22 / 30 / 40 */
.nav-tab,.nav-link,.hsearch input,.seg button,.chip,.dd-item,.src-row,.grp-toggle,.facet-row,.btn,.split,.ccard .cm .nm,.pcard .ph b,.col-meta .nm,.sum-line .txt,.m-desc,.m-src,.target b,.detail-tabs button,.scope button,.v-item b{font-size:15px}
.meta-line,.ccard .own,.pcard .ph span,.pcard .pst,.col-meta .ct,.src-row .ct,.facet-row .ct,.seg .n,.types .right,.tag,.card .src-pill,.card .post-pill,.card .save-btn,.m-sub,.identity .hd,.detail-head .sub,.crumb,.sec .more,.v-item span,.scope .n,.detail-tabs .n,.grp-toggle .gct,.toast,.priv-chip,.incol span,.vdock{font-size:13px}
.card .save-btn{font-size:13px;font-weight:500}
.seg .n,.detail-tabs .n,.scope .n{margin-left:6px;color:var(--label)}
.identity h1,.detail-head h1{font-weight:400}
/* avatars: 11px floor */
.avatar.sm,.card .post-pill .avatar,.ccard .cm .avatar,.col-meta .ct .avatar,.detail-head .sub .avatar,.pchip .avatar{width:22px;height:22px;font-size:11px;margin:0}
.fallback-ic{font-size:11px}
.pcard .strip{height:96px;gap:6px}
.pcard .strip img{border-radius:8px}
.pcard .strip img:nth-child(n+3){display:none}
/* one blue per screen: everything else ink */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bell .badge{background:var(--ink)}
.dd-item .ck{color:var(--ink);font-weight:500}
.link:hover{color:var(--ink)}
.hsearch:focus-within{box-shadow:0 0 0 1px var(--line),var(--sh2);outline:none}
.hsearch input:focus-visible{outline:none}
/* active filter chips + empty state */
.active-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-6px 0 18px}
.empty{padding:72px 0 40px;max-width:520px}
.empty-t{font-family:var(--serif);font-size:30px;line-height:1.15}
.empty-s{font-size:15px;color:var(--ink2);margin-top:10px}
.empty-a{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
/* rail */
.m-src{display:flex;align-items:center;gap:10px;color:var(--ink)}
.m-src .muted{color:var(--ink3)}
a.m-src:hover span:first-of-type{text-decoration:underline;text-underline-offset:3px}
.m-actions{margin-bottom:24px}
.m-sec{margin-top:26px}
.who{display:flex;flex-wrap:wrap;gap:8px}
.who .chip,.who .pchip{height:36px}
.pchip .muted{margin-left:2px}
.inl{flex:1;height:32px;padding:0 10px;border-radius:var(--r);background:var(--fill);font-size:15px}
.toast-a{margin-left:14px;color:#fff;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.detail-actions .btn.ghost{height:40px}
h1[contenteditable="true"]{outline:2px solid var(--ink);outline-offset:6px;border-radius:4px}
/* sort checkmark & chips stay ink */
.chip.on{background:var(--ink)}
.vdock{display:none}

/* v5 */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:999px;display:block}
.card .cmt-pill{position:absolute;right:12px;bottom:12px;color:#fff;font-size:13px;opacity:0;transition:opacity .15s var(--ease);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.card:hover .cmt-pill{opacity:1}
.card .vid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center;font-size:13px;padding-left:2px;pointer-events:none}
.card:hover .vid{opacity:0}
.m-media{position:relative}
.vid.big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:999px;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:20px;padding-left:3px}
.m-sec.note .m-desc{font-family:var(--serif);font-size:20px;line-height:1.4;color:var(--ink)}
.comment .t{margin-top:2px}
.sum-line .avatar.sm{flex:0 0 auto}

/* ===== v6 ===== */
/* card: media + source caption at rest */
.card{background:transparent;overflow:visible;border-radius:0}
.card .media{position:relative;border-radius:var(--r2);overflow:hidden;background:var(--surface2)}
.card .media img{border-radius:0}
.card .cap{display:flex;align-items:center;gap:7px;margin-top:8px;padding:0 2px;font-size:13px;color:var(--ink2);cursor:pointer;min-height:18px}
.card .cap img,.card .cap .fallback-ic{width:16px;height:16px;border-radius:4px;flex:0 0 auto}
.card .cap .cap-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .cap .cap-o{color:var(--ink4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .cap .cap-o::before{content:'·';margin-right:7px}
.card .cap:hover .cap-s{text-decoration:underline;text-underline-offset:3px}
.card .post-pill,.card .src-pill,.card .cmt-pill,.card .save-btn,.card .vid,.card .dim{position:absolute}
.row-scroll.cards{gap:16px}
.row-scroll.cards .card{flex:0 0 220px;margin:0}
.row-scroll.cards .card .media{height:220px}
.row-scroll.cards .card .media img{width:100%;height:100%;object-fit:cover}
/* rail groups */
.side-block .side-head{padding-top:14px}
.fg{margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 8px}
.chip.sm{height:32px;padding:0 11px;font-size:13px;gap:5px}
.chip .ct{color:var(--ink4);font-size:12px}
.chip.on .ct,.chip.on .muted{color:rgba(255,255,255,.7)}
.hues{display:flex;gap:8px;padding:2px 8px 10px}
.hue{width:22px;height:22px;border-radius:999px;background:var(--c);position:relative;transition:transform .12s var(--ease)}
.hue:hover{transform:scale(1.1)}
.hue.on::after{content:'';position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--ink)}
.hue.mini{width:12px;height:12px;display:inline-block;margin-right:6px}
.pavs{display:flex;flex-direction:column;gap:1px}
.pav{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--r);font-size:15px;color:var(--ink2);text-align:left}
.pav:hover{background:var(--fill)}
.pav.on{color:var(--ink);background:var(--fill);font-weight:500}
.pav .avatar{width:24px;height:24px;font-size:11px;margin:0}
.pav .pn{flex:1}
.pav .ct{font-size:12px;color:var(--ink4)}
.link-ish{color:var(--blue) !important}
/* option B: structured bar */
.bar-wrap{position:relative;margin:0 auto 20px;max-width:900px}
.bar{display:flex;align-items:center;height:66px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08);position:relative;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.bar.open{background:#e9e9e6;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.bseg{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;height:66px;padding:0 28px;border-radius:999px;text-align:left;position:relative;min-width:0}
.bseg+.bseg::before{content:'';position:absolute;left:0;top:17px;height:32px;width:1px;background:rgba(0,0,0,.1)}
.bar.open .bseg+.bseg::before{opacity:0}
.bseg .bl{font-size:12px;font-weight:500;color:var(--ink)}
.bseg .bv{font-size:15px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bseg input{font-size:15px;color:var(--ink);width:100%}
.bseg input::placeholder{color:var(--ink3)}
.bar.open .bseg:hover:not(.on){background:rgba(0,0,0,.05)}
.bseg.on{background:var(--surface);box-shadow:0 3px 12px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.08);z-index:1}
.bseg.what{flex:1.3}
.bgo{width:48px;height:48px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;margin:0 9px 0 0;flex:0 0 auto;transition:width .2s var(--ease)}
.bgo:hover{background:#000}
.bpanel{position:absolute;top:78px;left:0;width:440px;max-height:520px;overflow-y:auto;background:var(--surface);border-radius:var(--r3);box-shadow:0 2px 6px rgba(0,0,0,.08),0 24px 60px rgba(0,0,0,.14);padding:14px 10px;z-index:50;animation:pop .18s var(--ease)}
.bpanel.wide{width:100%}
.bpanel .src-group{margin:0}
.bpanel .fg{margin:0}
/* option C: shelf */
.shelf{display:flex;gap:8px;overflow-x:auto;padding:14px 0 6px;margin-right:calc(-1 * var(--pad));padding-right:var(--pad);scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}
.stile{flex:0 0 auto;display:flex;align-items:center;gap:10px;height:48px;padding:0 14px 0 12px;border-radius:var(--r2);background:var(--fill);color:var(--ink2);text-align:left}
.stile img,.stile .fallback-ic{width:20px;height:20px;border-radius:5px}
.stile .sn{font-size:14px;font-weight:500;color:var(--ink)}
.stile .sc{font-size:12px;color:var(--ink4)}
.stile:hover{background:var(--fill2)}
.stile.on{background:var(--ink);color:#fff}
.stile.on .sn,.stile.on .sc{color:#fff}
.stile.all.on{background:var(--ink)}
.stile.more .sn{color:var(--ink2);font-weight:400}
/* option D: rows by source */
.srow{margin-top:28px}
.srow-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.srow-h img,.srow-h .fallback-ic{width:22px;height:22px;border-radius:6px}
.srow-h b{font-family:var(--serif);font-weight:400;font-size:22px}
.srow-h .dom{font-size:13px}
.srow-h .more{margin-left:auto;font-size:14px;color:var(--ink3)}
.srow-h .more:hover{color:var(--ink)}
/* filters / sources sheet */
.modal.filters{display:flex;flex-direction:column;width:min(600px,94vw);max-height:86vh}
.f-body{flex:1;overflow-y:auto;padding:36px 36px 24px}
.f-body .fg{margin-bottom:26px}
.f-body .side-head,.f-body .chips,.f-body .hues,.f-body .pavs{padding-left:0;padding-right:0}
.f-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;box-shadow:0 -2px 16px rgba(0,0,0,.06)}
.src-sheet .src-group{margin:0}
/* image view: reading sheet */
.overlay.sheet{align-items:flex-start;overflow-y:auto;padding:24px 32px 60px}
.sheet-wrap{width:min(1180px,96vw);margin:0 auto}
.overlay.sheet .modal{max-height:82vh}
.sheet-below{background:var(--bg);border-radius:var(--r3);padding:8px 40px 32px;margin-top:16px}
.sheet-below .sec{margin-top:28px}
/* collection page: split */
.split-wrap{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;margin-top:26px}
.split-aside{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:6px}
.summary.tight{margin:0;max-width:none}
.summary.tight .sum-intro{font-size:18px}
.summary.tight .sum-sec{margin-top:28px}
.summary.tight .sum-line .thumbs img{width:44px;height:44px}
body.hide-hsearch .hsearch{visibility:hidden}
@media (max-width:900px){.split-wrap{grid-template-columns:1fr}.split-aside{position:static}.bar{height:auto;flex-wrap:wrap;border-radius:var(--r3)}.bseg{flex:1 1 45%}}

/* ===== v7 ===== */
body{background:#f4f5f4 !important}  /* flat, no texture */
.topnav{background:rgba(244,245,244,.9)}
/* header pill */
.hsearch.pill{padding:0 6px 0 0;justify-content:space-between;gap:0}
.pill-btn{flex:1;display:flex;align-items:center;height:48px;padding:0 6px 0 20px;text-align:left;min-width:0}
.pill-btn .ps{font-size:14px;color:var(--ink2);padding:0 14px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill-btn .ps.q{color:var(--ink);font-weight:500;padding-left:0;max-width:220px}
.pill-btn .ps+.ps::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);height:18px;width:1px;background:rgba(0,0,0,.14)}
.pill-go{width:36px;height:36px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.pill-go:hover{background:#000}
.hsearch.pill:focus-within{background:var(--fill)}
#add-nav{height:40px}
/* top sheet */
#sheet-scrim{position:fixed;inset:0;z-index:85;background:rgba(20,20,20,.35);opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}
body.sheet-open #sheet-scrim{opacity:1;pointer-events:auto}
#sheet{position:fixed;left:0;right:0;top:0;z-index:86;background:var(--surface);border-radius:0 0 var(--r3) var(--r3);box-shadow:0 30px 80px rgba(0,0,0,.2);transform:translateY(-100%);transition:transform .26s var(--ease);max-height:88vh;display:flex;flex-direction:column}
body.sheet-open #sheet{transform:none}
.sh-inner{max-width:1240px;margin:0 auto;padding:24px var(--pad) 0;display:flex;flex-direction:column;min-height:0;width:100%}
.sh-search{display:flex;align-items:center;gap:14px;height:60px;padding:0 8px 0 20px;border-radius:999px;background:var(--fill);color:var(--ink3)}
.sh-search input{flex:1;font-size:18px;color:var(--ink)}
.sh-search input::placeholder{color:var(--ink4)}
.sh-go{height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:500;font-size:15px}
.sh-go:hover{background:#000}
.sh-cols{display:grid;grid-template-columns:1fr 340px;gap:40px;margin-top:26px;overflow:hidden;min-height:0}
.sh-sources,.sh-refine{overflow-y:auto;padding-bottom:8px;min-height:0}
.sh-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.sh-h .muted{font-size:14px}
.sh-h .btn.text.sm{height:auto;padding:0;font-size:14px;margin-left:auto;color:var(--blue)}
.sh-ws{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.wtile{display:flex;align-items:center;gap:12px;height:60px;padding:0 16px;border-radius:var(--r2);background:var(--fill);text-align:left}
.wtile img,.wtile .fallback-ic{width:28px;height:28px;border-radius:7px;flex:0 0 auto}
.wtile b{display:block;font-weight:500;font-size:15px}
.wtile small{display:block;font-size:13px;color:var(--ink3)}
.wtile span:nth-child(2){flex:1;min-width:0}
.wtile:hover{background:var(--fill2)}
.wtile.on{background:var(--ink);color:#fff}
.wtile.on small{color:rgba(255,255,255,.7)}
.wtile.connect .link-ish{font-size:14px;font-weight:500}
.sh-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.sh-cats .chip{height:34px;font-size:14px}
.sh-arch-tools{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.sfield.sm{height:40px;flex:1;max-width:320px;gap:8px}
.sfield.sm input{font-size:14px}
.btn.ghost.sm{height:40px;font-size:14px}
.atiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.atile{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;border-radius:var(--r);text-align:left;color:var(--ink)}
.atile img,.atile .fallback-ic{width:18px;height:18px;border-radius:4px;flex:0 0 auto}
.atile .an{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atile .ac{font-size:12px;color:var(--ink4)}
.atile:hover{background:var(--fill)}
.atile.quiet .an{color:var(--ink3)}
.atile.on{background:var(--ink);color:#fff}
.atile.on .an,.atile.on .ac{color:#fff}
.rf{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.rf:first-of-type{border-top:none}
.rf-l{font-size:13px;color:var(--ink3);padding-top:8px}
.rf .chips,.rf .hues{padding:0}
.rf .hues{padding-bottom:8px}
.dd-menu.ppl{min-width:280px;max-height:320px;overflow-y:auto}
.sh-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 18px;border-top:1px solid var(--line);margin-top:12px}
.sh-foot .muted{margin-left:auto;font-size:14px}
/* collections page */
.cv-mosaic .cv-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:var(--ink4);padding:20px;text-align:center}
.col-visual{position:relative}
/* overview */
.summary.ov{max-width:920px}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 40px;margin-top:36px}
.ov-block h3{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--label);margin-bottom:12px}
.pal.wrap{flex-wrap:wrap}
.tonebar{display:flex;height:22px;border-radius:999px;overflow:hidden;margin-top:12px;font-size:11px;font-weight:500;letter-spacing:.02em}
.tonebar .tb{display:grid;place-items:center;white-space:nowrap;overflow:hidden}
.tonebar .dark{background:#2a2a2a;color:#fff}.tonebar .mid{background:#9a9a9a;color:#fff}.tonebar .light{background:#e6e6e3;color:var(--ink2)}
.kws{display:flex;flex-wrap:wrap;gap:6px}
.kw{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:999px;background:var(--fill);font-size:14px;color:var(--ink)}
.kw:hover{background:var(--fill2)}
.kw .ct{font-size:12px;color:var(--ink4)}
.nthumb{width:56px;height:56px;object-fit:cover;border-radius:var(--r);flex:0 0 auto}
.summary.tight .ov-grid{grid-template-columns:1fr;gap:26px}
/* ask side sheet */
#ask-scrim{position:fixed;inset:0;z-index:84;background:rgba(20,20,20,.18)}
.askside{position:fixed;top:12px;right:12px;bottom:12px;width:440px;z-index:87;background:var(--surface);border-radius:var(--r3);box-shadow:var(--sh3);padding:24px;display:flex;flex-direction:column;gap:14px;transform:translateX(24px);opacity:0;transition:transform .22s var(--ease),opacity .22s var(--ease)}
.askside.open{transform:none;opacity:1}
.ask-h{display:flex;align-items:center;justify-content:space-between}
.ask-h h4{font-family:var(--serif);font-size:26px;font-weight:400}
.ask-h .m-close{position:static}
.askside .hint{font-size:15px;color:var(--ink2);line-height:1.5}
.ask-sugg{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.askside .ask-input{margin-top:6px}
@media (max-width:900px){.askside{inset:0;width:auto;border-radius:0}.sh-cols{grid-template-columns:1fr}.sh-refine{display:none}.sh-ws{grid-template-columns:1fr}}
/* add flow */
.modal.add{display:block;width:min(640px,94vw);max-height:88vh;overflow-y:auto}
.add-body{padding:36px 36px 32px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:160px;margin-top:22px;border:1.5px dashed var(--fill2);border-radius:var(--r2);cursor:pointer;transition:background-color .15s,border-color .15s}
.drop:hover,.drop.over{background:var(--fill);border-color:var(--ink4)}
.drop-t{font-size:16px;font-weight:500}
#add-status{margin-top:18px}
.ing{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.ing-th{width:64px;height:64px;border-radius:var(--r);background:var(--surface2);overflow:hidden;display:grid;place-items:center;flex:0 0 auto}
.ing-th img{width:100%;height:100%;object-fit:cover}
.ing-th .fallback-ic,.ing-th>img[src*="favicons"]{width:28px;height:28px}
.ing-b{flex:1;min-width:0}
.ing-t{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ing-s{font-size:13px;margin-top:2px}
.ing-m{display:flex;align-items:center;gap:12px;margin-top:8px}
.pal.mini .sw{width:18px;height:18px}
.okmark{width:26px;height:26px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;animation:pop .25s var(--ease)}
.okmark.big{width:40px;height:40px;font-size:18px}
.ing-foot{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.ing-done{display:flex;align-items:center;gap:14px;padding:18px 0 4px;margin-top:8px;border-top:1px solid var(--line)}
.ing-done>div{flex:1}

/* ===== v8 ===== */
/* natural page scroll */
#screen-discover.active{display:block;height:auto;min-height:calc(100vh - 72px)}
#d-main,#d-scroll{overflow:visible}
#d-left{display:none !important}
#d-top{padding:24px var(--pad) 0}
.types .right{gap:10px}
/* header field */
.hsearch.pill{padding:0 8px 0 18px;gap:10px}
.pill-btn.one{padding:0;height:48px;flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.pill-btn .ps.ph{color:var(--ink4);font-size:15px;padding:0}
.pill-btn .ps.q{max-width:none;padding:0;font-size:15px}
.pill-btn .ps.scope{font-size:13px;color:var(--ink3);padding:0 0 0 10px}
.pill-btn .ps.scope::before{left:0}
.hsearch.typing input{flex:1;font-size:15px}
/* instant */
#instant{position:fixed;z-index:88;background:var(--surface);border-radius:var(--r3);box-shadow:var(--sh3);padding:10px;max-height:70vh;overflow-y:auto;animation:pop .16s var(--ease)}
.in-sec{padding:6px 6px 10px}
.in-sec+.in-sec{border-top:1px solid var(--line);padding-top:12px}
.in-h{display:flex;align-items:baseline;gap:10px;padding:0 6px 8px}
.in-h .more{margin-left:auto;font-size:13px;color:var(--ink3)}
.in-thumbs{display:flex;gap:6px;overflow:hidden}
.in-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:var(--r);cursor:pointer;flex:0 0 auto}
.in-th{width:32px;height:32px;object-fit:cover;border-radius:6px}
/* sheet: quiet by default */
.sh-scope{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:14px;padding:0 6px}
.sh-scope .btn.text.sm{height:auto;padding:0;font-size:14px;color:var(--blue)}
.sh-recent{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px;padding:0 6px 24px}
.sh-go .n{margin-left:8px;color:rgba(255,255,255,.7);font-weight:400}
.finder{display:grid;grid-template-columns:300px 1fr;gap:28px;margin-top:22px;max-height:52vh;min-height:280px}
.fd-left{overflow-y:auto;display:flex;flex-direction:column;gap:1px;padding-right:6px;border-right:1px solid var(--line)}
.fd-row{display:flex;align-items:center;gap:12px;height:52px;padding:0 12px;border-radius:var(--r);text-align:left;color:var(--ink)}
.fd-row img,.fd-row .fallback-ic{width:20px;height:20px;border-radius:5px;flex:0 0 auto}
.fd-dot{width:20px;height:20px;border-radius:5px;background:var(--fill);flex:0 0 auto}
.fd-row .fl{flex:1;min-width:0}
.fd-row .fl b{display:block;font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-row .fl small{display:block;font-size:13px;color:var(--ink3)}
.fd-row:hover{background:var(--fill)}
.fd-row.cur{background:var(--fill)}
.fd-row .ck{color:var(--ink);font-weight:500}
.fd-right{overflow-y:auto;padding-right:6px}
.fd-note{font-size:15px;line-height:1.5;max-width:520px;margin-bottom:14px}
.fd-cat-h{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.refine{margin-top:22px;border-top:1px solid var(--line);padding-top:6px;max-width:760px}
.sh-inner{padding-bottom:22px}
/* card hover info */
.card .hv{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;color:#fff;opacity:0;transform:translateY(4px);transition:opacity .15s var(--ease),transform .15s var(--ease);text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none}
.card:hover .hv{opacity:1;transform:none}
.hv-title{font-weight:500;font-size:15px;line-height:1.3}
.hv-note{font-size:13px;line-height:1.4;font-family:var(--serif);font-size:15px}
.hv-note.dim2{font-family:var(--sans);font-size:13px;opacity:.85}
.hv-who{display:flex;align-items:center;gap:7px;font-size:13px;opacity:.9}
.hv-who .avatar{width:20px;height:20px;font-size:9px;margin:0;background:#fff;color:var(--ink)}
.card .dim{background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 100%)}
.card .cap{color:var(--ink3);font-size:13px;margin-top:7px}
/* notes + comments in rail */
.addnote{height:40px;width:100%;text-align:left;padding:0 14px;border-radius:var(--r);background:var(--fill);color:var(--ink3);font-size:15px}
.addnote:hover{background:var(--fill2);color:var(--ink)}
.notein{width:100%;border:none;background:var(--fill);border-radius:var(--r);padding:10px 12px;font:inherit;font-size:15px;resize:vertical;outline:none}
.notein:focus{background:var(--surface);box-shadow:0 0 0 2px var(--ink)}
.composer{display:flex;align-items:center;gap:8px;margin-top:10px}
.composer input{flex:1;height:36px;padding:0 12px;border-radius:999px;background:var(--fill);font-size:14px}
/* add flow review */
.rv-list{margin-top:20px;display:flex;flex-direction:column;gap:14px;max-height:48vh;overflow-y:auto}
.rv{display:flex;gap:14px;padding:12px;border-radius:var(--r2);background:var(--fill)}
.rv-th{width:84px;height:84px;border-radius:var(--r);background:var(--surface);overflow:hidden;display:grid;place-items:center;flex:0 0 auto;position:relative}
.rv-th img{width:100%;height:100%;object-fit:cover}
.rv-th .fallback-ic,.rv-th>img[src*="favicons"]{width:28px;height:28px}
.spin{position:absolute;inset:0;background:rgba(255,255,255,.6);display:grid;place-items:center}
.spin::after{content:'';width:18px;height:18px;border-radius:999px;border:2px solid var(--ink4);border-top-color:var(--ink);animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.rv-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rv-title{font-size:15px;font-weight:500;background:none;border:none;outline:none;padding:2px 0;border-bottom:1px solid transparent}
.rv-title:focus{border-bottom-color:var(--ink)}
.rv-meta{display:flex;align-items:center;gap:10px}
.rv-note{border:none;background:var(--surface);border-radius:var(--r);padding:8px 10px;font:inherit;font-size:14px;resize:none;outline:none}
.rv-note:focus{box-shadow:0 0 0 2px var(--ink)}
.rv-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rv-foot .dd{display:flex;align-items:center}
.btn[disabled]{opacity:.5;cursor:default}
.done{text-align:center;padding:24px 0 8px}
.done .okmark.big{margin:0 auto}

/* ===== v9 ===== */
.kbd{margin-left:auto;font-family:var(--sans);font-size:11px;color:var(--ink4);background:var(--surface);border-radius:6px;padding:2px 6px;box-shadow:var(--sh1)}
.hsearch.pill .kbd{margin-left:6px}
/* scope line + archives button */
.scope{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px}
.scope.pg-scope{margin:16px 0 4px}
.scope.sh-scope{margin-top:16px;padding:0 6px}
.scope .btn.text.sm{height:auto;padding:0;font-size:14px;color:var(--blue)}
.scope-btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 8px;border-radius:999px;background:var(--fill);font-size:15px;font-weight:500;color:var(--ink)}
.scope-btn:hover{background:var(--fill2)}
.scope-btn svg{color:var(--ink4)}
.favs{display:inline-flex}
.favs img,.favs .fallback-ic{width:22px;height:22px;border-radius:999px;outline:2px solid var(--surface);outline-offset:0;margin-left:-6px;background:#fff;object-fit:cover}
.favs img:first-child,.favs .fallback-ic:first-child{margin-left:0}
.favs .fallback-ic{font-size:9px}
/* popovers for instant/scope-bar options */
.pop{position:fixed;z-index:89;background:var(--surface);border-radius:var(--r3);box-shadow:var(--sh3);padding:16px;animation:pop .16s var(--ease)}
.pop.finderpop{width:min(920px,92vw)}
.pop.finderpop .finder{margin-top:0;max-height:56vh}
.pop.refinepop{width:min(720px,92vw)}
.pop.refinepop .refine{margin-top:0;border-top:none;padding-top:0}
/* palette */
.overlay.pal-overlay{align-items:flex-start;padding-top:12vh}
.palette{width:min(760px,94vw);background:var(--surface);border-radius:var(--r3);box-shadow:var(--sh3);overflow:hidden;animation:pop .18s var(--ease)}
.pal-in{display:flex;align-items:center;gap:12px;padding:0 18px;height:60px;border-bottom:1px solid var(--line);color:var(--ink3)}
.pal-in input{flex:1;font-size:18px;color:var(--ink)}
.pal-tabs{display:flex;gap:18px;padding:12px 18px 0}
.pal-tabs button{padding:6px 0 10px;color:var(--ink3);border-bottom:1px solid transparent;font-size:14px}
.pal-tabs button.on{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)}
.pal-body{padding:12px 12px 6px;max-height:50vh;overflow-y:auto}
.pal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.pal-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);cursor:pointer}
.pal-foot{display:flex;justify-content:space-between;padding:10px 18px 14px;font-size:13px;border-top:1px solid var(--line)}
/* note card */
.notecard{display:flex;gap:12px;margin:18px 0 4px;padding:14px;background:var(--fill);border-radius:var(--r2)}
.notecard .avatar{width:32px;height:32px;font-size:12px;margin:0;flex:0 0 auto}
.nc-who{font-size:14px;font-weight:500}
.nc-t{font-family:var(--serif);font-size:18px;line-height:1.4;margin-top:4px}
/* pinterest inline */
.overlay.pin{background:var(--bg);align-items:flex-start;overflow-y:auto;padding:24px 40px 80px}
.overlay.pin .modal{box-shadow:0 0 0 1px var(--line);border-radius:24px}
.overlay.pin .sheet-below{background:transparent;padding:0}
.overlay.pin .m-close{box-shadow:var(--sh1)}
/* full screen */
.overlay.fsl,.overlay.fsd{padding:0;align-items:stretch}
.overlay.fsl .modal,.overlay.fsd .modal{width:100vw;max-height:100vh;height:100vh;border-radius:0;flex-direction:column;box-shadow:none;background:var(--bg)}
.overlay.fsd{background:#0a0a0a}
.overlay.fsd .modal{background:#0a0a0a;color:#f0f0f0}
.overlay.fsl .m-media,.overlay.fsd .m-media{flex:1;background:transparent;padding:40px 40px 16px;min-height:0}
.overlay.fsd .m-media{background:#0a0a0a}
.overlay.fsl .m-media img,.overlay.fsd .m-media img{max-height:100%;max-width:100%;border-radius:var(--r)}
.fs-cap{display:flex;align-items:flex-start;gap:32px;padding:6px 48px 10px}
.fs-l{flex:1;min-width:0}
.fs-t{font-family:var(--serif);font-size:24px;line-height:1.2}
.fs-s{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink3);margin-top:6px}
.overlay.fsd .fs-s{color:#a8a8a8}
.fs-note{font-family:var(--serif);font-size:17px;line-height:1.4;margin-top:8px;max-width:640px}
.fs-a{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.overlay.fsd .btn.ghost{background:rgba(255,255,255,.1);color:#fff}
.overlay.fsd .split{background:rgba(255,255,255,.1);color:#fff}
.overlay.fsd .split .chev{border-left-color:rgba(255,255,255,.15)}
.fs-strip{display:flex;gap:8px;padding:8px 48px 24px;overflow-x:auto;scrollbar-width:none}
.fs-strip img{height:72px;width:auto;border-radius:6px;cursor:pointer;opacity:.85;transition:opacity .15s}
.fs-strip img:hover{opacity:1}
.overlay.fsl .m-rail.drawer,.overlay.fsd .m-rail.drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:90vw;transform:translateX(102%);transition:transform .25s var(--ease);box-shadow:var(--sh3);background:var(--surface);z-index:5}
.overlay.fsd .m-rail.drawer{background:#161616;color:#f0f0f0}
.overlay.fsd .m-rail.drawer .muted,.overlay.fsd .m-rail.drawer h5,.overlay.fsd .m-rail.drawer .m-sub{color:#a8a8a8}
.overlay.fsd .m-rail.drawer .tag,.overlay.fsd .m-rail.drawer .notecard,.overlay.fsd .m-rail.drawer .incol:hover,.overlay.fsd .composer input{background:rgba(255,255,255,.08);color:#f0f0f0}
.overlay.drawer-open .m-rail.drawer{transform:none}
.overlay.fsl .m-nav,.overlay.fsd .m-nav{top:auto;bottom:140px}
.overlay.fsd .m-nav,.overlay.fsd .m-close{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.overlay.fsl .m-nav.next,.overlay.fsd .m-nav.next{right:16px}
/* ref-style: rail left */
.overlay.refl{background:rgba(20,20,20,.7);backdrop-filter:blur(18px)}
.overlay.refl .modal{flex-direction:row-reverse;background:transparent;box-shadow:none;width:min(1240px,96vw)}
.overlay.refl .m-media{background:transparent;padding:0 0 0 24px}
.overlay.refl .m-media img{border-radius:var(--r2);box-shadow:var(--sh3)}
.overlay.refl .m-rail{background:var(--surface);border-radius:var(--r3);max-width:420px}
.overlay.refl .m-nav.prev{left:calc(420px + 40px)}
.overlay.refl .m-nav.next{right:16px}
.overlay.refl .m-close{right:auto;left:16px}
.thumbrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.thumbrow img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;cursor:pointer}
/* add flow */
.drop.slim{height:76px;margin-top:16px;flex-direction:row;gap:10px}
.rv-x{color:var(--ink4);width:28px;height:28px;border-radius:999px}
.rv-x:hover{background:var(--fill);color:var(--ink)}
.chip.saveto{height:40px;gap:8px}
.dd-menu.colpick .sfield.sm{height:36px}
/* playground */
.vsheet.pg{left:auto;right:24px;bottom:auto;top:84px;width:380px;max-height:calc(100vh - 110px)}
.pg-h{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px}
.pg-h b{font-family:var(--serif);font-weight:400;font-size:22px}
.pg-h .m-close{position:static;width:30px;height:30px}

/* ===== v10 ===== */
/* header: keep one line */
.topnav{grid-template-columns:1fr minmax(320px,520px) 1fr;gap:20px}
.nav-right{gap:2px}
.nav-link{padding:9px 12px;font-size:14.5px}
#add-nav{height:38px;padding:0 14px;margin-left:6px}
.hsearch.pill .kbd{display:none}
/* scope line: plain */
.scope{font-size:15px;color:var(--ink2);gap:8px;row-gap:8px}
.scope.pg-scope{margin:14px 0 2px}
.scope-link{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-size:15px;padding:2px 0}
.scope-link u{text-decoration-color:var(--ink4);text-underline-offset:3px}
.scope-link:hover u{text-decoration-color:var(--ink)}
.scope-link img,.scope-link .fallback-ic{width:18px;height:18px;border-radius:4px}
.scope-link .favs img,.scope-link .favs .fallback-ic{width:20px;height:20px;border-radius:999px;margin-left:-6px;outline:2px solid var(--bg)}
.scope-link .favs img:first-child,.scope-link .favs .fallback-ic:first-child{margin-left:0}
.scope-sep{color:var(--ink4)}
.fchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 8px;border-radius:999px;background:var(--fill);font-size:13.5px;color:var(--ink)}
.fchip .chip-x{opacity:.55;padding:0 4px}
.fchip:hover .chip-x{opacity:1}
.avatar.xs{width:18px;height:18px;font-size:8px;margin:0}
.scope-btn,.badge-n{display:none}
/* finder */
.finder{display:block;margin-top:18px}
.fd-sel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;padding:10px 12px;border-radius:var(--r2);background:var(--fill);margin-bottom:14px;min-height:44px}
.fd-sel .fchip{background:var(--surface)}
.fd-cols{display:grid;grid-template-columns:300px 1fr;gap:24px;max-height:min(52vh,520px)}
.fd-cols .fd-left,.fd-cols .fd-right{overflow-y:auto;min-height:0}
.fd-row .box,.atile .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--ink4);display:grid;place-items:center;font-size:11px;color:#fff;flex:0 0 auto}
.fd-row.on .box,.atile.on .box{background:var(--ink);border-color:var(--ink)}
.fd-row.dis{opacity:.7}
.fd-row .mini-btn{min-width:28px;height:28px;display:grid;place-items:center;font-size:18px;font-weight:400;line-height:1;color:var(--ink4);background:none;border-radius:0}
.fd-row .mini-btn:hover{color:var(--ink);background:none}
.atile.chk{height:44px}
.atile.on{background:var(--fill);color:var(--ink)}
.atile.on .an,.atile.on .ac{color:var(--ink)}
.pop.finderpop{width:min(960px,92vw);padding:18px}
.pop.finderpop .finder{margin-top:0}
.pop.finderpop .fd-cols{max-height:min(56vh,560px)}
/* suggestions */
.sh-sugg{margin-top:18px;padding:0 6px 20px}
.sg-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sg-list{margin-top:10px;display:flex;flex-direction:column;gap:2px;max-width:560px}
/* jump palette */
.palette.jump{width:min(860px,94vw)}
.jump-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;border-top:1px solid var(--line)}
.jump-cols .in-sec{border-top:none !important;padding-top:12px}
.jump-actions{display:flex;gap:6px;border-top:1px solid var(--line);flex-wrap:wrap}
.jump-actions .dd-item{width:auto;gap:8px}
/* explore strip */
.xsec{margin-top:18px}
.xstrip{display:flex;flex-wrap:wrap;gap:6px}
.xp{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 8px;border-radius:999px;background:var(--fill);font-size:13.5px;color:var(--ink)}
.xp:hover{background:var(--fill2)}
.xp img,.xp .fallback-ic{width:16px;height:16px;border-radius:4px}
.xp .avatar.sm{width:20px;height:20px;font-size:9px}
.in-th.sm{width:18px;height:18px;border-radius:4px}
/* tabbed rail */
.rail-tabs{display:flex;gap:18px;margin:6px 0 16px;border-bottom:1px solid var(--line)}
.rail-tabs button{padding:6px 0 10px;color:var(--ink3);border-bottom:1px solid transparent;margin-bottom:-1px;font-size:14px}
.rail-tabs button.on{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)}
.rail-tabs .n{color:var(--ink4);font-size:12px;margin-left:4px}
.rpane{display:none}.rpane.on{display:block}
.rpane .m-sec:first-child{margin-top:0}
.vhandle{width:14px;cursor:col-resize;display:grid;place-items:center;flex:0 0 auto;position:relative}
.vhandle::after{content:'';width:4px;height:44px;border-radius:999px;background:var(--fill2)}
.vhandle:hover::after{background:var(--ink4)}
.overlay.tabs .m-rail{flex:0 0 440px;max-width:none}
/* bottom panel */
.overlay.bottom .modal{flex-direction:column;width:min(1100px,96vw);max-height:92vh}
.overlay.bottom .m-media{flex:1;min-height:200px}
.overlay.bottom .m-rail{flex:0 0 auto;height:300px;max-width:none;min-width:0;padding:0 36px 24px;position:relative;border-top:1px solid var(--line)}
.grip{height:22px;display:grid;place-items:center;cursor:row-resize}
.grip span{width:48px;height:5px;border-radius:999px;background:var(--fill2)}
.grip:hover span{background:var(--ink4)}
.bp-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.bp-head .rail-tabs{margin:0;border-bottom:none}
.bp-head .m-actions{margin:0}
.overlay.bottom .m-nav{top:38%}
.overlay.bottom .m-nav.next{right:16px}
/* hub */
.overlay.hub .modal{width:min(1240px,96vw)}
.hub-col{flex:1;min-width:400px;max-width:520px;overflow-y:auto;padding:28px 30px 32px;display:flex;flex-direction:column;gap:10px}
.hub-top{margin-bottom:10px}
.hub-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r2);background:var(--fill);text-align:left;width:100%}
.hub-row:hover{background:var(--fill2)}
.hub-row.static{cursor:default}
.hub-row.static:hover{background:var(--fill)}
.hub-row .avatar{width:32px;height:32px;font-size:12px;margin:0}
.hub-row>img,.hub-row .fallback-ic{width:32px;height:32px;border-radius:8px}
.hub-row .hr-t{flex:1;min-width:0}
.hub-row .hr-t b{display:block;font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-row .hr-t small{display:block;font-size:13px;color:var(--ink3)}
.hub-row .thumbs{display:flex;gap:4px}
.hub-row .thumbs img{width:36px;height:36px;object-fit:cover;border-radius:6px}
.hub-row .pal .sw{width:28px;height:28px}
.hub-sec{margin-top:10px}
.hub-sec h5{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--label);margin-bottom:10px}
.hub-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hub-c{text-align:left;padding:8px;border-radius:var(--r2);background:var(--fill)}
.hub-c:hover{background:var(--fill2)}
.hub-c b{display:block;font-size:14px;font-weight:500;margin-top:8px}
.hub-c small{font-size:12px;color:var(--ink3)}
.collage.sm{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:2px;height:84px;border-radius:8px;overflow:hidden;background:var(--surface2)}
.collage.sm img{width:100%;height:100%;object-fit:cover}
.collage.sm img:first-child{grid-row:1/3}
.thumbrow.six{grid-template-columns:repeat(6,1fr)}
/* lightbox strip */
.overlay.strip{padding:0;align-items:stretch}
.overlay.strip .modal{width:100vw;height:100vh;max-height:100vh;border-radius:0;flex-direction:column;box-shadow:none;background:var(--bg)}
.overlay.strip .m-media{flex:1;background:transparent;padding:36px 40px 8px;min-height:0}
.overlay.strip .m-media img{max-height:100%;border-radius:var(--r)}
.lb-cap{display:flex;align-items:center;gap:14px;padding:6px 48px;font-size:14px;color:var(--ink2)}
.lb-t{font-family:var(--serif);font-size:20px;color:var(--ink)}
.lb-who{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.lb-who:hover{text-decoration:underline;text-underline-offset:3px}
.lb-a{margin-left:auto;display:flex;gap:6px}
.btn.ghost.sm{height:34px;padding:0 12px;font-size:13.5px}
.overlay.strip .m-rail.drawer{position:fixed;top:0;right:0;bottom:0;width:440px;transform:translateX(102%);transition:transform .25s var(--ease);box-shadow:var(--sh3);background:var(--surface);z-index:5}
.overlay.strip .m-nav{top:auto;bottom:150px}
.overlay.strip .m-nav.next{right:16px}
/* article */
.overlay.article{align-items:flex-start;overflow-y:auto;padding:24px 32px 60px}
.overlay.article .modal{flex-direction:column;max-height:none;overflow:visible}
.overlay.article .m-rail{max-width:none;min-width:0;border-top:1px solid var(--line);padding-top:24px}
.overlay.article .m-media{flex:none;background:var(--surface2);padding:0}
.overlay.article .m-media img{max-height:80vh;width:100%;object-fit:contain}
.art-head{padding:36px 40px 20px}
.art-meta{display:flex;align-items:center;gap:12px;font-size:14px}
.art-title{font-family:var(--serif);font-size:38px;line-height:1.1;margin-top:14px;font-weight:400}
.art-note{font-family:var(--serif);font-size:21px;line-height:1.4;margin-top:14px;max-width:760px;color:var(--ink)}
.overlay.article .m-nav{display:none}
.overlay.article .sheet-below{margin-top:16px}
/* playground fab */
#pg-fab{position:fixed;right:24px;bottom:24px;z-index:80;height:40px;padding:0 16px;border-radius:999px;background:var(--surface);box-shadow:var(--sh2);font-size:13.5px;font-weight:500;color:var(--ink2)}
#pg-fab:hover{color:var(--ink);box-shadow:var(--sh3)}
.vsheet.pg{top:auto;bottom:72px;right:24px}

/* ===== v11: real compact layout (640–1100), arrows inside media, no bleed ===== */
/* rows stay inside the margins */
.row-scroll{margin-right:0;padding-right:0}
/* nav arrows live inside the media pane in every variant */
.m-media{position:relative}
.m-media .m-nav{top:50%;transform:translateY(-50%)}
.m-media .m-nav.prev{left:16px}
.m-media .m-nav.next{right:16px !important}
.overlay.refl .m-nav.prev,.overlay.tabs .m-nav.next,.overlay.hub .m-nav.next{left:auto}
/* media well: tighter, image fills better */
.modal .m-media{padding:20px}
.modal .m-media img{max-height:calc(88vh - 40px);max-width:100%}
/* header degrades gracefully before the phone layout */
@media (max-width:1180px){
  .topnav{grid-template-columns:auto minmax(220px,1fr) auto;gap:14px;padding:0 20px}
  #ask-nav{display:none}
  .nav-tabs{gap:0}
  .nav-tab{padding:9px 10px;font-size:14px}
  :root{--pad:24px}
}
/* compact: 641–1100 — one-column modal that still looks designed */
@media (max-width:1100px) and (min-width:641px){
  .modal{flex-direction:column;max-height:92vh;overflow-y:auto;width:min(760px,94vw)}
  .modal .m-media{flex:none;padding:0;background:var(--surface2);max-height:56vh;display:flex;align-items:center;justify-content:center}
  .modal .m-media img{max-height:56vh;width:auto;max-width:100%}
  .modal .m-rail{max-width:none;min-width:0;flex:none;padding:24px 28px 28px;overflow:visible}
  .overlay{align-items:flex-start;overflow-y:auto;padding:24px}
  .overlay .modal{margin:0 auto}
  .overlay.tabs .m-rail{flex:none}
  .vhandle{display:none}
  .hub-col{max-width:none;min-width:0;padding:22px 24px 28px;overflow:visible}
  .overlay.hub .modal{width:min(760px,94vw)}
  .overlay.bottom .modal{flex-direction:column}
  .overlay.bottom .m-rail{height:auto;border-top:1px solid var(--line)}
  .grip{display:none}
  .overlay.fsl .modal,.overlay.strip .modal{width:100vw;height:100vh;max-height:100vh}
  .overlay.fsl .m-media,.overlay.strip .m-media{flex:1;background:transparent;padding:24px;max-height:none}
  .overlay.fsl .m-media img,.overlay.strip .m-media img{max-height:100%}
  .fs-cap,.lb-cap{padding:6px 24px;flex-wrap:wrap}
  .fs-strip{padding:8px 24px 20px}
  .overlay.fsl .m-rail.drawer,.overlay.strip .m-rail.drawer{width:min(440px,92vw);overflow-y:auto;padding:24px}
  .overlay.pin,.overlay.sheet,.overlay.article{padding:16px}
  .sheet-below{padding:8px 16px 24px}
  .art-head{padding:24px 24px 14px}
  .art-title{font-size:30px}
  .sh-cols,.fd-cols{grid-template-columns:1fr}
  .fd-cols{max-height:none}
  .fd-cols .fd-left{max-height:220px;border-right:none;border-bottom:1px solid var(--line);padding-bottom:8px}
  .pop.finderpop,.pop.refinepop{width:min(94vw,720px);left:3vw !important;max-height:80vh;overflow-y:auto}
  .ov-grid{grid-template-columns:1fr}
  .summary.ov{max-width:none}
  .palette,.palette.jump{width:94vw}
  .jump-cols{grid-template-columns:1fr}
  .askside{width:min(440px,92vw)}
  .hub-cols{grid-template-columns:1fr 1fr}
  #screen-collections,#screen-detail{padding-left:var(--pad);padding-right:var(--pad)}
  .identity h1,.detail-head h1{font-size:32px}
  .detail-head{flex-wrap:wrap}
  .detail-actions{margin-left:0;width:100%;flex-wrap:wrap}
}
/* phone < 640: the earlier mobile rules still apply */
@media (max-width:640px){
  .modal .m-media{padding:0}
}
/* v11.1: jump palette columns must clip long names */
.jump-cols .in-sec{min-width:0}
.jump-cols .dd-item{min-width:0}
.jump-cols .dd-item>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jump-cols .dd-item>span .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== v12: search visual fixes ===== */
.scope.pg-scope,.scope.sh-scope{background:none !important;padding:0 !important;border-radius:0 !important;display:flex}
.scope.sh-scope{padding:0 6px !important}
.sh-search input:focus-visible,.hsearch input:focus-visible,.sfield input:focus-visible,.bseg input:focus-visible,.pal-in input:focus-visible,.composer input:focus-visible,.ask-input input:focus-visible,.rv-title:focus-visible,.notein:focus-visible,.rv-note:focus-visible,.inl:focus-visible,#arch-q:focus-visible,#ppl-q:focus-visible,.colpick input:focus-visible{outline:none !important}
.sh-search:focus-within{background:var(--surface);box-shadow:0 0 0 1px var(--line),var(--sh2)}
/* explore from here: links, not buttons */
.xsec{display:none}
.m-src .xlink,.xlink{font-size:13.5px;color:var(--ink3);text-decoration:underline;text-decoration-color:var(--ink4);text-underline-offset:3px;background:none;padding:0}
.xlink:hover{color:var(--ink);text-decoration-color:var(--ink)}
.m-sec .rowlinks{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.pal .sw{cursor:pointer}
/* hub: quiet rows */
.hub-row{background:none;padding:12px 0;border-top:1px solid var(--line);border-radius:0}
.hub-row:hover{background:none}
.hub-row .hr-t b{text-decoration:none}
.hub-row:not(.static):hover .hr-t b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink4)}
.hub-row .hr-t small{color:var(--ink3)}
.hub-top{padding-bottom:6px}
.hub-c{background:none;padding:0}
.hub-c:hover{background:none}
.hub-c:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink4)}
.hub-sec{border-top:1px solid var(--line);padding-top:14px}
/* article: no duplicates */
.overlay.article .m-rail .m-title,.overlay.article .m-rail .m-sub,.overlay.article .m-rail .notecard{display:none}
.overlay.article .m-rail{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding:24px 40px 32px}
.overlay.article .m-rail .m-actions{grid-column:1/-1}
.overlay.article .m-rail .m-sec{margin-top:22px}
.art-head .m-actions{margin:18px 0 0}

/* ===== v13: finder must contain its children ===== */
.pop.finderpop{display:flex;flex-direction:column;max-height:min(72vh,680px);overflow:hidden}
.pop.finderpop .finder{display:flex;flex-direction:column;min-height:0;flex:1;margin-top:0}
.finder .fd-sel{flex:0 0 auto}
.fd-cols{display:grid;grid-template-columns:300px 1fr;grid-template-rows:minmax(0,1fr);gap:24px;min-height:0;flex:1;max-height:none}
.fd-cols .fd-left,.fd-cols .fd-right{overflow-y:auto;min-height:0;max-height:100%}
#sheet .finder{max-height:min(52vh,560px)}
#sheet .finder .fd-cols{max-height:none}
.pop.refinepop{max-height:min(72vh,640px);overflow-y:auto}
@media (max-width:1100px){.fd-cols{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.fd-cols .fd-left{max-height:200px}}
.finder{display:flex;flex-direction:column;min-height:0}
#sheet .finder{flex:0 1 auto;max-height:min(52vh,560px)}
#sheet .sh-inner{overflow:hidden}

/* ===== v14: finder summary strip is plain text, only when something is selected ===== */
.fd-sel{background:none;padding:0 0 12px;border-radius:0;min-height:0;font-size:14px;color:var(--ink2)}
.fd-sel.muted{display:none}
.fd-sel .fchip{background:var(--fill)}

/* ===== v15: nothing non-interactive on a fill ===== */
.priv-chip{background:none;padding:0;border-radius:0;color:var(--ink3)}
.tags .tag{cursor:pointer}
.tags .tag:hover{background:var(--fill2);color:var(--ink)}
.who .chip,.who .pchip{cursor:pointer}
.fd-sel .fchip{cursor:pointer}
/* v16: refine color row keeps hues and tones in one cell */
.rf-c{display:flex;flex-direction:column;gap:8px;min-width:0}
.rf .rf-c .hues{padding:6px 0 0}
.rf .rf-c .chips{padding:0}
.scope{min-width:0}
.scope.sh-scope{padding-right:12px !important}
/* v16.1: hues and tones on one line */
.rf-c{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}
.rf .rf-c .hues{padding:0}

/* ===== v13: dead-end round ===== */
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.bell{cursor:pointer}
.bell .badge.num{position:absolute;top:-4px;right:-4px;width:auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--blue);color:#fff;font-size:11px;font-weight:500;display:grid;place-items:center;line-height:1}
.topnav .avatar{user-select:none}

.pop.notifpop{width:min(440px,92vw);max-height:min(560px,80vh);display:flex;flex-direction:column;padding:14px 10px 10px}
.nt-h{display:flex;align-items:center;justify-content:space-between;padding:2px 10px 10px}
.nt-list{overflow-y:auto;display:flex;flex-direction:column}
.nt-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r2);text-align:left;width:100%}
.nt-row:hover{background:var(--fill)}
.nt-t{flex:1;font-size:14px;line-height:1.4;min-width:0}
.nt-t b{font-weight:500}
.nt-q{display:block;color:var(--ink3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-w{color:var(--ink4);font-size:12px;flex-shrink:0}
.nt-th{width:44px;height:44px;object-fit:cover;border-radius:var(--r);flex-shrink:0;background:var(--surface2)}

.pop.acctpop{width:280px;padding:10px}
.ac-id{display:flex;gap:12px;align-items:center;padding:8px 10px 14px}
.ac-id .avatar.lg{width:44px;height:44px;font-size:15px}
.acctpop .dd-item{display:flex;align-items:center;gap:10px}

.modal.apps{width:min(620px,92vw);max-height:86vh;overflow-y:auto}
.apps-body{padding:36px 40px 40px}
.app-list{display:flex;flex-direction:column;margin-top:18px}
.app-row{display:flex;align-items:center;gap:14px;padding:14px 0}
.app-row+.app-row{border-top:1px solid var(--line)}
.app-ic{width:40px;height:40px;border-radius:12px;background:var(--fill);display:grid;place-items:center;font-weight:500;font-size:16px;flex-shrink:0}
.app-nm{flex:1;display:flex;flex-direction:column;min-width:0}
.app-nm b{font-weight:500}
.app-nm .muted{font-size:13px}
.app-mcp{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.mcp-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.mcp-row code{flex:1;background:var(--fill);border-radius:var(--pill);padding:9px 16px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.askside .ask-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;min-height:0}
.ask-ans{display:flex;flex-direction:column;gap:8px}
.aa-cap{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink4)}
.aa-note{font-size:14px;color:var(--ink2);line-height:1.5}
.aa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.aa-th{display:flex;flex-direction:column;gap:4px;text-align:left}
.aa-th img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:var(--surface2)}
.aa-th span{font-size:11px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aa-brief{font-size:14px;line-height:1.55;white-space:pre-wrap;background:var(--fill);border-radius:var(--r2);padding:14px 16px;max-height:300px;overflow-y:auto}
.aa-cols{display:flex;flex-wrap:wrap;gap:8px}
.askside .ask-sugg{display:flex;flex-direction:column}

.m-video{max-width:100%;max-height:calc(90vh - 64px);border-radius:var(--r);background:#000}
.overlay.fsl .m-video,.overlay.fsd .m-video{max-height:calc(100vh - 220px)}

/* ===== v14: craft round ===== */
/* card hover: lift + shadow per design spec; stronger text legibility */
.card{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.card .hv{text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.3)}
/* video badge: corner, smaller, doesn't fight the image */
.card .vid{left:auto;right:10px;top:auto;bottom:10px;transform:none;width:28px;height:28px;font-size:10px;padding-left:1px;background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(0,0,0,.18)}
/* white images need an edge in the white media well */
.modal .m-media img,.modal .m-media video{box-shadow:0 0 0 1px rgba(0,0,0,.08)}
/* swatches and tonebar segments visible even when near-white */
.pal .sw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}
.tonebar .tb{box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
/* who-saved-it: count needs air */
.pchip .muted{margin-left:8px}
/* palette/instant rows: favicons at row size, not file size */
.pal-body .dd-item img:not(.in-th),#instant .dd-item img:not(.in-th),.jump-cols .dd-item img:not(.in-th){width:20px!important;height:20px!important;border-radius:5px;object-fit:contain;flex-shrink:0}
.pal-body .dd-item .fallback-ic,#instant .dd-item .fallback-ic{width:20px!important;height:20px!important;font-size:11px}
/* finder: add-all buttons in one trailing column */
.fd-row .mini-btn{margin-left:auto;flex-shrink:0}
/* mosaics adapt to how many images exist */
.cv-mosaic[data-n="1"]{grid-template-columns:1fr;grid-template-rows:1fr}
.cv-mosaic[data-n="1"] .mq:first-child{grid-row:auto}
.cv-mosaic[data-n="2"]{grid-template-columns:2fr 1fr;grid-template-rows:1fr}
.cv-mosaic[data-n="2"] .mq:first-child{grid-row:auto}
.cv-mosaic.is-empty{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;padding:0}
.cv-mosaic.is-empty .cv-empty{position:static;background:var(--surface2);border-radius:var(--r)}
/* modal rail scrollbar: slim and quiet */
.overlay .m-rail::-webkit-scrollbar,.nt-list::-webkit-scrollbar,.aa-brief::-webkit-scrollbar,.pal-body::-webkit-scrollbar,.pop .fd-right::-webkit-scrollbar{width:8px}
.overlay .m-rail::-webkit-scrollbar-thumb,.nt-list::-webkit-scrollbar-thumb,.aa-brief::-webkit-scrollbar-thumb,.pal-body::-webkit-scrollbar-thumb,.pop .fd-right::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:99px;border:2px solid transparent;background-clip:content-box}
/* scope-line underlines breathe */
.scope-link u{text-underline-offset:3px;text-decoration-thickness:1px}
/* ask answers: crop from the top, not the middle */
.aa-th img{object-position:top center}
/* connected apps: disconnect turns red on hover */
.app-row .app-toggle:hover{color:#c40000}
/* header ⌘K hint */
.hsearch .kbd{margin-left:auto}

/* ===== v15: finder breathing room ===== */
/* rows were 1px apart — hover fills nearly touched; single-line text sat in tight boxes */
.fd-left{gap:6px;padding-right:12px}
.fd-row{height:auto;min-height:56px;padding:8px 12px}
.fd-row .fl b{line-height:1.3}
.fd-row .fl small{line-height:1.35;margin-top:1px}
.fd-left .side-head{margin:8px 0 2px}
.atiles{gap:10px}
.atile{height:48px;padding:0 12px}
.atile .an{line-height:1.3}
.fd-right .sfield.sm{margin-bottom:14px}
/* pop never clips past the window edge */
.pop.finderpop{width:min(960px,calc(100vw - 32px))}
@media (max-width:980px){
  .finder{grid-template-columns:1fr;gap:18px;max-height:70vh}
  .fd-left{border-right:none;padding-right:0;flex-direction:column;max-height:38vh}
}

/* ===== v16: keep-item visual pass ===== */
/* #1 scope line: tighter text → pile → filters */
.scope.pg-scope,.scope.sh-scope{display:inline-flex !important;width:auto;max-width:100%;justify-content:flex-start;gap:6px;row-gap:6px;align-items:center}
.scope-lead{color:var(--ink2)}
.scope .scope-link{gap:6px}
.scope .scope-link .favs{margin:0 2px 0 0}
.scope .scope-link[data-toggle-refine],
.scope .scope-link[data-shclear]{margin-left:2px;gap:0}
.scope-link .favs img,.scope-link .favs .fallback-ic{margin-left:-5px}

/* #16 collages: fill the frame for 1 / 2 / 4 items */
.ccard .collage.n-1,.ccard .collage.n-2,.ccard .collage.n-4{background:transparent}
.ccard .collage.n-1{grid-template-columns:1fr;grid-template-rows:1fr}
.ccard .collage.n-1 img{grid-row:auto}
.ccard .collage.n-2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.ccard .collage.n-2 img{grid-row:auto}
.ccard .collage.n-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.ccard .collage.n-4 img,.ccard .collage.n-4 img:first-child{grid-row:auto}
.ccard .collage.n-3 .a{grid-row:1/3}
.cv-mosaic[data-n="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.cv-mosaic[data-n="4"] .mq:first-child{grid-row:auto}

/* #26 / #73 white +Add so blue is not doubled */
#add-nav.btn.primary{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
#add-nav.btn.primary:hover{background:var(--fill);background-color:var(--fill)}
.detail-actions [data-addhere]{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.detail-actions [data-addhere]:hover{background:var(--fill)}

/* #28 / #31 orphan counts */
.sec .more.muted[data-orphan]{display:none}

/* #36 tone legend instead of sausage */
.tone-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tone-pill{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:999px;background:var(--fill);font-size:13px;color:var(--ink2);text-transform:capitalize}
.tone-pill i{width:10px;height:10px;border-radius:999px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tone-pill.dark i{background:#2a2a2a}
.tone-pill.mid i{background:#9a9a9a}
.tone-pill.light i{background:#e6e6e3}

/* #48 notifications: last row not clipped */
.pop.notifpop{padding:12px 10px 8px;overflow:hidden}
.nt-list{padding:0 2px 20px;margin:0;overscroll-behavior:contain}
.nt-row:last-child{margin-bottom:8px}

/* #54 connected-app icons */
.app-ic{background:transparent;padding:0;overflow:hidden}
.app-ic svg,.app-ic img{width:40px;height:40px;display:block;border-radius:10px}

/* #58 Ask Meld: live UI, pinned right */
.askside.ask-live{padding:0;gap:0;width:400px;overflow:hidden}
.askside.ask-live .ask-h{padding:14px 16px 0;justify-content:space-between}
.askside.ask-live .ask-h .ask-hist{height:32px;padding:0 10px;border-radius:var(--r);font-size:13px;color:var(--ink2)}
.askside.ask-live .ask-h .ask-hist:hover{background:var(--fill);color:var(--ink)}
.askside.ask-live .ask-title{font-family:var(--serif);font-size:28px;font-weight:400;padding:8px 20px 4px;letter-spacing:-.01em}
.askside.ask-live .ask-body{padding:8px 20px;flex:1;min-height:0;overflow-y:auto}
.askside.ask-live .aa-brief{max-height:none;overflow:visible}
.askside.ask-live .ask-sugg{margin:0;padding:4px 16px 10px;gap:6px}
.askside.ask-live .ask-mood{text-align:left;width:100%;padding:10px 12px;border-radius:var(--r2);background:var(--fill);font-size:14px;color:var(--ink);line-height:1.35}
.askside.ask-live .ask-mood:hover{background:var(--fill2)}
.askside.ask-live .ask-form{display:flex;flex-direction:column;gap:8px;padding:10px 16px 16px;border-top:1px solid var(--line);background:var(--surface)}
.askside.ask-live .ask-form input{width:100%;height:40px;border-radius:var(--r2);background:var(--fill);padding:0 12px;font-size:15px}
.askside.ask-live .ask-tools{display:flex;align-items:center;gap:4px}
.askside.ask-live .ask-tools .ask-ico{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;color:var(--ink3)}
.askside.ask-live .ask-tools .ask-ico:hover{background:var(--fill);color:var(--ink)}
.askside.ask-live .ask-send{margin-left:auto;height:36px;padding:0 14px;border-radius:var(--r);background:var(--ink);color:#fff;font-size:14px;font-weight:500}
.askside.ask-live .ask-send:hover{background:#000}
.askside.ask-live .ask-send:disabled{opacity:.35;cursor:default}

/* #61 sources: select-all lives on the right */
.fd-all{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;min-height:28px}
.fd-left-count{font-size:13px;color:var(--ink3);padding:4px 12px 10px}
.fd-row .mini-btn{display:none}

/* #65 filters pop sits under the Filters control */
.pop.refinepop{transform-origin:top left}

/* #106 paste field: link icon, Add on the right */
.sfield.add-url{padding-right:6px}
.sfield.add-url svg{flex:0 0 auto}
.sfield.add-url #urlgo{margin-left:auto}

/* #116 hover: title only */
.card .hv-note,.card .hv-who{display:none}
.card .hv{gap:0}
.card .hv-title{font-size:14px;font-weight:500}

/* hide play chips on stills/phone screens */
.card .vid{display:none}
/* v17: shared references application */
:root{--label:var(--ink2)}
html{scrollbar-gutter:stable;scrollbar-color:var(--ink3) transparent}
body{font-synthesis:none}button,input,select,textarea{font:inherit}textarea,select{color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid currentColor;outline-offset:3px}
button:disabled{opacity:.45;cursor:not-allowed}button:active{transform:scale(.96)}
input::placeholder,textarea::placeholder{color:var(--ink3)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-100px;z-index:9999;background:var(--surface);padding:12px 20px;border-radius:var(--r)}.skip-link:focus{top:12px}
.topnav{grid-template-columns:auto minmax(260px,560px) auto;justify-content:space-between;gap:24px}.topnav .avatar{overflow:hidden}.topnav button.avatar{margin-left:8px}.topnav .avatar img,.avatar img{width:100%;height:100%;object-fit:cover}.hsearch input{min-width:0;width:100%}.hsearch .clear[hidden]{display:none}.hsearch .clear{width:32px;height:32px;display:grid;place-items:center;flex-shrink:0}.nav-left{gap:24px}
#app-main{outline:none;min-height:calc(100dvh - 72px)}
.browse-wrap{padding:32px var(--pad) 60px;max-width:1800px;margin:auto}.browse-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.browse-heading h1{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.2;letter-spacing:-.01em}.browse-sub{color:var(--ink3);margin-top:10px;font-size:14px}.browse-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:24px;min-height:40px}.toolbar-end{margin-left:auto;display:flex;gap:12px}.scope-label{color:var(--ink2);font-size:14px}.select-label select{background:var(--fill);border:0;border-radius:var(--pill);padding:10px 30px 10px 14px;max-width:180px;min-height:40px;font-size:14px;cursor:pointer}.result-tabs{display:flex;gap:24px;margin:0 0 16px}.result-tabs button{padding:8px 0;color:var(--ink3);border-bottom:1px solid transparent}.result-tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--ink)}
.reference-grid{column-count:4;column-gap:20px}.reference-grid .card{break-inside:avoid;position:relative;display:inline-block;width:100%;margin:0 0 20px;cursor:default;transform:none;box-shadow:none}.reference-grid .card .reference-open{display:block}.reference-grid .card .media{border-radius:var(--r2);overflow:hidden;position:relative;background:var(--surface2)}.reference-grid .card .media img{width:100%;height:auto;min-height:100px;max-height:600px;object-fit:cover;transform:none}.reference-grid .card .media .dim{opacity:0}.reference-grid .card .hv{position:absolute;bottom:16px;left:16px;right:16px;opacity:0;color:#fff;pointer-events:none}.reference-grid .card:hover .dim,.reference-grid .card:focus-within .dim{opacity:1}.reference-grid .card:hover .hv,.reference-grid .card:focus-within .hv{opacity:1}.reference-grid .card .save-btn{position:absolute;right:12px;top:12px;z-index:3;opacity:0;pointer-events:none;height:36px;min-width:64px;background:#fff;color:var(--ink);border-radius:var(--pill);padding:0 12px;transform:none}.reference-grid .card:hover .save-btn,.reference-grid .card:focus-within .save-btn{opacity:1;pointer-events:auto}.reference-grid .card .cap{padding:8px 2px 0;height:auto;font-size:13px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-count{position:absolute;top:12px;left:12px;background:var(--surface);color:var(--ink2);border-radius:var(--pill);font-size:12px;padding:3px 8px}.media-fallback{min-height:210px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:24px;text-align:center}.media-fallback svg{width:30px;height:30px;color:var(--ink3)}.media-fallback span{font-size:17px}.image-unavailable{min-height:200px;display:grid;place-items:center}.media-unavailable-label{padding:60px 20px;font-size:14px;color:var(--ink3)}
.empty-state{padding:80px 24px;text-align:center;margin:auto;max-width:600px}.empty-state h1,.empty-state h2{font:400 30px/1.2 var(--serif)}.empty-state p{margin:16px 0 24px;color:var(--ink2)}.load-more{text-align:center;margin:24px 0}.loading-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.loading-grid>div{height:320px;background:var(--fill);border-radius:var(--r2)}
.meld-dialog-layer{position:fixed;inset:0;background:oklch(0 0 0/.3);display:grid;place-items:center;padding:24px;overflow:auto;overscroll-behavior:contain}.meld-dialog{position:relative;max-width:560px;width:100%;max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r3);box-shadow:var(--sh3);overflow:hidden}.meld-dialog-layer.is-wide .meld-dialog{max-width:1100px}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 28px 16px;flex-shrink:0;background:var(--surface)}.dialog-header h2{font:400 28px/1.2 var(--serif);margin:0;overflow-wrap:anywhere}.icon-btn{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:var(--pill);flex-shrink:0}.icon-btn:hover{background:var(--fill)}.dialog-body{padding:8px 28px 28px;overflow:auto;overscroll-behavior:contain;min-height:0}.dialog-intro{color:var(--ink2);margin-bottom:20px}.dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:24px;flex-wrap:wrap}.dialog-actions .btn{min-height:40px}.modal-open{overflow:hidden}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;margin-bottom:20px}.field input,.field textarea,.field select,.mform input,.mform textarea,.mform select{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px;min-height:44px;max-width:100%;width:100%;font-size:15px}.field textarea{resize:vertical;min-height:90px}.field small{color:var(--ink3)}.form-error{color:oklch(.42 .13 25);margin:12px 0;line-height:1.5}.action-list{display:flex;flex-direction:column;gap:4px}.action-list button{display:flex;align-items:center;gap:12px;text-align:left;padding:12px;border-radius:var(--r);min-height:44px}.action-list button:hover{background:var(--fill)}.source-list{display:flex;flex-direction:column;gap:4px}.source-list label{display:flex;align-items:center;gap:14px;min-height:48px;padding:8px;border-radius:var(--r);cursor:pointer}.source-list label:hover{background:var(--fill)}.source-list input{width:18px;height:18px;accent-color:var(--ink)}
.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.person-card{display:flex;align-items:center;text-align:left;gap:16px;background:var(--surface);border-radius:var(--r2);padding:24px}.person-card .avatar{margin:0;width:44px;height:44px}.person-card small{display:block;color:var(--ink3);margin-top:4px}.person-card b{font-weight:500}.collection-search-results{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.collection-search-results button{display:flex;flex-direction:column;gap:12px;text-align:left;padding:28px;background:var(--fill);border-radius:var(--r2)}.collection-search-results .serif{font-size:28px}.collection-search-results small{color:var(--ink3)}
.toast{gap:20px;max-width:calc(100vw - 32px);white-space:normal}.toast button{color:inherit;text-decoration:underline;min-height:32px;font-weight:500}.toast.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.ask-layer{justify-items:end;padding:16px}.ask-layer .meld-dialog{height:calc(100dvh - 32px);max-width:430px}.ask-layer .dialog-body{display:flex;flex-direction:column;flex:1;padding:0 20px 20px}.ask-pane{display:flex;flex-direction:column;flex:1;min-height:0}.ask-context{color:var(--ink3);font-size:13px;padding:0 0 16px}.ask-chat{flex:1;overflow:auto;min-height:0}.ask-chat p{margin:0 0 24px;line-height:1.6;overflow-wrap:anywhere}.ask-chat .ask-user{background:var(--fill);padding:12px 16px;border-radius:var(--r2);margin-left:24px}.ask-suggestions{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.ask-suggestions button{padding:10px 12px;text-align:left;background:var(--fill);border-radius:var(--r)}.ask-form{display:flex;gap:8px}.ask-form input{min-width:0;width:100%;background:var(--fill);border-radius:var(--r);padding:12px}.ask-bottom{display:flex;justify-content:space-between;gap:12px;margin-top:16px}.ask-bottom button{font-size:13px;color:var(--ink2);min-height:36px}
@media(min-width:1700px){.reference-grid{column-count:5}}
@media(max-width:1200px){.topnav{gap:16px;padding-inline:24px}.nav-left{gap:12px}.nav-right{gap:0}.nav-link{padding-inline:8px}.nav-tab{padding-inline:10px}.reference-grid{column-count:3}.browse-wrap{padding-inline:24px}.people-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){#ask-nav{display:none}.topnav{grid-template-columns:auto minmax(180px,1fr) auto}.nav-left{gap:12px}.nav-right .avatar{display:none}.reference-grid{column-count:3;column-gap:16px}.reference-grid .card{margin-bottom:16px}.collection-search-results{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.topnav{grid-template-columns:1fr auto;grid-template-areas:'left right' 'search search';padding:12px 16px;height:auto;gap:12px;position:sticky}.nav-left{grid-area:left;gap:16px}.nav-right{grid-area:right}.hsearch{grid-area:search;width:100%;height:44px}.hsearch input{font-size:16px}.nav-tabs{gap:0}.nav-tab{font-size:14px;padding:8px}.nav-right .bell{display:none}.nav-right #add-nav{padding:0 14px;height:36px}.browse-wrap{padding:24px 16px 40px}.browse-heading{margin-bottom:18px;gap:12px}.browse-heading h1{font-size:30px}.browse-sub{font-size:13px}.browse-toolbar{flex-wrap:wrap;gap:12px}.scope-label{font-size:13px}.toolbar-end{gap:8px}.select-label select{font-size:14px;max-width:150px}.reference-grid{column-count:2;column-gap:12px}.reference-grid .card{margin-bottom:14px}.reference-grid .card .cap{font-size:12px}.reference-grid .card .save-btn{display:none}.reference-grid .card .hv{display:none}.media-count{font-size:11px;top:8px;left:8px}.media-fallback{min-height:170px;padding:16px}.media-fallback span{font-size:14px}.meld-dialog-layer{padding:12px}.meld-dialog{max-height:calc(100dvh - 24px);border-radius:16px}.dialog-header{padding:20px 20px 12px}.dialog-header h2{font-size:26px}.dialog-body{padding:8px 20px 20px}.field input,.field textarea,.field select,.mform input,.mform textarea,.mform select{font-size:16px}.people-grid,.collection-search-results{grid-template-columns:1fr}.ask-layer{padding:0}.ask-layer .meld-dialog{max-width:none;height:100dvh;max-height:100dvh;border-radius:0}.ask-form input{font-size:16px}.loading-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}button:active{transform:none}}
.hsearch input::placeholder{color:var(--ink3)}
.account-mobile-only{display:none!important}
html:has(.mv-fullscreen-layer){scrollbar-gutter:auto;overflow:hidden}
@media(max-width:900px){.nav-right button.avatar{display:grid}.account-mobile-only{display:flex!important}}
@media(max-width:680px){.nav-right{gap:4px}.nav-right button.avatar{display:grid;margin-left:4px;width:32px;height:32px}.nav-left{gap:10px}.nav-tab{padding-inline:7px}}