/* Live debate: layout only. Colours come from fink.css tokens. */
main{max-width:1040px;margin:0 auto;padding:0 20px 40px}
[hidden]{display:none !important}
.pad{padding:14px 18px}
.row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:4px 0}
.opt{font:600 13px var(--sans);display:flex;align-items:center;gap:6px;cursor:pointer}
.opt small{font-weight:400;color:var(--ink-3)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:18px 0}
.hours{padding:10px 16px;font:400 13px var(--sans);color:var(--ink-2);display:flex;gap:18px;flex-wrap:wrap}
.hours b{color:var(--ink)}
/* the steps strip: what is happening and what comes next */
.steps{margin:0 0 12px}
.strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font:600 11.5px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.strip li{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 0}
.strip li+li::before{content:"";display:inline-block;width:18px;border-top:1px solid var(--rule);margin-right:8px}
.strip .n{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:50%;font-size:10px}
.strip .done{color:var(--ink-2)}.strip .done .n{background:var(--ink-2);color:var(--sheet);border-color:var(--ink-2)}
.strip .now{color:var(--ink)}.strip .now .n{background:var(--link);color:#fff;border-color:var(--link)}
.steps .next{margin:6px 0 0;font-size:13.5px}
.spin{display:inline-block;width:10px;height:10px;border:2px solid var(--rule);border-top-color:var(--link);border-radius:50%;animation:spin 1s linear infinite;vertical-align:-1px;margin-right:4px}
@keyframes spin{to{transform:rotate(360deg)}}
.actions.top{margin:0 0 14px}
.sides-row{align-items:center}
.sides-row.off{opacity:.5}
.sides-row .f-label{margin-right:4px}

/* the topic tree, most played first */
.tree{font:400 14.5px var(--serif)}
.tnode{margin:0}
.tnode.d1,.tnode.d2,.tnode.d3{margin-left:22px}
.trow{display:flex;align-items:center;gap:10px;padding:4px 0;cursor:pointer;list-style:none}
.trow::-webkit-details-marker{display:none}
details.tnode>.trow::before{content:"▸";font:400 12px var(--sans);color:var(--ink-3);width:10px}
details.tnode[open]>.trow::before{content:"▾"}
div.tnode>.trow::before{content:"";width:10px}
.tlabel{display:flex;align-items:center;gap:6px;cursor:pointer}
.tnode.d0>.trow .tlabel span{font-weight:700}
.tnode.d2 .tlabel span,.tnode.d3 .tlabel span{color:var(--ink-2)}
.cnt{font:600 10.5px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--link);background:var(--link-wash);padding:1px 6px}
.cnt.none{color:var(--ink-3);background:var(--sheet-2)}
.tkids{padding:0 0 4px}
.own{list-style:none;margin:2px 0 6px 32px;padding:0;border-left:2px solid var(--rule-2)}
.own .res{display:flex;justify-content:space-between;gap:12px;padding:2px 10px;font:400 13.5px var(--serif);color:var(--ink-2)}
.own .res small{white-space:nowrap;color:var(--ink-3)}
/* casual: the tree picks one resolution; ranked: branches */
.own .res{flex-wrap:wrap}
.own .res label{display:flex;align-items:baseline;gap:6px;cursor:pointer;flex:1 1 200px}
.own .res input{display:none}
.tree.pick-res .own .res input{display:inline}
.tree.pick-res .tlabel input{display:none}
.tree.pick-res .own .res:has(input:checked){background:var(--link-wash);color:var(--ink)}
.own .res .meta{display:flex;gap:8px;align-items:center;white-space:nowrap}
.waiting{margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid var(--rule-2)}
.waiting .f-label{display:block;margin-bottom:4px}
.waiting ul{list-style:none;margin:0;padding:0}
.waiting li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 0;font:400 14px var(--serif)}
.waiting li q{flex:1 1 240px}

/* judges as cards */
.judges{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.judge{border:1px solid var(--rule-2);background:var(--sheet);padding:8px 10px}
.judge .jhead{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.judge .jhead input{margin-top:6px}
.judge .jtext{min-width:0}
.judge b{font:700 15px var(--serif)}
.judge i{display:block;font:400 13px var(--serif);color:var(--ink-2)}
.judge.theirs{background:var(--sheet-2)}
.judge .mark{font:600 10.5px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.judge.locked{opacity:.55;background:var(--sheet-2)}
.judge.locked .jhead{cursor:default}
.lock{font-size:14px;line-height:1;margin-top:4px}
.soon{display:block;font:600 10.5px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-style:normal}
.portrait{width:48px;flex:none;margin:0}
.portrait img{width:48px;height:48px;object-fit:cover;object-position:50% 32%;border:1px solid var(--rule-2);filter:sepia(.25) contrast(1.05)}
.bot .portrait img{object-position:50% 20%}
.portrait.blank{display:inline-block;width:48px;height:48px;border:1px solid var(--rule-2);background:var(--sheet-2)}
.jmore{margin-top:6px;font:400 12.5px var(--sans)}
.jmore>summary{cursor:pointer;color:var(--link);list-style:none}
.jmore>summary::-webkit-details-marker{display:none}
.jmore>summary::after{content:" ▾"}
.jmore[open]>summary::after{content:" ▴"}
.jw{margin-top:6px}
.jw .w,.jcard .w{display:grid;grid-template-columns:104px 1fr 34px;align-items:center;gap:6px;font:400 12px var(--sans);color:var(--ink-2);margin:3px 0}
.jw .w span.bar,.jcard .w span.bar{height:6px;background:var(--rule-2);position:relative}
.jw .w span.bar i,.jcard .w span.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--link);margin:0}
.jw .w .n,.jcard .w .n{text-align:right;font-variant-numeric:tabular-nums}
.looks{margin:6px 0 4px;padding-left:16px;font:400 13px/1.4 var(--serif);color:var(--ink)}
.looks li{margin:2px 0}
.jprompt{margin-top:4px}
.jprompt summary{cursor:pointer;color:var(--link)}
.jprompt .prompt,.jcard .prompt{white-space:pre-wrap;font:400 13px/1.45 var(--serif);color:var(--ink-2);margin-top:6px;max-height:320px;overflow:auto;border-top:1px solid var(--rule-2);padding-top:6px}

/* the bots */
.bots{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.bot{display:flex;gap:12px;border:1px solid var(--rule-2);background:var(--sheet);padding:10px 12px}
.bot .portrait,.bot .portrait img,.bot .portrait.blank{width:64px;height:64px}
.bot .btext{min-width:0;flex:1}
.bot b{font:700 16px var(--serif)}
.bot p{margin:2px 0 6px;font:400 13.5px/1.4 var(--serif);color:var(--ink-2)}
.bot .rec{font:400 12.5px var(--sans);color:var(--ink-2)}
.bot .rec b{color:var(--ink)}
.bot .elo{font-weight:600}
.bot .by{list-style:none;margin:6px 0;padding:0;font:400 11.5px var(--sans);color:var(--ink-2)}
.bot .by li{display:grid;grid-template-columns:90px 1fr 64px;gap:6px;align-items:center;margin:2px 0}
.bot .by li i{display:block;height:5px;background:var(--pro);max-width:100%}
.bot .by li small{text-align:right;white-space:nowrap}
.bot .bact{margin-top:6px;display:flex;align-items:center;gap:8px}
.bot.locked{opacity:.55;background:var(--sheet-2)}
.resolution{font:700 26px/1.25 var(--serif);margin:6px 0 4px}
.sides{font:400 15px var(--serif);color:var(--ink-2)}
.pro{color:var(--pro)}.con{color:var(--con)}
.chosen{margin-top:14px;border-left:3px solid var(--link)}
.chosen .big{font:700 22px var(--serif)}
.topbar{display:grid;grid-template-columns:170px 1fr 170px;align-items:center;gap:14px;padding:10px 14px;position:sticky;top:0;z-index:2}
.clock{display:flex;flex-direction:column;align-items:center;padding:6px;border:1px solid var(--rule-2)}
.clock .who{font:600 11.5px var(--sans);text-transform:uppercase;letter-spacing:.06em}
.clock .t{font:700 30px var(--sans);font-variant-numeric:tabular-nums}
.clock.on{border-color:var(--ink);background:var(--sheet-2)}
.clock.low .t{color:var(--bad)}
.clock .tt{font:600 11.5px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2);min-height:1.4em}
.clock .tt.low{color:var(--bad)}
#clk-pro .who{color:var(--pro)}#clk-con .who{color:var(--con)}
.mid{text-align:center}
.res{font:700 18px/1.3 var(--serif)}
.proj{margin:6px 2px 0;min-height:18px}
.proj .bar{display:inline-block;width:160px;height:6px;background:var(--con-wash);vertical-align:middle;margin:0 8px;position:relative}
.proj .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--pro)}
.turns{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.turn{background:var(--sheet);border:1px solid var(--rule-2);padding:9px 12px;max-width:86%}
.turn.pro{align-self:flex-start;border-left:3px solid var(--pro);color:var(--ink)}
.turn.con{align-self:flex-end;border-right:3px solid var(--con);color:var(--ink)}
.turn .meta{font:400 11.5px var(--sans);color:var(--ink-3);display:flex;gap:10px;flex-wrap:wrap;margin-top:5px;align-items:center}
.turn .body{white-space:pre-wrap;font:400 16px/1.45 var(--serif)}
.turn.hidden .body{color:var(--ink-3);font-style:italic}
.turn.decisive{outline:2px solid var(--gold)}
.turn .chal{font:600 10.5px var(--sans);text-transform:uppercase;letter-spacing:.05em;background:none;border:1px solid var(--rule);padding:1px 6px;cursor:pointer;color:var(--ink-2)}
.chip-s{font:600 10.5px var(--sans);padding:1px 6px;background:var(--sheet-2);border:1px solid var(--rule-2)}
.chip-s.flag{background:var(--warn-wash);border-color:var(--warn)}
.chip-s.xp{background:var(--good-wash);border-color:var(--good);color:var(--good)}
.chip-s.wait{color:var(--ink-3);border-style:dashed}
button.chip-s.tier{cursor:pointer;background:var(--sheet);border-color:var(--link);color:var(--link)}
button.chip-s.tier:hover{background:var(--link-wash)}
.turn.carded{box-shadow:0 0 0 2px var(--link-wash)}

/* the scanner's card for one turn: checks, their questions, the gates, the XP */
.tcard{padding:8px 10px;font:400 13px var(--sans)}
.tcard .thead{display:flex;justify-content:space-between;align-items:baseline;font:400 14px var(--serif);margin-bottom:4px}
.tcard details{border-top:1px solid var(--rule-2);padding:4px 0}
.tcard summary{cursor:pointer;list-style:none}
.tcard summary::-webkit-details-marker{display:none}
.tcard .chk summary{display:grid;grid-template-columns:20px minmax(0,1fr) 26px 64px 34px;align-items:center;gap:6px}
.tcard .chk b{font:700 14px var(--serif)}
.tcard .tt{font:700 11px var(--sans);color:var(--ink-3)}
.tcard .chk.reached .tt{color:var(--link)}
.tcard .yn{font:600 11px var(--sans)}
.tcard .chk.pass .yn{color:var(--good)}
.tcard .chk.fail .yn{color:var(--bad)}
.tcard span.bar{display:block;height:6px;background:var(--rule-2);position:relative}
.tcard span.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--link)}
.tcard .n{text-align:right;font:400 12px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tcard .gloss{margin:3px 0 6px 26px;font:400 13px/1.4 var(--serif);color:var(--ink-2)}
.tcard .q{margin:6px 0 8px 26px;padding-left:8px;border-left:2px solid var(--rule-2)}
.tcard .qd{display:grid;grid-template-columns:90px 34px;gap:6px;align-items:center}
.tcard .w{font:400 13px/1.35 var(--serif);margin:3px 0}
.tcard .w em{font:600 11px var(--sans);font-style:normal;white-space:nowrap}
.tcard .w em.y{color:var(--good)}
.tcard .w em.n{color:var(--ink-3)}
.tcard .gates{border-top:1px solid var(--rule-2);margin-top:4px;padding-top:6px}
.tcard .gate{border:0;padding:2px 0}
.tcard .gate summary{display:flex;justify-content:space-between;font:400 13px var(--serif)}
.tcard .gate .w{margin-left:12px}
.tcard .sum{margin:8px 0 4px;font:400 14px var(--serif)}
.tcard-inline{margin-top:8px}
.tclose{padding:0 8px;margin-left:auto}
#tcard-hint{margin:4px 0 10px}
.composer{margin-top:12px;padding:10px}
.composer textarea{width:100%;box-sizing:border-box;border:1px solid var(--rule);font:400 16px/1.45 var(--serif);padding:8px;resize:vertical;background:var(--sheet)}
.composer.off{opacity:.55}
.crow{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:6px}
.crow #count{margin-right:auto}
.crow .over{color:var(--bad)}
.ctrl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.ctrl .xp{margin-left:auto;color:var(--good);font-weight:600}
.danger{color:var(--bad)}
.unans{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px;font:400 13px var(--serif)}
.unans ul{margin:4px 0 0;padding-left:16px}
.unans li{margin:2px 0}
.unans code{font:600 10.5px var(--sans);color:var(--ink-3)}
.verdict h2{font:700 30px var(--serif);margin:0 0 4px}
.verdict .conf{font:400 13px var(--sans);color:var(--ink-2)}
.verdict .headline{font:italic 400 22px/1.35 var(--serif);margin:6px 0 10px;color:var(--ink)}
.verdict .reason{font:400 17px/1.55 var(--serif);margin:8px 0}
.verdict details.reasoning{margin:14px 0}      /* the block, not the Reasoning bar or its key */
.verdict details.reasoning summary{cursor:pointer}
.verdict table{width:100%}
.verdict .clip-share{margin:18px 0 6px;padding-top:12px;border-top:1px solid var(--rule)}
.verdict .clip-share label{display:block;margin-top:6px}
.verdict .fb{background:var(--sheet-2);padding:10px 12px;border-left:3px solid var(--link);margin:12px 0}
.verdict ul{padding-left:18px}
.weighed{margin:12px 0 6px}
.wrow{display:grid;grid-template-columns:90px 1fr 44px;gap:10px;align-items:center;margin:4px 0}
.wrow .side{font:600 11.5px var(--sans);text-transform:uppercase;letter-spacing:.06em}
.wrow.pro .side{color:var(--pro)}.wrow.con .side{color:var(--con)}
.wrow b{font:700 16px var(--sans);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.wrow b small{font:400 11px var(--sans);color:var(--ink-3)}
.xp-line{margin-top:6px}
/* "how?": to the plain page on how a debate is judged (static/how-judging.html). */
.how-q{font:italic 400 13px var(--serif);color:var(--ink-2);margin-left:4px;text-transform:none;letter-spacing:0}
/* The tally's questions behind a mark (docs/VERDICT-TALLY.md): hover a category, or tap it. */
.verdict .cat{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--link);cursor:pointer;text-align:left}
.verdict .cat:hover{background:none;color:var(--ink);text-decoration:underline}
.verdict tr.qrow td{background:var(--sheet-2);padding:10px 12px}
.qsides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.qside .f-label{display:block;margin-bottom:4px}
.qcard .q{margin:0 0 8px}
.qcard .qd{display:flex;gap:6px;align-items:center}
.qcard .q{padding-left:8px;border-left:2px solid var(--rule-2)}
.qcard span.bar{display:inline-block;width:70px;height:6px;background:var(--rule-2);position:relative;flex:none}
.qcard span.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--link)}
.qcard .n{font:400 12px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2);flex:none}
.qcard .w em{font:600 11px var(--sans);font-style:normal;white-space:nowrap}
.qcard .w em.y{color:var(--good)}
.qcard .w em.n{color:var(--ink-3)}
.qcard .about{font:600 12.5px/1.35 var(--sans);color:var(--ink-2)}
.qcard .second{margin-left:auto;flex:none;font:400 11px var(--sans);color:var(--ink-3);white-space:nowrap}
.qcard .second.differs{color:var(--bad)}
.qcard .w{font:400 13.5px/1.4 var(--serif);margin:2px 0 0 4px}
.qboth{margin-top:10px;border-top:1px solid var(--rule-2);padding-top:8px}
.verdict .contested{border-left:3px solid var(--gold);background:var(--sheet-2);padding:8px 12px;margin:10px 0}
.verdict .contested .obj{font:italic 400 16px/1.45 var(--serif)}
@media (max-width:760px){ .qsides{grid-template-columns:1fr} }
.wbar{display:flex;height:16px;background:var(--sheet-2);border:1px solid var(--rule-2)}
.wbar i,.key{display:block;height:100%}
.wbar .clash,.key.clash{background:var(--ink)}
.wbar .reasoning,.key.reasoning{background:var(--link)}
.wbar .rhetoric,.key.rhetoric{background:var(--gold)}
.wbar .responsiveness,.key.responsiveness{background:var(--ink-3)}
.key{display:inline-block;width:10px;height:10px;vertical-align:-1px;margin-right:3px}
.scores th{text-align:left;font:600 13px var(--sans);vertical-align:top;padding:8px 8px 8px 0}
.scores th small{display:block;font-weight:400;color:var(--ink-3)}
.scores thead th{text-transform:uppercase;letter-spacing:.06em;font-size:11.5px}
.scores td{vertical-align:top;padding:8px 8px 8px 0;font:400 13.5px/1.4 var(--serif);color:var(--ink-2)}
.scores td b{display:block;font:700 20px var(--sans);color:var(--ink)}
.scores td.pro b{color:var(--pro)}.scores td.con b{color:var(--con)}
.progress{list-style:none;margin:12px 0 4px;padding:0;font:400 15px var(--serif)}
.progress li{padding:5px 0 5px 26px;position:relative;color:var(--ink-3)}
.progress li::before{content:"";position:absolute;left:4px;top:11px;width:10px;height:10px;border:1px solid var(--rule);border-radius:50%}
.progress li.now{color:var(--ink)}
.progress li.now::before{border-color:var(--link);border-top-color:transparent;animation:spin 1s linear infinite}
.progress li.done{color:var(--ink-2)}
.progress li.done::before{background:var(--good);border-color:var(--good)}
.progress li.failed::before{background:var(--bad);border-color:var(--bad)}
.after{margin-top:8px}
.chat{padding:10px 12px}
.chat-log{list-style:none;margin:0 0 8px;padding:0;max-height:220px;overflow:auto;font:400 14.5px/1.4 var(--serif)}
.chat-log .line{padding:2px 0}
.chat-log .line b{font:600 12px var(--sans);margin-right:6px}
.chat-log .line.pro b{color:var(--pro)}.chat-log .line.con b{color:var(--con)}
.chat-log .line.gg{color:var(--good);font:600 13px var(--sans)}
.chat-log .line.mind{color:var(--ink-2);font:600 13px var(--sans)}
.mind-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px}
.mind-row .yn{display:inline-flex;gap:6px}
.mind-row .f-btn[aria-pressed="true"]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.line-rule{list-style:none;border-top:2px dotted var(--ink-3);margin:6px 0 2px;text-align:center;line-height:0}
.line-rule span{display:inline-block;padding:0 8px;background:var(--paper);font:600 11px/1.6 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);transform:translateY(-1px)}
.line-rule.crossed{border-top-color:var(--good)}
.line-rule.crossed span{color:var(--good)}
.chat-form{display:flex;gap:6px}
.chat-form input{flex:1;min-width:0}
.turn .why{margin-top:4px;font-style:italic}
.jcard .jrow{display:flex;gap:10px;align-items:center;margin-bottom:6px}

/* --- the match: Sources | debate | Judge ------------------------------------ */
main.wide{max-width:1500px}
.arena{display:grid;grid-template-columns:300px minmax(0,1fr) 280px;gap:18px;margin-top:10px;align-items:start}
.margin{position:sticky;top:96px;max-height:calc(100vh - 110px);overflow:auto;padding-right:2px}
.margin .close,.drawer-btns{display:none}
.margin .f-head{margin-top:6px}
.wiki-form{display:flex;gap:6px}
.wiki-form input{flex:1;min-width:0;border:1px solid var(--rule);padding:6px 8px;font:400 14px var(--sans);background:var(--sheet)}
.wiki-results{margin-top:8px}
.wiki-results button{display:block;width:100%;text-align:left;background:var(--sheet);border:1px solid var(--rule-2);border-top:0;padding:7px 9px;cursor:pointer;font:400 13px/1.35 var(--serif);color:var(--ink-2)}
.wiki-results button:first-child{border-top:1px solid var(--rule-2)}
.wiki-results button b{display:block;font:700 14px var(--serif);color:var(--ink)}
.wiki-article{margin-top:8px;background:var(--sheet);border:1px solid var(--rule-2)}
.wiki-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--rule-2);position:sticky;top:0;background:var(--sheet)}
.wiki-bar b{flex:1;font:700 15px var(--serif);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiki-bar .f-btn{padding:2px 8px}
.wiki-body{padding:4px 12px 8px;font:400 14.5px/1.5 var(--serif)}
.wiki-body p{margin:0 0 9px}
.wiki-body h4{font:700 15px var(--serif);margin:14px 0 4px}
.wiki-body h5{font:700 14px var(--serif);margin:10px 0 4px;color:var(--ink-2)}
.wiki-body ::selection{background:var(--link-wash)}
.wiki-article > .f-meta{padding:0 12px 8px;margin:0}
.wiki-sel{margin:8px;padding:8px 10px;background:var(--link-wash);border-left:3px solid var(--link);font:400 13px/1.4 var(--serif)}
.wiki-sel .f-label{display:block;margin-bottom:3px}
.wiki-sel button{margin-top:4px}
.wiki-hint{margin-top:10px}
a.wcite{color:var(--link);text-decoration:underline dotted;cursor:pointer}

.jcard{padding:10px 12px}
.jcard .jname{font:700 19px var(--serif)}
.jcard i{display:block;font:400 14px var(--serif);color:var(--ink-2)}
.jcard details{margin-top:8px;font:400 12.5px var(--sans)}
.jcard details summary{cursor:pointer;color:var(--link)}

.howto{padding:10px 12px;font:400 14px/1.45 var(--serif)}
.howto p{margin:0 0 6px}
.howto p:last-child{margin:0}
.flags{margin-left:auto;font:400 17px var(--sans);letter-spacing:3px}
.f-head .flags{float:right}
.flag-on{color:var(--warn)}
.flag-red{color:var(--bad)}
#flags .gap{display:inline-block;width:10px}
.flag-used{color:var(--rule)}

/* the flags on a turn: yellow (a claim is false: the judge rules) and red
   (they cheated: the moderator decides); the buttons, then the marks */
.turn .chal,.turn .rep{font:400 19px var(--sans);background:none;border:0;padding:0 4px;cursor:pointer;line-height:1;opacity:.8}
.turn .chal{color:var(--warn)}
.turn .rep{color:var(--bad)}
.turn .chal:hover,.turn .rep:hover{opacity:1}
/* A star on your own message, for your profile (2026-09-26). */
.turn .star{font:400 19px var(--sans);background:none;border:0;padding:0 4px;cursor:pointer;line-height:1;color:var(--ink-3);opacity:.8}
.turn .star.on{color:var(--gold);opacity:1}
.turn .star:hover{opacity:1;color:var(--gold)}
.yflag{color:var(--warn)}
.rflag{color:var(--bad)}
.flagchip.red{border-color:var(--bad);background:var(--bad-wash);color:var(--bad)}
.repnote{margin-top:4px;color:var(--bad)}
.flagchip{font:600 10.5px var(--sans);padding:1px 7px;border:1px solid var(--warn);background:var(--warn-wash);color:var(--warn);cursor:help}
.flagchip.up{border-color:var(--good);background:var(--good-wash);color:var(--good)}
.flagchip.down{border-color:var(--rule);background:var(--sheet-2);color:var(--ink-3)}
.chal-form{margin-top:8px;padding:8px;background:var(--sheet-2);border:1px solid var(--rule-2);display:flex;flex-direction:column;gap:6px}
.chal-form input[type=text]{border:1px solid var(--rule);padding:6px 8px;font:400 14px var(--serif);background:var(--sheet)}
.chal-form label{font:400 13px/1.35 var(--serif);color:var(--ink-2)}
.chal-form .row{display:flex;gap:8px;align-items:center;margin:0}
.chal-form .err{color:var(--bad)}

@media (max-width:1180px){
  .arena{grid-template-columns:minmax(0,1fr)}
  .drawer-btns{display:flex;gap:8px;margin-top:8px}
  .margin{display:none;position:fixed;top:0;bottom:0;width:min(380px,92vw);max-height:none;z-index:10;background:var(--paper);padding:12px 14px;border:1px solid var(--rule)}
  #wiki{left:0}#judgep{right:0}
  .margin.open{display:block}
  .margin .close{display:inline-block;float:right}
}
@media (max-width:760px){.topbar{grid-template-columns:1fr 1fr}.topbar .mid{grid-column:1/-1;order:-1}.turn{max-width:100%}}