:root{
  --bg:#f6f7f9; --panel:#fff; --sunk:#fafbfc; --ink:#15181d; --muted:#6b7280;
  --line:#e3e6ea; --accent:#1f6feb; --ok:#0f7b3e; --okbg:#e6f4ec;
  --bad:#b42318; --badbg:#fdeceb; --hover:#eef2f7;
  --key:#7c3aed; --str:#0f7b3e; --num:#b45309; --bool:#1f6feb; --null:#9ca3af;
  --t-msg:#1f6feb; --t-msg-bg:#e8f0fe;
  --t-commish:#b45309; --t-commish-bg:#fdf3e3;
  --t-news:#7c3aed; --t-news-bg:#f2ecfd;
  --t-other:#6b7280; --t-other-bg:#eef0f3;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1216; --panel:#161a20; --sunk:#12161b; --ink:#e6e9ee; --muted:#9aa3ae;
  --line:#272d36; --accent:#6ea8ff; --ok:#4ade80; --okbg:#12281c;
  --bad:#f87171; --badbg:#2a1516; --hover:#1d232b;
  --key:#c4a7fc; --str:#7ee2a8; --num:#fbbf24; --bool:#7cc0ff; --null:#6b7280;
  --t-msg:#7cc0ff; --t-msg-bg:#12233a;
  --t-commish:#fbbf24; --t-commish-bg:#33270f;
  --t-news:#c4a7fc; --t-news-bg:#241a3a;
  --t-other:#9aa3ae; --t-other-bg:#1f242c;
}}
:root[data-theme="dark"]{
  --bg:#0f1216; --panel:#161a20; --sunk:#12161b; --ink:#e6e9ee; --muted:#9aa3ae;
  --line:#272d36; --accent:#6ea8ff; --ok:#4ade80; --okbg:#12281c;
  --bad:#f87171; --badbg:#2a1516; --hover:#1d232b;
  --key:#c4a7fc; --str:#7ee2a8; --num:#fbbf24; --bool:#7cc0ff; --null:#6b7280;
  --t-msg:#7cc0ff; --t-msg-bg:#12233a;
  --t-commish:#fbbf24; --t-commish-bg:#33270f;
  --t-news:#c4a7fc; --t-news-bg:#241a3a;
  --t-other:#9aa3ae; --t-other-bg:#1f242c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
code,pre,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.wrap{display:grid;grid-template-columns:264px 1fr;height:100vh}
aside{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:14px}
main{overflow-y:auto;padding:18px 22px}
h1{font-size:15px;margin:0 0 2px;letter-spacing:-.01em}
.sub{color:var(--muted);font-size:12px;margin-bottom:14px}
.grp{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  margin:16px 0 6px;font-weight:600}
button.route{display:block;width:100%;text-align:left;background:none;border:0;
  color:var(--ink);padding:5px 8px;border-radius:6px;cursor:pointer;font-size:13px}
button.route:hover{background:var(--hover)}
button.route.on{background:var(--accent);color:#fff}
input,select{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:5px 8px;font-size:13px}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
#filter{width:100%;margin-bottom:4px}
.bar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:16px}
.f{display:flex;flex-direction:column;gap:3px}
.f label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.f input{width:104px}
.f input.wide{width:260px}
.go{background:var(--accent);color:#fff;border:0;border-radius:6px;padding:7px 16px;
  cursor:pointer;font-size:13px;font-weight:600}
.themer{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.themer button{background:var(--panel);color:var(--muted);border:0;padding:6px 10px;
  cursor:pointer;font-size:12px}
.themer button.on{background:var(--accent);color:#fff}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin-bottom:14px}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600}
.pill.ok{background:var(--okbg);color:var(--ok)}
.pill.bad{background:var(--badbg);color:var(--bad)}
.url{word-break:break-all;color:var(--muted);font-size:12px;margin-top:9px}
.url b{color:var(--ink);font-weight:600}
.meta{color:var(--muted);font-size:12px;margin-left:10px}
.tabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.tab{background:none;border:1px solid var(--line);color:var(--muted);padding:4px 12px;
  border-radius:6px;cursor:pointer;font-size:12px}
.tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
pre{margin:0;white-space:pre-wrap;word-break:break-word;font-size:12.5px}
.tree{font-size:12.5px}
.node{padding-left:15px;border-left:1px dotted var(--line)}
.row{white-space:pre-wrap;word-break:break-word}
.tog{cursor:pointer;user-select:none;color:var(--muted);display:inline-block;
  width:13px;text-align:center}
.tog:hover{color:var(--accent)}
.k{color:var(--key)} .s{color:var(--str)} .n{color:var(--num)}
.b{color:var(--bool)} .z{color:var(--null)} .c{color:var(--muted)}
/* !important: .hide is a utility and must beat any component rule that sets
   display, whatever the source order (.replies{display:flex} used to win). */
.hide{display:none !important}
.empty{color:var(--muted);padding:40px 0;text-align:center}

/* ======================================================================
   Formatted-view component system.

   Every view is assembled from these pieces rather than from ad-hoc markup,
   so a component can be lifted out one-for-one when the same information has
   to be rendered for Telegram. Components, roughly in order of weight:

     .panel        a titled card - the unit a Telegram message maps to
     .listrow      avatar + title + meta + trailing value; the workhorse
     .statrow      a row of big-number tiles
     .deflist      label/value pairs for settings and metadata
     .acc          native <details> accordion
     .split        two columns for a head-to-head comparison
     .grid         a real table, for when the data genuinely is tabular
     .segbar       a row of filter buttons
     .badge        small status pill
   ====================================================================== */

/* --- panel: a titled card --- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  margin-bottom:14px;overflow:hidden}
.panel.flush{background:none;border:0;border-radius:0;overflow:visible}
.panel-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:11px 15px;border-bottom:1px solid var(--line);background:var(--sunk)}
.panel.flush>.panel-hd{background:none;border-bottom:0;padding:0 0 8px}
.panel-hd h3{margin:0;font-size:13px;font-weight:700;letter-spacing:-.01em}
.panel-hd .hint{color:var(--muted);font-size:12px;margin-left:auto}
.panel-bd{padding:13px 15px}
.panel-bd.tight{padding:0}
.panel-bd.tight>.grid,.panel-bd.tight>.scroll>.grid{border:0}

/* --- section heading inside a body --- */
.sec{margin-bottom:18px}
.sec:last-child{margin-bottom:0}
.sec>h4{margin:0 0 8px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700}

/* --- listrow: avatar, title block, trailing value --- */
.list{display:flex;flex-direction:column}
.listrow{display:flex;align-items:center;gap:11px;padding:9px 15px;
  border-bottom:1px solid var(--line)}
.listrow:last-child{border-bottom:0}
.listrow:hover{background:var(--hover)}
.listrow .lead{flex:0 0 auto;width:30px;text-align:right;color:var(--muted);
  font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.listrow .av{flex:0 0 auto;width:32px;height:32px;border-radius:7px;object-fit:cover;
  background:var(--sunk);border:1px solid var(--line)}
.listrow .av.sm{width:24px;height:24px;border-radius:5px}
.listrow .body{flex:1 1 auto;min-width:0}
.listrow .t{font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.listrow .m{color:var(--muted);font-size:12px;margin-top:1px}
.listrow .val{flex:0 0 auto;text-align:right;font-weight:700;font-size:15px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;min-width:44px}
.listrow .val small{display:block;font-weight:500;font-size:11px;color:var(--muted);
  font-family:inherit}

/* --- statrow: big numbers --- */
.statrow{display:flex;gap:10px;flex-wrap:wrap}
.stat{flex:1 1 110px;background:var(--sunk);border:1px solid var(--line);
  border-radius:9px;padding:10px 12px}
.stat .n{font-size:22px;font-weight:700;line-height:1.15;letter-spacing:-.02em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.stat .l{color:var(--muted);font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;font-weight:600;margin-top:3px}
.stat.hi .n{color:var(--accent)}

/* --- deflist: label / value pairs --- */
.deflist{display:grid;grid-template-columns:max-content 1fr;gap:0;font-size:13px}
.deflist>dt{color:var(--muted);padding:6px 16px 6px 0;border-bottom:1px solid var(--line)}
.deflist>dd{margin:0;padding:6px 0;border-bottom:1px solid var(--line)}
.deflist>dt:last-of-type,.deflist>dd:last-of-type{border-bottom:0}
.deflist dd .why{color:var(--muted);font-size:12px;margin-top:2px}

/* --- accordion --- */
.acc{border:1px solid var(--line);border-radius:10px;margin-bottom:9px;
  background:var(--panel);overflow:hidden}
.acc>summary{list-style:none;cursor:pointer;padding:11px 14px;
  display:flex;align-items:center;gap:11px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:hover{background:var(--hover)}
.acc>summary .caret{color:var(--muted);transition:transform .15s;flex:0 0 auto}
.acc[open]>summary .caret{transform:rotate(90deg)}
.acc[open]>summary{border-bottom:1px solid var(--line);background:var(--sunk)}
.acc .accbd{padding:12px 14px}

/* --- split: head-to-head --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0}
.split>div{min-width:0}
.split>div+div{border-left:1px solid var(--line)}
.split .col-hd{display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:var(--sunk);border-bottom:1px solid var(--line);font-weight:700;
  font-size:12.5px}
.split .col-hd .av{width:22px;height:22px;border-radius:5px;object-fit:cover}
.split .col-hd .pts{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,
  Consolas,monospace;font-size:15px}
@media (max-width:820px){.split{grid-template-columns:1fr}
  .split>div+div{border-left:0;border-top:1px solid var(--line)}}

/* --- scoreline: the big matchup header --- */
.scoreline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:14px;padding:14px 16px;background:var(--sunk);
  border-bottom:1px solid var(--line)}
.scoreline .s{display:flex;align-items:center;gap:11px;min-width:0}
.scoreline .s.a{flex-direction:row-reverse;text-align:right}
.scoreline .s .av{width:36px;height:36px;border-radius:8px;object-fit:cover;
  background:var(--panel);border:1px solid var(--line);flex:0 0 auto}
.scoreline .s .nm{font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.scoreline .s .p{font-size:26px;font-weight:700;letter-spacing:-.02em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;flex:0 0 auto}
.scoreline .s .p.lead{color:var(--accent)}
.scoreline .x{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em}

/* --- table, for genuinely tabular data --- */
table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:7px 12px;border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--sunk)}
table.grid td{padding:7px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.grid tr:last-child td{border-bottom:0}
table.grid tbody tr:hover{background:var(--hover)}
table.grid td.num,table.grid th.num{text-align:right;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
table.grid td.nowrap{white-space:nowrap}
.scroll{overflow-x:auto}

/* --- segmented filter bar --- */
.segbar{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.seg{background:var(--panel);border:1px solid var(--line);color:var(--muted);
  padding:5px 13px;border-radius:7px;cursor:pointer;font-size:12.5px;font-weight:600}
.seg:hover{background:var(--hover);color:var(--ink)}
.seg.on{background:var(--accent);border-color:var(--accent);color:#fff}
.seg .c{opacity:.72;font-weight:500;margin-left:4px}

/* --- badges --- */
.badge{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;
  font-weight:700;background:var(--t-other-bg);color:var(--t-other);white-space:nowrap;
  letter-spacing:.01em}
.badge.good{background:var(--okbg);color:var(--ok)}
.badge.bad{background:var(--badbg);color:var(--bad)}
.badge.info{background:var(--t-msg-bg);color:var(--t-msg)}
.badge.warn{background:var(--t-commish-bg);color:var(--t-commish)}
.badge.news{background:var(--t-news-bg);color:var(--t-news)}
/* kept: older views still reference .chip */
.chip{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;
  font-weight:600;background:var(--t-other-bg);color:var(--t-other);white-space:nowrap}
.chip.good{background:var(--okbg);color:var(--ok)}
.chip.warn{background:var(--badbg);color:var(--bad)}
.chip.info{background:var(--t-msg-bg);color:var(--t-msg)}

/* --- misc --- */
.tlogo{width:22px;height:22px;border-radius:5px;object-fit:cover;
  background:var(--sunk);flex:0 0 auto}
.tcell{display:flex;align-items:center;gap:8px;min-width:0}
.tcell .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* everything in a tcell shares one line box, so the team abbr does not
   ride above the name next to the taller position tag */
.tcell>*{line-height:1.4;align-self:center}
.sub{color:var(--muted);font-size:12px}
.mutedrow td{color:var(--muted)}
.note{background:var(--t-commish-bg);color:var(--t-commish);border-radius:8px;
  padding:9px 12px;font-size:12.5px;margin-bottom:12px}
.note code{background:rgba(127,127,127,.16);padding:1px 4px;border-radius:3px}
.spinner{color:var(--muted);font-size:12.5px;padding:10px 0}

/* --- position tags -------------------------------------------------------
   Colour-coded the way Sleeper does it. I could not find an authoritative
   published source for Sleeper's exact hex values, so these are matched by
   eye; they live here as one block precisely so they are trivial to correct.
   CBS calls the kicker slot TK and team defence DST - both are mapped. */
:root{
  --pos-qb:#ff2a6d;  --pos-qb-bg:rgba(255,42,109,.14);
  --pos-rb:#00ceb8;  --pos-rb-bg:rgba(0,206,184,.14);
  --pos-wr:#58a7ff;  --pos-wr-bg:rgba(88,167,255,.15);
  --pos-te:#ffae58;  --pos-te-bg:rgba(255,174,88,.15);
  --pos-k:#bd66ff;   --pos-k-bg:rgba(189,102,255,.15);
  --pos-def:#8f9bb3; --pos-def-bg:rgba(143,155,179,.16);
  --pos-fx:#f4a4c0;  --pos-fx-bg:rgba(244,164,192,.15);
}
.pos{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;padding:2px 7px;border-radius:5px;font-size:10.5px;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--pos-def-bg);color:var(--pos-def);flex:0 0 auto;
  border:1px solid transparent}
.pos[data-pos="QB"] {background:var(--pos-qb-bg); color:var(--pos-qb)}
.pos[data-pos="RB"] {background:var(--pos-rb-bg); color:var(--pos-rb)}
.pos[data-pos="WR"] {background:var(--pos-wr-bg); color:var(--pos-wr)}
.pos[data-pos="TE"] {background:var(--pos-te-bg); color:var(--pos-te)}
.pos[data-pos="K"]  {background:var(--pos-k-bg);  color:var(--pos-k)}
.pos[data-pos="TK"] {background:var(--pos-k-bg);  color:var(--pos-k)}
.pos[data-pos="DST"]{background:var(--pos-def-bg);color:var(--pos-def)}
.pos[data-pos="DEF"]{background:var(--pos-def-bg);color:var(--pos-def)}
.pos[data-pos="FLEX"],.pos[data-pos="RB/WR"],.pos[data-pos="W/R"]
  {background:var(--pos-fx-bg);color:var(--pos-fx)}
.pos.solid{color:#0c0f13}
.pos.solid[data-pos="QB"]{background:var(--pos-qb)}
.pos.solid[data-pos="RB"]{background:var(--pos-rb)}
.pos.solid[data-pos="WR"]{background:var(--pos-wr)}
.pos.solid[data-pos="TE"]{background:var(--pos-te)}
.pos.solid[data-pos="K"],.pos.solid[data-pos="TK"]{background:var(--pos-k)}
.pos.solid[data-pos="DST"],.pos.solid[data-pos="DEF"]{background:var(--pos-def)}

/* --- player row: headshot, name, position tag, ownership ----------------- */
.pl{display:flex;align-items:center;gap:11px;padding:9px 15px;
  border-bottom:1px solid var(--line)}
.pl:last-child{border-bottom:0}
.pl:hover{background:var(--hover)}
.pl .rk{flex:0 0 auto;width:26px;text-align:right;color:var(--muted);
  font-size:12.5px;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pl .shot{flex:0 0 auto;width:40px;height:40px;border-radius:50%;object-fit:cover;
  object-position:top center;background:var(--sunk);border:1px solid var(--line)}
.pl .who{flex:1 1 auto;min-width:0}
.pl .nm{font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pl .ln2{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:2px;
  color:var(--muted);font-size:12px}
.pl .ln3{color:var(--muted);font-size:12px;margin-top:2px}
.pl .rt{flex:0 0 auto;text-align:right}
.pl .rt .big{font-size:15px;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pl .rt .lil{color:var(--muted);font-size:11px}

/* ownership pill: team logo + name, or FA */
.own{display:inline-flex;align-items:center;gap:5px;padding:1px 8px 1px 2px;
  border-radius:99px;background:var(--sunk);border:1px solid var(--line);
  font-size:11px;font-weight:600;max-width:190px}
.own img{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.own .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.own.fa{background:var(--okbg);color:var(--ok);border-color:transparent;
  padding-left:8px}
.own.unk{color:var(--muted);padding-left:8px}

/* news/update entry */
.upd{padding:11px 15px;border-bottom:1px solid var(--line)}
.upd:last-child{border-bottom:0}
.upd:hover{background:var(--hover)}
.upd .hl{font-weight:600;margin-bottom:3px}
.upd .bodytext{color:var(--ink);opacity:.86;font-size:13px}
.upd .when{color:var(--muted);font-size:11.5px;white-space:nowrap}

/* standings */
.stand .rk{width:26px}
.stand .wl{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700}
.bar{height:5px;border-radius:99px;background:var(--sunk);overflow:hidden;
  margin-top:5px;max-width:220px}
.bar>i{display:block;height:100%;background:var(--accent)}

/* --- prow: owner block | pro-team logo | headshot | who | detail ---------
   Layout the injury and update lists use. The leftmost slot answers "whose
   player is this" before you read the name, which is the thing that decides
   whether the news matters to you. */
.prow{display:flex;align-items:center;gap:12px;padding:11px 15px;
  border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow:hover{background:var(--hover)}

.owncol{flex:0 0 auto;width:96px;display:flex;flex-direction:column;
  align-items:center;gap:4px;text-align:center}
.owncol img{width:34px;height:34px;border-radius:8px;object-fit:cover;
  background:var(--sunk);border:1px solid var(--line)}
.owncol .tn{font-size:10.5px;font-weight:700;line-height:1.2;color:var(--muted);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.owncol.free{justify-content:center}
.owncol .fatag{display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:74px;height:44px;border-radius:8px;
  background:var(--okbg);color:var(--ok);font-size:11px;font-weight:800;
  letter-spacing:.06em;line-height:1.25}
.owncol .unktag{display:flex;align-items:center;justify-content:center;
  width:74px;height:44px;border-radius:8px;background:var(--sunk);
  border:1px dashed var(--line);color:var(--muted);font-size:10.5px;
  font-weight:700;text-align:center;padding:0 4px}

/* inline marks for table rows: NFL badge then round headshot */
.nfl{width:22px;height:22px;border-radius:5px;object-fit:contain;flex:0 0 auto;
  background:var(--sunk);border:1px solid var(--line);padding:2px}
.face{width:26px;height:26px;border-radius:50%;object-fit:cover;
  object-position:top center;flex:0 0 auto;background:var(--sunk);
  border:1px solid var(--line)}
.prologo{flex:0 0 auto;width:40px;height:40px;border-radius:8px;object-fit:contain;
  background:var(--sunk);border:1px solid var(--line);padding:3px}
.prow .shot{flex:0 0 auto;width:40px;height:40px;border-radius:50%;object-fit:cover;
  object-position:top center;background:var(--sunk);border:1px solid var(--line)}
.prow .who{flex:1 1 220px;min-width:0}
.prow .who .nm{font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.prow .who .ln2{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:3px;color:var(--muted);font-size:12px}
.prow .detail{flex:1 1 300px;min-width:0;font-size:12.5px;color:var(--ink);
  opacity:.86;border-left:1px solid var(--line);padding-left:13px}
.prow .detail .hl{font-weight:600;opacity:1;margin-bottom:2px}
.prow .detail .dim{color:var(--muted)}
.prow .when{flex:0 0 auto;color:var(--muted);font-size:11.5px;white-space:nowrap;
  align-self:flex-start;padding-top:2px}
@media (max-width:1000px){
  .prow{flex-wrap:wrap}
  .prow .detail{flex-basis:100%;border-left:0;padding-left:0;margin-top:6px}
}

/* ---- feed view ---- */
.feedhead{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;
  color:var(--muted);font-size:12px;margin-bottom:14px}
.feedhead b{color:var(--ink)}
.post{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin-bottom:12px;position:relative}
.post.mine{border-color:var(--accent)}
.post.pin{box-shadow:inset 3px 0 0 var(--num)}
.phead{display:flex;gap:11px;align-items:flex-start}
.avatar{width:38px;height:38px;border-radius:8px;object-fit:cover;flex:none;
  background:var(--sunk);border:1px solid var(--line)}
.avatar.ph{display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--muted);font-size:15px}
.pmain{min-width:0;flex:1}
.subject{font-weight:650;font-size:15px;letter-spacing:-.01em;margin-bottom:2px}
.byline{color:var(--muted);font-size:12.5px}
.byline .team{color:var(--ink);font-weight:600}
.badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;background:var(--t-other-bg);color:var(--t-other)}
.badge.msg{background:var(--t-msg-bg);color:var(--t-msg)}
.badge.commish{background:var(--t-commish-bg);color:var(--t-commish)}
.badge.news{background:var(--t-news-bg);color:var(--t-news)}
.ptext{margin-top:10px;white-space:pre-wrap;word-break:break-word}
.ptext table{border-collapse:collapse;font-size:12.5px;margin:6px 0}
.ptext td,.ptext th{border:1px solid var(--line);padding:3px 8px;text-align:left}
.thumb{margin-top:10px}
/* height:auto - the width/height attributes reserve layout space before the
   file loads, but without this the height stays pinned when max-width shrinks
   the box and the photo is squashed. */
.thumb img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line);
  display:block}
.cap{color:var(--muted);font-size:12px;margin-top:5px;font-style:italic}
.more{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;
  font-size:12.5px;font-weight:600;margin-top:6px}
.replybar{margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.rtog{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;
  font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.rtog .caret{display:inline-block;transition:transform .15s}
.rtog.open .caret{transform:rotate(90deg)}
.replies{margin-top:10px;display:flex;flex-direction:column;gap:9px}
.reply{display:flex;gap:9px;background:var(--sunk);border:1px solid var(--line);
  border-radius:8px;padding:9px 11px}
.reply .avatar{width:26px;height:26px;border-radius:6px}
.rname{font-size:12.5px}
.rname .team{font-weight:600}
.rtime{color:var(--muted);font-size:11.5px;margin-left:6px}
.rbody{margin-top:3px;white-space:pre-wrap;word-break:break-word;font-size:13px}
.warn{margin-top:9px;font-size:12px;color:var(--num);
  background:var(--t-commish-bg);border-radius:6px;padding:6px 9px}
.warn code{font-size:11.5px}