/* Nuck's Rugby Archive — Super Filter
   Data-dense, quiet, fast. Nothing animates that does not have to. */

:root{
  --navy:#1f3864;
  --navy-2:#2f4d80;
  --ink:#16202e;
  --muted:#616f85;       /* 4.76:1 on the page background. Was #66748a,
                            which is 4.43:1 - fine on a navy topbar, just
                            under AA once the topbar became the page. */
  --line:#c5cedc;        /* 1.59:1 on white. Was #dfe4ec at 1.28:1, which  */
                         /* was borderline on cards and far too weak once   */
                         /* it became the only thing under the header.      */
  --line-soft:#e7ebf2;   /* row separators - quieter on purpose            */
  --bg:#f6f7fa;
  --panel:#ffffff;
  --win:#2e7d5b;
  --draw:#9a7b28;
  --loss:#b04141;
  --win-bg:#e6f2ec;
  --draw-bg:#f6efdc;
  --loss-bg:#f8e9e9;
  --row-h:34px;
  --table-cols:104px minmax(130px,250px) 86px minmax(130px,250px) minmax(258px,268px) 44px 1fr;
  /* Role tokens. The terminal theme redefines these as syntax-highlight
     colours; the light theme needs its own values or every rule that uses
     one falls back to "inherit" and the row loses all its hierarchy. */
  --t-date:#46536b;
  --t-team:#16202e;
  --t-score:#1f3864;
  --t-rank:#7a5c9e;
  --t-meta:#66748a;
  --t-accent:#1f3864;
  /* Kept defined but DELIBERATELY UNUSED. The whole site is monospace in both
     themes (see body). If you find yourself reaching for this, you are about
     to reintroduce the terminal/light typeface split that was removed on
     26 Aug 2026 - don't, unless the decision is being reversed on purpose. */
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box}
/* Several blocks below set an explicit display, which would otherwise beat the
   browser's [hidden] rule and leave the loader and the error panel on screen. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  /* ONE TYPEFACE FOR BOTH THEMES. Monospace was chosen because nearly every
     value on this site is a number and mono aligns digits down a column - and
     that argument does not stop being true when the palette gets lighter.
     13px rather than 14px because a monospace face at the same nominal size
     is materially wider, and the fixture grid's column widths were tuned at
     13. Change one without the other and the row overflows.
     Do NOT reintroduce a per-theme font rule: the two themes are one design
     in two palettes. */
  margin:0;font-family:var(--mono);color:var(--ink);background:var(--bg);
  font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}

/* ---------------------------------------------------------------- topbar */
/* The header sits ON the page rather than being a band across the top of it,
   in BOTH themes - one uniform background, separated by a rule. It used to be
   a navy bar with white text, which only ever suited the light theme and made
   the two themes look like different products.
   Everything here is a token, so neither theme owns the header any more. */
.topbar{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:14px 22px;background:var(--bg);color:var(--ink);
  border-bottom:1px solid var(--line);
}
.topbar h1{font-size:19px;letter-spacing:.02em;color:var(--t-accent)}
.tagline{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.buildinfo{font-size:11.5px;color:var(--muted);text-align:right;white-space:nowrap}

/* --------------------------------------------------------------- loading */
.loading,.dataerror{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:80px 20px;color:var(--muted);
}
.dataerror{max-width:620px;margin:0 auto;text-align:left;align-items:flex-start;color:var(--ink)}
.dataerror h2{color:var(--loss);font-size:17px}
.dataerror code{background:#eceff5;padding:1px 5px;border-radius:3px;font-family:var(--mono);font-size:12.5px}
.spinner{
  width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--navy);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ----------------------------------------------------------------- shell */
main{
  display:grid;grid-template-columns:274px minmax(0,1fr);
  height:calc(100vh - 62px);
}
/* Give the explorer the space below the actual header, including wrapped nav. */
@media (min-width:701px){
  body:has(> main#app:not(.tm):not(.h2h):not(.sc)){display:flex;flex-direction:column;height:100dvh;overflow:hidden}
  body:has(> main#app:not(.tm):not(.h2h):not(.sc))>.topbar{flex:0 0 auto}
  main#app:not(.tm):not(.h2h):not(.sc){height:auto;min-height:0;flex:1 1 auto}
}

/* --------------------------------------------------------------- filters */
.filters{
  background:var(--panel);border-right:1px solid var(--line);
  overflow-y:auto;padding:0 0 40px;
}
.filters-head{
  position:sticky;top:0;z-index:3;background:var(--panel);
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px 10px;border-bottom:1px solid var(--line);
}
.filters-head h2{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.linkbtn{
  background:none;border:0;color:var(--navy-2);font:inherit;font-size:12.5px;
  cursor:pointer;padding:2px 4px;border-radius:4px;
}
.linkbtn:hover{background:var(--line-soft);text-decoration:underline}

.fgroup{padding:13px 16px 4px;border-bottom:1px solid var(--line-soft)}
.fgroup h3{
  font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--navy);margin-bottom:9px;
}
.f{display:block;margin-bottom:11px}
.f>span{
  display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px;
  font-weight:550;
}
.note{margin:5px 0 0;font-size:11px;line-height:1.35;color:#98a3b5}
.sparse{font-style:normal;color:#98a3b5;font-weight:400}
select,input[type=number],input[type=text],input:not([type]){
  width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:5px;
  font:inherit;font-family:var(--mono);font-size:13px;
  background:#fff;color:var(--ink);
}
select:focus,input:focus{outline:2px solid #b9c9e6;outline-offset:-1px;border-color:var(--navy-2)}
.rangerow .rangepair{display:flex;align-items:center;gap:6px}
.rangepair input{width:100%;min-width:0}
.rangepair em{font-style:normal;color:var(--muted);font-size:12px}

.segbtns{display:flex;gap:0;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.segbtns.wrap{flex-wrap:wrap}
.segbtns button{
  flex:1 1 auto;min-width:0;padding:5px 6px;border:0;background:#fff;
  font:inherit;font-size:12px;color:var(--muted);cursor:pointer;
  border-right:1px solid var(--line);white-space:nowrap;
}
.segbtns button:last-child{border-right:0}
.segbtns button:hover{background:var(--line-soft)}
.segbtns button.on{background:var(--navy);color:#fff}

.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.chips button{
  padding:4px 8px;border:1px solid var(--line);border-radius:20px;background:#fff;
  font:inherit;font-size:11.5px;color:var(--muted);cursor:pointer;
}
.chips button:hover{border-color:var(--navy-2);color:var(--navy)}
.chips button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chips.days button{padding:4px 7px}

/* --------------------------------------------------------------- results */
.results{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto}
.results > :not(.matchtable){flex-shrink:0}
/* The new role="table" wrapper sits between .results and .tablewrap, so it has
   to pass the bounded height through or the virtual list loses the definite
   clientHeight it measures against. */
.matchtable{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;
  overflow:hidden}
/* A floor under the scroller. The analysis cards can be ~470px tall, and on a
   short window they used to leave the table nothing at all. The cards are
   worth having, but never at the price of the matches. */
.results .matchtable{min-height:350px;flex:1 0 50vh}
.insight-scroll:has(button){max-height:none}

/* ------------------------------------------------------------------ hero */
/* The empty state, and only the empty state. It lives INSIDE the results
   column rather than above <main>, because main is a fixed
   height:calc(100vh - 62px) grid - a block above it would have to be paid for
   out of the table's height on every screen forever, and would break that
   hard-coded 62px besides. Here it occupies space that is blank anyway when
   nothing is filtered, and it is gone the moment it would be in the way.
   Every colour is a token: no literal white, or the terminal theme loses it. */
.hero{
  background:var(--panel);border-bottom:1px solid var(--line);
  padding:14px 18px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;
  align-items:center;flex-shrink:0;
}
.hero h2{
  font-size:20px;line-height:1.25;letter-spacing:-.02em;
  font-weight:650;color:var(--ink);max-width:none;margin:0;
}
.hero-sub{
  grid-column:1;margin:5px 0 0;max-width:70ch;font-size:12px;line-height:1.4;
  color:var(--muted);
}
.hero-stats{
  grid-column:2;grid-row:1 / 3;
  display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0 0 0 22px;
  border-left:1px solid var(--line-soft);max-width:430px;
}
.hero-stats b{
  display:block;font-size:20px;font-weight:640;letter-spacing:-.02em;
  line-height:1.05;color:var(--t-accent);
}
.hero-stats span{
  display:block;margin-top:3px;font-size:9px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);
}

.analysis{
  background:var(--panel);border-bottom:1px solid var(--line);
  padding:11px 18px 13px;
}
.analysis-head{display:flex;align-items:baseline;gap:12px;margin-bottom:11px}
.analysis-head h2{font-size:16px}
.analysis-head p{margin:0;font-size:12px;color:var(--muted)}

.cards{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
}
.card{
  border:1px solid var(--line);border-radius:7px;padding:9px 11px;background:#fff;
  min-width:0;
}
.card.wide{grid-column:span 2}
.card-label{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin-bottom:6px;font-weight:600;
}
.card-label .hint{text-transform:none;letter-spacing:0;font-style:normal;color:#9aa5b6;font-weight:400}
.big{font-size:21px;font-weight:640;letter-spacing:-.02em;line-height:1.1}
.sub{font-size:11.5px;color:var(--muted);margin-top:2px}

.wdl{display:flex;gap:14px}
.wdl div{display:flex;flex-direction:column}
.wdl b{font-size:20px;font-weight:640;letter-spacing:-.02em;line-height:1.15}
.wdl span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.wdl .win b{color:var(--win)}
.wdl .draw b{color:var(--draw)}
.wdl .loss b{color:var(--loss)}
.winbar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-top:9px;background:var(--line-soft)}
.winbar i{display:block;height:100%}
.winbar .w{background:var(--win)}
.winbar .d{background:var(--draw)}
.winbar .l{background:var(--loss)}

.records{list-style:none;margin:0;padding:0}
.records li{
  display:flex;justify-content:space-between;gap:10px;padding:2.5px 0;
  border-bottom:1px dotted var(--line-soft);font-size:12.5px;
}
.records li:last-child{border-bottom:0}
.records span{color:var(--muted);white-space:nowrap}
.records b{font-weight:600;text-align:right}

.formstrip{display:flex;gap:3px;flex-wrap:wrap}
.formstrip i{
  width:17px;height:17px;border-radius:3px;display:grid;place-items:center;
  font-size:10px;font-weight:700;font-style:normal;color:#fff;
}
.formstrip i.W{background:var(--win)}
.formstrip i.D{background:var(--draw)}
.formstrip i.L{background:var(--loss)}

/* ----------------------------------------------------------------- table */
.tablebar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 18px;background:var(--panel);border-bottom:1px solid var(--line);
}
.count{font-size:13px}
.count b{font-size:16px;font-weight:650}
.count span{color:var(--muted);margin-left:6px;font-size:12px}
.tablebar-right{display:flex;align-items:center;gap:12px}
.ghostbtn{
  padding:5px 10px;border:1px solid var(--line);border-radius:5px;background:#fff;
  font:inherit;font-size:12px;color:var(--navy-2);cursor:pointer;
}
.ghostbtn:hover{background:var(--line-soft);border-color:var(--navy-2)}

.tablehead,.trow{
  display:grid;
  grid-template-columns:104px 44px minmax(110px,1.3fr) 78px minmax(110px,1.3fr)
                        48px 58px minmax(130px,1.5fr) minmax(120px,1.3fr) 82px;
  align-items:center;
}
.tablehead{
  background:#eef1f6;border-bottom:1px solid var(--line);
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:650;position:relative;z-index:2;
}
.tablehead>div{
  padding:7px 8px;cursor:pointer;user-select:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
/* data-key moved onto the <button> inside the cell, so the old
   `>div[data-key]` selector matched nothing and `:not([data-key])` matched
   every heading - killing the hover affordance on exactly the sortable ones. */
.tablehead>div:hover{color:var(--navy);background:#e5eaf3}
.tablehead.fx>div:has(.sortbtn):hover{background:rgba(127,127,127,.12)}
.tablehead>div.sorted{color:var(--navy)}
.tablehead>div .arrow{opacity:.85}

/* min-height:0 is what lets this SHRINK inside its flex parent. Without it a
   flex item's minimum is its content size, so on a short window the scroller
   refused to give ground, the row above it took everything, and the scroller
   computed to a height of ZERO - a table with a correct 58,000px spacer and
   nowhere to draw. It only surfaced once the role="table" wrapper added a
   second flex level between .results and here. */
.tablewrap{flex:1 1 auto;min-height:0;overflow-y:auto;position:relative;
  background:#fff}
.tablespacer{width:1px}
.tablebody{position:absolute;top:0;left:0;right:0}
.trow{
  height:var(--row-h);border-bottom:1px solid var(--line-soft);font-size:12.5px;
}
.trow:hover{background:#f4f7fc}
.trow>div{padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .num{text-align:right;font-variant-numeric:tabular-nums}
.trow .date{font-family:var(--mono);font-size:11px;color:#4a5768;letter-spacing:-.2px}
.trow .score{text-align:center;font-variant-numeric:tabular-nums;font-weight:600;font-family:var(--mono)}
.trow .winner{font-weight:640}
.trow .rk{font-size:10.5px;color:#8b97a9;font-variant-numeric:tabular-nums;text-align:right}
.res{
  display:inline-block;min-width:19px;text-align:center;border-radius:3px;
  font-size:10.5px;font-weight:700;padding:1px 0;
}
.res.W{background:var(--win-bg);color:var(--win)}
.res.D{background:var(--draw-bg);color:var(--draw)}
.res.L{background:var(--loss-bg);color:var(--loss)}
.tag{
  font-size:9.5px;border:1px solid var(--line);border-radius:3px;padding:0 3px;
  color:var(--muted);margin-left:4px;
}
.tag.rwc{border-color:#c4b487;color:#8a7327;background:#faf5e6}

.empty{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  color:var(--muted);
}
.empty p{margin:2px 0;font-size:15px}
.empty .sub{font-size:12.5px;color:#9aa5b6}

@media (max-width:1100px){
  .card.wide{grid-column:span 1}
}
@media (max-width:860px){
  main{grid-template-columns:1fr;height:auto}
  .filters{border-right:0;border-bottom:1px solid var(--line)}
  /* THE TABLE MUST KEEP A DEFINITE HEIGHT. paint() sizes the visible window
     from wrap.clientHeight, so if this box is allowed to grow to its content
     the "visible" window becomes the whole table and every row is built into
     the DOM - 10,128 of them. It still LOOKS right, which is why it went
     unnoticed; it just makes a phone crawl. flex:0 0 auto stops flex-grow
     from overriding the height. */
  .tablewrap{flex:0 0 auto;height:60vh}
}
/* Tablet filters use the same reveal control as phones, keeping matches visible. */
@media (min-width:701px) and (max-width:860px){
  body:has(>main#app){height:auto;overflow:auto}
  main#app{flex:none}
  body:not(.filters-open) #filters{display:none}
  #filters{max-height:60vh;overflow:auto}
  .filterbar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line)}
  .hero{display:block;padding:12px 14px}
  .hero-stats{margin-top:8px;padding:8px 0 0;border-left:0;border-top:1px solid var(--line-soft);max-width:none}
}

/* =====================================================================
   Rankings Time Machine
   ===================================================================== */
.mainnav{display:flex;gap:16px;margin-top:4px}
.mainnav a{
  color:var(--muted);text-decoration:none;font-size:12.5px;padding:2px 0;
  border-bottom:2px solid transparent;
}
.mainnav a:hover{color:var(--ink)}
.mainnav a.here{color:var(--ink);border-bottom-color:var(--t-accent);font-weight:600}

main.tm{display:block;height:auto;min-height:calc(100vh - 62px)}
/* Override the explorer viewport shell, including its ID specificity. */
body:has(>main#app.tm){display:block;height:auto;overflow:auto;padding-bottom:12px}
main#app.tm{flex:none;min-height:0}
.tm #f-source{margin-bottom:12px;flex-wrap:wrap}
.tmsteps{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0 2px}
.tmsteps label{display:flex;align-items:center;gap:6px;font-size:12px}
.tmsteps select{width:auto;padding:5px}
#step-status{font-size:11px;color:var(--muted)}
.tm button:disabled{opacity:.45;cursor:default}
.tm .tablehead>button{font:inherit;font-size:10px;color:inherit;background:transparent;border:0;padding:7px 8px;cursor:pointer;text-align:right}
.tm .tablehead>button:focus-visible{outline:2px solid var(--t-accent);outline-offset:-2px}
.tm .tablehead>button[data-key="team"]{text-align:left}
.tm .tmtable{overflow-x:auto}
.tm .tablehead,.tm .tablewrap{min-width:850px}
.tm .tmbody{height:65vh;min-height:420px}
.tm .lastmatches{order:-1}
.tmextras summary,.tmoptions>summary{cursor:pointer;font-size:12px;color:var(--muted);padding:8px 0}
.tmoptions>summary{padding:10px 18px;border-bottom:1px solid var(--line)}
.tmextras{margin-top:8px}
.tmcontext{min-width:0;min-height:0;overflow:auto}
.tmcontext>summary{font-size:11px;padding:10px 12px;cursor:pointer;color:var(--muted)}
.tmcontext>.topline{overflow:visible}
.tmextras .jumps{margin-bottom:6px}
@media(max-width:1000px){
  .tm .tmbody{height:auto}
  .tm .topline{max-height:210px;overflow:auto}
}

.timebar{background:var(--panel);border-bottom:1px solid var(--line);padding:12px 18px 8px}
.timebar-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.asat-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.asat-date{font-size:26px;font-weight:660;letter-spacing:-.02em;line-height:1.15;color:var(--navy)}
.timecontrols{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.timecontrols input[type=date]{width:auto;padding:5px 8px}
.playbtn{
  padding:6px 14px;border:1px solid var(--navy);border-radius:5px;
  background:var(--navy);color:#fff;font:inherit;font-size:13px;cursor:pointer;
  min-width:88px;
}
.playbtn:hover{background:var(--navy-2)}
.playbtn.on{background:var(--loss);border-color:var(--loss)}
.segbtns.speed{width:auto}
.segbtns.speed button{padding:5px 9px;flex:0 0 auto}

.slider{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;margin:14px 0 0;
  border-radius:3px;background:linear-gradient(90deg,#c9d6ec,#1f3864);
  outline:none;padding:0;border:0;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:3px solid var(--navy);cursor:grab;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.slider::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#fff;
  border:3px solid var(--navy);cursor:grab;
}
.sliderticks{position:relative;height:14px;margin-top:2px}
.sliderticks i{
  position:absolute;transform:translateX(-50%);font-style:normal;
  font-size:10px;color:#9aa5b6;font-variant-numeric:tabular-nums;
}
.chips.jumps{margin-top:8px}

.rulebar{
  display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;
  background:var(--panel);border-bottom:1px solid var(--line);padding:10px 18px;
}
.rule>span{
  display:block;font-size:11px;color:var(--muted);margin-bottom:4px;
  font-weight:600;text-transform:uppercase;letter-spacing:.06em;
}
.rule select,.rule input[type=text]{width:auto;min-width:190px}
.rule.grow{flex:1 1 180px}
.rule.grow input{width:100%}

.rulenote{
  margin:0;padding:8px 18px;background:#f0f3f9;border-bottom:1px solid var(--line);
  font-size:12px;color:#4a5768;line-height:1.5;
}

.tmbody{display:grid;grid-template-columns:290px minmax(0,1fr);gap:0;
  height:calc(100vh - 330px);min-height:420px}
.topline{
  border-right:1px solid var(--line);background:var(--bg);
  padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;
}
.topline .card{background:#fff}
.no1{font-size:20px;font-weight:660;letter-spacing:-.02em;line-height:1.15;color:var(--navy)}
.big.small{font-size:16px}
.lastmatches ul{list-style:none;margin:0;padding:0}
.lastmatches li{
  font-size:11.5px;padding:2.5px 0;border-bottom:1px dotted var(--line-soft);
  line-height:1.35;
}
.lastmatches li:last-child{border-bottom:0}
.lastmatches li span{color:#9aa5b6;font-family:var(--mono);font-size:10.5px;
  display:block}
.lastmatches li b{font-variant-numeric:tabular-nums}

.tmtable{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.tm .tablehead,.tm .trow{display:grid;align-items:center}
.tm .trow{height:30px;font-size:12.5px}
.tm .trow>div,.tm .tablehead>div{padding:0 8px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tm .tablehead>div{padding:7px 8px}
.tm .num{text-align:right;font-variant-numeric:tabular-nums}
.tm .pos{font-weight:660;color:var(--navy)}
.tm .rating{font-family:var(--mono);font-size:12px}
.tm .lastp{font-size:11px;color:#8b97a9;font-family:var(--mono)}
.tm .lastp.dormant{color:#b58a5a}
.tm .lastp .tag{border-color:#e0cdb0;background:#fdf6ea;
  color:#96702f;font-size:9px}
.tm .teamcell a{color:var(--ink);text-decoration:none}
.tm .teamcell a:hover{color:var(--navy-2);text-decoration:underline}
.tm .up{color:var(--win)}
.tm .down{color:var(--loss)}
.mv{font-size:11px;font-weight:600}
.mv.up{color:var(--win)}
.mv.down{color:var(--loss)}
.mv.same{color:#c2cad6}
.mv.new{color:var(--navy-2);font-size:10px;letter-spacing:.03em}

@media (max-width:1000px){
  .tmbody{grid-template-columns:1fr;height:auto}
  .topline{border-right:0;border-bottom:1px solid var(--line);
    flex-direction:row;flex-wrap:wrap}
  .topline .card{flex:1 1 200px}
  .tmtable{height:70vh}
}

/* =====================================================================
   Head to Head
   ===================================================================== */
main.h2h{display:block;height:auto;min-height:calc(100vh - 62px);padding-bottom:30px}
.pickbar{
  display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;
  background:var(--panel);border-bottom:1px solid var(--line);padding:11px 18px;
}
.pickbar .rule select{min-width:210px}
.swapbtn{padding:6px 11px;font-size:15px;line-height:1;align-self:flex-end;margin-bottom:1px}

.h2hhead{
  display:grid;grid-template-columns:1fr minmax(240px,1.4fr) 1fr;
  gap:18px;align-items:center;padding:16px 18px 14px;background:var(--panel);
  border-bottom:1px solid var(--line);
}
.h2hhead .side{text-align:center}
.h2hhead .sname{font-size:15px;font-weight:640;letter-spacing:-.01em}
.h2hhead .swins{font-size:40px;font-weight:660;letter-spacing:-.03em;line-height:1.05}
.h2hhead .side.a .swins{color:#2a78d6}
.h2hhead .side.b .swins{color:#e34948}
.h2hhead .slabel{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.h2hhead .middle{text-align:center}
.mtotal{font-size:13px;color:var(--muted)}
.mtotal b{font-size:19px;color:var(--ink);font-weight:640}
.mdraws{font-size:12px;color:var(--muted)}
.mspan{font-size:11.5px;color:#9aa5b6;font-family:var(--mono);margin-top:2px}
.leadbar{display:flex;height:8px;border-radius:4px;overflow:hidden;margin:9px 0 6px;background:var(--line-soft)}
.leadbar i{display:block;height:100%}
.leadbar .a{background:#2a78d6}
.leadbar .d{background:#c2cad6}
.leadbar .b{background:#e34948}
.mverdict{font-size:13px;font-weight:600}

.chartcard{background:var(--panel);border-bottom:1px solid var(--line);padding:14px 18px 12px}
.charthead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.charthead h2{font-size:15px}
.charthead p{margin:0;font-size:12px;color:var(--muted)}
.chartlegend{display:flex;gap:16px;margin:7px 0 4px}
.chartlegend .lg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.chartlegend .lg i{width:11px;height:11px;border-radius:2px;display:block;opacity:.55}
.chartbox{position:relative;width:100%}
.chartbox svg{display:block;width:100%;height:auto;overflow:visible}
.chartbox .grid{stroke:#eef1f6;stroke-width:1}
.chartbox .zero{stroke-width:1.5;stroke-dasharray:3 3}
.chartbox .lead{fill:none;stroke:#16202e;stroke-width:2;stroke-linejoin:round}
.chartbox .axis{font-size:10px;fill:#9aa5b6;font-family:var(--mono)}
.chartbox .endlabel{font-size:11.5px;fill:#4a5768;font-weight:600;font-family:var(--mono)}
.chartbox .cursor{fill:#fff;stroke:#16202e;stroke-width:2}
.chartbox .hit{cursor:crosshair}
.tip{
  position:absolute;background:#16202e;color:#fff;padding:7px 9px;border-radius:5px;
  font-size:11.5px;line-height:1.4;pointer-events:none;max-width:200px;
  box-shadow:0 3px 10px rgba(0,0,0,.22);z-index:5;
}
.tip .muted{color:#9fb0c9}
.chartnote{margin:6px 0 0;font-size:11.5px;color:#9aa5b6;max-width:760px}

.cards.h2hcards{padding:14px 18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.h2hcards .big.small{font-size:14.5px;line-height:1.3}

.splits{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:12px;padding:0 18px 14px;
}
.splitcard{border:1px solid var(--line);border-radius:7px;padding:10px 12px;background:#fff}
table.mini{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
table.mini th{
  text-align:right;font-weight:600;color:var(--muted);font-size:10px;
  text-transform:uppercase;letter-spacing:.05em;padding:2px 4px;
  border-bottom:1px solid var(--line);
}
table.mini th:first-child{text-align:left}
table.mini td{padding:2.5px 4px;text-align:right;border-bottom:1px dotted var(--line-soft);
  font-variant-numeric:tabular-nums}
table.mini td:first-child{text-align:left;color:var(--ink)}
table.mini tr:last-child td{border-bottom:0}
.nodata{margin:6px 0 0;font-size:12px;color:#9aa5b6}

.h2h .tablebar,.h2h .tablehead{margin-top:0}
.h2h .tablewrap.short{height:340px}
.h2h .tablewrap{position:relative;background:#fff;overflow-y:auto}
/* All opponents are rendered together, so their rows must define the height. */
.h2h #oppbody{position:relative}
.h2h #oppwrap{max-height:65vh;overflow-y:auto}
.h2h .trow{display:grid;align-items:center;height:30px;font-size:12.5px;
  border-bottom:1px solid var(--line-soft)}
.h2h .trow:hover{background:#f4f7fc}
.h2h .trow>div,.h2h .tablehead>div{padding:0 8px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.h2h .tablehead{display:grid;align-items:center}
.h2h .tablehead>div{padding:7px 8px;cursor:default}
.h2h .num{text-align:right;font-variant-numeric:tabular-nums}
.h2h .date{font-family:var(--mono);font-size:11px;color:#4a5768;letter-spacing:-.2px}
.h2h .score{text-align:center;font-variant-numeric:tabular-nums;font-weight:600;
  font-family:var(--mono)}
.h2h .score.restated{color:#1d6fbf}
.h2h .rk{text-align:right;font-size:10.5px;color:#8b97a9;font-variant-numeric:tabular-nums}
.h2h .teamcell a{color:var(--ink);text-decoration:none}
.h2h .teamcell a:hover{color:var(--navy-2);text-decoration:underline}
.h2h .up{color:var(--win)}
.h2h .down{color:var(--loss)}
.h2h .analysis-head{padding:14px 18px 6px}
.h2h #opp-find{width:200px;padding:5px 8px;border:1px solid var(--line);
  border-radius:5px;font:inherit;font-size:12.5px}

@media (max-width:820px){
  .h2hhead{grid-template-columns:1fr;gap:8px}
}

/* =====================================================================
   Score Normalisation
   ===================================================================== */
main.sc{display:block;height:auto;min-height:calc(100vh - 62px)}
.intro{background:var(--panel);border-bottom:1px solid var(--line);padding:14px 18px}
.intro h2{font-size:15px;margin-bottom:5px}
.intro p{margin:0 0 6px;font-size:13px;color:#3c4a5c;max-width:900px;line-height:1.55}
.intro .warn{
  background:#fdf6ea;border:1px solid #e6d4b3;border-radius:6px;padding:9px 12px;
  font-size:12.5px;color:#5c4a24;max-width:none;line-height:1.5;
}
.cards.sccards{padding:14px 18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sccards .big.small{font-size:19px}

.scbody{display:grid;grid-template-columns:300px minmax(0,1fr);
  height:calc(100vh - 470px);min-height:360px}
.eraref{border-right:1px solid var(--line);background:var(--bg);padding:12px;
  overflow-y:auto}
.eraref table.mini tr.on td{background:#e9f0fb;font-weight:600}
.eraref .chartnote{margin-top:6px}
.sctable{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.sc .tablehead,.sc .trow{display:grid;align-items:center}
.sc .trow{height:30px;font-size:12.5px;border-bottom:1px solid var(--line-soft);
  position:relative}
.sc .trow:hover{background:#f4f7fc}
.sc .trow.flip{background:#f3f8ff}
.sc .trow.flip:hover{background:#e9f2ff}
.sc .trow>div,.sc .tablehead>div{padding:0 8px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sc .tablehead>div{padding:7px 8px}
.sc .num{text-align:right;font-variant-numeric:tabular-nums}
.sc .date{font-family:var(--mono);font-size:11px;color:#4a5768;letter-spacing:-.2px}
.sc .score{text-align:center;font-family:var(--mono);font-weight:600;
  font-variant-numeric:tabular-nums}
.sc .score.restated{color:#1d6fbf}
.sc .bd{font-family:var(--mono);font-size:11px;color:#7c8798;text-align:center}
.sc .ok{color:var(--win);font-size:11.5px}
.sc .no{color:var(--loss);font-size:11px;font-family:var(--mono);cursor:help}
.sc .flipmark{
  display:inline-block;margin-left:4px;font-size:11px;color:#1d6fbf;
  font-weight:700;cursor:help;
}
@media (max-width:1000px){
  .scbody{grid-template-columns:1fr;height:auto}
  .eraref{border-right:0;border-bottom:1px solid var(--line)}
  .sctable{height:60vh}
}

/* ==========================================================================
   THE TERMINAL THEME
   A code-editor look, chosen over an 8-bit one for a specific reason: nearly
   every value in this table is a number, and monospace puts every digit in the
   same column down the whole page. 43-19 sits directly above 24-29 and you can
   read the shape of a column at a glance. Colour follows the ROLE of a value -
   date, team, score, muted metadata - which is a fixed set of five or six
   hues, rather than following team identity, which would need 306 and fail
   every contrast and colour-blindness check. Identity is carried by the flag.
   ========================================================================== */
html[data-theme="terminal"]{
  --navy:#0d1117;
  --navy-2:#161b22;
  --ink:#c9d1d9;          /* primary text            */
  --muted:#7d8794;        /* metadata, labels        */
  /* Borders, lifted 13 Aug -> 26 Aug. These were #242a33 and #1a1f27, which
     is 1.26:1 and 1.10:1 against the panel - below the ~1.6:1 an edge needs
     to read as deliberate at all, so the cards had effectively no outline.
     The light theme's border sits at the same 1.28:1 and looks fine, which
     is the trap: an identical ratio survives on white and vanishes on black.
     Judge dark-theme edges by eye against the panel, not by parity with the
     light theme. */
  --line:#3a4657;        /* 1.90:1 on panel - card and panel edges  */
  --line-soft:#262f3b;   /* 1.34:1 - row separators, deliberately   */
                         /* quieter or 10,128 rows become a ladder  */
  --bg:#0d1117;
  --panel:#11161d;
  --win:#4fb477;
  --draw:#d3ad4a;
  --loss:#e0656b;
  --win-bg:#132b1f;
  --draw-bg:#2b2517;
  --loss-bg:#2c1719;
  /* the role tokens - the "syntax highlighting" */
  --t-date:#82a8cc;       /* muted blue, for dates */
  --t-team:#8bd3ff;       /* sky blue, for team names */
  --t-score:#b9e6ff;      /* icy blue, for scores and headline figures */
  --t-rank:#c586c0;       /* keyword mauve, for the ranking    */
  --t-meta:#868f9c;       /* muted, for venue and competition  */
  --t-accent:#69bfff;     /* arcade blue, for decorative highlights */
}
[data-theme="terminal"] .tablewrap,
[data-theme="terminal"] .card{background:var(--panel)}
[data-theme="terminal"] .tablehead{background:#161b22;color:var(--muted)}
[data-theme="terminal"] .trow:hover{background:#161b22}
[data-theme="terminal"] .trow.open{background:#161b22}
[data-theme="terminal"] input,[data-theme="terminal"] select{
  background:#0d1117;color:var(--ink);border-color:var(--line);
  font-family:var(--mono);
}
[data-theme="terminal"] .filters,[data-theme="terminal"] .analysis{
  background:var(--panel);border-color:var(--line);
}
[data-theme="terminal"] .drawer{background:#0b0f14}

/* ------------------------------------------------------- the theme switch */
/* No [data-theme="terminal"] block for the header any more: the base rules
   are all tokens, so both themes get the same header from the same code. */
.themeswitch{
  display:inline-flex;border:1px solid var(--line);border-radius:5px;
  overflow:hidden;margin-left:14px;vertical-align:middle;
}
.themeswitch button{
  background:none;border:0;color:var(--muted);font:inherit;font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;cursor:pointer;
}
.themeswitch button.on{background:var(--line);color:var(--t-accent)}

/* ==========================================================================
   THE TWO-LINE MATCH ROW
   Line 1 is the fixture, mirrored around the dash: flag, rank, name, score -
   score, name, rank, flag. Line 2 is its own grid of three aligned slots, so
   venue, competition and crowd can each be scanned down the page.
   The row is ALWAYS two lines. An absent second line would give rows two
   different heights, and the virtual table computes scroll position from one
   fixed height - the same trap the expanding drawer has to avoid.
   ========================================================================== */
.tablehead.fx,.trow.fx{
  display:grid;
  /* Written by activeGrid() in app.js from ONE column list, so the head and
     every row cannot drift apart when an optional column is switched on. */
  grid-template-columns:var(--table-cols);
  align-items:center;
}
.trow.fx{height:var(--row-h);border-bottom:1px solid var(--line-soft)}
.trow.fx>div{padding:0 8px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.trow.fx:focus-within{background:var(--line-soft)}

.fx .c-date{font-family:var(--mono);color:var(--t-date);font-size:11.5px;
  letter-spacing:-.2px;font-variant-numeric:tabular-nums}

/* THE FIXTURE. Both names hug the score - home right-aligned, away
   left-aligned - so the eye lands on one object instead of crossing the row.
   Each side is ONE flex cell so the flag and the rank stay locked to the name
   however short it is. */
.fx .c-home,.fx .c-away,.fx .c-opp{
  display:flex;align-items:center;gap:7px;min-width:0;color:var(--t-team);
}
.fx .c-home{justify-content:flex-end}
.fx .c-away,.fx .c-opp{justify-content:flex-start}
.fx .c-home .nm,.fx .c-away .nm,.fx .c-opp .nm{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
/* THE WINNER. Weight plus an underline, never colour alone - and the loser
   keeps full contrast, because a defeat is not lesser data. The screen-reader
   text "(winner)" carries the same fact for anyone who sees neither. */
/* WEIGHT ONLY. An underline read as a hyperlink, which is a worse lie than
   no cue at all. Weight is not colour, so this still works in greyscale, and
   the note above the table says what it means. The loser keeps full contrast:
   losing is not a data-quality problem. */
.fx .nm.wnr{font-weight:700}
.fx .c-home .rk,.fx .c-away .rk{
  font-size:10.5px;color:var(--t-rank);font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.fx .c-home .rk::before,.fx .c-away .rk::before{content:"#"}
.fx .c-home .fg,.fx .c-away .fg,.fx .c-opp .fg{display:flex;flex:0 0 auto}

/* THE SCORE carries the most weight on the row. */
.fx .c-sc{
  text-align:center;font-family:var(--mono);font-size:14px;font-weight:600;
  color:var(--t-score);font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.fx .c-sc .wnr{font-weight:800}
.fx .c-sc .dash{color:var(--t-rank);font-weight:400}
.fx .c-res{font-size:11px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase}
.fx .c-res.r-won{color:var(--win)}
.fx .c-res.r-lost{color:var(--loss)}
.fx .c-res.r-drew{color:var(--draw)}
.fx .c-loc{font-size:11px;color:var(--t-meta)}

/* MATCH STATUS. Three independent facts as words. Never merged, never
   colour-only: read them in greyscale and they still say what they say. */
.fx .c-status{display:flex;align-items:center;gap:4px;overflow:hidden}
.st{
  flex:0 0 auto;font-size:9.5px;line-height:1.5;padding:1px 5px;border-radius:3px;
  border:1px solid var(--line);color:var(--t-meta);white-space:nowrap;
  letter-spacing:.02em;
}
.st-test{color:var(--t-team);border-color:var(--t-rank);font-weight:650}
.st-nontest{font-style:italic}
.st-unk{font-style:italic;border-style:dashed}
.st-rank{border-style:dotted}
.st-norank{color:var(--loss);border-color:var(--loss)}
.st-neutral{color:var(--draw);border-color:var(--draw);font-weight:650}

.fx .c-rank{font-size:11px;color:var(--t-meta);font-variant-numeric:tabular-nums;
  text-align:center}
.fx .c-comp,.fx .c-venue{font-size:11px;color:var(--t-meta)}
.fx .c-crowd{font-size:11px;color:var(--t-meta);text-align:right;
  font-variant-numeric:tabular-nums}
/* "not recorded" and "not applicable" are different states and look it. */
.nr{color:var(--t-rank);font-style:italic;opacity:.75}
.na{color:var(--t-rank);font-style:italic;text-decoration:underline dotted}

.tablehead.fx>div{padding:0 8px}
.tablehead.fx .c-home{justify-content:flex-end}
.tablehead.fx .c-sc{text-align:center}
.sortbtn{
  background:none;border:0;font:inherit;color:inherit;cursor:pointer;
  padding:6px 0;letter-spacing:inherit;text-transform:inherit;
  border-radius:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.sortbtn:hover{color:var(--ink)}
.tablehead.fx .sorted{color:var(--t-accent)}
.tablehead.fx .sorted .sortbtn{font-weight:700}
.fx .arrow{opacity:.9}
.fx .c-filler{padding:0}
/* screen-reader-only */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Focus must be VISIBLE. Every interactive thing in the table is reachable by
   keyboard now, which is worth nothing if the reader cannot see where it is. */
.sortbtn:focus-visible,.expbtn:focus-visible,.fchip:focus-visible,
.copylink:focus-visible,.ghostbtn:focus-visible,.segbtns button:focus-visible{
  outline:2px solid var(--t-accent);outline-offset:1px;
}

.flag{
  display:block;image-rendering:pixelated;border-radius:1px;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
}
.flag-unknown{opacity:.42}
/* A generous target: the whole cell, not the glyph. */
/* THE WHOLE CELL IS THE TARGET, which it was not: 8px of cell padding on each
   side left a 22px-wide button inside a 38px column. The column is 44px now
   and the cell has no padding, so the target is 44px wide and the full row
   height tall. */
.fx .c-exp{padding:0 !important}
.expbtn{
  border:0;background:none;color:var(--muted);cursor:pointer;font:inherit;
  font-size:15px;line-height:1;width:100%;height:var(--row-h);
  border-radius:4px;
}
.expbtn:hover{color:var(--ink);background:rgba(127,127,127,.16)}
.trow.fx.open .expbtn{color:var(--t-accent);background:rgba(127,127,127,.12)}

/* --------------------------------------------------- the filter chip bar */
.chipbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 18px;background:var(--panel);border-bottom:1px solid var(--line);
}
.chipbar-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:650}
.chipset{display:flex;gap:5px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.fchip{
  font:inherit;font-size:11.5px;padding:2px 6px 2px 8px;border-radius:11px;
  border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
}
.fchip:hover{border-color:var(--loss);color:var(--loss)}
.fchip .x{font-size:13px;line-height:1;color:var(--muted)}
.fchip:hover .x{color:var(--loss)}
.fchip.warn{border-color:var(--loss);color:var(--loss);cursor:default}
.fchip.warn:hover{border-color:var(--loss)}

/* ------------------------------------------- table bar: view and columns */
.viewswitch,.densityswitch{display:flex;align-items:center;gap:6px}
.vs-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted)}
.segbtns.sm button{font-size:11px;padding:3px 7px}
.colmenu{position:relative}
.colpanel{
  position:absolute;right:0;top:calc(100% + 5px);z-index:6;min-width:196px;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:8px 10px;box-shadow:0 6px 22px rgba(0,0,0,.28);
}
.colpanel label{display:flex;align-items:center;gap:7px;padding:3px 0;
  font-size:12px;cursor:pointer}
.colnote{margin:6px 0 0;font-size:10.5px;color:var(--muted)}
.tablenote{
  margin:0;padding:5px 18px;font-size:11px;color:var(--muted);
  background:var(--panel);border-bottom:1px solid var(--line-soft);
}
.tableguide{flex:0 0 auto;background:var(--panel);border-bottom:1px solid var(--line-soft)}
.tableguide>summary{padding:5px 18px;font-size:11px;color:var(--muted);cursor:pointer}
.tableguide>summary:hover{color:var(--ink)}
.tableguide>summary:focus-visible{outline:2px solid var(--t-accent);outline-offset:-2px}
.tableguide .tablenote{border:0;padding-top:2px}
.tablenote b{color:var(--draw);font-weight:650}
.tablenote b.wex{color:var(--t-team);font-weight:700}
.tablenote .phoneonly{display:none}

/* COMPACT DENSITY. The class goes on <html> because app.js reads --row-h from
   the document element to compute every scroll offset. */
html.dense{--row-h:27px}
html.dense .trow.fx{font-size:11.5px}
html.dense .fx .c-sc{font-size:13px}
html.dense .st{font-size:9px;padding:0 4px}
html.dense .expbtn{font-size:14px}

/* The bar carries six controls now; let it wrap as a whole rather than
   squeezing any one of them onto two lines. */
.tablebar{flex-wrap:wrap;row-gap:8px}
.tablebar-right{flex-wrap:wrap;justify-content:flex-end}
.ghostbtn{white-space:nowrap}
.tablebar .count{white-space:nowrap}

/* ---------------------------------------------------------- the drawer */
/* HEIGHT IS NO LONGER FIXED. It used to be a hard 132px, which is why its
   contents had to be trimmed to fit. app.js measures each one after paint and
   corrects the scroll model, so the groups can be as long as the record is. */
.drawer{
  background:var(--panel);border-bottom:1px solid var(--line);
  border-left:3px solid var(--t-accent);font-size:11.5px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px 26px;padding:12px 16px 14px 20px;
}
.dgroup{min-width:0}
.dgroup.wide{grid-column:1/-1}
.drawer h4{
  margin:0 0 5px;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--t-accent);font-weight:650;
}
/* The breakdown is 9 columns wide and must never make the PAGE scroll
   sideways - it scrolls inside its own group instead. */
.dscroll{overflow-x:auto}
.drawer table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.drawer th{
  font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:600;text-align:right;padding:0 5px 2px;
}
.drawer th:first-child{text-align:left}
.drawer td{padding:1px 5px;text-align:right;white-space:nowrap}
.drawer td:first-child{text-align:left;color:var(--t-team)}
.drawer .tot{font-weight:650;color:var(--t-score)}
.drawer .ok{color:var(--win)}
.drawer .bad{color:var(--loss)}
.drawer .restate td{color:var(--muted);font-style:italic}
/* A FIXED label column. `auto` let "Competition or tour" set the width, which
   then squeezed every value on every row of the list into two lines. */
.drawer dl{margin:0;display:grid;grid-template-columns:112px 1fr;gap:3px 10px}
.drawer dt{color:var(--muted);font-size:10.5px;line-height:1.35}
.drawer dd{margin:0;min-width:0;overflow-wrap:anywhere}
.drawer .rt{color:var(--t-rank);font-size:10.5px}
.drawer .none{color:var(--muted);font-style:italic;margin:0}
.dnote{margin:6px 0 0;font-size:10.5px;color:var(--muted);line-height:1.45}
.dnotes{margin:0;padding-left:16px;line-height:1.5}
.dnotes li{margin:1px 0}
.copylink{font-size:10.5px}

/* ==========================================================================
   TERMINAL THEME — the rest of the site
   The base stylesheet was written for one light theme, so a lot of colour is
   spelled out literally (#fff panels, #4a5768 greys) and --navy does double
   duty as both "dark background" and "emphasis text". In the terminal theme
   --navy IS the background, so every place it was used as TEXT goes invisible.
   These rules fix both classes of problem. They live at the end so they win on
   source order without needing !important.
   ========================================================================== */

/* --- 1. things that used --navy / --navy-2 as text --- */
[data-theme="terminal"] .linkbtn,
[data-theme="terminal"] .ghostbtn,
[data-theme="terminal"] .chips button:hover,
[data-theme="terminal"] .tm .teamcell a:hover,
[data-theme="terminal"] .h2h .teamcell a:hover,
[data-theme="terminal"] .mv.new{color:var(--t-accent)}
[data-theme="terminal"] .fgroup h3,
[data-theme="terminal"] .filters-head h2{color:var(--t-accent)}
[data-theme="terminal"] .asat-date,
[data-theme="terminal"] .no1,
[data-theme="terminal"] .tm .pos{color:var(--t-score)}
[data-theme="terminal"] .tablehead>div:hover{color:var(--ink);background:#1c222c}
[data-theme="terminal"] .tablehead>div.sorted{color:var(--t-accent)}
[data-theme="terminal"] .playbtn{background:#243449;border-color:#33455e;color:#cfe3ff}
[data-theme="terminal"] .playbtn:hover{background:#2d4159}
[data-theme="terminal"] .spinner{border-color:var(--line);border-top-color:var(--t-accent)}
[data-theme="terminal"] select:focus,
[data-theme="terminal"] input:focus{outline-color:#2d4a6b;border-color:var(--t-accent)}
[data-theme="terminal"] .chips button:hover,
[data-theme="terminal"] .ghostbtn:hover{border-color:var(--t-accent)}

/* --- 2. surfaces that were literally white or near-white --- */
[data-theme="terminal"] .tablewrap,
[data-theme="terminal"] .h2h .tablewrap,
[data-theme="terminal"] .topline .card,
[data-theme="terminal"] .splitcard{background:var(--panel)}
[data-theme="terminal"] .trow:hover,
[data-theme="terminal"] .h2h .trow:hover,
[data-theme="terminal"] .sc .trow:hover{background:#161b22}
[data-theme="terminal"] .sc .trow.flip{background:#141a22}
[data-theme="terminal"] .sc .trow.flip:hover{background:#1a212b}
[data-theme="terminal"] .segbtns{background:#0d1117;border-color:var(--line)}
[data-theme="terminal"] .segbtns button{
  background:#0d1117;color:var(--muted);border-right-color:var(--line);
}
[data-theme="terminal"] .segbtns button:hover{background:#1a212b;color:var(--ink)}
[data-theme="terminal"] .chips button,
[data-theme="terminal"] .ghostbtn{background:#0d1117;color:var(--muted)}
[data-theme="terminal"] .segbtns button.on,
[data-theme="terminal"] .chips button.on{
  background:#243449;border-color:#33455e;color:#cfe3ff;font-weight:600;
}
[data-theme="terminal"] .rulenote{background:#131922;color:var(--t-meta)}
[data-theme="terminal"] .rulebar{background:var(--panel)}
[data-theme="terminal"] .dataerror code{background:#1c222c}
[data-theme="terminal"] .slider::-webkit-slider-thumb{background:#0d1117;border-color:#9cdcfe}
[data-theme="terminal"] .slider::-moz-range-thumb{background:#0d1117;border-color:#9cdcfe}
[data-theme="terminal"] .slider{background:linear-gradient(90deg,#233045,#9cdcfe)}

/* --- 3. the hardcoded greys --- */
[data-theme="terminal"] .empty .sub,
[data-theme="terminal"] .nodata,
[data-theme="terminal"] .chartnote,
[data-theme="terminal"] .mspan,
[data-theme="terminal"] .note,
[data-theme="terminal"] .sparse,
[data-theme="terminal"] .lastmatches li span,
[data-theme="terminal"] .tm .lastp,
[data-theme="terminal"] .h2h .rk,
[data-theme="terminal"] .sc .bd,
[data-theme="terminal"] .h2h .date,
[data-theme="terminal"] .sc .date,
[data-theme="terminal"] .intro p{color:var(--t-meta)}
[data-theme="terminal"] .mv.same{color:#4a5462}

/* --- 4. the amber and blue call-outs --- */
[data-theme="terminal"] .tag.rwc,
[data-theme="terminal"] .tm .lastp .tag{
  background:#2b2517;border-color:#5a4a26;color:#d3ad4a;
}
[data-theme="terminal"] .intro .warn{background:#2b2517;border-color:#5a4a26;color:#d8c188}
[data-theme="terminal"] .eraref{background:#0b0f14}
[data-theme="terminal"] .eraref table.mini tr.on td{background:#1c2432}
[data-theme="terminal"] .h2h .score.restated,
[data-theme="terminal"] .sc .restated,
[data-theme="terminal"] .sc .score.restated,
[data-theme="terminal"] .sc .flipmark{color:#7fb4e8}
[data-theme="terminal"] .h2hhead .side.a .swins{color:#6aa9e8}
[data-theme="terminal"] .leadbar .a{background:#3b6fa8}
[data-theme="terminal"] .h2hhead .side.b .swins{color:#e0656b}
[data-theme="terminal"] .leadbar .b{background:#a2434a}
[data-theme="terminal"] .leadbar .d{background:#39414d}
[data-theme="terminal"] .tm .lastp.dormant{color:#c08a4f}

/* --- 5. the SVG chart --- */
[data-theme="terminal"] .chartbox .grid{stroke:#1e242e}
[data-theme="terminal"] .chartbox .lead{stroke:#9cdcfe}
[data-theme="terminal"] .chartbox .cursor{fill:#0d1117;stroke:#9cdcfe}
[data-theme="terminal"] .chartbox .axis{fill:var(--t-meta)}
[data-theme="terminal"] .chartbox .endlabel{fill:var(--ink)}
[data-theme="terminal"] .tip{background:#1c222c;border:1px solid var(--line)}
[data-theme="terminal"] .tip .muted{color:var(--t-meta)}

/* --- 6. the two-line header needs the two-line padding --- */
.tablehead.fx>div{padding:0 6px;line-height:1.25}
.tablehead.fx>div[data-key]{cursor:pointer}
.tablehead.fx>div:not([data-key]){cursor:default}
.tablehead.fx>div:not([data-key]):hover{background:none;color:inherit}
.tablehead.fx .c-when,.tablehead.fx .c-venue,
.tablehead.fx .c-comp,.tablehead.fx .c-crowd{
  font-size:9px;color:var(--muted);opacity:.8;
}

/* ==========================================================================
   PHONES
   At 390px the desktop fixture row is 592px wide with a hard minimum, so the
   whole document rendered 743px against a 390px viewport - the page scrolled
   sideways and the header stats were clipped mid-number. Two rules matter
   here and both are easy to break later:

   1. --row-h and --drawer-h are read by app.js, which computes every scroll
      offset arithmetically. Change one without the other and rows silently
      overlap. app.js re-reads them on resize, so changing them HERE is safe
      and changing them in JS is not.
   2. The fixture becomes three lines instead of two: date, then the fixture
      itself, then venue and competition. The mirrored layout survives - it
      just gets its own line - and the ranks drop, because "(207)" costs
      40px that the team names need more.
   ========================================================================== */
@media (max-width:700px){
  :root{ --row-h:52px; }

  /* the top bar: let the stats wrap under the title instead of running off */
  .topbar{flex-wrap:wrap;gap:4px 14px;padding:10px 14px}
  .buildinfo{text-align:left;white-space:normal;font-size:10.5px;line-height:1.35}
  /* On a phone the whole point is to reach the table. The hero keeps its
     words and loses its air. */
  .hero{padding:12px 14px;display:block}
  .hero h2{max-width:none;font-size:16px}
  .hero-sub{font-size:11px}
  .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px;padding:8px 0 0;
    border-left:0;border-top:1px solid var(--line-soft);max-width:none}
  .hero-stats b{font-size:18px}
  /* the source filename is three words of noise on a 390px screen; the build
     timestamp beside it is not, so only the filename goes */
  .buildinfo .fromwb{display:none}
  .topbar h1{font-size:17px}
  .mainnav{gap:12px;flex-wrap:wrap}

  /* Filters collapse behind a button. Previously you scrolled ~1,700px of
     filter panel before the first match appeared, which on a phone reads as
     an empty site. */
  main{grid-template-columns:1fr;height:auto}
  .filters{
    border-right:0;border-bottom:1px solid var(--line);
    max-height:70vh;overflow-y:auto;
  }
  body:not(.filters-open) .filters{display:none}
  .filterbar{
    display:flex;align-items:center;gap:10px;
    padding:8px 14px;background:var(--panel);
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;
  }
  .filterbar .ghostbtn{font-size:13px;padding:7px 14px}
  .filterbar .fcount{font-size:12px;color:var(--muted)}
  .tablewrap{flex:0 0 auto;height:66vh}   /* definite height - see above */
  /* The aggregates are the best thing on this page on a desktop and the
     worst thing on a phone - they pushed the first match roughly a screen
     and a half down. Collapsed by default, one tap away. The match count
     still shows on the bar below, so nothing is lost silently. */
  body:not(.stats-open) .analysis{display:none}
  .analysis{padding:10px 14px}
  .cards{grid-template-columns:1fr;gap:8px}
  .card.wide{grid-column:span 1}
  /* the played/won/drawn/lost row clipped its last two figures at this width */
  .wdl{flex-wrap:wrap;gap:6px 16px}
  .wdl b{font-size:17px}
  .records li{font-size:12px}
  .records b{text-align:right;min-width:0}
  .tablebar{padding:8px 14px;gap:8px;flex-wrap:wrap}

  /* ---- the phone row: date on top, fixture and score together below ----
     The brief for the desktop row was "stop the eye travelling"; on a phone
     the same rule means the fixture and the score must never be split across
     lines. So: line 1 is the date and the expander, line 2 is the whole
     fixture, and everything else - status chips included - moves into the
     expander, where there is room to say it in words. */
  .chipbar{padding:7px 14px}
  /* Optional columns do not render on a phone and the row height is fixed by
     the rules below, so both controls would be switches that do nothing. */
  .colmenu,.densityswitch{display:none}
  .tablebar-right{gap:8px}
  .tablenote{padding:5px 14px;font-size:10.5px}
  /* The chips are hidden at this width (they live in the expander instead),
     so the sentence that points at them would be pointing at nothing. */
  .tablenote .deskonly{display:none}
  .tablenote .phoneonly{display:inline}
  .tablehead.fx,.trow.fx{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) 34px !important;
    grid-template-rows:16px 1fr;
  }
  .trow.fx>div{padding:0 4px}
  .fx .c-date {grid-area:1/1/2/4;font-size:11px}
  /* the +/- spans both lines, which makes it a 52px tap target */
  .fx .c-exp  {grid-area:1/4/3/5;display:flex;align-items:center;
               justify-content:center}
  .fx .c-home,.fx .c-opp{grid-area:2/1/3/2;justify-content:flex-end}
  .fx .c-sc   {grid-area:2/2/3/3;font-size:13px;padding:0 6px}
  .fx .c-away {grid-area:2/3/3/4;justify-content:flex-start}
  .fx .c-res  {grid-area:2/3/3/4;justify-content:flex-start;font-size:10px}
  .fx .c-home .rk,.fx .c-away .rk{display:none}   /* names need the room */
  /* Everything below is desktop-only detail; on a phone it lives in the
     expander instead of being crushed into 390px. */
  .fx .c-status,.fx .c-rank,.fx .c-venue,.fx .c-comp,.fx .c-crowd,
  .fx .c-loc,.fx .c-filler{display:none}
  .tablehead.fx .c-home,.tablehead.fx .c-away,.tablehead.fx .c-sc,
  .tablehead.fx .c-opp{font-size:8.5px}

  /* ---- the drawer stacks, and its table scrolls inside itself ---- */
  .drawer{
    grid-template-columns:1fr;gap:10px 0;padding:8px 12px;
    overflow-y:auto;
  }
  .drawer table{min-width:280px}
  .drawer dl{grid-template-columns:76px 1fr}
}

/* The filter toggle is a phone and tablet control. Hiding it must be scoped to wide
   screens: a bare `.filterbar{display:none}` after the media query has equal
   specificity and later source order, so it wins everywhere and the button
   vanishes on the phones it exists for. Also make sure a stale
   body.filters-open from a narrow window cannot hide the panel once the
   window is widened again. */
@media (min-width:861px){
  .filterbar{display:none}
  body.filters-open .filters{display:block}
}

/* ==========================================================================
   PHONES - THE OTHER THREE PAGES
   Rankings, Head to Head and Score Normalisation each carry a table that is
   genuinely wide (Score Normalisation is 966px of columns), so there is no
   honest way to squeeze them into 390px. Instead the WIDE TABLE scrolls
   sideways inside its own box and the PAGE stops scrolling sideways.

   The header row and the body are SIBLINGS, not nested, so the horizontal
   scroller has to be their shared parent - otherwise the header stays put
   while the rows move and the columns stop lining up. That is why the rule
   below targets .tmtable / .sctable / the h2h sections rather than
   .tablewrap, which is what you would reach for first.

   .tablewrap keeps overflow-y for itself: its clientHeight is what the
   virtual table measures, and it must stay bounded.
   ========================================================================== */
@media (max-width:700px){
  /* the filter/rule controls above each table: stop 190px-min selects and a
     582px row of segmented buttons from setting the page width */
  .rulebar{flex-direction:column;align-items:stretch;gap:10px;padding:10px 14px}
  .rule{min-width:0}
  .rule select,.rule input[type=text]{width:100%;min-width:0}
  .segbtns.wrap,.rule .segbtns{flex-wrap:wrap}
  .rule .segbtns button{flex:1 1 auto;white-space:normal;font-size:11.5px}
  .rulenote{padding:8px 14px;font-size:11.5px}
  .pickbar{flex-direction:column;align-items:stretch;gap:10px;padding:10px 14px}
  .pickbar select,.pickbar input[type=text]{width:100%;min-width:0}

  /* the wide tables */
  .tmtable,.sctable{overflow-x:auto;overflow-y:hidden}
  .tmtable .tablehead,.tmtable .tablewrap,
  .sctable .tablehead,.sctable .tablewrap{min-width:620px}
  .h2h .tablehead,.h2h .tablewrap{min-width:760px}
  .h2h #rivalry,.h2h #allopp{overflow-x:auto}
  .tmtable .tablewrap,.sctable .tablewrap{height:60vh}

  /* the rest of the h2h page: cards and the chart */
  .h2hhead{grid-template-columns:1fr;gap:8px;text-align:center}
  .chartbox{overflow-x:auto}
  .splitcards,.cards.sccards{grid-template-columns:1fr}
  .scbody{grid-template-columns:1fr;height:auto}
  .eraref{border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .intro{padding:10px 14px}
  .sliderticks i{font-size:9px}
  .asat-date{font-size:21px}
}

/* A filter that cannot do anything yet should look like it. The home/away
   control only bites once a team is chosen - see renderAnalysis. */
.f.seg.disabled{opacity:1}
.f.seg.disabled .segbtns{opacity:.55}
.f.seg.disabled .segbtns button{cursor:not-allowed}
.f.seg.disabled .segbtns button:hover{background:none}

/* Forces a line break inside a chip row. Kept because it is generic and
   costs nothing; the Amateur/Professional chips it was written for were
   removed on 28 Aug - the professional era begins on 26 August 1995 and this
   filter works in whole years, so neither chip could be made exactly right
   and the owner would rather have no chip than a chip that quietly includes
   the wrong matches. */
.chips .chipbreak{flex-basis:100%;height:0;margin:0}

/* Rankings only: a team that ranks here but is not a World Rugby member.
   Deliberately small - it marks a position without shouting, and it appears
   on the Rankings page alone. The Super Filter stays clean. */
.ownflag{
  display:inline-block; margin-left:.45em; color:var(--accent,#c08a2e);
  font-size:1.1em; line-height:1; cursor:help; vertical-align:baseline;
}

/* About: a readable narrative using the archive's existing theme tokens. */
main.about{display:block;height:auto;min-height:0;max-width:1080px;margin:0 auto;padding:36px 24px 24px}
.about p{max-width:78ch;line-height:1.85;margin:14px 0}
.about h2{font-size:25px;color:var(--t-team);line-height:1.3}
.about-intro h2{font-size:clamp(27px,4vw,42px);color:var(--t-score)}
.about .about-kicker{color:var(--t-accent);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
.about-stats{display:flex;flex-wrap:wrap;gap:28px 48px;border-block:1px solid var(--line);padding:22px 0;margin-top:26px}
.about-stats strong{display:block;font-size:26px;color:var(--t-score)}
.about-stats span,.about .about-date,.about-reference,.about-footer{font-size:12px;color:var(--muted)}
.about a{color:var(--t-team);text-underline-offset:4px}
.about a:hover{color:var(--t-accent)}
.about a:focus-visible{outline:2px solid var(--t-accent);outline-offset:4px}
.about-contents{display:flex;flex-wrap:wrap;gap:12px 22px;padding:18px 0}
.about section{border-top:1px solid var(--line);padding:30px 0;scroll-margin-top:20px}
.about-tools{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.about-tools article{border:1px solid var(--line);border-radius:5px;padding:18px;background:var(--panel)}
.about-tools h3{font-size:15px}.about-tools p{margin-bottom:0}
.about-start{display:inline-block;margin-top:12px}.about-footer{border-top:1px solid var(--line);padding:20px 0}
@media(max-width:700px){main.about{padding:24px 16px}.about-tools{grid-template-columns:1fr}.about h2{font-size:23px}.about-intro h2{font-size:29px}}

.report-page{max-width:820px!important}.report-page form{max-width:700px}
.report-page fieldset{border:1px solid var(--line);border-radius:5px;padding:16px;margin:24px 0}
.report-page legend{padding:0 8px;color:var(--t-team)}
.report-page label{display:block;margin:18px 0 6px;font-weight:600}
.report-page label span{font-weight:400;color:var(--muted)}
.report-page input,.report-page select,.report-page textarea{width:100%;max-width:100%;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:10px}
.report-page textarea{resize:vertical}.report-page input[readonly]{color:var(--muted)}
.report-page .report-privacy{font-size:12px}.report-page button[type=submit]{font:inherit;padding:10px 18px;color:var(--t-team);background:var(--panel);border:1px solid var(--line);border-radius:4px;cursor:pointer}
.report-page button:disabled{opacity:.6;cursor:default}.report-page :focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}
.report-link{color:var(--t-team)}

/* Consistent disclosure controls with an explicit action and open state. */
.tableguide>summary,.tmoptions>summary,.tmextras>summary,.tmcontext>summary,.rank-insights>summary,.insight-detail>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:5px 12px!important;color:var(--t-team)!important;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--t-accent);border-radius:5px;font-weight:600;font-size:12px!important;line-height:18px;min-height:30px}
.tableguide>summary::-webkit-details-marker,.tmoptions>summary::-webkit-details-marker,.tmextras>summary::-webkit-details-marker,.tmcontext>summary::-webkit-details-marker,.rank-insights>summary::-webkit-details-marker,.insight-detail>summary::-webkit-details-marker{display:none}
.tableguide>summary::before,.tmoptions>summary::before,.tmextras>summary::before,.tmcontext>summary::before,.rank-insights>summary::before,.insight-detail>summary::before{content:'+';font-size:18px;color:var(--t-accent)}
details[open].tableguide>summary::before,details[open].tmoptions>summary::before,details[open].tmextras>summary::before,details[open].tmcontext>summary::before,details[open].rank-insights>summary::before,details[open].insight-detail>summary::before{content:'−'}
.tableguide>summary::after,.tmoptions>summary::after,.tmextras>summary::after,.tmcontext>summary::after,.rank-insights>summary::after,.insight-detail>summary::after{content:'Expand';margin-left:auto;font-size:10px;color:var(--muted);font-weight:400}
details[open]>summary::after{content:'Collapse'!important}
summary:focus-visible{outline:2px solid var(--t-accent);outline-offset:-2px}summary:hover{filter:brightness(1.12)}
.rank-insights{margin:10px 14px}.insight-content{padding:14px;border:1px solid var(--line);border-top:0}.insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.insight-grid>section{min-width:0}.insight-scroll{max-height:280px;overflow:auto;border:1px solid var(--line);margin:8px 0}.insight-scroll table{width:100%;border-collapse:collapse;font-size:11px;white-space:nowrap}.insight-scroll td,.insight-scroll th{padding:8px;text-align:left;border-bottom:1px solid var(--line)}.insight-scroll th{position:sticky;top:0;background:var(--panel);z-index:1}.insight-scroll a,.insight-content button{color:var(--t-team)}.insight-content button{font:inherit;background:transparent;border:1px solid var(--line);border-radius:4px;padding:4px 8px;cursor:pointer}.insight-detail{margin:10px 0}.insight-content h3{font-size:14px;margin:10px 0}.insight-content p{font-size:11px;color:var(--muted)}.streak-explanation{grid-column:1/-1}.streak-explanation p{font-size:11px;color:var(--muted)}
@media(max-width:800px){.insight-grid{grid-template-columns:1fr}}
/* Compact insights: primary sections disclose; supporting links stay quiet. */
.f>label,.ranking-filter>label{display:block;font-size:11px;color:var(--muted);margin:10px 0 4px}
#rank-custom{display:flex;gap:8px;margin-top:8px}#rank-custom[hidden]{display:none}#rank-custom label{min-width:0;flex:1;font-size:11px;color:var(--muted)}
.quiet-detail{margin:10px 0;font-size:11px}.quiet-detail>summary{display:list-item;cursor:pointer;color:var(--t-team);padding:3px 0;font-weight:500}.quiet-detail>summary::after{content:none!important}.quiet-detail p{color:var(--muted);line-height:1.6;max-width:85ch}
.streak-headline{font-size:17px;font-weight:650;color:var(--t-team)}.streak-composition{font-size:12px;margin:6px 0;color:var(--muted)}
.insight-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.insight-content .insight-scope{font-size:12px;color:var(--ink);margin:0}.insight-coverage{margin:12px 0!important}
.insight-switch{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}.insight-switch button{font:inherit;font-size:11px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--muted);padding:8px 12px;cursor:pointer}.insight-switch button[aria-pressed="true"]{background:var(--line);color:var(--t-team);font-weight:650}
.rank-extremes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 18px}.rank-extreme{min-width:0;border:1px solid var(--line);border-radius:5px;padding:12px}.rank-extreme:only-child{grid-column:1/-1}.rank-value{font-size:23px;font-weight:650;color:var(--t-team)}.rank-value span{font-size:12px;color:var(--muted);font-weight:400}
.rank-summary{max-height:none}.rank-summary th[scope="row"]{position:static;background:transparent}.insight-content .text-action{border:0;padding:4px 0;color:var(--t-team);font-weight:500}.text-action:hover{text-decoration:underline}.insight-footnote{margin:8px 0}.insight-scroll th{white-space:nowrap}
@media(max-width:800px){.rank-extremes{grid-template-columns:1fr}.insight-content{padding:12px}.insight-toolbar{align-items:flex-start}.insight-switch button{padding:9px}.rank-value{font-size:21px}}

#milestone-note{margin:8px 4px 10px;line-height:1.5}#milestone-note a{color:var(--t-team)}
@media(pointer:coarse){.tableguide>summary,.tmoptions>summary,.tmextras>summary,.tmcontext>summary,.rank-insights>summary{min-height:40px}}
.h2h #opphead>button{font:inherit;color:inherit;background:transparent;border:0;text-align:left;padding:7px 5px;cursor:pointer;white-space:nowrap;min-width:0}.h2h #opphead>button.num{text-align:right}.h2h #opphead>button:hover,.h2h #opphead>button.sorted{color:var(--t-team);background:var(--line-soft)}.h2h #opphead>button:focus-visible{outline:2px solid var(--t-accent);outline-offset:-2px}
.competition-toggle{border:0;background:transparent;color:var(--t-team);font:inherit;font-weight:600;text-align:left;cursor:pointer;padding:3px 0}.competition-toggle:hover{text-decoration:underline}.competition-toggle:focus-visible{outline:2px solid var(--t-accent)}.competition-years{max-height:300px;overflow:auto;padding:5px 8px;border-left:2px solid var(--line)}.competition-editions>td{padding:5px 0 10px!important}.competition-years .mini{width:100%}.competition-years td:first-child{white-space:normal}.competition-total td:first-child{white-space:normal}
.rank-record-table{width:100%;border-collapse:collapse;font-size:11px;margin:8px 0}.rank-record-table th,.rank-record-table td{text-align:left;padding:6px 5px;border-bottom:1px solid var(--line)}.rank-record-table a{color:var(--t-team);text-decoration:none}.rank-record-table a:hover{text-decoration:underline}.rank-record-table a span{display:block;font-size:10px;margin-top:3px;color:var(--muted)}#ranking-records .note{font-size:10px;line-height:1.5}
@media(min-width:1600px){#ranking-records{grid-column:span 3}}
.opponent-record{width:100%;border-collapse:collapse;margin:12px 0 6px;font-size:11px;table-layout:fixed}.opponent-record th,.opponent-record td{text-align:right;padding:6px 3px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}.opponent-record th{font-size:10px;color:var(--muted);font-weight:500}.opponent-record th:first-child,.opponent-record td:first-child{text-align:left}.quiet-detail[open]>summary::after{content:none!important}
/* Give every collapse action separation and a consistent lime accent. */
:root{--collapse-color:#527d0e}[data-theme="terminal"]{--collapse-color:#b8f34a}
details[open]>summary::after{color:var(--collapse-color);padding-inline-start:12px;font-size:10px;font-weight:500}
.quiet-detail[open]>summary::after{content:'Collapse'!important}
.collapse-action{color:var(--collapse-color)!important}

/* Rugby stitching and distinct, compact navigation tabs. */
.topbar .brand{min-width:0}
.topbar h1{display:flex;align-items:center;gap:8px}
.brand-ball{width:36px;height:29px;flex:none}
.mainnav{gap:6px;flex-wrap:wrap;margin-top:8px}
.mainnav a{padding:5px 10px;border:1px solid var(--line);border-bottom:2px solid var(--line);border-radius:4px;background:var(--panel);white-space:nowrap}
.mainnav a:hover{background:var(--line-soft);border-color:var(--muted)}
.mainnav a.here{background:var(--line-soft);border-bottom-color:var(--t-accent);color:var(--ink)}
.mainnav a:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px}
@media(max-width:600px){.mainnav{gap:5px}.mainnav a{padding:6px 8px;font-size:12px}}

/* Expand and Collapse share the same action colour. */
details>summary::after,#expandall{color:var(--collapse-color)!important}

/* Filtered charts share the archive palette and replace the dense table. */
.charts-mode #analysis,.charts-mode #hero,.charts-mode #rank-insights,.charts-mode .matchtable,.charts-mode .tableguide,.charts-mode #statstoggle,.charts-mode #viewswitch,.charts-mode .densityswitch,.charts-mode .colmenu,.charts-mode #expandall{display:none!important}
.result-view{flex-shrink:0}.tablebar .result-view{margin-right:auto;margin-left:12px}
#filter-charts{padding:16px;min-width:0;--chart-for:var(--t-team);--chart-against:var(--loss)}
#filter-charts h2{font-size:15px;margin:16px 0 8px;color:var(--ink)}
.chart-summary{margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink)}
.chart-controls{display:flex;flex-wrap:wrap;gap:12px}.chart-controls label,#chart-inspect>label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:11px}
.chart-controls select,#chart-period{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:7px 9px;max-width:100%}
.chart-note,.chart-help p{font-size:11px;color:var(--muted);line-height:1.6}.chart-note{margin:10px 0}
.chart-legend{display:flex;gap:18px;font-size:11px;color:var(--muted);min-height:16px}.chart-legend span{display:flex;align-items:center;gap:6px}.chart-key{display:inline-block;width:16px;height:2px;background:var(--chart-for)}.chart-key.against{background:var(--chart-against)}
#chart-canvas svg{display:block;width:100%;height:auto;max-height:380px;overflow:visible}.chart-grid{stroke:var(--line-soft);stroke-width:1}.chart-axis{font:10px var(--mono);fill:var(--muted)}.chart-bar{fill:var(--chart-for);opacity:.6}.chart-line{fill:none;stroke:var(--chart-for);stroke-width:2}.chart-dot{fill:var(--chart-for)}.chart-line.against{stroke:var(--chart-against);stroke-dasharray:6 3}.chart-dot.against{fill:var(--chart-against)}.chart-hit{fill:transparent;cursor:pointer}.chart-hit:hover{fill:var(--t-team);fill-opacity:.08}
#chart-inspect{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px;margin-top:8px}#chart-detail{flex:1;min-width:180px;font-size:12px;color:var(--ink);line-height:1.7}#chart-matches{color:var(--t-team)}.chart-help{margin-top:20px}
@media(max-width:700px){.tablebar{flex-wrap:wrap}.tablebar .result-view{margin-left:0}#filter-charts{padding:12px}#chart-canvas svg{min-height:230px}.chart-controls label:first-child{flex:1}.chart-controls select{width:100%}#chart-inspect>label{width:100%}#chart-detail{min-width:0;flex-basis:100%}}

/* Shared chart conventions: solid observations, dotted missing-period bridges. */
.chart-line.against{stroke-dasharray:none}.chart-line.chart-gap{stroke-dasharray:2 5;opacity:.5}.chart-key.gap{height:0;background:none;border-top:2px dotted var(--muted)}.chart-legend{flex-wrap:wrap;row-gap:6px}.chart-bar.won,.chart-key.won{fill:var(--win);background:var(--win)}.chart-bar.drawn,.chart-key.drawn{fill:var(--draw);background:var(--draw)}.chart-bar.against{fill:var(--chart-against)}.chart-bar.won,.chart-bar.drawn,.chart-bar.against{opacity:.8}

.chart-controls [hidden]{display:none!important}.chart-key{flex-shrink:0}@media(max-width:700px){.chart-controls label:first-child{flex:1 0 100%}#chart-source-control{flex:1;min-width:190px}}

/* Era profiles share the rivalry page, with one aligned comparison. */
#era-comparison-controls,#era-comparison{padding:16px;border-bottom:1px solid var(--line)}
#era-comparison-controls .segbtns{display:inline-flex}.era-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.era-date-grid fieldset{border:1px solid var(--line);border-radius:4px;display:flex;gap:16px;padding:12px;min-width:0}.era-date-grid legend{color:var(--t-team);padding:0 6px}.era-date-grid label{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;color:var(--muted)}.era-date-grid input{width:100%;min-width:0;box-sizing:border-box;background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:8px;font:inherit;color-scheme:dark}.era-options{display:flex;flex-wrap:wrap;gap:20px;margin-top:14px}.era-options label{display:flex;align-items:center;gap:8px}.era-table{width:100%;border-collapse:collapse;table-layout:fixed}.era-table th,.era-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;overflow-wrap:anywhere}.era-table th:first-child{width:28%}.era-table thead th{background:var(--panel)}.era-table .era-priority td{font-size:20px;color:var(--t-team);font-weight:bold}.era-table .ghostbtn{display:inline-block}.era-table-wrap{overflow:auto}#era-comparison h2{font-size:16px}#era-comparison .note{line-height:1.6}html[data-theme="light"] .era-date-grid input{color-scheme:light}
@media(max-width:700px){.era-date-grid{grid-template-columns:1fr}.era-table th,.era-table td{padding:8px 5px;font-size:11px}.era-table .era-priority td{font-size:16px}#era-comparison-controls,#era-comparison{padding:12px}.era-table th:first-child{width:26%}}

.era-table a{color:var(--t-team)}.era-table .ghostbtn{white-space:normal;max-width:100%;box-sizing:border-box}@media(max-width:700px){.h2h .pickbar .rule.grow:empty{display:none}}

/* Compact, consistently sized profile rows with directional comparisons. */
.era-table th,.era-table td,.era-table .era-priority td{font-size:12px;padding:6px 10px;line-height:1.4}.era-table td{font-weight:normal}.era-table .era-better,.era-table .era-better a,.era-better{color:var(--win)}.era-table .era-worse,.era-table .era-worse a,.era-worse{color:var(--loss)}.meeting-dates{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-top:12px}.meeting-dates label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}.meeting-dates input{font:inherit;background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:6px;color-scheme:dark}.meeting-dates span{font-size:11px;color:var(--muted)}html[data-theme="light"] .meeting-dates input{color-scheme:light}@media(max-width:700px){.era-table th,.era-table td,.era-table .era-priority td{font-size:11px;padding:6px 5px}}

/* Compact identity: keep the approved wordmark alongside existing navigation. */
.topbar{align-items:center}
.topbar .brand{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:20px;align-items:center}
.topbar .site-brand{grid-column:1;grid-row:1 / 3;margin:0;line-height:0}
.site-brand a{display:block;border-radius:4px}
.site-brand a:focus-visible{outline:2px solid var(--t-accent);outline-offset:4px}
.brand-logo{display:block;width:200px;max-width:100%;height:auto}
.topbar .mainnav{grid-column:2;grid-row:1;margin-top:0}
.topbar .themeswitch{grid-column:2;grid-row:2;justify-self:start;margin:4px 0 0}
@media(max-width:1100px){
 .topbar{flex-wrap:wrap;gap:8px 16px}
 .topbar .buildinfo{white-space:normal;text-align:left}
}
@media(max-width:650px){
 .topbar .brand{grid-template-columns:minmax(0,1fr);gap:8px;width:100%}
 .topbar .site-brand{grid-column:1;grid-row:1}
 .brand-logo{width:180px}
 .topbar .mainnav{grid-column:1;grid-row:2}
 .topbar .themeswitch{grid-column:1;grid-row:3;margin:0}
}

html[data-theme='light'] .site-brand a{background:#0b1117;border-radius:6px;width:fit-content}

/* The About masthead picks up the wordmark's hard-edged navy depth. */
[data-theme='terminal'] .about-intro h2{text-shadow:2px 2px 0 #173b60}

/* Self-hosted display lettering keeps the arcade identity consistent on every device. */
@font-face{
  font-family:'Pixelify Sans';
  src:url('fonts/pixelify-sans.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:optional;
}
:root{--display:'Pixelify Sans',var(--mono)}
button,input,select,textarea{font-family:var(--mono)}
h1,h2,.mainnav a,.about-stats strong{font-family:var(--display);font-weight:600;letter-spacing:0}
.mainnav a{font-size:15px;line-height:1.3}
.about-intro h2{font-size:clamp(30px,4vw,46px);line-height:1.2;font-weight:600}
.about h2:not(.about-intro h2){font-size:28px}
.about-stats strong{font-size:30px}
@media(max-width:600px){.mainnav a{font-size:14px}.about h2:not(.about-intro h2){font-size:24px}}

/* Arcade lettering for controls and headline stats; fixture tables and supporting
   prose retain the compact monospace face for scanning long records. */
select,button,input,textarea,
.f>span,.f>label,.ranking-filter>label,.rule>span,.fgroup h3,
.asat-label,.card-label,.hero-stats span,
details>summary,.about-contents a,
.big,.no1,.asat-date,.hero-stats b,.wdl b,.rank-value,.streak-headline,
.h2hhead .sname,.h2hhead .swins,.mtotal b{
  font-family:var(--display);letter-spacing:0;
}
select,.f select,.rule select,.report-page select,.chart-controls select{
  font-family:var(--display);font-size:15px;
}
.about-contents a{font-size:15px}
.f>span,.f>label,.ranking-filter>label,.rule>span,.card-label,.asat-label{font-size:12px}
.hero-stats span{font-size:11px}
details>summary::after,.card-label .hint,.rank-value span{font-family:var(--mono)}

/* Compact 16-bit menu frames: native details retain mouse/keyboard semantics. */
:root{--menu-edge:#3473aa;--menu-shade:#244569;--menu-glint:#b8def7;--menu-fill:#edf5fc}
[data-theme="terminal"]{--menu-edge:#3b83bc;--menu-shade:#16314b;--menu-glint:#83d5ff;--menu-fill:#101e2d}
details:is(.tableguide,.tmoptions,.tmextras,.tmcontext,.rank-insights,.insight-detail,.quiet-detail){
  border:2px solid var(--menu-edge);border-radius:0;background:var(--panel);
  box-shadow:2px 2px 0 var(--menu-shade);min-width:0;
}
details:is(.tableguide,.tmoptions,.tmextras,.tmcontext,.rank-insights,.insight-detail,.quiet-detail)>summary{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;list-style:none;
  padding:7px 10px!important;min-height:36px;border:0;border-radius:0;
  box-shadow:inset 1px 1px 0 var(--menu-glint),inset -1px -1px 0 var(--menu-shade);
  background:var(--menu-fill);color:var(--t-team)!important;
  font-family:var(--display);font-size:13px!important;line-height:20px;cursor:pointer;
}
details>summary::-webkit-details-marker{display:none}
details:is(.tableguide,.tmoptions,.tmextras,.tmcontext,.rank-insights,.insight-detail,.quiet-detail)>summary::before{
  content:'';width:0;height:0;flex:0 0 auto;border-left:6px solid var(--t-accent);
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
details:is(.tableguide,.tmoptions,.tmextras,.tmcontext,.rank-insights,.insight-detail,.quiet-detail)[open]>summary::before{
  content:'';border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--t-accent);border-bottom:0;
}
details:is(.tableguide,.tmoptions,.tmextras,.tmcontext,.rank-insights,.insight-detail,.quiet-detail)>summary::after{
  content:'Expand'!important;margin-left:4px;padding-inline-start:0;
  font-family:var(--display);font-size:11px;line-height:20px;font-weight:500;
}
details:is(.tableguide,.tmoptions,.tmextras,.tmcontext,.rank-insights,.insight-detail,.quiet-detail)[open]>summary::after{content:'Collapse'!important}
details:is(.tableguide,.tmoptions,.tmextras,.tmcontext,.rank-insights,.insight-detail,.quiet-detail)[open]>summary{border-bottom:2px solid var(--menu-edge)}
details:is(.tableguide,.tmoptions,.tmextras,.tmcontext,.rank-insights,.insight-detail,.quiet-detail):hover,
details:is(.tableguide,.tmoptions,.tmextras,.tmcontext,.rank-insights,.insight-detail,.quiet-detail):focus-within{border-color:var(--t-accent)}
details>summary:hover{filter:none}
details>summary:focus-visible{outline:2px solid var(--t-accent);outline-offset:-4px}
.quiet-detail>p,.tmextras>p{margin:10px}
.quiet-detail>table,.quiet-detail>.insight-scroll{margin:10px;width:calc(100% - 20px)}
@media(pointer:coarse){details>summary{min-height:44px!important}}

/* Explicit control roles override older font:inherit shorthands. */
.chips button,.segbtns button,.segbtns.sm button,.ghostbtn,.linkbtn,
.insight-switch button,.insight-content button,.report-page button[type=submit]{
  font-family:var(--display);font-size:14px;line-height:1.35;letter-spacing:0;
}
/* Exact dates must have unambiguous digits at every viewport size. */
.asat-date{font-family:var(--mono);font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}
input[type=number],input[type=date],.years input{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Typography roles take precedence over component font shorthands. */
button,select{font-family:var(--display)!important;letter-spacing:0}
.tmsteps label,.meeting-dates label,.era-date-grid label,.era-date-grid legend{font-family:var(--display);font-size:14px}
.big,.wdl b,.hero-stats b,.about-stats strong,.rank-value,.streak-headline,
.h2hhead .swins,.mtotal b,.asat-date,.segbtns.speed button{
  font-family:var(--mono)!important;font-variant-numeric:tabular-nums;letter-spacing:0;
}
input,textarea{font-family:var(--mono)!important}

/* Heritage ball sprite and approved wordmark form one home-link identity. */
.topbar .brand{grid-template-columns:260px minmax(0,1fr)}
.site-brand a{display:flex;align-items:center;gap:4px;width:fit-content}
.brand-ball{display:block;width:56px;height:64px;object-fit:contain;flex:0 0 56px;image-rendering:pixelated}
.site-brand .brand-logo{flex:0 0 200px}
@media(max-width:650px){
 .topbar .brand{grid-template-columns:minmax(0,1fr)}
 .brand-ball{width:52px;height:60px;flex-basis:52px}
 .site-brand .brand-logo{flex-basis:180px}
}

/* One layered badge: the ball tucks behind the N, with lettering in front. */
.topbar .brand{grid-template-columns:242px minmax(0,1fr)}
/* Reserve the asynchronously populated archive-date slot. Otherwise its
   arrival steals width from the navigation and wraps links after first paint. */
.topbar .buildinfo{min-height:1.45em}
@media(min-width:1101px){
 .topbar{display:grid;grid-template-columns:minmax(0,1fr) 47ch}
}
.site-brand a{gap:0;isolation:isolate}
.brand-ball{position:relative;z-index:0;width:64px;height:68px;flex-basis:64px;margin-right:-22px;align-self:center}
.site-brand .brand-logo{position:relative;z-index:1}
@media(max-width:650px){
 .topbar .brand{grid-template-columns:minmax(0,1fr)}
 .brand-ball{width:60px;height:64px;flex-basis:60px}
}

/* Downsample the large source cleanly; nearest-neighbour magnifies edge noise. */
.brand-ball{image-rendering:auto}

/* Keyboard focus remains visible in both themes without changing resting layout. */
html body :is(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--t-accent);outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Light-theme helper copy must remain readable on white panels. */
html[data-theme="light"] :is(#m-span,#chart-note,.tm .lastp){color:var(--muted)}
/* Helper text remains readable; only inactive controls are dimmed. */
html[data-theme="light"] :is(.h2h .rk,.sc .bd,.lastmatches li span,.card-label .hint,#side-note,.chartnote){color:var(--muted)}
html[data-theme="light"] .chartbox .axis{fill:var(--muted)}
html[data-theme="light"] .tag.rwc{color:#735c19}
html[data-theme="light"]{--win:#246d4e;--draw:#725917}