/* ============ CriticWave ============ */
:root{
  --bg:#f6f8fb; --surface:#ffffff; --surface-2:#eef2f8; --border:#dbe2ec;
  --text:#141a22; --muted:#5b6472; --accent:#1c74d4; --accent-ink:#ffffff;
  --pos:#1f9d57; --neg:#d1453b; --warn:#b8860b;
  --shadow:0 1px 2px rgba(16,28,45,.06),0 6px 20px rgba(16,28,45,.06);
  --radius:14px; --maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="system"]{
    --bg:#0b1220; --surface:#121a2a; --surface-2:#0f1726; --border:#243247;
    --text:#e7edf6; --muted:#93a1b5; --accent:#4a9bf0; --accent-ink:#06101f;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 26px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0b1220; --surface:#121a2a; --surface-2:#0f1726; --border:#243247;
  --text:#e7edf6; --muted:#93a1b5; --accent:#4a9bf0; --accent-ink:#06101f;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 26px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  accent-color:var(--accent);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .4em}
h1{font-size:1.6rem}h2{font-size:1.2rem}h3{font-size:1rem}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

/* ---- top bar ---- */
#topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;
  padding:10px 20px;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.02em;color:var(--text);flex:0 0 auto}
.brand:hover{text-decoration:none}
/* A Premium account's approved custom logo, shown in the middle of the bar on
   their profile/reviews/posts/lists in place of the "CriticWave" wordmark. */
#headerlogo{flex:1;display:flex;justify-content:center;min-width:0;overflow:hidden}
#headerlogo a{display:flex;align-items:center;min-width:0}
#headerlogo img{height:40px;max-width:100%;width:auto;object-fit:contain}
/* A Premium author's custom ad (or the site ad), shown at the top of a review
   or post. Full-bleed to the card's own edges — no cap on height, so it keeps
   filling the card's width (and scales with it) instead of being boxed in by
   the card's padding or letterboxed by a fixed height. */
.review-ad{display:block;width:100%;height:auto;background:var(--surface-2)}
.review-ad-wrap{position:relative;display:block;cursor:pointer;overflow:hidden;border-radius:10px}
/* Bleed past the card's own padding: first-child bleeds its top/left/right
   (a header image, square where it meets the rest of the card below); an
   only-child (the standalone site-ad card) also bleeds the bottom, filling
   the whole box with all four corners matching the card's own radius. */
.pad > .review-ad-wrap:first-child{margin:-16px -16px 0;border-radius:var(--radius) var(--radius) 0 0}
.pad > .review-ad-wrap:last-child{margin-bottom:-16px;border-radius:0 0 var(--radius) var(--radius)}
.review-ad-badge{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.6);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 6px;border-radius:4px;pointer-events:none}
.review-ad-hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.05em;
  opacity:0;transition:opacity .15s;pointer-events:none}
.review-ad-wrap:hover .review-ad-hover{opacity:1}

#navgroup{display:flex;align-items:center;gap:14px;margin-left:auto}
#mainnav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
#authslot{display:flex;align-items:center;gap:6px;font-size:.9rem;flex:0 0 auto}

#mainnav a,
#authslot a,
#authslot button{
  padding:7px 12px;border-radius:9px;color:var(--muted);font-weight:600;font-size:.92rem;
  background:none;border:0;cursor:pointer;white-space:nowrap;
}
#mainnav a:hover,
#authslot a:hover,
#authslot button:hover{background:var(--surface-2);text-decoration:none;color:var(--text)}
#mainnav a.active{background:var(--accent);color:var(--accent-ink)}
#authslot img.avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}

/* hamburger — hidden while everything fits */
#navtoggle{
  display:none;margin-left:auto;flex:0 0 auto;width:40px;height:36px;padding:0;
  border:1px solid var(--border);border-radius:9px;background:var(--surface);
  flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;
}
#navtoggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--text)}

@media (max-width:900px){
  #navtoggle{display:inline-flex}
  #navgroup{
    position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:6px;padding:10px 14px 14px;
    background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow);
  }
  #navgroup.open{display:flex}
  #mainnav{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px}
  #mainnav a,#authslot a,#authslot button{padding:11px 12px;font-size:1rem}
  #authslot{flex-direction:column;align-items:stretch;gap:2px;
    border-top:1px solid var(--border);margin-top:6px;padding-top:8px}
}

main#view{max-width:var(--maxw);margin:0 auto;padding:22px 20px 60px}

/* ---- generic ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:16px}
.row{display:flex;gap:12px}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.center{align-items:center}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.tiny{font-size:.78rem}
.stack{display:flex;flex-direction:column;gap:14px}
[hidden]{display:none!important}
.grid{display:grid;gap:14px}
.sectionhead{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 12px;gap:12px}
.sectionhead:first-child{margin-top:4px}
.hr{height:1px;background:var(--border);border:0;margin:18px 0}
.spinner{color:var(--muted);padding:30px;text-align:center}
.empty{color:var(--muted);padding:18px;text-align:center;border:1px dashed var(--border);border-radius:12px}

button, .btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  padding:9px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-weight:600;cursor:pointer;
}
button:hover,.btn:hover{border-color:var(--accent);text-decoration:none}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.ghost{background:transparent;border-color:transparent;color:var(--muted)}
button.ghost:hover{color:var(--text);background:var(--surface-2)}
button.danger{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 40%,var(--border))}
button.sm{padding:5px 9px;font-size:.82rem;border-radius:8px}
button:disabled{opacity:.5;cursor:not-allowed}
/* The home page's "add a review or post" button — a bigger icon than the
   default 15px so it reads clearly next to the "Top weekly" tabs. */
.home-add-btn svg{width:22px;height:22px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.pill:hover{color:var(--text);border-color:var(--accent)}
.pill.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

label{display:block;font-weight:600;font-size:.86rem;margin:0 0 4px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],input[type=date],input[type=month],select,textarea{
  width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);
}
textarea{min-height:90px;resize:vertical}
.field{margin-bottom:12px}
.field .hint{font-weight:400;color:var(--muted);font-size:.78rem;margin-top:3px}
.inline{display:flex;gap:10px;flex-wrap:wrap}
.inline > *{flex:1;min-width:120px}

/* ---- carousels ---- */
.carousel{display:flex;gap:12px;overflow-x:auto;padding:4px 2px;scroll-snap-type:x proximity}
.carousel > *{scroll-snap-align:start;flex:0 0 auto}
.chiprow{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.chiprow > *{flex:0 0 auto}
/* hide the horizontal scrollbar on these rows (still scrollable) */
.carousel,.chiprow{scrollbar-width:none;-ms-overflow-style:none}
.carousel::-webkit-scrollbar,.chiprow::-webkit-scrollbar{width:0;height:0;display:none}

/* horizontal scroller with edge arrows */
.scrollrow{position:relative}
.scrollrow-arrow{
  position:absolute;top:calc(50% - 4px);transform:translateY(-50%);z-index:5;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-size:1.1rem;line-height:1;cursor:pointer;opacity:.4;
  box-shadow:0 2px 10px rgba(16,28,45,.18);
}
.scrollrow-arrow:hover{opacity:.9}
.scrollrow-arrow.left{left:2px}
.scrollrow-arrow.right{right:2px}
.scrollrow-arrow[hidden]{display:none}

.feat{width:300px;max-width:100%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow)}
.feat img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;background:var(--surface-2)}
.feat .cap{padding:12px;font-weight:600;color:var(--text)}

/* ---- review card ---- */
.rc{display:block;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);color:var(--text);position:relative}
.rc:hover{border-color:var(--accent);text-decoration:none}
.rc .top{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.rc .cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.rc .subject{font-weight:800}
.rc .title{margin:2px 0 4px;font-weight:600}
.rc .take{color:var(--muted);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc .meta{display:flex;gap:12px;align-items:center;margin-top:10px;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.rc .who{display:flex;gap:6px;align-items:center}
.rc .who img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.badge{font-size:.72rem;font-weight:800;padding:3px 8px;border-radius:999px;border:1px solid transparent}
.badge.pos{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 35%,transparent);background:color-mix(in srgb,var(--pos) 12%,transparent)}
.badge.neg{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 35%,transparent);background:color-mix(in srgb,var(--neg) 12%,transparent)}
.badge.draft{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.badge.score{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.badge.cat{color:var(--muted);border-color:var(--border);background:var(--surface-2);text-transform:uppercase;letter-spacing:.04em}
/* private tag reuses the category-pill typography but keeps the yellow palette */
.badge.cat.priv{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.badge.link{color:var(--text);border-color:var(--border);background:var(--surface-2)}
button.badge{line-height:1.2}
button.badge:hover{border-color:color-mix(in srgb,var(--text) 35%,transparent)}
/* review header pills: uniform height, text vertically centred */
.headerpills .badge{display:inline-flex;align-items:center;height:24px;line-height:1;padding:0 8px}

.blurwrap{position:relative}
.blurwrap.blurred > .rc, .blurwrap.blurred > *{filter:blur(9px);pointer-events:none;user-select:none}
/* the reveal overlay itself stays sharp and clickable over the blurred content */
.blurwrap.blurred > .reveal{filter:none;pointer-events:auto;user-select:auto}
.blurwrap .reveal{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:flex-start;padding-top:32px;text-align:center;background:color-mix(in srgb,var(--surface) 60%,transparent);border-radius:var(--radius);z-index:2}
.blurwrap .reveal strong{background:var(--surface);padding:2px 10px;border-radius:8px}

.scorebig{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:88px;padding:10px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.scorebig b{font-size:1.7rem;line-height:1}
.scorebig span{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* water-fill gauge — rotating CSS wave */
.containerwaves{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:0;
  width:var(--size,25px);height:var(--size,25px);
}
.water_waves{
  width:100%;height:100%;
  background:#35b3e7;border-radius:50%;
  box-shadow:inset 0 0 20px 0 rgba(0,0,0,0.8), 0 0 20px 0 rgba(0,0,0,0.3);
  position:relative;overflow:hidden;
}
.water_waves:after,.water_waves:before{
  content:"";position:absolute;width:200%;height:200%;top:-50%;left:50%;background:#fff;
}
.water_waves:after{
  border-radius:45%;
  animation:water_waves 5s linear infinite;
}
.water_waves:before{
  border-radius:35%;
  background:rgba(255,255,255,.3);
  animation:water_waves 5s linear infinite;
}
@keyframes water_waves{
  0%{transform:translate(-50%,-50%) rotate(0deg);top:calc(var(--perc,50) * -1%);}
  100%{transform:translate(-50%,-50%) rotate(360deg);top:calc(var(--perc,50) * -1%);}
}
@media (prefers-reduced-motion:reduce){
  .water_waves:after,.water_waves:before{animation:none}
}

/* ---- layout split ---- */
/* minmax(0,…) lets each track shrink below its content's min-content width so the
   columns flex with the window instead of forcing horizontal page overflow. */
.split{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;align-items:start}
.split.right{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
@media (max-width:860px){ .split,.split.right{grid-template-columns:minmax(0,1fr)} }

.railcard{position:sticky;top:70px;min-width:0}
.railcard .avatar-lg{width:96px;height:96px;border-radius:16px;object-fit:cover;border:1px solid var(--border);background:var(--surface-2);flex:0 0 auto}
/* An <a> wrapping an avatar (profile-photo links) is itself the flex item now, not the
   img — without this it can shrink narrower than the avatar's own fixed width/height,
   squashing it into a non-square box. */
a:has(> img.avatar-lg),a:has(> img.avatar-sm),a:has(> img.avatar){flex:0 0 auto;display:inline-flex}
.railcard h3,.railcard p{overflow-wrap:anywhere;word-break:break-word}
.railcard .row.center > div:last-child{min-width:0;flex:1 1 auto}
.statgrid{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.statgrid .s{display:flex;align-items:baseline;gap:6px;background:none;border:0;padding:0}
.statgrid .s b{font-size:1.05rem}
.statgrid .s span{font-size:.78rem;color:var(--muted)}
.statlink{text-decoration:none;color:inherit;cursor:pointer}
.statlink:hover{text-decoration:underline}
.statpair{display:inline-flex;align-items:baseline;gap:4px}

/* A narrow window scrolls this as one horizontal row instead of wrapping the
   tabs onto multiple lines; a wide window has room to fit them all anyway. */
.tabs{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;border-bottom:1px solid var(--border);margin-bottom:14px}
.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:8px 10px;color:var(--muted);flex:0 0 auto;white-space:nowrap}
.tabs button.active{color:var(--text);border-bottom-color:var(--accent)}
.tabs{scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{width:0;height:0;display:none}

.block{padding:0;min-width:0}
/* long words / pasted URLs in the body break instead of stretching the card */
.block,.block p,.block li,.block a{overflow-wrap:anywhere}
/* row spacing in the review body now comes from the flex gap on the container */
.block p{margin:0}
.block p + p{margin-top:6px}
.block img{border-radius:12px}
/* the blue bar + quote + attribution shrink-wrap and centre as one unit;
   text sits left, snug against the bar */
.block.quote{text-align:center}
.block.quote blockquote{display:inline-block;text-align:left;max-width:100%;margin:0;padding:6px 0 6px 14px;border-left:3px solid var(--accent);font-size:1.05rem}
.block.quote blockquote p{margin:0}
.block.quote blockquote footer{margin-top:4px}
.block.small{font-size:.78rem;color:var(--muted)}
.block.disclosure{font-size:.85rem;color:color-mix(in srgb,var(--accent) 55%,#fff)}
.block.header{margin:2px 0 0;font-size:1.2rem;font-weight:800;line-height:1.3}
ul.block,ol.block{margin:0;padding-left:22px}
ul.block li,ol.block li{margin:3px 0}
.pollopt{display:flex;align-items:center;gap:10px;margin:6px 0}
.pollbar{flex:1;height:26px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);position:relative;overflow:hidden}
.pollbar > i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 25%,transparent)}
.pollbar > span{position:absolute;left:10px;top:0;bottom:0;display:flex;align-items:center;font-size:.82rem;font-weight:600}
.pollbar > b{position:absolute;right:10px;top:0;bottom:0;display:flex;align-items:center;font-size:.8rem;color:var(--muted)}
.pollvoters img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}

.toast-wrap{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px}
#toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;box-shadow:var(--shadow);font-size:.9rem}
.toast.err{background:var(--neg);color:#fff}

#footer{max-width:var(--maxw);margin:0 auto;padding:24px 20px 40px;color:var(--muted);font-size:.85rem;display:flex;gap:8px;flex-wrap:wrap}
#footer .dot{opacity:.5}

/* bottom-of-page scroll progress bar: fills left-to-right as the page scrolls down,
   only shown while the page is actually taller than the viewport */
#scrollprogress{position:fixed;left:0;right:0;bottom:0;height:4px;z-index:79;display:none;pointer-events:none}
#scrollprogress.show{display:block}
#scrollprogress i{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--accent)}

/* floating scroll buttons (up sits above down) */
#scrollbtns{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:10px}
#scrollbtns button{
  width:46px;height:46px;padding:0;border:0;border-radius:50%;
  background:var(--accent);color:#fff;opacity:.4;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(16,28,45,.25);transition:opacity .15s;
}
#scrollbtns button.show{display:flex}
#scrollbtns button:hover{opacity:.8}
#scrollbtns button:active{opacity:1}
#scrollbtns svg{width:24px;height:24px;display:block}

.searchbar{display:flex;flex-direction:column}
.searchbar-row{display:flex;gap:8px;align-items:center}
.searchbar-row input[type=text]{flex:1;min-width:160px}
.searchbar input[type=text],
.searchbar-row button{padding:12px 14px;font-size:1rem}
.searchbar input[type=text]{border:0;background:var(--surface)}
.searchbar input[type=text]:focus,
.searchbar input[type=text]:focus-visible{outline:none;box-shadow:none;border:0}
.searchbar-opts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.searchbar-opts select.scopesel{
  width:auto;min-width:0;border:0;background:var(--surface);color:var(--muted);
  font-weight:600;font-size:.92rem;padding:7px 9px;border-radius:8px;cursor:pointer;
  accent-color:var(--accent);
}
.searchbar-opts select.scopesel:hover{color:var(--text);background:var(--surface-2)}
.searchbar-opts select.scopesel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.searchbar-opts select.scopesel option:checked,
.searchbar-opts select.scopesel option:hover{
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 0 0 100px var(--accent) inset;
}

.typemenu{position:relative;flex:0 0 auto}
.searchbar-opts .typemenu-btn{border:0;background:transparent;color:var(--muted);padding:7px 9px;font-size:.92rem}
.searchbar-opts .typemenu-btn:hover{color:var(--text);background:var(--surface-2)}
.typemenu-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;max-width:230px}
.typemenu-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.typemenu-btn .caret{opacity:.55;font-size:.8em;flex:0 0 auto}
.typemenu-pop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:60;display:none;
  flex-direction:column;gap:2px;min-width:210px;padding:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);
}
.typemenu.open .typemenu-pop{display:flex}
.typemenu-pop label{
  display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;
  font-weight:600;font-size:.9rem;color:var(--text);cursor:pointer;white-space:nowrap;
}
.typemenu-pop label:hover{background:var(--surface-2)}
.typemenu-pop input[type=checkbox]{width:auto;min-width:0;margin:0;accent-color:var(--accent);cursor:pointer}

.listline{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.listline:last-child{border-bottom:0}
.flash{animation:flash 2s ease-out}
@keyframes flash{0%,20%{background:color-mix(in srgb,var(--accent) 22%,transparent)}100%{background:transparent}}

.avatar-sm{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--border);background:var(--surface-2)}
.linklist a,.linklist button{display:inline-block;margin:2px 8px 2px 0;padding:4px 9px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);font-size:.82rem;cursor:pointer;color:var(--text)}

/* home page "Top Profiles" carousel */
.topprofile{display:flex;flex-direction:column;align-items:center;gap:6px;width:118px;padding:14px 10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);color:var(--text);text-align:center;position:relative}
.topprofile:hover{border-color:var(--accent);text-decoration:none}
.topprofile-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid var(--border);background:var(--surface-2)}
.topprofile .name{font-weight:700;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.topprofile .meta{font-size:.74rem;color:var(--muted)}

/* the review/post page's "Download" button prints the page as-is via the
   browser's print-to-PDF — this hides everything but the review/post itself
   (chrome, action buttons, related-content rail) and its comments. */
@media print{
  #topbar,#scrollprogress,#scrollbtns,#toasts,#comments,.noprint{display:none!important}
}