/* Sharing = Caring. Hairline product grid, Garamond headings to match the logo, mono for sizes and dates */
:root{
  /* Black and white. Colour only lives in people's pictures. */
  --bg:#FFFFFF; --surface:#FFFFFF; --ink:#0A0A0A; --muted:#6B6B6B; --line:#E3E3E3;
  --accent:#0A0A0A; --accent-ink:#FFFFFF; --soft:#F3F3F3; --coral:#0A0A0A;
  --ok:#0A0A0A; --warn:#6B6B6B; --err:#B3261E; --saffron:#0A0A0A;
  --logo:none;
  /* Acumin Pro Wide from Adobe Fonts; Archivo at full width stands in until it is in the kit */
  --f-display:"acumin-pro-wide","Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"acumin-pro-wide","Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"acumin-pro-wide","Archivo","Helvetica Neue",Arial,sans-serif;
  --f-initial:"jazzier","Cormorant Garamond",Georgia,serif;
  color-scheme:light;
}
/* Dark: follows the phone, unless someone picked light or dark with the ☾/☀ button */
@media (prefers-color-scheme: dark){:root:not([data-theme=light]){
  --bg:#0A0A0A; --surface:#141414; --ink:#F5F5F5; --muted:#9A9A9A; --line:#2B2B2B;
  --accent:#F5F5F5; --accent-ink:#0A0A0A; --soft:#1E1E1E; --coral:#F5F5F5;
  --ok:#F5F5F5; --warn:#9A9A9A; --err:#FF8A80; --saffron:#F5F5F5;
  --logo:invert(1); color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#0A0A0A; --surface:#141414; --ink:#F5F5F5; --muted:#9A9A9A; --line:#2B2B2B;
  --accent:#F5F5F5; --accent-ink:#0A0A0A; --soft:#1E1E1E; --coral:#F5F5F5;
  --ok:#F5F5F5; --warn:#9A9A9A; --err:#FF8A80; --saffron:#F5F5F5;
  --logo:invert(1); color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.02em}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
@media (max-width:480px){.wrap{padding-inline:16px}}
.loading{color:var(--muted);padding-block:40px}

header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.bar{display:flex;align-items:center;gap:16px;padding-block:12px;flex-wrap:wrap}
.logo{line-height:0}
.logo img{height:40px;width:auto;filter:var(--logo)}
nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.tab{text-decoration:none;padding:8px 12px;border-radius:999px;color:var(--muted);font-weight:500;display:inline-flex;gap:6px;align-items:center}
.tab[aria-current="page"]{color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.badge{background:var(--coral);color:#fff;border-radius:999px;font-size:11px;min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px}


.btn{border:1px solid var(--ink);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:600;display:inline-flex;gap:8px;align-items:center;justify-content:center;text-decoration:none;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small{padding:6px 12px;font-size:13px}
.btn.danger{background:transparent;color:var(--err);border-color:var(--err)}
.btn:disabled{opacity:.5;cursor:wait}
.linkbtn{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;font-size:13px}

main{padding-block:28px 72px}
h1,h2,h3{font-family:var(--f-display);font-weight:500;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(38px,5.4vw,60px);line-height:1}
h2{font-size:30px;line-height:1.1}
h3{font-size:24px;line-height:1.15}
.lede{color:var(--muted);margin:10px 0 0}
.eyebrow{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.head>div{min-width:0}
.small-print{font-size:13px;color:var(--muted);margin:0}
.banner{background:var(--soft);padding:12px 16px;border-radius:4px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px;font-size:14px}

.friends{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px}
.friend{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 14px 4px 4px;white-space:nowrap}
.friend[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.count{color:var(--muted)}
.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font-weight:600;font-size:13px;color:#1b1a1c;flex:none;object-fit:cover;background:var(--soft)}
.av.sm{width:22px;height:22px;font-size:11px}
.av.lg{width:44px;height:44px;font-size:18px}
.av.all{background:var(--ink);color:var(--bg)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:5px 12px;font-size:13px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip .mono{opacity:.6;font-size:11px}
.sel{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 6px 3px 12px;font-size:13px;background:var(--surface)}
.sel span{color:var(--muted)}
.sel select{border:0;background:transparent;padding:2px 4px;font-size:13px;font-weight:500}
.toggle{display:inline-flex;gap:6px;align-items:center;font-size:13px}
.grow{flex:1}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media (max-width:480px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);min-width:0}
.tile .open{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.tile .meta{padding:12px 14px 14px;display:grid;gap:4px}
.t-title{font-family:var(--f-display);font-size:23px;line-height:1.05;font-weight:500}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--ok)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.lent{color:var(--warn)}
.heart{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#1b1a1c;display:grid;place-items:center;font-size:17px;line-height:1}
.heart[aria-pressed="true"]{color:#C8402F}
.heart.inline{position:static;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);width:42px;height:42px}
.heart.inline[aria-pressed="true"]{color:var(--coral)}
.empty{padding:40px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);display:grid;gap:12px;justify-items:center}

.ph{position:relative;aspect-ratio:4/5;max-width:100%;width:100%;overflow:hidden;display:block;background:var(--soft)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .none{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:22px;color:var(--muted)}
.ph-tag{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.9);color:#1b1a1c;font-family:var(--f-mono);font-size:10.5px;padding:3px 7px;border-radius:3px;max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.item{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:820px){.item{grid-template-columns:minmax(0,1fr);gap:24px}}
.back{display:inline-block;color:var(--muted);margin-bottom:18px;font-size:14px;text-decoration:none}
.gallery{display:grid;gap:10px}
.gallery .main{border:1px solid var(--line)}
.thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.thumb{padding:0;border:1px solid var(--line);background:none}
.thumb[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:1px}
.thumb .ph-tag{display:none}
.addph{aspect-ratio:4/5;border:1px dashed var(--muted);background:transparent;color:var(--muted);font-size:12px;display:grid;place-items:center;text-align:center;padding:4px}
.credit{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.info{display:grid;gap:22px;min-width:0}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0;border-top:1px solid var(--line);padding-top:16px}
.facts dt{color:var(--muted);font-size:13px}
.facts dd{margin:0;font-size:14px;min-width:0;overflow-wrap:anywhere}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.section{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:14px}
.section .head{margin:0;align-items:center}
.terms,.wornlist,.links{display:flex;gap:6px;flex-wrap:wrap}
.term{background:var(--soft);border-radius:999px;padding:4px 12px;font-size:13.5px}
.wchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 6px 4px 12px;font-size:14px}
.avs{display:inline-flex}.avs .av{margin-left:-6px;box-shadow:0 0 0 2px var(--surface)}.avs .av:first-child{margin-left:0}
.review{display:grid;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.review:last-child{border-bottom:0}
.rhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.pill{border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:11.5px;color:var(--muted)}
.review p{margin:0;max-width:62ch;overflow-wrap:anywhere}

.stack{display:grid;gap:36px;max-width:820px}
.row-card{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);padding:12px}
.row-card.person{grid-template-columns:auto minmax(0,1fr) auto}
@media (max-width:560px){.row-card{grid-template-columns:64px minmax(0,1fr)}.row-card.person{grid-template-columns:auto minmax(0,1fr)}.row-card .actions{grid-column:1/-1}}
.row-card p{margin:2px 0 0;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.flag{color:var(--ink)!important;font-weight:500}
.st{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:4px 8px;border-radius:3px;border:1px solid var(--line);color:var(--muted)}
.st.pending{background:var(--soft);color:var(--accent);border-color:transparent}
.st.accepted{color:var(--ok);border-color:var(--ok)}

.card{background:var(--surface);border:1px solid var(--line);padding:20px;display:grid;gap:14px;max-width:560px}
form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label,.legend{font-size:13px;font-weight:500}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=tel],.field input[type=url],.field input[type=date],.field input[type=search],.field select,.field textarea{border:1px solid var(--line);background:var(--bg);padding:10px 11px;border-radius:4px;width:100%;font-size:16px}
.field textarea{min-height:84px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opts label{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:400}
.opts label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opts input{accent-color:var(--accent)}
.hint{font-size:12px;color:var(--muted);margin:0}
.error{color:var(--err);font-size:14px;margin:0}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches label{width:32px;height:32px;border-radius:50%;position:relative;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swatches input{position:absolute;opacity:0}
.swatches label:has(input:checked){outline:2px solid var(--ink);outline-offset:2px}

.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.auth .card{width:100%;max-width:420px}
.auth .logo img{height:auto;width:100%;max-width:300px;display:block;margin:0 auto 6px}
.switch{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:999px;padding:3px}
.switch button{border:0;background:none;border-radius:999px;padding:7px;font-weight:500;color:var(--muted)}
.switch button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

.overlay{position:fixed;inset:0;background:rgba(10,8,12,.45);z-index:50;display:grid;place-items:center;padding:16px}
.sheet{background:var(--surface);color:var(--ink);width:100%;max-width:520px;max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:6px;display:grid;gap:16px}
.sheet .actions{justify-content:flex-end}
.etiquette{background:var(--soft);padding:14px 16px;border-radius:4px;display:grid;gap:8px}
.etiquette ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13.5px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:14px;z-index:60;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:no-preference){.toast{animation:up .25s ease-out}@keyframes up{from{transform:translate(-50%,10px);opacity:0}}}

/* ---------- desktop defaults for phone-only parts ---------- */
.tabbar,.swipe-wrap,.actionbar,.morebtn{display:none}
.filters.more{display:flex}
html{-webkit-tap-highlight-color:transparent}

/* ---------- phones ---------- */
@media (max-width:720px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  body.on-piece{padding-bottom:calc(136px + env(safe-area-inset-bottom,0px))}
  header nav{display:none}
  .bar{padding-block:8px;justify-content:space-between;flex-wrap:nowrap}
  .logo img{height:34px}
  .addbtn .lbl{display:none}
  .addbtn{width:40px;height:40px;padding:0;font-size:22px;font-weight:400}
  main{padding-block:18px 24px}
  h1{font-size:40px}
  .lede .long{display:none}
  .head{margin-bottom:16px}

  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar[hidden]{display:none}
  .tabbar a{display:grid;justify-items:center;gap:2px;padding:8px 2px 7px;font-size:11px;font-weight:500;color:var(--muted);text-decoration:none;min-height:56px}
  .tabbar a[aria-current="page"]{color:var(--ink)}
  .tabbar .ic{position:relative;line-height:0}
  .tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a[aria-current="page"] svg{stroke-width:2.1}
  .tabbar .badge{position:absolute;top:-4px;right:-10px;min-width:16px;height:16px;font-size:10px}

  .scroller{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .scroller::-webkit-scrollbar{display:none}
  .scroller>*{flex:none}
  .morebtn{display:inline-flex;margin-bottom:12px}
  .filters.more{display:none}
  .filters.more.open{display:flex}
  .filters .grow{display:none}
  .chip,.friend{min-height:36px}

  .t-title{font-size:19px}
  .tile .meta{padding:10px 10px 12px}
  .tile .meta .mono{font-size:11px}
  .heart{width:34px;height:34px;top:6px;right:6px}

  .back{margin-bottom:12px}
  .item .gallery{display:none}
  .swipe-wrap{display:grid;gap:10px;justify-items:center;margin-inline:-16px}
  .swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;scrollbar-width:none}
  .swipe::-webkit-scrollbar{display:none}
  .swipe .ph{flex:0 0 100%;scroll-snap-align:center}
  .dots{display:flex;gap:6px}
  .dots span{width:6px;height:6px;border-radius:50%;background:var(--line)}
  .dots span.on{background:var(--ink)}
  .item .info>.actions .btn.accent,.item .info>.actions .heart{display:none}
  .actionbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:19;background:var(--bg);border-top:1px solid var(--line);padding:10px 16px}
  .actionbar .btn{flex:1;min-height:46px}
  .actionbar .heart.inline{width:46px;height:46px}

  .overlay{place-items:end stretch;padding:0}
  .sheet{max-width:none;border-radius:14px 14px 0 0;max-height:92dvh;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px))}
  .sheet .actions{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom,0px));background:var(--surface);padding-block:10px;margin-bottom:-10px}
  .sheet .actions .btn{flex:1}
  .two{grid-template-columns:1fr}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body.on-piece .toast{bottom:calc(144px + env(safe-area-inset-bottom,0px))}
  .row-card{padding:10px;gap:12px}
}
@media (max-width:720px) and (prefers-reduced-motion:no-preference){
  .sheet{animation:sheetup .22s ease-out}
  @keyframes sheetup{from{transform:translateY(24px);opacity:.6}}
}

/* ---------- update 2 ---------- */
.ph.broken img{display:none}
.ph.broken::after{content:"Photo can’t be shown";position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:8px;font-size:12px;color:var(--muted)}
.ph.preview.broken::after{content:attr(data-name) " (converted on upload)";font-family:var(--f-mono);font-size:10.5px;overflow-wrap:anywhere}
.search{position:relative;margin-bottom:14px;max-width:560px}
.search svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}
.search input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:10px 14px 10px 38px;font-size:16px}
.desc{margin:12px 0 0;max-width:60ch;white-space:pre-line}
.tlines{display:grid;gap:12px}
.tline{display:grid;gap:6px}
.term.on{background:var(--ink);color:var(--bg);border:0;cursor:pointer}
.term.sug{background:transparent;border:1px dashed var(--muted);color:var(--ink);cursor:pointer}
button.term{font:inherit;font-size:13.5px}
.legend.big{font-size:15px}
.legend .hint{font-weight:400;margin-left:6px}
.tgroup{background:var(--bg);border-radius:6px;padding:12px;gap:10px}
.ownrow{display:flex;gap:8px}
.ownrow input{flex:1;min-width:0;border:1px solid var(--line);background:var(--surface);padding:9px 11px;border-radius:4px;font-size:16px}
.addchip{border-style:dashed}
.suggest{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.contents{display:contents}
.pthumb{position:relative}
.pthumb .ph{border-radius:4px}
.pthumb .x{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(20,10,22,.75);color:#fff;font-size:15px;line-height:1;display:grid;place-items:center}
.addtile{position:relative;aspect-ratio:4/5;border:1px dashed var(--muted);border-radius:4px;display:grid;place-items:center;text-align:center;font-size:13px;color:var(--muted);cursor:pointer;padding:4px}
.addtile input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}

@media (max-width:480px){}








.status{color:var(--ok)}
.btn.accent:hover{filter:brightness(1.08)}

/* ---------- update 3: typography + pictures ---------- */
body{font-weight:300;font-stretch:125%;letter-spacing:.005em}
h1,h2,h3,.t-title{font-family:var(--f-display);font-weight:700;letter-spacing:-.005em}
h1{font-size:clamp(30px,4.6vw,48px);line-height:1.02}
h2{font-size:22px;line-height:1.15}
h3{font-size:19px}
.t-title{font-size:16px;line-height:1.2}
.lede{font-weight:200;font-size:17px;line-height:1.5}
.btn,.tab,.chip,.friend,.sel select,.legend,.field label,strong,.status,.wchip,.term,.switch button,.tabbar a{font-weight:500}
.eyebrow,.mono{font-family:var(--f-body);font-weight:400;font-size:11px;letter-spacing:.08em}
.mono{text-transform:none;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.small-print,.hint,.facts dt,.credit{font-weight:300}
.score{font-weight:700}
.status::before{background:var(--ink)}
.status.lent{color:var(--muted)}
.status.lent::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.heart[aria-pressed="true"]{color:#0A0A0A}
.badge{background:var(--ink);color:var(--bg)}
.st.pending{background:var(--soft);color:var(--ink)}
.st.accepted{color:var(--ink);border-color:var(--ink)}
.desc{font-weight:300}

/* People's pictures: initial in Jazzier on a colour or a texture from the photos */
.av{color:#fff;font-family:var(--f-initial);font-weight:400;font-size:16px;line-height:1;
  background-size:cover;background-position:center;letter-spacing:0;user-select:none}

.av.sm{font-size:12px}
.av.lg{font-size:24px}
.av.xl{width:56px;height:56px;font-size:28px;position:relative;cursor:pointer}
.av.all{font-family:var(--f-body);font-size:13px;text-shadow:none}
.avs .av{box-shadow:0 0 0 2px var(--surface)}
.avpick{display:flex;flex-wrap:wrap;gap:10px}
.avpick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.avpick label:has(input:checked){outline:2.5px solid var(--ink);outline-offset:3px}
.avpick label:has(input:focus-visible){outline:2.5px solid var(--muted);outline-offset:3px}
.legend.sub{font-size:12px;color:var(--muted);margin-top:6px}
@media (max-width:720px){
  h1{font-size:30px}
  .t-title{font-size:14px}
  .lede{font-size:15px}
}

/* ---------- update 4: textures with a chosen letter colour ---------- */
.av{background-color:var(--soft)}
.av.xxl{width:88px;height:88px;font-size:46px}
.avrow{display:flex;gap:16px;align-items:center}
.avpick .av.xl{width:52px;height:52px}
.inkpick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ink{width:34px;height:34px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);cursor:pointer;position:relative;padding:0}
.ink.on{outline:2.5px solid var(--ink);outline-offset:3px}
.ink.sugg{width:auto;padding:0 14px;border-radius:999px;color:#fff;font-size:12px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.ink.custom{display:grid;place-items:center;background:conic-gradient(#D66632,#EDA537,#96AC31,#36ADAC,#054F9B,#C0B4D7,#EA4570,#D66632);color:#fff;font-size:18px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.ink.custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* ---------- update 5: profiles ---------- */
a.plain{color:inherit;text-decoration:none}
a.plain:hover{text-decoration:underline}
.profile{margin-bottom:28px}
.backdrop{aspect-ratio:3/1;max-width:100%;background:var(--soft) center/cover no-repeat;border:1px solid var(--line)}
.backdrop.small{aspect-ratio:3/1;max-width:420px;border-radius:4px}
.phead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:-44px;padding-inline:16px}
.phead .av.xxl{box-shadow:0 0 0 4px var(--bg)}
.pname{flex:1;min-width:0;padding-bottom:4px}
.bio{max-width:60ch;margin:14px 16px 0;font-weight:300;white-space:pre-line}
.filebtn{position:relative;overflow:hidden;cursor:pointer}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
@media (max-width:720px){.backdrop{aspect-ratio:2/1;margin-inline:-16px;border-inline:0}.phead{margin-top:-36px;padding-inline:0}.bio{margin-inline:0}}

/* ---------- update 6: make your own texture ---------- */
.maketex{margin-top:4px;align-self:flex-start;width:fit-content}
.cropwrap{display:flex;justify-content:center;background:var(--soft);border-radius:4px;overflow:hidden}
.cropinner{position:relative;line-height:0;touch-action:none;user-select:none;cursor:crosshair;overflow:hidden}
.cropinner img{display:block;max-width:100%;max-height:52dvh;width:auto;height:auto;-webkit-user-drag:none}
.cropbox{position:absolute;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 9999px rgba(0,0,0,.5);pointer-events:none}
.croprow{display:flex;gap:16px;align-items:center}
.cropprev{width:88px;height:88px;border-radius:50%;flex:none;background:var(--soft)}
.croprow input[type=range]{width:100%;accent-color:var(--ink)}

/* ---------- update 7: own profile page ---------- */
.ptitle{margin:8px 0 14px}
.bio.small-print a{color:var(--muted)}

/* ---------- update 8: closet photo as full page background ---------- */
#pageBg{display:none;position:fixed;inset:0;z-index:0;background:var(--bg) center/cover no-repeat;pointer-events:none}
body.has-bg #pageBg{display:block}
body.has-bg main{position:relative;z-index:1}
body.has-bg .back{background:var(--surface);padding:6px 12px;border-radius:999px;color:var(--ink)}
.pcard{background:var(--surface);padding:20px;margin-bottom:20px}
body:not(.has-bg) .pcard{padding:0;margin-bottom:28px;background:transparent}
body.has-bg .pcard{box-shadow:0 2px 16px rgba(0,0,0,.18)}
body.has-bg main{padding-top:24px}
.pcard .phead{margin-top:0;padding-inline:0;align-items:center}
.pcard .bio{margin-inline:0}
.pcard .ptitle{margin-top:0}
@media (max-width:720px){
  body.has-bg main{padding-top:16px}
  body.has-bg .pcard{margin-inline:-6px;padding:16px}
  .pcard .phead{margin-top:0}
}

/* ---------- update 9: pieces float on the closet photo ---------- */
body.has-bg .ppieces{background:transparent;box-shadow:none;padding:0}
body.has-bg .ppieces .ptitle{display:inline-block;background:var(--surface);padding:6px 14px;border-radius:999px;font-size:18px}
body.has-bg .ppieces .grid{border:0;gap:14px}
body.has-bg .ppieces .tile{border:1px solid var(--line);box-shadow:0 2px 12px rgba(0,0,0,.18)}
body.has-bg .ppieces .empty{background:var(--surface)}
@media (max-width:720px){
  body.has-bg .ppieces{margin-inline:0;padding:0}
  body.has-bg .ppieces .grid{gap:10px}
  .phead .long{display:none}
}
.phead .btn{gap:0}

/* ---------- update 10: no title, '+' tile to add a piece ---------- */
.ppieces{padding-top:0}
.tile.addpiece{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:240px;
  background:var(--surface);color:var(--muted);border:2px dashed var(--line);font:inherit;font-weight:500;font-size:14px;cursor:pointer}
.tile.addpiece .plus{font-size:56px;line-height:1;font-weight:200;color:var(--ink)}
.tile.addpiece:hover{color:var(--ink);border-color:var(--muted)}
body.has-bg .ppieces .tile.addpiece{border:2px dashed var(--muted)}

/* ---------- update 11: friends of friends ---------- */
.pfriends{margin-top:16px;display:grid;gap:8px;min-width:0}
.pfriends .friends{margin-bottom:0}
a.friend{text-decoration:none;color:inherit}
a.friend:hover{border-color:var(--ink)}
@media (max-width:720px){.pcard .pfriends .scroller{margin-inline:-16px;padding-inline:16px}}

/* ---------- update 12: invites + getting started ---------- */
.invited{background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:4px;text-align:center;font-weight:500;margin:0}
.guide{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:760px}
.gstep{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px;border:1px solid var(--line);background:var(--surface)}
.gstep.now{border:2px solid var(--ink)}
.gstep.done{opacity:.6}
.gstep.done h3{text-decoration:line-through;text-decoration-thickness:1.5px}
.gnum{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:18px;border:1.5px solid var(--ink)}
.gstep.now .gnum{background:var(--ink);color:var(--bg)}
.gbody{display:grid;gap:10px;min-width:0}
.gbody p{margin:0;font-weight:300}
.sugg{display:grid;gap:8px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:720px){.gstep{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:14px}.gnum{width:36px;height:36px;font-size:15px}}

/* ---------- update 13: bio beside the name, skippable guide ---------- */
.phead{flex-wrap:wrap}
.pbio{flex:1 1 260px;min-width:0;margin:0;font-size:19px;font-weight:400;line-height:1.4;white-space:pre-line;overflow-wrap:anywhere;
  padding-left:22px;border-left:1px solid var(--line);align-self:center}
.pbio:empty{border:0;padding:0}
.pbio.empty-bio{font-size:14px;font-weight:300;border:0;padding-left:0}
.pbio.empty-bio a{color:var(--muted)}
@media (max-width:720px){.pbio{flex-basis:100%;order:3;padding-left:0;border-left:0;font-size:17px}}
.gstep.skipped{opacity:.75}
.gstep.skipped .gnum{border-style:dashed}
.gbody .skip{justify-self:start;font-size:13px}

/* ---------- update 13: compact profile card ---------- */
.pcard.profile{padding:16px 20px}
.pcard.profile .phead{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;margin:0;padding:0}
.pcard.profile .av.xxl{width:68px;height:68px;font-size:36px;flex:none}
.pcard.profile .pname{flex:none;max-width:40%;margin:0;padding:0;font-size:clamp(26px,3.2vw,38px);line-height:1.05;overflow-wrap:anywhere}
.pinfo{flex:1;min-width:0;display:grid;gap:4px;border-left:1px solid var(--line);padding-left:18px}
.pstats{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400}
.pstats .sep{margin-inline:8px;opacity:.6}
.pinfo .pbio{flex:none;order:0;border:0;padding:0;margin:0;font-size:17px;font-weight:400;line-height:1.4}
.pinfo .pbio.empty-bio{font-size:14px;font-weight:300}
.prow{display:flex;align-items:center;gap:12px;margin-top:12px;min-width:0}
.prow .friends{flex:1;min-width:0;margin:0;padding-bottom:2px}
.prow .actions{flex:none;margin-left:auto}
.prow .friend{padding-block:2px}
@media (max-width:720px){
  .pcard.profile{padding:14px 16px}
  .pcard.profile .phead{flex-wrap:wrap;gap:12px 14px}
  .pcard.profile .av.xxl{width:56px;height:56px;font-size:30px}
  .pcard.profile .pname{max-width:calc(100% - 70px);font-size:26px}
  .pinfo{flex-basis:100%;border-left:0;padding-left:0}
  .pinfo .pbio{font-size:16px}
  .prow .long{display:none}
  .pcard.profile .prow .scroller{margin-inline:0;padding-inline:0}
}
.prow .btn{gap:0}
.pcard.profile .pname{line-height:1}

/* ---------- update 14: photo editor, order and main photo ---------- */
.editor{position:fixed;inset:0;z-index:80;background:rgba(10,8,12,.6);display:grid;place-items:center;padding:16px}
.ed-inner{background:var(--surface);color:var(--ink);width:100%;max-width:520px;max-height:calc(100dvh - 32px);overflow:auto;padding:20px;border-radius:6px;display:grid;gap:14px}
.ed-inner .cropinner img{max-height:56dvh}
.cropbox.rect{border-radius:0}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.pthumb .pctrl{position:absolute;left:4px;bottom:4px;display:flex;gap:4px;flex-wrap:wrap}
.pctrl button{width:28px;height:28px;border-radius:50%;border:0;background:rgba(20,10,22,.78);color:#fff;font-size:14px;line-height:1;display:grid;place-items:center;cursor:pointer}
.pctrl button:hover{background:#000}
.pthumb.main .ph{outline:2px solid var(--ink);outline-offset:2px}
.mainlabel{position:absolute;top:4px;left:4px;background:var(--ink);color:var(--bg);font-size:10px;font-weight:500;padding:2px 7px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:720px){.editor{padding:0;place-items:end stretch}.ed-inner{max-width:none;border-radius:14px 14px 0 0;max-height:96dvh;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}}

/* ---------- update 15: friends float below the card, pencil to edit ---------- */
.pcard.profile{position:relative}
.pcard.profile.mine .phead{padding-right:48px}
.pedit{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink);background:var(--surface);text-decoration:none}
.pedit:hover{border-color:var(--ink)}
.pedit svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.pfloat{display:flex;gap:8px;align-items:center;margin:-8px 0 20px;padding-block:4px 10px}
.pfloat .friend{flex:none;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.pfloat .pact{flex:none;display:inline-flex}
.pfloat .pact .btn,.pfloat .pact .st{box-shadow:0 2px 12px rgba(0,0,0,.2)}
.pfloat .pact .st{background:var(--surface)}
body:not(.has-bg) .pfloat{margin-top:0}
body:not(.has-bg) .pfloat .friend,body:not(.has-bg) .pfloat .pact .btn{box-shadow:none}
@media (max-width:720px){.pedit{top:10px;right:10px;width:34px;height:34px}.pfloat{margin-top:-10px}}
.invited strong{display:block;font-size:17px;font-weight:700}
.invited span{display:block;font-weight:300;font-size:13px;margin-top:2px}

/* ---------- update 16: friends pop-up ---------- */
.pstat-link{background:none;border:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pstat-link:hover{color:var(--ink)}
.flist{display:grid;gap:8px;max-height:60dvh;overflow:auto}
.flist .row-card{padding:8px 10px}
.flist .row-card.person{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.flist .row-card .actions{grid-column:auto}
.flist .row-card .actions .btn{flex:none}
.flist .av.lg{width:36px;height:36px;font-size:19px}
.flist .row-card .actions{align-self:center;margin:0}

/* ---------- update 17: bigger texture set, short row ---------- */
.avtiles{display:contents}
.avpick{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:4px;max-width:460px;min-width:0}
.avpick .av.xl{width:100%;height:auto;aspect-ratio:1}
.avpick .av.xl[hidden]{display:none}
.avmore{margin-top:8px;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- update 18: one row of textures, one row of colours ---------- */
.addtex{display:grid;place-items:center;background:var(--bg) !important;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font-family:var(--f-body);font-size:24px;font-weight:300;text-shadow:none}
.addtex:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.inkpick{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;padding:4px;max-width:460px;min-width:0}
.inkpick .ink{width:100%;height:auto;aspect-ratio:1;max-width:40px}

.avpick,.inkpick{padding:6px}
@media (max-width:420px){.avpick,.inkpick{gap:6px}}

/* ---------- update 19: suggested colour doubles as the colour picker ---------- */
.ink.pick{display:grid;place-items:center;color:#fff;font-size:20px;font-weight:400;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.ink.pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:0;padding:0}

/* ---------- update 20: Looking for ---------- */
.looking{margin:4px 0 22px}
.lhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.lhead h2{margin:0;font-size:20px}
.lrow{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity;scroll-padding-inline:16px}
.lcard{flex:0 0 220px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--soft);border-radius:4px;color:inherit;text-decoration:none;min-width:0}
.lcard:hover{outline:1.5px solid var(--ink)}
.lcard strong{font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.lcard .mono{font-size:12px;color:var(--muted)}
.lwho{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.lrep{align-self:flex-start;font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:var(--bg);padding:3px 7px;border-radius:3px}
.row-card.reply .ph,.row-card.reply .photo{width:72px}
.justposted{outline:2px solid var(--ink)}
.pickpiece{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.pickpiece label{display:flex;flex-direction:column;gap:6px;font-size:13px;cursor:pointer;padding:6px;border:1px solid var(--line);border-radius:4px}
.pickpiece label:has(input:checked){outline:2px solid var(--ink)}
.pickpiece .nopiece{justify-content:center;min-height:60px}
@media (max-width:720px){ .lcard{flex-basis:72%} }

/* ---------- update 21: language switch ---------- */
.langsw{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:999px;padding:3px;align-self:center;margin-top:4px}
.auth .langsw{margin:14px auto 0;justify-self:center}
.langsw button{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;padding:6px 14px;border-radius:999px;cursor:pointer}
.langsw button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.field .langsw{justify-self:start;width:max-content}
.langbtn{margin-left:auto;margin-right:10px;border:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:12px;font-weight:500;letter-spacing:.06em;height:32px;min-width:40px;padding:0 10px;border-radius:999px;cursor:pointer}
.langbtn:hover{border-color:var(--ink)}

/* ---------- update 22: calls with several sizes, calmer hover ---------- */
.lcard:hover{outline:none;background:var(--line)}
.sizegroup{display:block;margin:10px 0 6px}
#cSizes .sizegroup:first-child{margin-top:0}
.replynew{display:grid;gap:6px;padding:14px;border:1px dashed var(--line);border-radius:6px}
.replynew .btn{justify-self:start}

/* ---------- update 23: calls as one calm box ---------- */
.looking{background:var(--soft);border-radius:6px;padding:14px 16px 16px;margin:0 0 28px}
.looking .lhead{margin-bottom:12px}
.looking .lhead h2{font-size:17px;display:flex;align-items:center;gap:8px}
.lcount{font-family:var(--f-mono);font-size:12px;font-weight:400;color:var(--muted)}
.looking .lrow{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:0;margin:0;scroll-snap-type:x proximity;scroll-padding-inline:0}
.looking .lcard{flex:0 0 230px;background:var(--bg);border-radius:4px;padding:12px 14px;gap:4px;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .15s}
.looking .lcard:hover{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.looking .lcard strong{font-size:15px}
.lmeta{font-size:12px;color:var(--muted)}
.looking .lrep{background:none;color:var(--muted);padding:0;margin-top:4px;font-size:11px}
.callbanner{margin-bottom:24px}
@media (max-width:720px){ .looking{margin-inline:-6px} .looking .lcard{flex-basis:78%} }
.pcalls{margin:0 0 20px}
body.has-bg .pcalls{box-shadow:0 2px 16px rgba(0,0,0,.18)}

/* ---------- update 24: edit pencil on call cards, share window ---------- */
.lwrap{position:relative;display:flex}
.lrow .lwrap{flex:0 0 230px}
.lwrap .lcard{flex:1 1 auto;min-width:0}
.looking .lwrap .lcard{flex:1 1 auto}
.lwrap .lcard strong{padding-right:28px}
.lpen{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.lpen svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lpen:hover{border-color:var(--muted)}
.sharelink{font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin:-4px 0 0}
@media (max-width:720px){ .lrow .lwrap{flex-basis:78%} }

/* ---------- update 25: people you may know ---------- */
.sugcards{margin-bottom:24px}
.srow{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.scard{position:relative;flex:0 0 156px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:var(--bg);border-radius:4px;padding:16px 10px 12px}
.scenter{display:flex;flex-direction:column;align-items:center;gap:8px}
.scenter strong{font-size:14px;line-height:1.2;overflow-wrap:anywhere}
.smut{font-size:12px;color:var(--muted);line-height:1.35;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:32px}
.scard .btn{margin-top:auto;white-space:nowrap}
.sx{position:absolute;top:4px;right:6px;border:0;background:none;color:var(--muted);font-size:18px;line-height:1;padding:4px;cursor:pointer}
.sx:hover{color:var(--ink)}
.stack > .sugcards{margin-bottom:0}

/* ---------- update 26: what's new ---------- */
.badge.dot{min-width:0;width:9px;height:9px;padding:0;border-radius:50%}
.tab .badge.dot{vertical-align:super;margin-left:3px}
.looking .lrep.new{color:var(--ink);font-weight:600}
.looking .lrep.new::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ink);margin-right:6px;vertical-align:1px}

/* ---------- update 27: pick the preview photo ---------- */
.shpick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:3px}
.shpick label{flex:0 0 68px;position:relative;cursor:pointer;border-radius:4px;overflow:hidden;line-height:0}
.shpick img{width:68px;height:36px;object-fit:cover;display:block}
.shpick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.shpick label:has(input:checked){outline:2.5px solid var(--ink);outline-offset:2px}

/* ---------- update 28: big preview in the share window, own photo on a call ---------- */
.shprev{border-radius:6px;overflow:hidden;background:var(--soft);aspect-ratio:1200/630;margin-bottom:4px}
.shprev img{width:100%;height:100%;object-fit:cover;display:block}
.callphoto{display:block;width:100%;max-width:520px;max-height:420px;object-fit:cover;border-radius:6px;margin-top:14px}
.cphoto{display:grid;gap:8px;justify-items:start}
.cphoto img{width:180px;height:180px;object-fit:cover;border-radius:4px}

/* ---------- update 28: light/dark button ---------- */
.themebtn{margin-left:0;margin-right:10px;width:32px;min-width:32px;padding:0;display:grid;place-items:center}
.themebtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.langbtn + .themebtn{margin-left:-4px}

/* ---------- update 28: share preview that looks like WhatsApp ---------- */
.wa{--wa-chat:#EFEAE2;--wa-bubble:#D9FDD3;--wa-card:rgba(0,0,0,.05);--wa-ink:#111B21;--wa-mute:#667781;--wa-link:#027EB5;
  background:var(--wa-chat);border-radius:6px;padding:14px 12px 14px 40px;display:flex;justify-content:flex-end}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .wa{--wa-chat:#0B141A;--wa-bubble:#005C4B;--wa-card:rgba(0,0,0,.2);--wa-ink:#E9EDEF;--wa-mute:#AEBAC1;--wa-link:#53BDEB}}
:root[data-theme=dark] .wa{--wa-chat:#0B141A;--wa-bubble:#005C4B;--wa-card:rgba(0,0,0,.2);--wa-ink:#E9EDEF;--wa-mute:#AEBAC1;--wa-link:#53BDEB}
.wabubble{background:var(--wa-bubble);color:var(--wa-ink);border-radius:8px 0 8px 8px;padding:4px 4px 6px;max-width:330px;width:100%;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:14.5px;line-height:1.35;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wacard{background:var(--wa-card);border-radius:6px;overflow:hidden}
.wacard img{width:100%;aspect-ratio:1200/630;object-fit:cover;display:block}
.wameta{display:flex;flex-direction:column;gap:2px;padding:7px 9px 8px}
.wameta strong{font-size:14px;font-weight:600}
.wameta span{font-size:12.5px;color:var(--wa-mute)}
.wameta .wadom{margin-top:3px}
.watext{background:none;border:0;color:inherit;font:inherit;resize:none;padding:6px 6px 0;overflow:hidden;min-height:0;outline:none;border-radius:4px}
.watext:focus{box-shadow:inset 0 0 0 1px var(--wa-mute)}
.walink{color:var(--wa-link);text-decoration:underline;overflow-wrap:anywhere;padding:0 6px;font-size:14.5px}
.watime{align-self:flex-end;font-size:11px;color:var(--wa-mute);padding:2px 6px 0}

/* update 29: category as a dropdown in the filter row */
.filters.frow{flex-wrap:wrap;align-items:center}
.filters.frow .more{display:contents}
.filters.frow .morebtn{margin:0}
@media (max-width:720px){
  .filters.frow .more{display:none;flex-basis:100%;flex-wrap:wrap;gap:8px}
  .filters.frow .more.open{display:flex}
}