/* ============ THE FBB DESIGN SYSTEM (10 Oct 2026) ============
   Owner: "smarten the look up from top to bottom". One set of tokens and components, lifted from the
   /previews card (fragments/preview-card.html, the reference), loaded after rebrand.css on every page
   that shows a fixture, a number or a list. Black ground, ivory type, gold DRAWN (text, hairlines,
   outlines, ticks), never poured; green and red mean a result and nothing else.
   rebrand.css squares every corner with a global !important, so every radius here carries its own.
   Components (fragments/ds.html holds the markup for the small ones):
     .fx ............ the match card: crests facing across the kick-off, form pills, the call in one line
     .ds-row ........ the compact match row: crests, names, the score or the time, a status pill
     .ds-form ....... W/D/L pills
     .ds-ticks ...... a tick a game (gold where the line landed)
     .ds-cs ......... the call's status: on track / needs a goal / landed / lost / stake back
     .ds-sec ........ a section header: Fraunces, a count, a hairline
     .ds-chip ....... a filter or door chip
     .ds-stats ...... number tiles (the number in Fraunces gold, a short label)
     .ds-bar ........ a labelled bar (share of 100)
     .ds-table ...... a hairline table
     .ds-empty ...... the one empty state
     .ds-read ....... a long read held to four lines, the rest one tap away, all in the page */
:root{
  --dbg:#0A0A0A;--dpanel:#121212;--ivory:#FFFFFF;--ddim:#A8A8A8;--dsoft:#C9C4B8;
  --dgold:#D5B054;--dgoldt:#E6C860;--dgoldhi:#F2E3AE;--dpx:#E3C368;
  --dwin:#7FBF7F;--dloss:#C97A6D;
  --dln:rgba(255,255,255,.07);--dlngold:rgba(213,176,84,.4);--dlnchip:rgba(230,200,96,.4);
  --dserif:'Fraunces',Georgia,serif;--dsans:'DM Sans',system-ui,sans-serif;--dmono:'JetBrains Mono',ui-monospace,monospace;
}
.n{font-family:var(--dmono);font-variant-numeric:tabular-nums}

/* ---------- section header ---------- */
.ds-sec{display:flex;align-items:baseline;gap:10px;margin:30px 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(213,176,84,.28)}
.ds-sec h2,.ds-sec h3{margin:0;font-family:var(--dserif)!important;font-optical-sizing:none;font-variation-settings:"opsz" 22;font-size:1.35rem;line-height:1.2;font-weight:650;letter-spacing:.01em;color:#FFFFFF;background:none!important;-webkit-text-fill-color:#FFFFFF}
.ds-sec .cnt{font-style:normal;font-size:.84rem;color:var(--ddim);white-space:nowrap}
.ds-sec .cnt b{font-family:var(--dmono);font-weight:500;color:var(--ivory)}
.ds-sec .act{margin-left:auto;font-size:.82rem;color:var(--dgoldt)!important;white-space:nowrap}
.ds-sub{margin:-4px 0 12px;font-size:.88rem;line-height:1.5;color:var(--ddim);max-width:640px}

/* ---------- chips ---------- */
.ds-chips{display:flex;flex-wrap:wrap;gap:6px}
.ds-chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ds-chips.scroll::-webkit-scrollbar{display:none}
.ds-chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;border:1px solid rgba(255,255,255,.14);border-radius:999px!important;background:transparent;color:#C9C4B8!important;font-family:var(--dsans);font-size:.82rem;line-height:1;white-space:nowrap;text-decoration:none!important;cursor:pointer}
.ds-chip:hover{border-color:var(--dlngold);color:var(--ivory)!important}
.ds-chip.on,.ds-chip[aria-pressed="true"]{border-color:var(--dgold);color:var(--dgoldt)!important}
.ds-chip b{font-family:var(--dmono);font-weight:500;color:var(--ivory)}

/* ---------- form pills ---------- */
.ds-form{display:inline-flex;gap:3px;vertical-align:middle}
.ds-form i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid rgba(255,255,255,.18);border-radius:4px!important;font:500 .6rem/1 var(--dmono);font-style:normal;color:var(--ddim)}
.ds-form .fW{color:var(--dwin);border-color:rgba(127,191,127,.55)}
.ds-form .fL{color:var(--dloss);border-color:rgba(201,122,109,.55)}
.ds-form.sm i{width:15px;height:15px;font-size:.54rem}

/* ---------- ticks ---------- */
.ds-ticks{display:inline-flex;gap:2px;vertical-align:middle}
.ds-ticks i{display:block;width:4px;height:13px;border-radius:1px!important;background:rgba(255,255,255,.13)}
.ds-ticks i.o{background:var(--dgold)}

/* ---------- the call's status ---------- */
.ds-cs{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid rgba(255,255,255,.2);border-radius:999px!important;font-family:var(--dsans);font-size:.72rem;line-height:1.35;font-weight:600;white-space:nowrap;color:var(--dsoft)}
.ds-cs::before{content:'';width:6px;height:6px;border-radius:50%!important;background:currentColor}
.ds-cs.on-track{color:var(--dgoldt);border-color:var(--dlnchip)}
.ds-cs.needs{color:var(--dsoft);border-color:rgba(255,255,255,.22)}
.ds-cs.landed{color:var(--dwin);border-color:rgba(127,191,127,.55)}
.ds-cs.lost{color:var(--dloss);border-color:rgba(201,122,109,.55)}
.ds-cs.void{color:var(--ddim)}

/* ---------- number tiles ---------- */
.ds-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;margin:0;background:var(--dln);border:1px solid var(--dlngold);border-radius:12px!important;overflow:hidden}
.ds-stat{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--dpanel);min-width:0}
.ds-stat b{font-family:var(--dserif);font-optical-sizing:none;font-variation-settings:"opsz" 28;font-size:1.55rem;line-height:1.05;font-weight:650;color:var(--dgoldhi)}
.ds-stat span{font-size:.74rem;line-height:1.35;color:var(--ddim)}
.ds-stat.w b{color:var(--dwin)}.ds-stat.l b{color:var(--dloss)}

/* ---------- bars ---------- */
.ds-bars{display:grid;gap:8px}
.ds-bar{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr) 3.2rem;align-items:center;gap:10px;font-size:.84rem;color:var(--dsoft)}
.ds-bar .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-bar .tr{position:relative;height:6px;background:rgba(255,255,255,.08);border-radius:3px!important;overflow:hidden}
.ds-bar .tr i{position:absolute;inset:0 auto 0 0;background:rgba(213,176,84,.55);border-radius:3px!important}
.ds-bar.top .tr i{background:var(--dgold)}
.ds-bar .v{justify-self:end;font-family:var(--dmono);font-weight:500;color:var(--ivory)}
.ds-split{display:flex;height:8px;gap:2px;border-radius:4px!important;overflow:hidden}
.ds-split i{display:block;height:100%;background:rgba(255,255,255,.14)}
.ds-split i.top{background:var(--dgold)}

/* ---------- table ---------- */
.ds-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--dlngold);border-radius:12px!important;background:var(--dpanel)}
.ds-table{width:100%;border-collapse:collapse;font-size:.88rem;color:var(--dsoft)}
.ds-table th{padding:10px 12px;text-align:left;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ddim);border-bottom:1px solid var(--dlngold);background:none}
.ds-table td{padding:10px 12px;border-bottom:1px solid var(--dln);vertical-align:middle}
.ds-table tr:last-child td{border-bottom:0}
.ds-table .num{text-align:right;font-family:var(--dmono);color:var(--ivory)}

/* ---------- empty state ---------- */
.ds-empty{display:grid;gap:6px;margin:14px 0 0;padding:16px;background:var(--dpanel);border:1px solid var(--dlngold);border-radius:12px!important}
.ds-empty b{font-size:1.02rem;font-weight:600;color:var(--ivory)}
.ds-empty span{font-size:.88rem;line-height:1.5;color:var(--ddim)}
.ds-empty .ds-chips{margin-top:6px}

/* ---------- a long read, four lines then one tap ---------- */
.ds-read{position:relative}
.ds-read > .body{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ds-read.open > .body{display:block;-webkit-line-clamp:unset}
.ds-read > button{margin-top:6px;padding:0;background:none;border:0;color:var(--dgoldt);font:600 .84rem var(--dsans);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(230,200,96,.45);text-underline-offset:3px}
.ds-read.open > button,.ds-read.short > button{display:none}
/* several paragraphs: held by height, faded at the foot */
.ds-read.mh > .body{display:block;-webkit-line-clamp:unset;max-height:9.6em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.ds-read.mh.open > .body,.ds-read.mh.short > .body{max-height:none;-webkit-mask-image:none;mask-image:none}

/* ---------- the compact match row ---------- */
.ds-rows{background:var(--dpanel);border:1px solid var(--dlngold);border-radius:12px!important;padding:0 14px}
.ds-rows > .hd{display:flex;align-items:center;gap:8px;padding:11px 0 9px;border-bottom:1px solid var(--dln);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--dgold)}
.ds-rows > .hd .cnt{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ddim)}
.ds-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:10px;row-gap:4px;padding:11px 0;border-bottom:1px solid var(--dln);color:var(--ivory);text-decoration:none!important}
.ds-rows > .ds-row:last-child{border-bottom:0}
.ds-row .t{display:flex;align-items:center;gap:8px;min-width:0;font-size:.95rem;line-height:1.25;font-weight:600}
.ds-row .t.a{flex-direction:row-reverse;text-align:right}
.ds-row .t .nm{min-width:0;overflow-wrap:anywhere}
.ds-row .t .crest{width:22px;height:22px}
.ds-row .c{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px}
.ds-row .sc{font-family:var(--dmono);font-size:1.15rem;line-height:1.1;font-weight:500;color:var(--ivory);white-space:nowrap}
.ds-row .ko{font-family:var(--dmono);font-size:.95rem;font-weight:500;color:var(--dgold)}
.ds-row .min{font-family:var(--dmono);font-size:.72rem;color:var(--dgoldt);white-space:nowrap}
.ds-row .min.ft{color:var(--ddim)}
.ds-row .ln{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;font-size:.78rem;line-height:1.4;color:var(--ddim)}
.ds-row .ln .who{color:var(--dgoldt);font-weight:600}
.ds-row .ln .px{font-family:var(--dmono);color:var(--dpx)}
.ds-row .gl{grid-column:1 / -1;text-align:center;font-size:.74rem;line-height:1.45;color:var(--ddim)}
.ds-row .gl .a{text-align:right}
a.ds-row:hover .nm{color:var(--dgoldhi)}
/* the live row: a side a line, goals at the line's end, the minute in its own column */
.ds-row.lr{grid-template-columns:minmax(0,1fr) 54px;grid-template-areas:"h st" "a st" "ln ln" "gl gl";row-gap:5px;column-gap:12px}
.ds-row.lr .side{display:flex;align-items:center;gap:9px;min-width:0;font-size:.95rem;line-height:1.25;font-weight:600}
.ds-row.lr .side.h{grid-area:h}.ds-row.lr .side.a{grid-area:a}
.ds-row.lr .side .crest{width:22px;height:22px}
.ds-row.lr .side .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-row.lr .side .g{font-family:var(--dmono);font-size:1.05rem;font-weight:500;color:var(--ivory);min-width:1ch;text-align:right}
.ds-row.lr .st{grid-area:st;align-self:center;justify-self:end;display:flex;align-items:center;justify-content:center;min-width:46px;min-height:30px;padding:0 6px;border-left:1px solid var(--dln)}
.ds-row.lr .ln{grid-area:ln;justify-content:flex-start}
.ds-row.lr .gl{grid-area:gl;text-align:left}
.ds-row.lr.ft .side .g{color:var(--dsoft)}
@media (min-width:900px){
  .ds-rows.two{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
  .ds-rows.two > .hd{grid-column:1 / -1}
  .ds-rows.two > .ds-row:nth-last-child(2):nth-child(even){border-bottom:0}
}

/* ---------- THE MATCH CARD (from /previews) ---------- */
.fx{background:var(--dpanel);border:1px solid rgba(213,176,84,.26);border-radius:12px!important;padding:12px 14px 6px;min-width:0}
.fx.pair{border-color:rgba(213,176,84,.4)}
.fxtop{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:start}
.fx .tm{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center;text-decoration:none!important;color:var(--ivory)}
.fx .tm .crest{width:32px;height:32px}
.fx .tm .nm{display:block;max-width:100%;font-size:.95rem;line-height:1.2;font-weight:600;overflow-wrap:break-word;hyphens:auto}
.fx .tm:hover .nm{color:var(--dgoldhi)}
.fx .frm{display:inline-flex;gap:3px}
.fx .frm i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid rgba(255,255,255,.18);border-radius:4px!important;font:500 .58rem/1 var(--dmono);font-style:normal;color:var(--ddim)}
.fx .frm .fW{color:var(--dwin);border-color:rgba(127,191,127,.55)}
.fx .frm .fL{color:var(--dloss);border-color:rgba(201,122,109,.55)}
.fx .meta{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;line-height:1.3;color:var(--ddim)}
.fx .meta .out{font-style:normal;padding:0 6px;border:1px solid rgba(201,122,109,.45);border-radius:999px!important;color:#D9A196;font-size:.68rem;line-height:1.5;white-space:nowrap}
.fx .ko{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:6px}
.fx .ko .t{font-size:.95rem;font-weight:500;color:var(--dgold);letter-spacing:.02em}
.fx .ko .lg{font-size:.62rem;line-height:1.3;color:var(--ddim);text-align:center}
.fx .ko .live{font-size:.82rem;font-weight:500;color:var(--dwin);white-space:nowrap}
.fxcall{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 8px;margin:10px 0 0;padding-top:8px;border-top:1px solid var(--dln);text-align:center}
.fxcall .lbl,.fxrun .lbl{font-size:.64rem;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--ddim);font-weight:500}
.fxcall .lbl{flex-basis:100%}
.fxcall .who{font-size:.95rem;font-weight:600;color:var(--dgoldt)}
.fxcall .pct{font-family:var(--dserif);font-optical-sizing:none;font-variation-settings:"opsz" 28;font-size:1.25rem;line-height:1;font-weight:700;color:var(--dgoldhi)}
.fxcall .px{font-size:.9rem;font-weight:500;color:var(--dpx)}
.fxcall .imp{font-size:.74rem;color:var(--ddim)}
.fxcall .imp b{font-weight:500;color:#C9C4B8}
.fxcall.pvpp{display:block;font-size:.84rem;color:var(--ddim);font-style:italic}
.fxrun{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin-top:8px}
.fxrun .rn{display:flex;align-items:center;gap:6px;min-width:0}
.fxrun .rn.h{justify-content:flex-start}
.fxrun .rn.a{justify-content:flex-end}
.fxrun .rn b{font-size:.72rem;font-weight:500;color:#C9C4B8;white-space:nowrap}
.fxrun .tk{display:inline-flex;gap:2px}
.fxrun .tk i{display:block;width:4px;height:13px;border-radius:1px!important;background:rgba(255,255,255,.13)}
.fxrun .tk i.o{background:var(--dgold)}
.fxrun .mid{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.fxrun .q{display:inline-flex;gap:6px;align-items:baseline}
.fxrun .q .pct{font-size:.78rem;font-weight:500;color:#FFFFFF}
.fxrun .q .px{font-size:.78rem;font-weight:500;color:var(--dpx)}
.fxfoot{position:relative;display:flex;justify-content:flex-end;align-items:center;min-height:30px;margin-top:8px;padding-top:5px;border-top:1px solid var(--dln)}
.fxfoot.has-more{display:block}
.fxfoot .fxdoors{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.fxfoot.has-more .fxdoors{position:absolute;top:5px;right:0;height:30px}
.fxfoot .go{font-size:.82rem;font-weight:600;color:var(--dgoldt)!important}
.fxmore summary{display:inline-flex;align-items:center;gap:6px;height:30px;list-style:none;cursor:pointer;font-size:.8rem;color:var(--ddim)}
.fxmore summary::-webkit-details-marker{display:none}
.fxmore summary::after{content:'';width:6px;height:6px;margin-top:-3px;border-right:1.5px solid var(--ddim);border-bottom:1.5px solid var(--ddim);transform:rotate(45deg)}
.fxmore[open] summary::after{margin-top:3px;transform:rotate(-135deg)}
.fxmore .in{padding:4px 0 6px;font-size:.84rem;line-height:1.5;color:#C9C4B8}
.fxmore .in p{margin:6px 0 0}
.fxmore .in b{font-weight:500;color:var(--ivory)}
.fxmore .in .px{color:var(--dpx)}
.fxmore .dread{color:#E2DED5}
.fxmore .dk{color:var(--dgoldt)}
.hbuild{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:4px 11px;border:1.5px solid var(--dgold);border-radius:12px!important;background:transparent;color:var(--dpx)!important;font-family:var(--dsans);font-size:.77rem;line-height:1.3;font-weight:600;white-space:nowrap;text-decoration:none!important;cursor:pointer}
.hbuild:hover{color:var(--dgoldhi)!important;border-color:var(--dgoldhi)}
.ds-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (max-width:380px){
  .fxtop{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)}
  .fx .tm .nm{font-size:.88rem}
  .fxrun .tk i{width:3px}
}
@media (min-width:900px){
  .ds-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}