/* ==========================================================================
   PeptideStack — "Ledger" design system
   Q&A, not a forum. Light, crisp, information-dense, editorial.
   Indigo #3B3B98 chrome · amber #D97706 accepted/highlight · green #0F7B4F check
   IBM Plex Sans (UI) · IBM Plex Serif (question titles) · IBM Plex Mono (data)
   Written from scratch for askpeptidestack.com. Nothing shared with any sibling site.
   ========================================================================== */

:root{
  /* --- indigo ramp (primary) --- */
  --in-900:#191945; --in-800:#24245E; --in-700:#2E2E7A; --in-600:#3B3B98;
  --in-500:#4F4FB0; --in-400:#7373C6; --in-300:#A7A7DC; --in-200:#CFCFEE;
  --in-100:#E4E4F6; --in-050:#EEEEFA;
  /* --- amber accent: accepted / highlight / bounty only --- */
  --am-700:#92400E; --am-600:#B45309; --am-500:#D97706; --am-400:#F59E0B;
  --am-100:#FEF1DC; --am-050:#FFFAF0;
  /* --- accepted green --- */
  --gr-700:#0B5E3C; --gr-600:#0F7B4F; --gr-100:#DCF3E7; --gr-050:#F0FAF5;
  /* --- semantic --- */
  --rd-600:#B42318; --rd-100:#FCE7E4; --rd-050:#FEF5F4;
  --bl-600:#1D6FA5; --bl-100:#E1F0FA;
  /* --- neutrals / surfaces --- */
  --page:#FBFCFE; --card:#FFFFFF; --sunken:#F5F7FB; --sunken-2:#EDF1F7;
  --line:#E3E7EE; --line-2:#EFF2F7; --line-3:#D3DAE5;
  --ink:#1A1D26; --ink-2:#3A4050; --ink-3:#5A6274; --ink-4:#7E8798; --ink-5:#A2AAB9;
  /* --- depth: used sparingly --- */
  --sh-1:0 1px 2px rgba(26,29,38,.05);
  --sh-2:0 2px 6px rgba(26,29,38,.07),0 1px 2px rgba(26,29,38,.04);
  --sh-3:0 12px 32px -10px rgba(20,24,44,.22),0 3px 10px -4px rgba(20,24,44,.10);
  --sh-4:0 -8px 28px -6px rgba(20,24,44,.20);
  /* --- geometry --- */
  --r-xs:2px; --r-sm:3px; --r:5px; --r-md:8px; --r-lg:12px;
  --rail:68px; --maxw:1420px;
  /* --- type --- */
  --f-ui:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-ser:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd,table{margin:0;padding:0}
ul,ol{list-style:none}
body{
  font-family:var(--f-ui);font-size:14.5px;line-height:1.62;color:var(--ink);
  background:var(--page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;vertical-align:middle}
a{color:var(--in-600);text-decoration:none;transition:color .12s ease}
a:hover{color:var(--in-800)}
b,strong{font-weight:600}
code,kbd,samp,pre{font-family:var(--f-mono);font-size:.9em}
::selection{background:#DEDEF8;color:var(--in-900)}
:focus-visible{outline:2px solid var(--in-500);outline-offset:2px;border-radius:2px}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}

.skip{position:absolute;left:-9999px;top:0;z-index:9000;background:var(--in-700);color:#fff;
  font-weight:600;font-size:13px;padding:10px 18px;border-radius:0 0 var(--r-md) 0}
.skip:focus{left:0}

.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink-4);font-variant-numeric:tabular-nums}
.ser{font-family:var(--f-ser)}
.nowrap{white-space:nowrap}
.muted{color:var(--ink-3)}
.tiny{font-size:12px}
.center{text-align:center}

/* ==================== LEFT ICON RAIL (desktop) ==================== */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:400;
  background:var(--in-900);display:flex;flex-direction:column;align-items:center;
  padding:10px 0 14px;border-right:1px solid #101033;
}
.rail-logo{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 12px;
  margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.09);width:calc(100% - 16px)}
.rail-logo svg{display:block}
.rail-logo span{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--in-300)}
.rail-nav{display:flex;flex-direction:column;gap:2px;width:100%;align-items:center;flex:1}
.rail-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;width:calc(100% - 12px);
  padding:8px 2px 7px;border-radius:var(--r-md);color:var(--in-300);transition:background .13s,color .13s}
.rail-nav a i{font-size:15px;line-height:1}
.rail-nav a em{font-style:normal;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.05em;
  text-transform:uppercase;text-align:center;line-height:1.1}
.rail-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.rail-nav a.on{background:var(--in-600);color:#fff;box-shadow:inset 2px 0 0 var(--am-400)}
.rail-foot{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.09);width:calc(100% - 16px)}
.rail-foot a{color:var(--in-400);font-size:13px}
.rail-foot a:hover{color:#fff}

/* ==================== TOP BAR ==================== */
.top{position:sticky;top:0;z-index:350;background:rgba(251,252,254,.93);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:56px;
  display:flex;align-items:center;gap:14px}
.burger{display:none;background:none;border:1px solid var(--line-3);border-radius:var(--r);
  width:34px;height:34px;color:var(--ink-2);font-size:15px;cursor:pointer;flex:0 0 auto}
.burger:hover{background:var(--sunken)}
.top-brand{display:none;align-items:center;gap:8px;font-family:var(--f-ser);font-weight:600;
  font-size:16.5px;color:var(--in-800);letter-spacing:-.2px}
.srch{flex:1;position:relative;max-width:560px}
.srch input{width:100%;height:36px;padding:0 12px 0 34px;font-family:var(--f-ui);font-size:13.5px;
  color:var(--ink);background:var(--card);border:1px solid var(--line-3);border-radius:var(--r);
  transition:border-color .13s,box-shadow .13s}
.srch input::placeholder{color:var(--ink-5)}
.srch input:focus{outline:none;border-color:var(--in-400);box-shadow:0 0 0 3px var(--in-050)}
.srch i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12.5px;color:var(--ink-5)}
.top-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.top-stat{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;padding-right:4px}
.top-stat b{font-family:var(--f-mono);font-size:12.5px;color:var(--in-800);font-variant-numeric:tabular-nums}
.top-stat span{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.top-sep{width:1px;height:26px;background:var(--line)}

/* ==================== MOBILE BOTTOM SHEET ==================== */
.sheet-scrim{position:fixed;inset:0;background:rgba(20,24,44,.42);z-index:600;opacity:0;
  pointer-events:none;transition:opacity .2s ease}
.sheet-scrim.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:610;background:var(--card);
  border-radius:16px 16px 0 0;box-shadow:var(--sh-4);transform:translateY(102%);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);max-height:82vh;overflow-y:auto;
  padding:8px 0 22px}
.sheet.open{transform:translateY(0)}
.sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--line-3);margin:6px auto 12px}
.sheet h4{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);padding:12px 20px 6px}
.sheet a{display:flex;align-items:center;gap:12px;padding:11px 20px;color:var(--ink);font-size:14.5px;
  font-weight:500;border-bottom:1px solid var(--line-2)}
.sheet a i{width:18px;text-align:center;color:var(--in-500);font-size:14px}
.sheet a:active{background:var(--sunken)}

/* ==================== LAYOUT ==================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.shell{padding-left:var(--rail)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:26px;align-items:start;
  padding:22px 0 44px}
.cols-1{padding:22px 0 44px}
.side{position:sticky;top:72px;display:flex;flex-direction:column;gap:16px}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--ink-4);
  padding:14px 0 0;font-family:var(--f-mono);letter-spacing:.02em}
.crumb a{color:var(--in-600)}
.crumb i{font-size:8px;color:var(--ink-5)}

/* ==================== PAGE HEADS ==================== */
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:2px}
.phead h1{font-family:var(--f-ser);font-size:26px;font-weight:600;letter-spacing:-.4px;
  line-height:1.22;color:var(--in-900)}
.phead p{font-size:13.5px;color:var(--ink-3);max-width:66ch;margin-top:5px}
.phead-c{display:flex;flex-direction:column;gap:2px}

/* ==================== SORT TABS ==================== */
.tabs{display:flex;align-items:center;gap:0;border:1px solid var(--line-3);border-radius:var(--r);
  overflow:hidden;background:var(--card);flex:0 0 auto}
.tabs a{padding:6px 13px;font-size:12.5px;font-weight:500;color:var(--ink-2);
  border-right:1px solid var(--line);transition:background .12s}
.tabs a:last-child{border-right:0}
.tabs a:hover{background:var(--sunken)}
.tabs a.on{background:var(--in-600);color:#fff}
.tabs a.on:hover{background:var(--in-700)}

/* ==================== QUESTION LIST ==================== */
.qlist{border-top:1px solid var(--line)}
.qrow{display:grid;grid-template-columns:82px minmax(0,1fr);gap:16px;padding:15px 2px 15px 0;
  border-bottom:1px solid var(--line)}
.qrow:hover{background:linear-gradient(90deg,rgba(238,238,250,.5),rgba(251,252,254,0))}
.qstats{display:flex;flex-direction:column;gap:3px;align-items:flex-end;padding-top:2px}
.qstat{display:flex;align-items:baseline;gap:5px;font-family:var(--f-mono);font-size:11.5px;
  color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.qstat b{font-size:13px;font-weight:600;color:var(--ink-2)}
.qstat.acc{color:var(--gr-700)}
.qstat.acc b{color:var(--gr-700)}
.qstat.ans-y{background:var(--gr-050);border:1px solid var(--gr-100);color:var(--gr-700);
  border-radius:var(--r-sm);padding:1px 5px}
.qstat.ans-y b{color:var(--gr-700)}
.qstat.ans-0{color:var(--ink-4)}
.qbody{min-width:0}
.qtitle{font-family:var(--f-ser);font-size:17px;font-weight:500;line-height:1.34;
  letter-spacing:-.15px;color:var(--in-700);display:block;margin-bottom:5px}
.qrow:hover .qtitle{color:var(--in-800)}
.qexc{font-size:13px;color:var(--ink-3);line-height:1.55;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.qtags{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.qwho{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-4);
  font-family:var(--f-mono);white-space:nowrap}
.qwho a{color:var(--in-600);font-weight:500}
.qwho .rep{color:var(--ink-2);font-weight:600}

/* ==================== TAG PILLS + HOVER CARD ==================== */
.tag{display:inline-flex;align-items:center;gap:4px;position:relative;
  background:var(--in-050);color:#31457A;border:1px solid var(--in-100);
  border-radius:var(--r-sm);padding:2px 7px;font-size:11.5px;font-weight:500;line-height:1.5;
  font-family:var(--f-ui);letter-spacing:.01em;transition:background .12s,border-color .12s}
.tag:hover{background:var(--in-100);border-color:var(--in-200);color:var(--in-800)}
.tag .n{font-family:var(--f-mono);font-size:10px;color:var(--ink-4)}
.tag-wrap{position:relative;display:inline-flex}
/* Hover card. display:none rather than visibility:hidden so a 270px card can
   never contribute to document scrollWidth while closed. */
.tag-card{display:none;position:absolute;left:0;top:calc(100% + 6px);width:270px;
  max-width:min(270px,78vw);z-index:500;
  background:var(--card);border:1px solid var(--line-3);border-radius:var(--r-md);
  box-shadow:var(--sh-3);padding:11px 13px;pointer-events:none}
.tag-wrap:hover .tag-card,.tag-wrap:focus-within .tag-card{display:block;animation:tcIn .15s var(--ease) both}
@keyframes tcIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* Cards in the sticky right rail open leftwards, or they would run off-screen. */
.side .tag-card,.rail-side .tag-card{left:auto;right:0}
.tag-card h5{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--in-700);
  margin-bottom:4px}
.tag-card p{font-size:12px;color:var(--ink-3);line-height:1.5}
.tag-card .tc-n{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-4);margin-top:6px;
  padding-top:6px;border-top:1px solid var(--line-2)}

/* ==================== CARDS / PANELS ==================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)}
.card-h{padding:10px 14px;border-bottom:1px solid var(--line);background:var(--sunken);
  border-radius:var(--r-md) var(--r-md) 0 0;display:flex;align-items:center;
  justify-content:space-between;gap:8px}
.card-h h3{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--in-800);font-weight:600}
.card-h a{font-size:11px;font-family:var(--f-mono);color:var(--in-600)}
.card-b{padding:12px 14px}
.card-b.flush{padding:0}
.hotq{display:block;padding:9px 14px;border-bottom:1px solid var(--line-2);font-size:13px;
  line-height:1.42;color:var(--ink-2)}
.hotq:last-child{border-bottom:0}
.hotq:hover{background:var(--sunken);color:var(--in-700)}
.hotq .hm{display:block;margin-top:3px;font-family:var(--f-mono);font-size:10px;color:var(--ink-4);
  letter-spacing:.03em;font-variant-numeric:tabular-nums}
.cloud{display:flex;flex-wrap:wrap;gap:5px}

.note{border:1px solid var(--line);border-left:3px solid var(--in-500);background:var(--in-050);
  border-radius:var(--r);padding:11px 14px;font-size:13px;color:var(--ink-2);line-height:1.55}
.note.warn{border-left-color:var(--am-500);background:var(--am-050)}
.note.bad{border-left-color:var(--rd-600);background:var(--rd-050)}
.note.good{border-left-color:var(--gr-600);background:var(--gr-050)}
.note b{color:var(--ink)}

/* ==================== QUESTION PAGE ==================== */
.qhead{padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:0}
.qhead h1{font-family:var(--f-ser);font-size:27px;font-weight:600;line-height:1.26;
  letter-spacing:-.5px;color:var(--in-900);margin-bottom:9px}
.qhmeta{display:flex;flex-wrap:wrap;gap:4px 18px}
.qhmeta span{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-4);
  font-variant-numeric:tabular-nums}
.qhmeta span b{color:var(--ink-2);font-weight:500}

.closed{margin:14px 0 0;border:1px solid var(--am-100);background:var(--am-050);
  border-radius:var(--r-md);padding:12px 14px;font-size:13px;color:var(--am-700);line-height:1.55}
.closed strong{color:var(--am-700)}
.closed a{color:var(--in-700);font-weight:600;text-decoration:underline;text-decoration-color:var(--in-300)}
.closed .cl-sub{display:block;margin-top:4px;font-size:12px;color:var(--ink-3)}

.post{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;padding:20px 0;
  border-bottom:1px solid var(--line)}
.post.is-acc{background:linear-gradient(90deg,var(--gr-050),rgba(251,252,254,0) 62%);
  border-left:3px solid var(--gr-600);padding-left:13px;margin-left:-16px;
  border-radius:0 var(--r) var(--r) 0}
.gutter{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:2px}
.vbtn{width:34px;height:26px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-3);border-radius:var(--r-sm);background:var(--card);color:var(--ink-4);
  font-size:11px;cursor:pointer;transition:border-color .12s,color .12s,background .12s;padding:0}
.vbtn:hover{border-color:var(--am-400);color:var(--am-600);background:var(--am-050)}
.score{font-family:var(--f-mono);font-size:19px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;line-height:1.5;letter-spacing:-.5px}
.score.neg{color:var(--rd-600)}
.gicon{margin-top:6px;color:var(--ink-5);font-size:14px}
.gicon.acc{color:var(--gr-600);font-size:20px}
.gicon.bk{color:var(--am-500)}
.pbody{min-width:0}
.pbody p{margin-bottom:12px;font-size:14.5px;line-height:1.68;color:var(--ink)}
.pbody p:last-child{margin-bottom:0}
.pbody h4{font-family:var(--f-ui);font-size:14.5px;font-weight:600;color:var(--in-800);
  margin:18px 0 8px;letter-spacing:-.1px}
.pbody ul,.pbody ol{margin:0 0 13px 0;padding-left:20px}
.pbody ul li{list-style:disc;margin-bottom:5px;line-height:1.6}
.pbody ol li{list-style:decimal;margin-bottom:5px;line-height:1.6}
.pbody ul li::marker,.pbody ol li::marker{color:var(--in-400)}
.pbody blockquote{border-left:3px solid var(--in-200);background:var(--sunken);padding:10px 14px;
  margin:0 0 13px;font-size:14px;color:var(--ink-2);border-radius:0 var(--r) var(--r) 0}
.pbody code{background:var(--sunken-2);border:1px solid var(--line);border-radius:var(--r-xs);
  padding:1px 4px;font-size:12.5px;color:var(--in-800)}
.pbody pre{background:var(--in-900);color:#DDE1F5;border-radius:var(--r);padding:13px 15px;
  overflow-x:auto;margin:0 0 13px;font-size:12.5px;line-height:1.6}
.pbody pre code{background:none;border:0;padding:0;color:inherit;font-size:12.5px}
.pbody a{text-decoration:underline;text-decoration-color:var(--in-300);text-underline-offset:2px}
.cite{font-family:var(--f-mono);font-size:10px;color:var(--in-600);vertical-align:super;
  cursor:help;border-bottom:1px dotted var(--in-300);padding:0 1px}

/* tables inside bodies + tools */
.tw{overflow-x:auto;margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r-md);
  -webkit-overflow-scrolling:touch}
.pbody table,table.dt{width:100%;border-collapse:collapse;font-size:12.8px;
  font-variant-numeric:tabular-nums;background:var(--card)}
.pbody thead th,table.dt thead th{background:var(--sunken);text-align:left;padding:8px 11px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.055em;text-transform:uppercase;
  color:var(--in-800);font-weight:600;border-bottom:1px solid var(--line-3);white-space:nowrap}
.pbody tbody td,table.dt tbody td{padding:8px 11px;border-bottom:1px solid var(--line-2);
  color:var(--ink-2);vertical-align:top;line-height:1.5}
.pbody tbody tr:last-child td,table.dt tbody tr:last-child td{border-bottom:0}
.pbody tbody tr:nth-child(even),table.dt tbody tr:nth-child(even){background:#FCFDFF}
.pbody table{margin:0}
table.dt td.num,table.dt th.num{text-align:right;font-family:var(--f-mono)}

.pfoot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;
  margin-top:14px}
.pacts{display:flex;gap:12px}
.pacts span{font-size:11.5px;color:var(--ink-4);cursor:pointer;font-family:var(--f-mono)}
.pacts span:hover{color:var(--in-600)}
.edited{font-family:var(--f-mono);font-size:11px;color:var(--ink-4);font-style:normal}
.edited b{color:var(--ink-3);font-weight:500}

/* author card */
.who{display:flex;align-items:flex-start;gap:9px;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r);padding:8px 11px;min-width:196px}
.who.acc-w{background:var(--gr-050);border-color:var(--gr-100)}
.av{flex:0 0 auto;border-radius:var(--r-sm);overflow:hidden;display:block}
.who-t{min-width:0}
.who-t .wl{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);display:block;margin-bottom:1px}
.who-t a{font-size:13px;font-weight:600;color:var(--in-700);display:block;line-height:1.3;
  word-break:break-word}
.who-t .wr{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:2px}
.who-t .wr b{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);
  font-variant-numeric:tabular-nums}

/* badge dots */
.bdg{display:inline-flex;align-items:center;gap:2.5px;font-family:var(--f-mono);font-size:10.5px;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.bdg::before{content:"";width:6px;height:6px;border-radius:50%;display:inline-block}
.bdg.g::before{background:#C9992B}
.bdg.s::before{background:#9BA5B4}
.bdg.b::before{background:#B4763F}

/* ==================== COMMENTS ==================== */
.cmts{margin-top:12px;border-top:1px solid var(--line-2)}
.cmt{display:flex;gap:9px;padding:6px 0 6px 2px;border-bottom:1px solid var(--line-2);
  font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.cmt .cv{flex:0 0 22px;text-align:right;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-5);
  padding-top:1px;font-variant-numeric:tabular-nums}
.cmt .ct{min-width:0}
.cmt .ct a{font-weight:500;color:var(--in-600)}
.cmt .cd{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-5);white-space:nowrap}
.cmt-more,.cmt-add{display:block;padding:6px 0 0 33px;font-size:12px;color:var(--ink-4);
  font-family:var(--f-mono)}
.cmt-more:hover,.cmt-add:hover{color:var(--in-600)}

.asec{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:22px 0 8px;border-bottom:1px solid var(--line)}
.asec h2{font-family:var(--f-ser);font-size:19px;font-weight:600;color:var(--in-900);
  letter-spacing:-.3px}
.asec .sortl{font-family:var(--f-mono);font-size:11px;color:var(--ink-4);letter-spacing:.04em}

/* ==================== PAGINATION ==================== */
.pgn{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:20px 0 0}
.pgn a,.pgn span{min-width:31px;height:31px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 8px;font-family:var(--f-mono);font-size:12.5px;
  border:1px solid var(--line-3);border-radius:var(--r-sm);color:var(--ink-2);background:var(--card);
  font-variant-numeric:tabular-nums}
.pgn a:hover{background:var(--in-050);border-color:var(--in-300);color:var(--in-800)}
.pgn .cur{background:var(--in-600);border-color:var(--in-600);color:#fff;font-weight:600}
.pgn .gap{border:0;background:none;color:var(--ink-5);min-width:16px;padding:0}
.pgn .lbl{border:0;background:none;color:var(--ink-4);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;margin-left:auto}

/* ==================== SPONSORS ==================== */
.ad{display:block;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--card);margin:18px 0;transition:border-color .14s,box-shadow .14s}
.ad:hover{border-color:var(--in-300);box-shadow:var(--sh-2)}
.ad-lbl{font-family:var(--f-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-5);padding:5px 12px 0}
.ad-in{display:flex;gap:13px;padding:8px 13px 13px;align-items:flex-start}
.ad-ico{flex:0 0 auto;width:40px;height:40px;border-radius:var(--r);display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:16px}
.ad-tx h4{font-family:var(--f-ui);font-size:13.5px;font-weight:600;color:var(--in-800);
  margin-bottom:3px;line-height:1.3}
.ad-tx p{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-bottom:7px}
.ad-cta{display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:var(--in-600);border-radius:var(--r-sm);
  padding:4px 10px}
.ad:hover .ad-cta{background:var(--in-700)}
.ad-s{display:block;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--card);transition:border-color .14s,box-shadow .14s}
.ad-s:hover{border-color:var(--in-300);box-shadow:var(--sh-2)}
.ad-s .ad-band{padding:13px 14px;color:#fff}
.ad-s .ad-band h4{font-size:13.5px;font-weight:600;margin-bottom:4px}
.ad-s .ad-band p{font-size:12px;opacity:.86;line-height:1.5;margin-bottom:9px}
.ad-s .ad-band span{display:inline-block;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r-sm);padding:3px 9px}
.ad-pair{margin-top:-9px;padding-top:9px}

/* ==================== USERS ==================== */
.ugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px;padding:18px 0 0}
.ucard{display:flex;gap:10px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);padding:11px 12px;transition:border-color .13s,box-shadow .13s}
.ucard:hover{border-color:var(--in-300);box-shadow:var(--sh-2)}
.ucard-t{min-width:0;flex:1}
.ucard-t a{font-size:13.5px;font-weight:600;color:var(--in-700);display:block;line-height:1.3;
  word-break:break-word}
.ucard-t .ul{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-4);display:block;margin-top:1px}
.ucard-t .ur{font-family:var(--f-mono);font-size:12.5px;font-weight:600;color:var(--ink-2);
  margin-top:3px;display:block;font-variant-numeric:tabular-nums}
.ucard-t .ut{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}

.prof{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;
  padding:20px 0 18px;border-bottom:1px solid var(--line)}
.prof h1{font-family:var(--f-ser);font-size:25px;font-weight:600;color:var(--in-900);
  letter-spacing:-.4px;line-height:1.2;word-break:break-word}
.prof .pmeta{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:7px}
.prof .pmeta span{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-4)}
.prof .pmeta span b{color:var(--ink-2);font-weight:500}
.prof .pbio{font-size:13.5px;color:var(--ink-2);margin-top:10px;max-width:70ch;line-height:1.6}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;margin:18px 0}
.stat{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:11px 13px}
.stat b{display:block;font-family:var(--f-mono);font-size:20px;font-weight:600;color:var(--in-800);
  letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1.2}
.stat span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:9px}
.bcard{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line);
  border-radius:var(--r);padding:9px 11px;background:var(--card)}
.bdot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:5px}
.bcard b{display:block;font-size:12.8px;font-weight:600;color:var(--ink)}
.bcard span{font-size:11.5px;color:var(--ink-4);line-height:1.4;display:block}
.mini{border-top:1px solid var(--line)}
.mini a.mr{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:9px 2px;
  border-bottom:1px solid var(--line-2);align-items:baseline}
.mini a.mr:hover{background:var(--sunken)}
.mini .ms{font-family:var(--f-mono);font-size:12px;font-weight:600;text-align:center;
  border:1px solid var(--line-3);border-radius:var(--r-sm);color:var(--ink-2);padding:1px 0;
  font-variant-numeric:tabular-nums}
.mini .ms.acc{background:var(--gr-600);border-color:var(--gr-600);color:#fff}
.mini .mt{font-size:13.2px;color:var(--in-700);line-height:1.42}
.mini .md{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-4);display:block;margin-top:2px}

/* ==================== TAGS INDEX ==================== */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px;padding:18px 0 0}
.tcard{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:12px 13px;
  display:flex;flex-direction:column;gap:7px;transition:border-color .13s,box-shadow .13s}
.tcard:hover{border-color:var(--in-300);box-shadow:var(--sh-2)}
.tcard p{font-size:12.3px;color:var(--ink-3);line-height:1.5;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tcard .tf{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;
  color:var(--ink-4);padding-top:6px;border-top:1px solid var(--line-2);
  font-variant-numeric:tabular-nums}

/* ==================== VENDORS ==================== */
.vhero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;
  border:1px solid var(--line);border-left:3px solid var(--in-600);border-radius:var(--r-md);
  background:var(--card);padding:18px 20px;margin:18px 0}
.vmark{width:58px;height:58px;border-radius:var(--r-md);display:flex;align-items:center;
  justify-content:center;color:#fff;font-family:var(--f-mono);font-size:17px;font-weight:600;
  letter-spacing:-.5px;flex:0 0 auto}
.vhero h1{font-family:var(--f-ser);font-size:23px;font-weight:600;color:var(--in-900);
  line-height:1.24;letter-spacing:-.4px}
.vhero .vfacts{display:flex;flex-wrap:wrap;gap:3px 18px;margin-top:6px}
.vhero .vfacts span{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-4)}
.vhero .vfacts b{color:var(--ink-2);font-weight:500}
.vscore{text-align:center;flex:0 0 auto}
.vscore b{display:block;font-family:var(--f-mono);font-size:29px;font-weight:600;
  color:var(--in-800);letter-spacing:-1px;line-height:1.05;font-variant-numeric:tabular-nums}
.vscore .stars{color:var(--am-500);font-size:11.5px;letter-spacing:1px}
.vscore span{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-4);margin-top:2px}
.vsec{margin:22px 0}
.vsec h2{font-family:var(--f-ser);font-size:19px;font-weight:600;color:var(--in-900);
  margin-bottom:9px;letter-spacing:-.3px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.vsec h3{font-size:14.5px;font-weight:600;color:var(--in-800);margin:16px 0 7px}
.vsec p{font-size:14px;color:var(--ink-2);line-height:1.66;margin-bottom:11px}
.vsec ul{margin:0 0 12px;padding-left:19px}
.vsec ul li{list-style:disc;font-size:14px;color:var(--ink-2);margin-bottom:5px;line-height:1.58}
.vsec ul li::marker{color:var(--in-400)}
.rev{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:12px 14px;
  margin-bottom:10px}
.rev-h{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:6px}
.rev-h b{font-size:13px;font-weight:600;color:var(--ink)}
.rev-h .stars{color:var(--am-500);font-size:11px;letter-spacing:.5px}
.rev-h time{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-4);margin-left:auto}
.rev p{font-size:13.3px;color:var(--ink-2);line-height:1.62}
.vdom{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2);background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 6px;
  -webkit-user-select:all;user-select:all}
.vtable td .vn{font-weight:600;color:var(--in-700)}

/* ==================== TOOLS ==================== */
.tool{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  padding:16px 18px;margin:18px 0}
.tool h3{font-family:var(--f-ui);font-size:15px;font-weight:600;color:var(--in-800);margin-bottom:12px}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin-bottom:14px}
.fld label{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.fld input,.fld select{width:100%;height:36px;padding:0 10px;font-family:var(--f-mono);
  font-size:13.5px;color:var(--ink);background:var(--card);border:1px solid var(--line-3);
  border-radius:var(--r);font-variant-numeric:tabular-nums}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--in-400);
  box-shadow:0 0 0 3px var(--in-050)}
.fld .hint{font-size:11px;color:var(--ink-4);margin-top:3px;line-height:1.4}
.btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;border:0;
  border-radius:var(--r);background:var(--in-600);color:#fff;font-family:var(--f-ui);
  font-size:13.5px;font-weight:500;cursor:pointer;transition:background .13s}
.btn:hover{background:var(--in-700)}
.btn.ghost{background:var(--card);color:var(--in-700);border:1px solid var(--line-3)}
.btn.ghost:hover{background:var(--in-050)}
.out{border:1px solid var(--in-100);background:var(--in-050);border-radius:var(--r-md);
  padding:14px 16px;margin-top:6px}
.out .big{font-family:var(--f-mono);font-size:27px;font-weight:600;color:var(--in-800);
  letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.15}
.out .sub{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}
.out .lines{margin-top:11px;padding-top:11px;border-top:1px solid var(--in-100)}
.out .lines div{display:flex;justify-content:space-between;gap:14px;font-family:var(--f-mono);
  font-size:12.5px;color:var(--ink-2);padding:2.5px 0;font-variant-numeric:tabular-nums}
.out .lines div span:first-child{color:var(--ink-3)}
.syr{margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;border-radius:var(--r-sm);padding:2px 7px;
  border:1px solid var(--line-3);color:var(--ink-3);background:var(--card)}
.chip.ok{background:var(--gr-050);border-color:var(--gr-100);color:var(--gr-700)}
.chip.hm{background:var(--am-050);border-color:var(--am-100);color:var(--am-700)}
.chip.no{background:var(--rd-050);border-color:var(--rd-100);color:var(--rd-600)}

/* ==================== PROSE (help / legal / tour) ==================== */
.prose{max-width:74ch}
.prose h2{font-family:var(--f-ser);font-size:20px;font-weight:600;color:var(--in-900);
  margin:26px 0 9px;letter-spacing:-.3px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.prose h3{font-size:15px;font-weight:600;color:var(--in-800);margin:19px 0 7px}
.prose p{font-size:14.5px;line-height:1.72;color:var(--ink-2);margin-bottom:13px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:21px}
.prose ul li{list-style:disc;margin-bottom:6px;line-height:1.62;color:var(--ink-2)}
.prose ol li{list-style:decimal;margin-bottom:6px;line-height:1.62;color:var(--ink-2)}
.prose ul li::marker,.prose ol li::marker{color:var(--in-400)}
.prose dl{margin-bottom:14px}
.prose dt{font-weight:600;color:var(--in-800);font-size:14px;margin-top:11px}
.prose dd{font-size:14px;color:var(--ink-2);line-height:1.62;margin-left:0}
.prose a{text-decoration:underline;text-decoration-color:var(--in-300);text-underline-offset:2px}
.prose code{background:var(--sunken-2);border:1px solid var(--line);border-radius:var(--r-xs);
  padding:1px 4px;font-size:12.5px;color:var(--in-800)}

/* ==================== SEARCH ==================== */
.sbig{display:flex;gap:9px;margin:18px 0}
.sbig input{flex:1;height:42px;padding:0 14px;font-family:var(--f-ui);font-size:15px;
  border:1px solid var(--line-3);border-radius:var(--r);background:var(--card)}
.sbig input:focus{outline:none;border-color:var(--in-400);box-shadow:0 0 0 3px var(--in-050)}
#sres .qrow{grid-template-columns:64px minmax(0,1fr)}

/* ==================== FOOTER ==================== */
.foot{background:var(--in-900);color:var(--in-200);margin-top:20px}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:34px 22px 22px}
.foot-g{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:26px}
.foot-g h4{font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;margin-bottom:9px}
.foot-g a{display:block;font-size:12.8px;color:var(--in-300);padding:2.5px 0}
.foot-g a:hover{color:#fff}
.foot-brand{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.foot-brand b{font-family:var(--f-ser);font-size:16.5px;color:#fff;font-weight:600;letter-spacing:-.3px}
.foot p{font-size:12.5px;color:var(--in-300);line-height:1.62;max-width:44ch}
.foot-b{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;
  margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.11)}
.foot-b span{font-family:var(--f-mono);font-size:10.5px;color:var(--in-400);letter-spacing:.03em}
.foot-dis{margin-top:12px;font-size:11.5px;color:var(--in-400);line-height:1.6;max-width:96ch}

/* cookie strip */
#ckb{position:fixed;left:0;right:0;bottom:0;z-index:500;background:var(--in-900);color:var(--in-200);
  padding:11px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:13px;
  font-size:12.3px;border-top:1px solid rgba(255,255,255,.12)}
#ckb a{color:var(--am-400);text-decoration:underline}
#ckb button{height:29px;padding:0 15px;border:0;border-radius:var(--r-sm);background:var(--in-600);
  color:#fff;font-family:var(--f-ui);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap}
#ckb button.g{background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--in-200)}

/* ==================== RESPONSIVE ==================== */
@media (max-width:1279px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .side{position:static;flex-direction:row;flex-wrap:wrap;gap:14px}
  .side>*{flex:1 1 280px;min-width:0}
}
/* The bottom sheet is the mobile counterpart of the rail. Above the rail
   breakpoint it must not exist at all, not merely be translated off-screen. */
@media (min-width:1100px){
  .sheet,.sheet-scrim{display:none !important}
}
@media (max-width:1099px){
  :root{--rail:0px}
  .rail{display:none}
  .shell{padding-left:0}
  .burger{display:flex;align-items:center;justify-content:center}
  .top-brand{display:flex}
  .top-stat{display:none}
  .top-sep{display:none}
}
@media (max-width:719px){
  body{font-size:14px}
  .wrap{padding:0 14px}
  .top-in{padding:0 14px;height:52px;gap:9px}
  .top-brand span{display:none}
  .cols,.cols-1{padding:14px 0 34px}
  .phead h1{font-size:21px}
  .qhead h1{font-size:22px}
  .prof h1{font-size:21px}
  .vhero h1{font-size:19px}
  .foot-g{grid-template-columns:1fr 1fr;gap:18px}
  .foot-in{padding:26px 14px 18px}
  /* vote gutter → horizontal strip */
  .qrow{grid-template-columns:minmax(0,1fr);gap:8px}
  .qstats{flex-direction:row;align-items:center;gap:9px;flex-wrap:wrap;padding-top:0}
  .post{grid-template-columns:minmax(0,1fr);gap:10px}
  .post.is-acc{margin-left:0;padding-left:10px}
  .gutter{flex-direction:row;align-items:center;gap:8px}
  .gicon{margin-top:0}
  .score{font-size:16px}
  .pfoot{flex-direction:column;align-items:stretch}
  .who{min-width:0}
  .tag-card{display:none}
  .ugrid,.tgrid{grid-template-columns:1fr}
  .vhero{grid-template-columns:auto minmax(0,1fr);row-gap:12px}
  .vscore{grid-column:1 / -1;text-align:left;display:flex;align-items:baseline;gap:10px}
  .vscore b{font-size:23px}
  .prof{grid-template-columns:minmax(0,1fr);gap:12px}
  .tabs{width:100%;overflow-x:auto}
  .tabs a{flex:1;text-align:center;white-space:nowrap}
  .pgn .lbl{display:none}
}
@media (max-width:379px){
  .wrap{padding:0 10px}
  .qtitle{font-size:15.5px}
  .qhead h1{font-size:19.5px}
  .statgrid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@media print{
  .rail,.top,.foot,#ckb,.side,.sheet,.sheet-scrim,.gutter,.pacts{display:none !important}
  .shell{padding-left:0}.cols{grid-template-columns:1fr}
  body{font-size:11pt;background:#fff}
}

/* Vendor score is out of ten, not five — the denominator is printed and the bar
   replaces the star glyphs that made a 9.5 read as a 5-point rating. */
.vscore .of{font-size:.55em;font-weight:400;opacity:.6;margin-left:2px}
td .of{font-size:.75em;opacity:.55}
.sbar{display:block;width:104px;height:5px;border-radius:3px;background:rgba(128,128,128,.24);margin:6px 0 4px;overflow:hidden}
.sbar i{display:block;height:100%;background:currentColor;opacity:.62}
/* Second-tier suppliers: no profile, no score, no outbound link. */
.t2wrap{margin:26px 0}
.t2table td{font-size:13.5px;vertical-align:top}
.vsmall{font-size:13px;opacity:.75}
.shopcta{margin:14px 0}
.shopcta .shoplink{font-weight:600}