/* FFMatrix tool-previews page. Loaded after site.css, which supplies the tokens, header, footer and shared parts. */
/* ===== Tool previews ===== */
/* Always hide: [hidden] must beat any display rule a component sets, so !important is deliberate here */
[hidden]{ display:none !important; }
html.js .tool-panel:not(.is-active){ display:none; }
html:not(.js) .tool-tabs-wrap{ display:none; }
html:not(.js) .tool-panel{ margin-bottom:2.5rem; }

.tools-intro{ padding-block:clamp(2.25rem,5vw,4rem) clamp(1.75rem,3vw,2.5rem); }
.tools-intro h1{ font-size:clamp(2.25rem,1.1rem + 4.6vw,4.5rem); line-height:.97; letter-spacing:-.04em; }
.tools-intro .lead{ margin-top:1.25rem; max-width:36rem; color:var(--ink-2); font-size:clamp(1.0625rem,1rem + .3vw,1.25rem); line-height:1.55; }
.meta-row{ margin-top:1.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; font-size:.9375rem; color:var(--ink-3); }
@media (max-width:34rem){ .meta-row > span[aria-hidden="true"]{ display:none; } }

.explorer{ padding-bottom:clamp(3rem,7vw,6rem); }
.explorer-grid{ display:grid; gap:1.5rem; align-items:start; }
@media (min-width:64rem){ .explorer-grid{ grid-template-columns:16.5rem minmax(0,1fr); gap:clamp(2rem,4vw,3.5rem); } }
.tool-tabs-wrap, .tp-col{ min-width:0; }
@media (min-width:64rem){ .tool-tabs-wrap{ position:sticky; top:5rem; } }

/* Tab list: a ruled list; the selected tool is a flat green block */
.tool-tabs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.25rem; border-top:2px solid var(--ink); }
@media (min-width:36rem){ .tool-tabs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:64rem){ .tool-tabs{ grid-template-columns:minmax(0,1fr); column-gap:0; } }
.tool-tab{ display:grid; grid-template-columns:minmax(0,1fr); align-items:start; width:100%; min-width:0; padding:.8125rem .75rem; text-align:left; border:0; border-bottom:1px solid var(--line-2); border-radius:0; background:transparent; color:var(--ink); transition:background-color .14s ease, color .14s ease, transform .12s var(--ease-out); }
.tool-tab:active{ transform:scale(.985); }
.tool-tab:focus-visible{ outline-offset:-3px; }
.tool-tab-txt{ display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; min-width:0; }
.tool-tab-name{ font:600 .9375rem/1.25 var(--display); letter-spacing:-.005em; }
.tool-tab-kind{ font:400 .8125rem/1.2 var(--body); color:var(--ink-3); }
@media (hover:hover) and (pointer:fine){ .tool-tab:not([aria-selected="true"]):hover{ background:var(--bg-2); } }
.tool-tab[aria-selected="true"]{ background:var(--green); border-bottom-color:var(--green); color:#fff; }
.tool-tab[aria-selected="true"] .tool-tab-kind{ color:#fff; }
.tool-tab[aria-selected="true"]:focus-visible{ outline-color:#fff; outline-offset:-4px; }

/* Panel */
.tool-panel{ min-width:0; border-top:2px solid var(--ink); }
@keyframes tp-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.tool-panel.is-entering{ animation:tp-in .22s var(--ease-out); }
.tp-head{ padding:1.25rem 0 1.5rem; }
.tp-title{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.375rem 1.5rem; }
.tp-h2{ font-size:clamp(1.625rem,1.2rem + 1.6vw,2.375rem); line-height:1.05; letter-spacing:-.03em; }
.tp-meta{ display:flex; flex-wrap:wrap; gap:.125rem 1rem; font-size:.875rem; color:var(--ink-3); }
.tp-desc{ margin-top:1rem; max-width:62ch; color:var(--ink-2); font-size:1.0625rem; line-height:1.6; }
.tp-stage{ padding:0; }
.tp-app{ min-width:0; padding:1rem; background:var(--card); border:1px solid var(--line-2); border-radius:2px; }
@media (max-width:419px){ .tp-app{ padding:.75rem; } }
@media (max-width:339px){ .tp-app{ padding:.625rem; } }
@media (min-width:40rem){ .tp-app{ padding:1.5rem; } }
.tp-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem 1.5rem; padding-top:1rem; }
.tp-prov{ max-width:60ch; font-size:.8125rem; line-height:1.5; color:var(--ink-3); }
.tp-nav{ display:flex; gap:.5rem; margin-left:auto; }
.tp-navbtn{ display:inline-flex; align-items:center; gap:.5rem; min-height:2.5rem; padding:0 .875rem; border:1px solid var(--ctl); border-radius:3px; background:transparent; color:var(--ink); font:600 .875rem/1 var(--display); transition:background-color .14s ease, transform .12s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .tp-navbtn:hover{ background:var(--bg-2); } }
.tp-navbtn:active{ transform:scale(.97); }
.tp-navbtn .lbl-short{ display:inline; }
.tp-navbtn .lbl-long{ display:none; }
@media (min-width:40rem){ .tp-navbtn .lbl-short{ display:none; } .tp-navbtn .lbl-long{ display:inline; } }

/* ===== Fake-UI building blocks =====
   Everything that imitates a control is aria-hidden and not focusable; the DATA in each mock
   is real text / real tables so screen readers get the substance. */
.mk-top{ display:flex; align-items:center; justify-content:space-between; gap:.625rem .875rem; flex-wrap:wrap; }
.mk-h3{ margin:1.25rem 0 .5rem; font:600 .9375rem/1.2 var(--display); letter-spacing:-.005em; color:var(--ink); }
.mk-title{ font:600 1.0625rem/1.2 var(--display); letter-spacing:-.01em; color:var(--ink); }
.mk-sub{ margin-top:.25rem; max-width:58ch; font-size:.8125rem; line-height:1.55; color:var(--ink-2); }
.mk-sub strong{ color:var(--ink); font-weight:600; }
.mk-note{ margin-top:.625rem; font-size:.75rem; line-height:1.5; color:var(--ink-3); }
.mk-label{ display:block; margin-bottom:.375rem; font-size:.8125rem; font-weight:600; color:var(--ink); }
.mk-line{ display:flex; gap:.5rem; align-items:stretch; max-width:26rem; }
.mk-input{ flex:1; min-width:0; padding:.5rem .75rem; font-size:.8125rem; color:var(--ink-3); background:var(--bg); border:1px solid var(--line-2); border-radius:2px; }
.mk-btn{ display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; padding:.5rem .875rem; font:600 .8125rem/1.2 var(--display); color:#fff; background:var(--green); border-radius:2px; }
.mk-seg{ display:inline-flex; overflow:hidden; border:1px solid var(--line-2); border-radius:2px; background:var(--bg); }
.mk-seg > span{ padding:.4375rem .75rem; font:600 .8125rem/1.2 var(--display); color:var(--ink-2); }
.mk-seg > .on{ background:var(--green); color:#fff; }
.mk-gw{ display:inline-flex; flex-wrap:wrap; overflow:hidden; border:1px solid var(--line-2); border-radius:2px; background:var(--bg); }
.mk-gw > span{ padding:.375rem .6875rem; font-size:.75rem; color:var(--ink); border-left:1px solid var(--line); }
.mk-gw > span:first-child{ border-left:0; }
@media (max-width:639px){ .mk-gw{ display:flex; flex-wrap:nowrap; width:100%; } .mk-gw > span{ flex:1 1 0; min-width:0; padding:.375rem 0; text-align:center; } }
.mk-gw > .on{ background:var(--green); color:#fff; border-left-color:rgba(255,255,255,.4); }
.mk-chip{ display:inline-flex; align-items:center; gap:.375rem; padding:.3125rem .625rem; border-radius:2px; background:var(--bg-3); font-size:.75rem; font-weight:600; color:var(--ink); }
.mk-chip.muted{ font-weight:400; color:var(--ink-2); }
.mk-model{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.75rem; color:var(--ink-3); }

/* Data-state labels (sample / model version): flat, outlined */

/* Tables */
.tp-tablewrap{ position:relative; overflow-x:auto; container-type:inline-size; border:1px solid var(--line-2); border-radius:2px; background:var(--card); }
.tp-table{ width:100%; border-collapse:collapse; font-size:.8125rem; font-variant-numeric:tabular-nums; color:var(--ink); }
.tp-table th, .tp-table td{ padding:.5625rem .625rem; text-align:right; white-space:nowrap; border-top:1px solid var(--line); }
.tp-table thead th{ background:var(--bg-2); border-top:0; font:600 .6875rem/1.2 var(--body); letter-spacing:0; color:var(--ink-2); }
.tp-table .l{ text-align:left; }
.tp-table tbody th{ font-weight:400; text-align:left; }
.pn{ font:600 .875rem/1.2 var(--display); letter-spacing:-.005em; }
.sub{ margin-left:.375rem; font-weight:400; color:var(--ink-3); font-size:.75rem; }
.pf{ display:none; }
.cap{ display:inline-grid; place-items:center; width:1.125rem; height:1.125rem; margin-left:.5rem; border-radius:50%; font:600 .625rem/1 var(--display); vertical-align:1px; background:var(--ink); color:var(--bg); }
.cap.v{ background:transparent; color:var(--ink-2); box-shadow:inset 0 0 0 1.5px var(--ink-3); }
.flag{ display:inline-block; margin-left:.5rem; padding:.0625rem .375rem; border-radius:2px; font-size:.6875rem; font-weight:600; color:var(--amber); background:var(--amber-bg); }
.delta{ margin-left:.3125rem; font-size:.6875rem; color:var(--ink-3); }
.hd-short{ display:none; }
.num-strong{ font-family:var(--body); font-weight:600; font-size:.9375rem; }
td.rank{ color:var(--ink-3); font-size:.6875rem; text-align:left; width:1.625rem; padding-right:.125rem; }
th.rank{ text-align:left; }

@container (max-width:665px){
  .cp-table{ font-size:.75rem; }
  .cp-table th, .cp-table td{ padding:.5rem .25rem; }
  .cp-table .c-fix{ display:none; }
  .cp-table .sub{ display:block; margin:1px 0 0 1.1875rem; font-size:.6875rem; }
  .cp-table .pf{ display:inline; }
  .cp-table .hd-long{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .cp-table .hd-short{ display:inline; }
  .cp-table .dot{ margin-right:.4375rem; }
  .cp-table .cap, .cp-table .flag{ margin-left:.3125rem; }
  .cp-table .delta{ display:block; margin:1px 0 0; font-size:.625rem; line-height:1.1; }
  .cp-table td.rank{ width:1rem; padding-left:.5rem; }
  .cp-table thead th{ font-size:.625rem; }
  .cp-table .num-strong{ font-size:.875rem; }
}
@container (max-width:339px){
  .cp-table{ font-size:.6875rem; }
  .cp-table th, .cp-table td{ padding:.5rem .125rem; }
  .cp-table .pn{ font-size:.8125rem; }
  .cp-table .num-strong{ font-size:.8125rem; }
  .cp-table .pf{ display:block; margin-top:1px; }
  .cp-table .pf-sep{ display:none; }
  .cp-table .flag{ display:table; margin:.1875rem 0 0 .9375rem; }
  .cp-table td.rank{ width:.875rem; padding-left:.3125rem; }
}
@container (max-width:259px){
  .cp-table{ font-size:.6875rem; }
  .cp-table th, .cp-table td{ padding:.5rem .0625rem .5rem .125rem; }
  .cp-table td.rank{ width:.75rem; padding-left:.3125rem; font-size:.625rem; }
  .cp-table .dot{ width:.5rem; height:.5rem; margin-right:.3125rem; }
  .cp-table .sub{ margin-left:.8125rem; }
  .cp-table .cap{ width:1rem; height:1rem; margin-left:.1875rem; font-size:.5625rem; }
  .cp-table thead th{ font-size:.5625rem; }
}

/* Chip strategy table */
.chip-table thead th.now{ color:var(--ink); }
.chip-table tbody td{ padding:.4375rem .375rem; }
.chip-table tbody th{ padding:.625rem .75rem; font-family:var(--display); font-weight:600; }
.best-pill{ display:inline-block; min-width:3.375rem; padding:.375rem .5rem; border-radius:2px; text-align:center; font:600 .8125rem/1.2 var(--body); color:#fff; background:var(--green); }
.chip-sum{ margin-top:.875rem; display:grid; gap:.25rem; font-size:.84375rem; line-height:1.5; color:var(--ink); list-style:none; padding:0; }
.chip-sum b{ font-weight:600; }
.chip-note{ margin-top:.75rem; font-size:.75rem; line-height:1.65; color:var(--ink-3); }
@container (max-width:479px){
  .chip-table{ font-size:.71875rem; }
  .chip-table th, .chip-table td{ padding:.4375rem .125rem; }
  .chip-table thead th{ font-size:.625rem; }
  .chip-table tbody th{ padding:.5rem .375rem; white-space:normal; line-height:1.2; font-size:.75rem; }
  .chip-table tbody td{ padding:.375rem .0625rem; }
  .best-pill{ min-width:0; padding:.3125rem .125rem; display:block; }
}
@container (max-width:339px){
  .chip-table{ font-size:.6875rem; }
  .chip-table tbody th{ padding:.5rem .1875rem .5rem .3125rem; font-size:.6875rem; }
  .chip-table th, .chip-table td{ padding-left:0; padding-right:0; }
  .chip-table tbody td{ padding-left:0; padding-right:.0625rem; }
  .best-pill{ font-size:.6875rem; }
}
@container (max-width:259px){
  .chip-table{ font-size:.65625rem; }
  .chip-table thead th{ font-size:.5625rem; }
  .chip-table th, .chip-table td{ padding-left:.0625rem; padding-right:.0625rem; }
  .chip-table tbody th{ padding:.5rem .25rem; }
}

/* Pitch (Wildcard & Free Hit builder): flat mown stripes in the brand green */
.pitch{ position:relative; overflow:hidden; padding:1.125rem .25rem .375rem; border-radius:2px; background:repeating-linear-gradient(180deg,var(--turf) 0 44px,var(--turf-2) 44px 88px); }
.pitch-lines{ position:absolute; inset:.5rem; border:1.5px solid rgba(255,255,255,.45); pointer-events:none; }
.pitch-lines::before{ content:''; position:absolute; left:0; right:0; top:50%; height:1.5px; background:rgba(255,255,255,.45); }
.pitch-lines::after{ content:''; position:absolute; left:50%; top:50%; width:4.5rem; height:4.5rem; margin:-2.25rem 0 0 -2.25rem; border:1.5px solid rgba(255,255,255,.45); border-radius:50%; }
.pitch-box{ position:absolute; left:27%; right:27%; height:14%; border:1.5px solid rgba(255,255,255,.45); pointer-events:none; }
.pitch-box.top{ top:.5rem; border-top:0; }
.pitch-box.bot{ bottom:.5rem; border-bottom:0; }
.pitch-row{ position:relative; display:flex; justify-content:space-around; align-items:flex-start; gap:2px; margin:0 0 .875rem; padding:0; list-style:none; }
.pl{ position:relative; display:flex; flex-direction:column; align-items:center; width:4rem; min-width:0; text-align:center; }
.pl svg{ width:2.125rem; height:1.875rem; color:var(--club); }
.pl-name{ display:block; max-width:100%; margin-top:2px; padding:.1875rem .25rem; font:600 .65625rem/1 var(--display); color:#010028; background:#fff; border-radius:2px 2px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-pts{ display:block; width:100%; padding:.1875rem .25rem; font:600 .65625rem/1 var(--body); color:#fff; background:#010028; border-radius:0 0 2px 2px; font-variant-numeric:tabular-nums; }
.pl .cap{ position:absolute; top:-3px; right:.5rem; margin:0; width:1rem; height:1rem; font-size:.5625rem; background:#010028; color:#fff; border:1.5px solid #fff; box-shadow:none; }
.bench{ margin-top:.625rem; padding:.75rem .25rem .375rem; border:1px solid var(--line-2); border-radius:2px; background:var(--bg-2); }
.bench .mk-h3{ margin:0 0 .5rem; padding-left:.5rem; }
.bench .pitch-row{ margin-bottom:.375rem; }
.bench .pl-name{ background:var(--bg); color:var(--ink); border:1px solid var(--line-2); border-bottom:0; }
.bench .pl-pts{ background:var(--ink); color:var(--bg); }
.wc-result{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.625rem 1rem; margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--line); font-size:.8125rem; color:var(--ink-2); }
.wc-result strong{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.wc-result p + p{ margin-top:2px; }
@media (min-width:640px){ .pl{ width:5.25rem; } }
@media (max-width:389px){ .pl{ width:3.5rem; } .pl svg{ width:1.875rem; height:1.6875rem; } .pl-name,.pl-pts{ font-size:.625rem; } }

/* Rate my team */
.rt-top{ display:grid; gap:1rem; align-items:center; }
@media (min-width:560px){ .rt-top{ grid-template-columns:auto 1fr; gap:1.5rem; } }
.rt-ring{ position:relative; width:8rem; height:8rem; margin:0 auto; }
.rt-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.rt-ring .trk{ stroke:var(--bg-3); }
.rt-ring .val{ stroke:var(--data); }
.rt-num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.rt-num b{ font:600 2.5rem/1 var(--body); letter-spacing:-.03em; color:var(--ink); }
.rt-num span{ margin-top:.3125rem; font-size:.6875rem; color:var(--ink-3); }
.rt-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.625rem; margin-top:.75rem; }
.rt-tile{ padding:.625rem .75rem; border:1px solid var(--line-2); border-radius:2px; background:var(--bg-2); }
.rt-tile dt{ font-size:.71875rem; line-height:1.3; color:var(--ink-3); }
.rt-tile dd{ margin:.25rem 0 0; font:600 1.375rem/1.1 var(--body); letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; }
.rt-cols{ display:grid; gap:0 1.5rem; }
@media (min-width:640px){ .rt-cols{ grid-template-columns:1.25fr 1fr; } }
.rt-list{ margin:0; padding:0; list-style:none; border:1px solid var(--line-2); border-radius:2px; overflow:hidden; }
.rt-list li{ display:flex; align-items:center; justify-content:space-between; gap:.625rem; padding:.5625rem .75rem; font-size:.8125rem; border-top:1px solid var(--line); }
.rt-list li:first-child{ border-top:0; }
.rt-list .meta{ font-size:.71875rem; color:var(--ink-3); }
.rt-x{ padding:.75rem; border:1px solid var(--line-2); border-radius:2px; background:var(--bg-2); font-size:.8125rem; line-height:1.5; color:var(--ink-2); }
.rt-x .mv{ display:flex; flex-wrap:wrap; align-items:center; gap:.375rem .5rem; color:var(--ink); }
.tf-table .arrow{ margin:0 .65em 0 .4em; }

/* Transfer finder */
.tf-table .fx{ color:var(--ink-2); font-size:.75rem; }
.tf-table .gcell{ display:flex; align-items:center; justify-content:flex-end; gap:.625rem; }
.tf-p{ white-space:nowrap; }
.tf-table .tf-why{ display:block; margin-top:.25rem; font:400 .75rem/1.4 var(--body); color:var(--ink-2); white-space:normal; max-width:34ch; }
@container (max-width:579px){
  .tf-table th, .tf-table td{ padding:.5625rem .375rem; }
  .tf-table .c-fx, .tf-table .gbar{ display:none; }
  .tf-table tbody th{ white-space:normal; line-height:1.4; }
  .tf-table thead th{ white-space:normal; line-height:1.3; vertical-align:bottom; }
}
@container (max-width:299px){
  .tf-table th, .tf-table td{ padding-left:.25rem; padding-right:.25rem; }
  .tf-table .arrow{ margin:0 .35em 0 .15em; }
}
.tf-out{ color:var(--ink-2); }

/* Accuracy log (layout only) */
.al-steps{ display:grid; gap:1rem; margin:0; padding:0; list-style:none; }
@media (min-width:640px){ .al-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; } }
.al-step{ padding-top:.75rem; border-top:2px solid var(--ink); }
.al-step b{ display:block; font:600 1rem/1.2 var(--display); color:var(--ink); }
.al-step .d{ display:block; margin-top:.25rem; font-size:.8125rem; line-height:1.5; color:var(--ink-2); }
.al-table{ table-layout:fixed; }
.al-table td, .al-table th{ padding:.6875rem .625rem; }
.al-table thead th{ white-space:normal; }
@container (max-width:419px){
  .al-table td, .al-table th{ padding:.6875rem .375rem; }
  .al-table .hd-long{ display:none; }
  .al-table .hd-short{ display:inline; }
  .al-table thead th{ font-size:.625rem; }
}
.al-table td.l, .al-table th.l{ text-align:left; }
.al-table .gw{ font:600 .75rem/1 var(--body); color:var(--ink-3); }