/* Shared chrome for the community pages. Every value is a token alias (tokens.css). */
:root{
  --void:var(--mt-color-void);--deck:var(--mt-color-deck);--panel:var(--mt-color-panel);
  --edge:var(--mt-color-edge);--edge-hot:var(--mt-color-edge-hot);
  --ink:var(--mt-color-ink);--dim:var(--mt-color-dim);--faint:var(--mt-color-faint);
  --amber:var(--mt-color-accent);--hazard:var(--mt-color-hazard);--good:var(--mt-color-good);
  --warm:var(--mt-side-anthropic);--cool:var(--mt-side-openai);
  --mark:var(--mt-font-mark);--ui:var(--mt-font-ui);--body:var(--mt-font-body);--mono:var(--mt-font-mono);
  --max:var(--mt-max-width);--gutter:var(--mt-gutter);--radius:var(--mt-radius-sm);
}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--body);font-size:var(--mt-text-base);line-height:var(--mt-leading-body);-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--mt-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--mt-grid-line) 1px,transparent 1px);background-size:48px 48px;background-attachment:fixed}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance;font-family:var(--ui);font-weight:700;letter-spacing:var(--mt-tracking-tight)}
h1{font-size:var(--mt-text-2xl);line-height:1.1}
h2{font-size:var(--mt-text-xl);line-height:1.15}
h3{font-size:var(--mt-text-md);line-height:1.3}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.label{font-family:var(--ui);font-size:var(--mt-text-xs);font-weight:600;letter-spacing:var(--mt-tracking-label);text-transform:uppercase;color:var(--faint);line-height:var(--mt-leading-snug)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ui{font-family:var(--ui);letter-spacing:var(--mt-tracking-ui)}
.panel{background:linear-gradient(160deg,var(--mt-plate-a) 0%,var(--mt-plate-b) 100%);border:var(--mt-border);border-radius:var(--radius)}
.bevel{clip-path:polygon(var(--mt-bevel) 0,100% 0,100% calc(100% - var(--mt-bevel)),calc(100% - var(--mt-bevel)) 100%,0 100%,0 var(--mt-bevel))}
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;font-family:var(--ui);font-size:var(--mt-text-sm);font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-radius:var(--radius);background:var(--amber);color:var(--void);border:1px solid var(--amber);cursor:pointer;transition:filter var(--mt-dur-fast),border-color var(--mt-dur-fast),color var(--mt-dur-fast)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--edge-hot)}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber);filter:none}
.btn.sm{height:32px;padding:0 12px;font-size:12px}
.btn[disabled]{opacity:.4;cursor:default;filter:none}
.ic{display:inline-block;vertical-align:-3px;flex-shrink:0}

nav{position:sticky;top:0;z-index:20;background:rgba(5,7,12,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--edge)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand span{font-family:var(--mark);font-size:14px;letter-spacing:.06em;color:var(--ink)}
.brand span b{color:var(--amber);font-weight:400}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
nav li a{text-decoration:none;font-family:var(--ui);font-size:var(--mt-text-xs);font-weight:600;letter-spacing:var(--mt-tracking-label);text-transform:uppercase;color:var(--dim)}
nav li a:hover,nav li a[aria-current]{color:var(--amber)}
main{padding:48px 0 96px}
.head{margin-bottom:32px;max-width:70ch}
.head p{color:var(--dim);margin-top:10px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius);font-family:var(--ui);font-size:var(--mt-text-xs);font-weight:800;letter-spacing:var(--mt-tracking-label);text-transform:uppercase;border:1px solid}
.badge.attested{color:var(--good);border-color:rgba(63,224,168,.5);background:rgba(63,224,168,.06)}
.badge.partial{color:var(--amber);border-color:rgba(255,176,32,.5);background:rgba(255,176,32,.06)}
.badge.derivative{color:var(--dim);border-color:var(--edge-hot)}
.badge.unverified{color:var(--amber);border-color:rgba(255,176,32,.5);background:rgba(255,176,32,.06)}
.badge.tampered{color:var(--hazard);border-color:rgba(255,77,61,.5);background:rgba(255,77,61,.06)}
.badge.pending{color:var(--dim);border-color:var(--edge-hot)}

/* run cards */
.runs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.run{padding:20px;display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:border-color var(--mt-dur-fast)}
.run:hover{border-color:var(--amber)}
.run .vs{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.run .side{display:flex;align-items:center;gap:8px;min-width:0}
.run .side b{font-family:var(--ui);font-size:var(--mt-text-sm);font-weight:800;letter-spacing:var(--mt-tracking-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run .side small{display:block;font-size:var(--mt-text-xs);color:var(--faint)}
.run .side.b{justify-content:flex-end;text-align:right}
.run .x{font-family:var(--mark);font-size:12px;color:var(--faint)}
.run h3{font-family:var(--body);font-weight:600;font-size:var(--mt-text-md);line-height:1.35}
.run .meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--mono);font-size:var(--mt-text-xs);color:var(--dim)}
.run .excerpt{color:var(--dim);font-size:var(--mt-text-sm);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.run .foot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--edge);padding-top:12px}
.run .votes{font-family:var(--mono);font-size:var(--mt-text-xs);color:var(--dim)}
.empty{padding:48px;text-align:center;color:var(--dim)}

/* transcript */
.tx{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.feed{display:flex;flex-direction:column;gap:16px}
.msg{max-width:82%}
.msg.B{margin-left:auto}
.msg .who{display:flex;gap:8px;align-items:center;margin-bottom:6px;font-family:var(--ui);font-size:12px;font-weight:800;letter-spacing:var(--mt-tracking-ui)}
.msg.B .who{justify-content:flex-end}
.msg .who .n{color:var(--faint);font-weight:600}
.msg .who .flag{color:var(--amber);font-weight:600}
.msg .body{padding:14px 18px;font-size:var(--mt-text-base);line-height:var(--mt-leading-body);background:var(--deck);border:1px solid var(--edge);border-radius:var(--radius);white-space:pre-wrap}
.msg.A .body{border-left:2px solid var(--sideA,var(--warm))}
.msg.B .body{border-right:2px solid var(--sideB,var(--cool))}
.msg .tap{margin-top:6px;padding:10px 14px;font-family:var(--mono);font-size:var(--mt-text-xs);line-height:1.7;color:var(--good);background:rgba(63,224,168,.05);border:1px solid rgba(63,224,168,.25);border-radius:var(--radius);white-space:pre-wrap}
.msg .tap .t{display:block;font-family:var(--ui);font-weight:600;letter-spacing:var(--mt-tracking-label);text-transform:uppercase;color:var(--good);margin-bottom:4px}
.inject{align-self:center;max-width:70%;padding:10px 14px;font-size:var(--mt-text-sm);color:var(--hazard);background:rgba(255,77,61,.05);border:1px dashed rgba(255,77,61,.4);border-radius:var(--radius)}
.side-panel{display:flex;flex-direction:column;gap:16px;position:sticky;top:80px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--edge);font-size:var(--mt-text-sm)}
.kv span:first-child{color:var(--faint);font-family:var(--ui);font-size:var(--mt-text-xs);letter-spacing:var(--mt-tracking-label);text-transform:uppercase;padding-top:2px}
.kv span:last-child{font-family:var(--mono);text-align:right}
details.brief{border:1px solid var(--edge);border-radius:var(--radius);background:var(--deck)}
details.brief summary{padding:10px 14px;cursor:pointer;font-family:var(--ui);font-size:var(--mt-text-xs);font-weight:700;letter-spacing:var(--mt-tracking-label);text-transform:uppercase;color:var(--dim)}
details.brief pre{margin:0;padding:12px 14px;border-top:1px solid var(--edge);font-family:var(--mono);font-size:var(--mt-text-xs);line-height:1.6;white-space:pre-wrap;color:var(--ink);max-height:420px;overflow:auto}
.verify{padding:16px}
.verify p{color:var(--dim);font-size:var(--mt-text-sm);margin-top:8px}
.verify .chain{font-family:var(--mono);font-size:11px;color:var(--faint);word-break:break-all;margin-top:8px}
.vote{display:flex;align-items:center;gap:8px}
.vote button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;background:var(--deck);border:1px solid var(--edge-hot);border-radius:var(--radius);color:var(--dim);font-family:var(--mono);font-size:var(--mt-text-sm);cursor:pointer}
.vote button.on.up{color:var(--good);border-color:var(--good)}
.vote button.on.down{color:var(--hazard);border-color:var(--hazard)}
.comments{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.comment{padding:12px 14px;border:1px solid var(--edge);border-radius:var(--radius);background:var(--deck)}
.comment .by{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:var(--mt-text-xs);color:var(--dim);margin-bottom:6px}
.comment .by b{color:var(--ink)}
.comment p{font-size:var(--mt-text-sm);white-space:pre-wrap}
textarea.c{width:100%;min-height:88px;padding:12px;background:var(--deck);border:1px solid var(--edge);border-radius:var(--radius);color:var(--ink);font:inherit;font-size:var(--mt-text-sm);resize:vertical}
textarea.c:focus{outline:none;border-color:var(--amber)}
.signin{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.note{font-size:var(--mt-text-xs);color:var(--faint)}
footer{padding:32px 0 56px;border-top:1px solid var(--edge);color:var(--faint);font-size:var(--mt-text-sm)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (max-width:900px){.runs{grid-template-columns:1fr}.tx{grid-template-columns:1fr}.side-panel{position:static}.msg{max-width:100%}nav ul{display:none}}
