/* Layout: a single Twitter-style feed column; each question is a thread (viral take → Gapcheck asks → Gapcheck checks) */
:root{
  --bg:#FAFAF7;
  --card:#FFFFFF;
  --fg:#1B2823;
  --muted:#5C6B64;
  --line:#DCE1DB;
  --truth:#1F6B47;
  --truth-soft:#E3EFE7;
  --gap:#C04A33;
  --gap-soft:#F6E4DF;
  /* chart marks: validated pair (CVD ΔE ≥ 10 on --card), separate from the text tokens above */
  --mark-truth:#0B8A6B;
  --mark-you:#C2410C;
  --mark-crowd:#8A968F;
  --mark-empty:#E4E9E3;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Public Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111614; --card:#1A211D; --fg:#E7ECE7; --muted:#95A29A; --line:#2B352F;
    --truth:#64C495; --truth-soft:#1E3A2C; --gap:#E57F64; --gap-soft:#44251D;
    --mark-truth:#26A889; --mark-you:#E46530; --mark-crowd:#6F7C75; --mark-empty:#2A332E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111614; --card:#1A211D; --fg:#E7ECE7; --muted:#95A29A; --line:#2B352F;
  --truth:#64C495; --truth-soft:#1E3A2C; --gap:#E57F64; --gap-soft:#44251D;
  --mark-truth:#26A889; --mark-you:#E46530; --mark-crowd:#6F7C75; --mark-empty:#2A332E;
  color-scheme:dark;
}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:16px; line-height:1.55;
  margin:0;
}
.shell{
  max-width:600px; margin:0 auto; min-height:100vh;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px);
}
@media (max-width:600px){ .shell{border-left:0; border-right:0;} }

/* top bar */
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px;
  padding:12px 16px 0;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; min-width:0;}
.brand h1{font-family:var(--display); font-weight:600; font-size:22px; margin:0; letter-spacing:.01em;}
.brand span{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; white-space:nowrap;}
.tally{font-size:13px; color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;}
.tabs{flex:1 0 100%; display:flex; gap:4px; margin:6px -16px 0; padding:0 8px; overflow-x:auto; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{flex:none; background:none; border:0; border-radius:0; color:var(--muted); font-size:14px; font-weight:600; padding:10px 10px 11px; border-bottom:3px solid transparent;}
.tab:hover{color:var(--fg);}
.tab[aria-selected="true"]{color:var(--fg); border-bottom-color:var(--truth);}
.status{margin:6px 0 0;}
#feedEnd .status{padding:18px 16px; margin:0; text-align:center;}
#feedEnd .post .status{padding:0; text-align:left; margin-top:6px;}
#sentinel{height:1px;}
.progress{position:absolute; left:0; right:0; top:0; height:3px; overflow:hidden;}
.progress i{display:block; height:100%; background:var(--truth); width:0; transition:width .3s ease;}

h2{font-family:var(--display); font-weight:600; font-size:clamp(24px,5vw,32px); line-height:1.15; margin:4px 0 12px; text-wrap:balance;}
p{margin:0 0 12px;}
.muted{color:var(--muted);}
.small{font-size:13.5px;}
.eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:600; margin:6px 0 4px;}
button{
  font-family:var(--body); font-size:15px; font-weight:600; cursor:pointer;
  border:1.5px solid var(--fg); background:var(--fg); color:var(--bg);
  padding:11px 22px; border-radius:999px;
}
button.ghost{background:transparent; color:var(--fg);}
button:focus-visible, input:focus-visible, a:focus-visible, .post:focus-visible{outline:2px solid var(--truth); outline-offset:2px;}
button:disabled{opacity:.45; cursor:default;}
a{color:var(--truth); text-decoration-thickness:1px; text-underline-offset:2px;}

/* posts */
.post{
  display:grid; grid-template-columns:40px minmax(0,1fr); gap:0 12px;
  padding:14px 16px; border-bottom:1px solid var(--line);
  scroll-margin-top:112px;
}
.post.has-reply{border-bottom:0; padding-bottom:6px;}
.post.reply{padding-top:6px;}
.rail{position:relative;}
.post.has-reply .rail::after{content:""; position:absolute; top:46px; bottom:-14px; left:19px; width:2px; background:var(--line); border-radius:1px;}
.avatar{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:600; font-size:21px; line-height:1;}
.avatar.gc{background:var(--truth); color:var(--bg);}
.avatar.feed{background:var(--line); color:var(--muted);}
.avatar svg{width:22px; height:22px;}
.head{display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; font-size:15px; line-height:1.3; min-height:20px;}
.head .name{font-weight:700;}
.head .meta{color:var(--muted); font-size:14px;}
.badge{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:3px;}
.badge.take{color:var(--gap); background:var(--gap-soft);}
.badge.check{color:var(--truth); background:var(--truth-soft);}
.pinned{font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:2px;}
.claim{font-family:var(--display); font-weight:600; font-size:clamp(22px,5.2vw,28px); line-height:1.2; margin:6px 0 4px; text-wrap:balance;}
.hashtag{color:var(--truth); font-weight:600; font-size:15px; margin:0;}
.ask{font-size:17px; line-height:1.45; margin:4px 0 0;}

/* media card */
.media{margin-top:12px; border:1px solid var(--line); border-radius:16px; background:var(--card); padding:18px;}
.gtop{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px;}
.gtop.wide{flex-direction:column; align-items:stretch; gap:12px;}
.preview{flex:0 1 128px; min-width:72px;}
.gtop.wide .preview{flex:none; width:100%; max-width:400px;}
.compare.rows .icons{max-width:360px;}
.gtop.wide .bigval small{display:block; margin:8px 0 0;}
.bigval{font-family:var(--display); font-weight:600; font-size:clamp(40px,12vw,56px); line-height:1; font-variant-numeric:tabular-nums; flex:none;}
.bigval small{font-size:20px; font-family:var(--body); font-weight:500; color:var(--muted); margin-left:4px;}
input[type=range]{width:100%; accent-color:var(--mark-you); margin:14px 0 6px; height:28px;}
.rangeends{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; margin-bottom:14px;}

/* generated visuals */
.waffle, .icons, .bar{display:block; width:100%; height:auto;}
.dot{fill:var(--mark-empty);}
.dot.you{fill:var(--mark-you);}
.dot.truth{fill:var(--mark-truth);}
.dot.crowd{fill:var(--mark-crowd);}
.ico > *{fill:var(--mark-empty);}
.ico.you > *{fill:var(--mark-you);}
.ico.truth > *{fill:var(--mark-truth);}
.ico.crowd > *{fill:var(--mark-crowd);}
.bar{height:16px; border-radius:8px; overflow:hidden;}
.bar .track{fill:var(--mark-empty);}
.bar .you{fill:var(--mark-you);} .bar .truth{fill:var(--mark-truth);} .bar .crowd{fill:var(--mark-crowd);}
.anim .fill.truth{animation:fade .7s ease-out both;}
.compare.rows .bar{height:12px;}
.anim .dot.truth{transform-box:fill-box; transform-origin:center; animation:pop .32s ease-out both;}
.anim .ico.truth{animation:fade .7s ease-out both;}
@keyframes pop{from{opacity:0; transform:scale(.3);}}
@keyframes fade{from{opacity:0;}}
@media (prefers-reduced-motion: reduce){ .anim *, .anim{animation:none !important;} .progress i{transition:none;} }

.compare{display:grid; gap:14px 18px; grid-template-columns:repeat(var(--n), minmax(0,1fr));}
.compare.rows{grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px;}
.cell{margin:0; min-width:0;}
.cell .waffle{max-width:180px;}
.lbl{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px; margin-bottom:8px; white-space:nowrap;}
.compare.rows .lbl{margin:0;}
@media (max-width:360px){ .lbl{letter-spacing:.02em; gap:4px;} .compare{column-gap:12px;} }
.sw{width:10px; height:10px; border-radius:50%; flex:none;}
.sw.you{background:var(--mark-you);} .sw.truth{background:var(--mark-truth);} .sw.crowd{background:var(--mark-crowd);}
.num{font-family:var(--display); font-weight:600; font-size:26px; line-height:1; margin-top:8px; font-variant-numeric:tabular-nums;}
.num small{font-family:var(--body); font-size:13px; font-weight:500; color:var(--muted); margin-left:2px;}
.compare.rows .num{margin:0; font-size:22px; text-align:right;}
.unitcap{margin:12px 0 0;}

.verdict{font-family:var(--display); font-weight:600; font-size:22px; line-height:1.25; margin:4px 0 0;}
.verdict em{font-style:normal; color:var(--gap);}
.verdict.good em{color:var(--truth);}
.crowdnote{margin:10px 0 0;}
.why{border-left:3px solid var(--truth); padding:2px 0 2px 14px; margin:14px 0;}
.why p{margin:0;}
.src{font-size:13px; color:var(--muted); margin-bottom:6px;}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-top:4px;}
.act{background:none; border:0; padding:6px 0; border-radius:0; color:var(--muted); font-size:13.5px; font-weight:600; text-decoration:none; cursor:pointer;}
.act:hover{color:var(--truth);}
.note{font-size:13px; color:var(--muted);}
.sharetxt{margin:8px 0 0;}
.act:disabled{opacity:.5;}
/* Ask Gapcheck compose box and the user's own posts */
.avatar.you{background:var(--line); color:var(--fg); font-family:var(--body); font-size:12px; font-weight:700;}
.compose{border-bottom:1px solid var(--line);}
.compose-label{display:block; font-weight:700; font-size:15px; margin-bottom:2px;}
.compose textarea{display:block; width:100%; box-sizing:border-box; min-height:64px; resize:vertical; padding:6px 0 10px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--fg); font:inherit; font-size:18px; line-height:1.4;}
.compose textarea::placeholder{color:var(--muted);}
.compose textarea:focus{outline:none; border-bottom-color:var(--truth);}
.compose-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px; margin-top:10px;}
.compose-row .small{flex:1 1 200px;}
.ask-text{font-size:18px; line-height:1.4; margin:4px 0 0; white-space:pre-wrap; overflow-wrap:anywhere;}
.ask-reply{margin:4px 0 0;}
/* Backend extras: live crowd line and reactions (only rendered when the page declares an API) */
.gcrowd{margin:10px 0 0;}
.gcrowd:empty{display:none;}
.reacts{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.react{background:transparent; color:var(--fg); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:13.5px; font-weight:600;}
.react:hover{border-color:var(--truth);}
.react[aria-pressed="true"]{border-color:var(--truth); background:var(--truth-soft); color:var(--truth);}
.react .rc{font-variant-numeric:tabular-nums; color:var(--muted);}
.reacts[data-done] .react:not([aria-pressed="true"]){opacity:.6;}

/* The Feed's claim as a picture */
.claimcard{
  position:relative; margin-top:10px; aspect-ratio:4/3; padding:26px 24px 18px;
  display:flex; flex-direction:column; justify-content:space-between; gap:14px;
  background:var(--cc); color:#FAFAF7; border-radius:16px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.cc-mark{position:absolute; top:-26px; right:14px; font-family:var(--display); font-size:180px; line-height:1; opacity:.14; pointer-events:none;}
.cc-q{position:relative; margin:auto 0; font-family:var(--display); font-weight:600; font-size:clamp(25px,6.6vw,40px); line-height:1.12; text-wrap:balance;}
.cc-foot{position:relative; display:flex; justify-content:space-between; gap:12px; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.86;}
/* Gapcheck's check leads with the result image once it's rendered */
.resultimg.isimg{padding:0; overflow:hidden;}
.resultimg img{display:block; width:100%; height:auto;}
.mediaout img, .mediaout video{display:block; width:100%; max-width:340px; height:auto; margin-top:12px; border:1px solid var(--line); border-radius:16px; background:var(--card);}
.mediaout .row{margin-top:10px; align-items:center;}
.btnlink{display:inline-block; font-size:15px; font-weight:600; text-decoration:none; color:var(--fg); border:1.5px solid var(--fg); border-radius:999px; padding:10px 20px;}

.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}

/* results */
.score{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:6px 0 18px;}
.score .n{font-family:var(--display); font-weight:600; font-size:72px; line-height:1; font-variant-numeric:tabular-nums;}
.recap{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:0;}
.recap li{display:flex; gap:12px; align-items:baseline; padding:11px 0; border-top:1px solid var(--line); min-width:0;}
.recap .d{font-variant-numeric:tabular-nums; font-weight:700; min-width:76px; font-size:14px;}
.recap .d.good{color:var(--truth);} .recap .d.bad{color:var(--gap);}
.recap .q{font-size:14px; color:var(--muted); min-width:0;}
.copybox{background:var(--card); border:1px dashed var(--line); border-radius:12px; padding:14px 16px; font-size:14px; margin-top:20px;}
.foot{padding:16px 16px 48px; font-size:12.5px; color:var(--muted);}
.srclist{margin:8px 0 0; padding-left:18px;}
.srclist li{margin-bottom:4px;}