/* worldcuppredictor/index.html's own CSS, extracted from its inline <style>
 * (Task 11). Entirely bespoke to this one page: a World Cup bracket picker,
 * sharing nothing with any other page in scope.
 *
 * footer.site-foot below is unreachable: the page's actual footer markup
 * carries class="site-footer" (the shared chrome footer, injected by
 * scripts/inject-chrome.js), and a class selector's specificity means
 * assets/chrome.css's .site-footer rules always win regardless of source
 * order. Kept rather than deleted, because this task is a pure move of
 * existing bytes rather than a cleanup pass, and the rule was already dead
 * before this extraction touched it.
 *
 * The --orange-soft EXEMPTION in :root stays inline in the page itself,
 * not here: test/tokens.test.js's canon-divergence check reads :root blocks
 * out of worldcuppredictor/index.html by name, and a value moved into an
 * unlisted stylesheet would silently drop out of what that test can see.
 */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

  /* header.site-nav rules moved to /assets/chrome.css on 2026-09-01. */

  /* ---- Hero / title block ---- */
  section.hero{
    padding:26px 22px 16px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  section.hero .eyebrow{
    font-family:"IBM Plex Mono",monospace;
    font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--orange);margin:0 0 8px;font-weight:600;
  }
  section.hero h1{
    font-family:"Newsreader",Georgia,serif;
    font-weight:500;font-size:clamp(26px,4.2vw,40px);
    letter-spacing:-0.015em;line-height:1.05;margin:0;color:var(--ink);
  }
  section.hero h1 .flag{font-size:0.82em;margin-right:8px}
  section.hero p.sub{
    margin:10px 0 0;color:var(--muted);
    font-size:14px;max-width:880px;line-height:1.55;
  }
  section.hero p.sub b{color:var(--ink2)}

  /* ---- Tabs ---- */
  .tabs{
    display:flex;gap:6px;align-items:flex-end;
    padding:0 22px;background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .tab{
    font:inherit;font-size:13.5px;font-weight:700;
    border:1px solid var(--line);border-bottom:none;
    background:var(--paper-card);color:var(--muted);
    padding:10px 17px;border-radius:10px 10px 0 0;cursor:pointer;
    position:relative;top:1px;transition:color .12s,background .12s;
  }
  .tab:hover{color:var(--ink)}
  .tab.active{
    background:var(--paper);color:var(--ink);
    border-color:var(--line);
    box-shadow:0 -2px 0 var(--orange) inset;
  }
  .tab .dot{color:var(--orange)}

  /* ---- Controls bar ---- */
  .controls{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    padding:11px 22px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:50;
  }
  .controls button{
    font:inherit;font-size:13px;font-weight:600;
    border:1px solid var(--line);background:#fff;color:var(--ink);
    padding:7px 13px;border-radius:8px;cursor:pointer;
  }
  .controls button:hover{background:var(--paper-card)}
  /* drawn: .btn-drawn in the markup */ .controls button.primary{border-color:transparent}
  
  .controls.is-readonly .build-only{display:none}
  .zoom{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
  .zoom input{width:130px;accent-color:var(--orange)}
  .legend{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto;font-size:12px;color:var(--muted)}
  .legend .key{display:flex;align-items:center;gap:5px}
  .swatch{width:13px;height:13px;border-radius:3px;border:1px solid var(--line)}
  .swatch.spine{background:var(--orange-soft);border-color:var(--orange)}
  .swatch.req{background:var(--req-soft);border:1.5px dashed var(--orange-deep)}
  .swatch.win{background:var(--pick-soft);border-color:var(--orange-deep)}

  /* ---- Scenario summary line ---- */
  .scenario{
    padding:13px 22px;font-size:14px;line-height:1.6;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .scenario b{color:var(--orange-deep)}
  .scenario .opp{color:var(--ink);font-weight:700}
  .scenario .champ{
    font-family:"Newsreader",Georgia,serif;font-style:italic;
    font-weight:600;color:var(--orange-deep);
  }

  /* ---- Bracket viewport + scaling ---- */
  .viewport{overflow:auto;padding:26px 22px 50px}
  .bracket{
    position:relative;display:flex;align-items:stretch;gap:34px;
    transform-origin:top left;width:max-content;
  }
  svg.links{position:absolute;top:0;left:0;pointer-events:none;z-index:0;overflow:visible}
  .column{
    display:flex;flex-direction:column;justify-content:space-around;
    z-index:1;min-width:182px;
  }
  .col-head{
    text-align:center;font-family:"IBM Plex Mono",monospace;
    font-size:11px;font-weight:600;letter-spacing:0.06em;
    text-transform:uppercase;color:var(--muted);margin-bottom:8px;min-height:30px;
  }
  .col-head .meta{display:block;font-weight:400;text-transform:none;font-size:10.5px;color:#9a8f7c;margin-top:1px;letter-spacing:0.02em}
  .col-head.final-head{color:var(--orange-deep)}

  /* Centre winner box */
  .column.final-col{justify-content:flex-start}
  .final-stack{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:28px}
  .champion{
    border:2px solid var(--orange);background:var(--orange-soft);
    border-radius:16px;padding:20px 22px;text-align:center;
    box-shadow:0 8px 26px rgba(223,89,17,.20);
  }
  .champion.decided{background:var(--orange);border-color:var(--orange-deep)}
  .champ-label{
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;
    text-transform:uppercase;font-weight:600;color:var(--orange-deep);margin-bottom:9px;
  }
  .champion.decided .champ-label{color:#fff;opacity:.92}
  .champ-team{
    font-family:"Newsreader",Georgia,serif;font-size:30px;font-weight:600;line-height:1.05;
    color:var(--ink);display:flex;align-items:center;justify-content:center;gap:11px;
  }
  .champion.decided .champ-team{color:#fff}
  .champ-fl{font-size:30px;line-height:1}
  .champ-tbd{font-size:14px;color:var(--muted);font-style:italic}

  /* ---- Match card ---- */
  .card{
    background:var(--card);
    border:1.5px solid var(--line);
    border-radius:10px;overflow:hidden;
    box-shadow:0 1px 2px rgba(20,24,33,.05);position:relative;
  }
  .card.spine{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange) inset, 0 2px 8px rgba(223,89,17,.16)}
  .card.required{border:1.5px dashed var(--orange-deep);box-shadow:0 2px 9px rgba(184,67,26,.12)}
  .card .cap{
    font-family:"IBM Plex Mono",monospace;
    font-size:9.5px;letter-spacing:0.04em;color:#fff;background:var(--orange);
    padding:3px 8px;display:flex;justify-content:space-between;gap:6px;
  }
  .card.required .cap{background:var(--orange-deep)}
  .card .cap.plain{background:var(--paper-card);color:#8a8170}

  .row{
    display:flex;align-items:center;gap:8px;
    padding:8px 10px;font-size:13.5px;cursor:pointer;
    border-top:1px solid #f0ece3;min-height:36px;transition:background .08s;
  }
  .row:first-of-type{border-top:none}
  .row .fl{font-size:16px;line-height:1;width:20px;text-align:center;flex:none}
  .row .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row .tick{color:var(--orange-deep);font-weight:800;opacity:0;flex:none}
  .row:hover{background:#faf6ee}
  .row.winner{background:var(--pick-soft);font-weight:700}
  .row.winner .tick{opacity:1}
  .row.tbd{color:#ada494;font-style:italic;cursor:default}
  .row.tbd:hover{background:transparent}
  .row.eng{color:var(--orange-deep);font-weight:700}
  .row.eng .fl{filter:drop-shadow(0 0 .5px rgba(0,0,0,.3))}
  .row.winner.eng{background:var(--orange-soft)}
  .is-readonly .row{cursor:default}
  .is-readonly .row:hover{background:transparent}
  .is-readonly .row.winner:hover{background:var(--pick-soft)}
  .is-readonly .row.winner.eng:hover{background:var(--orange-soft)}

  /* ---- Opponent picker (select inside England matches) ---- */
  .picker{
    display:flex;align-items:center;gap:7px;padding:6px 8px;border-top:1px solid #f0ece3;background:#fff;
  }
  .picker:first-of-type{border-top:none}
  .picker .lbl{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--orange-deep);font-weight:600;letter-spacing:.05em;text-transform:uppercase;flex:none}
  .picker select{
    font:inherit;font-size:13px;font-weight:600;color:var(--ink);
    border:1.5px solid var(--orange);border-radius:7px;background:#fffdf9;
    padding:4px 6px;width:100%;cursor:pointer;
  }
  .picker.filled select{border-color:var(--orange);background:var(--orange-soft)}
  .picker select:focus{outline:2px solid rgba(223,89,17,.3)}
  .picker select:disabled{cursor:default;opacity:1;color:var(--orange-deep);font-weight:700}

  .footnote{padding:0 22px 26px;color:#9a8f7c;font-size:12px;max-width:920px;line-height:1.6}

  /* ---- Absolv footer ---- */
  footer.site-foot{
    border-top:1px solid var(--line);background:var(--paper-card);
    padding:24px 22px 30px;
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  }
  footer.site-foot svg{height:24px;width:auto;display:block}
  footer.site-foot .blurb{font-size:13px;color:var(--muted);max-width:560px;line-height:1.5}
  footer.site-foot .blurb b{color:var(--ink2)}
  footer.site-foot .foot-cta{
    margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;
  }
  footer.site-foot a.btn{
    font-size:13px;font-weight:700;text-decoration:none;border-radius:9px;padding:9px 15px;white-space:nowrap;
  }
  footer.site-foot a.solid{text-decoration:none} /* drawn: .btn-drawn.is-small in the markup */
  footer.site-foot a.ghost{border:1px solid var(--line);color:var(--ink);background:#fff}
  footer.site-foot a.ghost:hover{background:#fff;border-color:var(--orange)}

  @media (max-width:640px){
    .legend{margin-left:0;width:100%}
    footer.site-foot .foot-cta{margin-left:0;width:100%}
  }