/* Jobbr · Ringside. Follows the visitor's light/dark setting; html[data-theme] forces one. */
:root{color-scheme:light dark;--yellow:#f2c230;--yellow-hover:#ffd75a;--rope:#3d6bff;--blue:#3360f0;--blue-hover:#2a50d8;
--bg:#f4f2ec;--fg:#0d0e10;--muted:#6a6e76;--body:#3a3e46;--body2:#4d525b;--panel:#fff;--line:#d9d5cb;--card-line:#c9c4b8;--band:#ebe8e0;--art:#f4f2ec;
--gold:#8a6200;--red:#c7321f;--link:#2a50d8;--hover:#c7321f;--corner-bg:#e8eeff;--corner-text:#2b3550;
--tab:#ebe8e0;--tab-fg:#5a5e66;--tab-done:#dcd8ce;--tab-done-fg:#3a3e46;--footer-line:#d9d5cb;
--sw-floor:#e8eeff;--sw-grid:#9fb3ee;--sw-grid2:#cdd8f7;--sw-tile:#dcd8ce;--sw-tile-edge:#0d0e10;--sw-rail:#3d6bff;--sw-ring:#7e97e6;--sw-hot:#a87400;--sw-scout:#a87400;--sw-scribe:#2a50d8;--sw-checker:#0d0e10;--sw-you:#c7321f}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;
--bg:#08090b;--fg:#f4f3ee;--muted:#8b8f97;--body:#c4c7cd;--body2:#a9adb5;--panel:#12151b;--line:#232833;--card-line:#2f3542;--band:#0e1014;--art:#171b23;
--gold:#f2c230;--red:#e5412f;--link:#8fb0ff;--hover:#f2c230;--corner-bg:#16224a;--corner-text:#c9d3f0;
--tab:#12151b;--tab-fg:#8b8f97;--tab-done:#1a1f2a;--tab-done-fg:#c4c7cd;--footer-line:#1b1f27;
--sw-floor:#16224a;--sw-grid:#3d5bb0;--sw-grid2:#24356e;--sw-tile:#232833;--sw-tile-edge:#f4f3ee;--sw-rail:#8fb0ff;--sw-ring:#5f7fd6;--sw-hot:#f2c230;--sw-scout:#f2c230;--sw-scribe:#8fb0ff;--sw-checker:#f4f3ee;--sw-you:#e5412f}}
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark;
--bg:#08090b;--fg:#f4f3ee;--muted:#8b8f97;--body:#c4c7cd;--body2:#a9adb5;--panel:#12151b;--line:#232833;--card-line:#2f3542;--band:#0e1014;--art:#171b23;
--gold:#f2c230;--red:#e5412f;--link:#8fb0ff;--hover:#f2c230;--corner-bg:#16224a;--corner-text:#c9d3f0;
--tab:#12151b;--tab-fg:#8b8f97;--tab-done:#1a1f2a;--tab-done-fg:#c4c7cd;--footer-line:#1b1f27;
--sw-floor:#16224a;--sw-grid:#3d5bb0;--sw-grid2:#24356e;--sw-tile:#232833;--sw-tile-edge:#f4f3ee;--sw-rail:#8fb0ff;--sw-ring:#5f7fd6;--sw-hot:#f2c230;--sw-scout:#f2c230;--sw-scribe:#8fb0ff;--sw-checker:#f4f3ee;--sw-you:#e5412f}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Barlow,ui-sans-serif,system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ol,ul{margin:0}ol,ul{padding:0;list-style:none}img{display:block;max-width:100%;height:auto}
a{color:var(--link);text-decoration:none}a:hover{color:var(--hover)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:4px solid var(--link);outline-offset:4px}
#main{overflow-x:clip}#main:focus{outline:none}
.ring [hidden]{display:none!important}
.ring-wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(20px,4vw,56px)}
.skip-link{position:fixed;top:1rem;left:1rem;z-index:10;padding:.8rem 1rem;background:var(--fg);color:var(--bg);font-weight:600;transform:translateY(-200%)}.skip-link:focus{transform:none;color:var(--bg)}
.ring-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ring-kicker,.ring-header nav,.ring-live,.ring-bell,.ring-tabs b,.ring-pane__eyebrow,.ring-call b,.ring-card__eyebrow,.ring-card__status,.ring-nav button,.ring-rounds h3,.ring-gym{font-family:"Barlow Condensed",ui-sans-serif,system-ui,sans-serif;text-transform:uppercase}
h1,h2,.ring-pane h3,.ring-chyron strong,.ring-tabs span,.ring-tag,.ring-boundary,.ring-rounds__num,.ring-brand{font-family:Anton,Impact,"Arial Narrow Bold",sans-serif;font-weight:400}

/* Header */
.ring-header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:22px}
.ring-brand{color:var(--fg);font-size:20px;letter-spacing:.04em;display:inline-flex;align-items:baseline;gap:.35em;min-height:48px;align-items:center}
.ring-brand span{font-family:"Barlow Condensed",sans-serif;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ring-header nav{display:flex;gap:24px;flex-wrap:wrap;font-size:16px;font-weight:600;letter-spacing:.08em}
.ring-header nav a{color:var(--muted);display:inline-flex;align-items:center;min-height:48px}.ring-header nav a:hover{color:var(--hover)}
.ring-header nav [aria-current]{color:var(--gold)}

/* Hero */
.ring-hero{padding-top:40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.ring-live{display:flex;gap:10px;align-items:center;font-weight:700;font-size:15px;letter-spacing:.16em}
.ring-live__dot{width:10px;height:10px;border-radius:50%;background:var(--red)}.ring-live__on{color:var(--red)}.ring-live__sub{color:var(--muted)}
.ring-hero h1{font-size:clamp(64px,11vw,132px);line-height:.9;text-transform:uppercase;letter-spacing:.005em}
.ring-lead{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--body);max-width:640px;text-wrap:pretty}
.ring-bell{background:var(--yellow);color:#08090b;padding:16px 28px;min-height:48px;font-weight:700;font-size:18px;letter-spacing:.08em}
.ring-bell:hover{background:var(--yellow-hover);color:#08090b}
.ring-stage{position:relative;width:100%;display:flex;justify-content:center;margin-top:8px}
.ring-ropes{position:absolute;left:-200px;right:-200px;bottom:22%;display:flex;flex-direction:column;gap:22px}
.ring-ropes i{height:4px;background:var(--rope)}.ring-ropes i:nth-child(2){background:var(--fg);opacity:.85}.ring-ropes i:nth-child(3){background:var(--red)}
.ring-stage img{position:relative;width:min(520px,100%)}

/* Chyron */
.ring-chyron-wrap{max-width:1168px}
.ring-chyron{transform:translateY(-36px);display:flex;flex-wrap:wrap;background:var(--fg);color:var(--bg);position:relative}
.ring-chyron strong{background:var(--blue);color:#fff;font-size:22px;padding:16px 22px;text-transform:uppercase}
.ring-chyron span{padding:16px 22px;font-size:17px;font-weight:500;display:flex;align-items:center}

/* Match */
.ring-match{padding-top:40px;padding-bottom:80px;display:flex;flex-direction:column;gap:32px;scroll-margin-top:16px}
.ring-match__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap}
.ring-match__head>div{display:flex;flex-direction:column;gap:8px}
.ring-kicker{font-weight:700;font-size:15px;letter-spacing:.14em;color:var(--gold)}
.ring h2{font-size:clamp(40px,5vw,64px);line-height:1;text-transform:uppercase}
.ring-disclosure{font-size:15px;color:var(--muted);max-width:320px}
.ring-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:4px}
.ring-tabs button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-height:48px;padding:14px 16px;background:var(--tab);color:var(--tab-fg);transition:background 200ms ease}
.ring-tabs button.is-done{background:var(--tab-done);color:var(--tab-done-fg)}
.ring-tabs button[aria-selected=true]{background:var(--blue);color:#fff}
.ring-tabs button:focus-visible{outline:4px solid var(--link);outline-offset:2px}
.ring-tabs span{font-size:15px;letter-spacing:.1em}
.ring-tabs b{font-weight:700;font-size:20px;letter-spacing:.03em}
/* Without JS every round is readable in order; with JS they stack in one cell sized to the tallest. */
.ring-panes{display:grid;gap:24px}
.is-enhanced .ring-panes{gap:0}
.is-enhanced .ring-pane{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity 220ms ease}
.is-enhanced .ring-pane.is-current{opacity:1;visibility:visible}
.ring-pane{background:var(--panel);border:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.ring-pane:focus-visible{outline-offset:2px}
.ring-pane__story,.ring-pane__cards{padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column}
.ring-pane__story{gap:18px}
.ring-pane__cards{gap:14px;justify-content:center;border-left:1px solid var(--line)}
.ring-pane__eyebrow{font-weight:700;font-size:15px;letter-spacing:.14em;color:var(--link)}
.ring-pane h3{font-size:clamp(34px,3.8vw,48px);line-height:1;text-transform:uppercase;text-wrap:balance}
.ring-pane__story>p:not([class]){font-size:17px;line-height:1.6;color:var(--body)}
.ring-call{margin-top:auto;display:flex;background:var(--yellow);color:#08090b}
.ring-call b{background:#0d0e10;color:var(--yellow);font-weight:700;font-size:15px;letter-spacing:.12em;padding:12px 14px;display:flex;align-items:center;flex:none}
.ring-call span{padding:12px 16px;font-weight:600;font-size:16px;font-style:italic}
.ring-card{border:1px solid var(--card-line);padding:20px;display:flex;flex-direction:column;gap:8px}
.ring-card__eyebrow{font-weight:600;font-size:15px;letter-spacing:.12em;color:var(--muted)}
.ring-card h4{font-weight:600;font-size:19px}
.ring-card li{font-size:16px;color:var(--body2);line-height:1.45}
.ring-card__status{font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--body);padding-top:4px}
.ring-card--corner{background:var(--corner-bg);border-color:var(--rope)}
.ring-card--corner .ring-card__eyebrow{color:var(--link)}.ring-card--corner li{color:var(--corner-text)}
.ring-card--corner .ring-card__status{font-weight:700;color:var(--gold)}
.ring-tag{align-self:center;font-size:18px;color:var(--link);letter-spacing:.1em}
/* Fixed-width buttons in fixed columns: Previous and Next never move between rounds. */
.ring-nav{display:grid;grid-template-columns:150px 1fr 150px;gap:16px;align-items:center}
.ring-nav button{all:unset;box-sizing:border-box;cursor:pointer;min-height:48px;width:150px;font-weight:600;font-size:16px;letter-spacing:.08em;display:flex;align-items:center}
.ring-nav .ring-prev{color:var(--muted)}.ring-nav .ring-prev:hover{color:var(--fg)}
.ring-nav .ring-next{grid-column:3;justify-content:center;text-align:center;font-weight:700;background:var(--blue);color:#fff;padding:12px 18px}.ring-nav .ring-next:hover{background:var(--blue-hover)}
.ring-nav button:focus-visible{outline:4px solid var(--link);outline-offset:4px}
.ring-boundary{grid-column:2;font-size:clamp(18px,2vw,24px);text-transform:uppercase;letter-spacing:.02em;text-align:center}
.ring-boundary span{color:var(--red)}
@media(max-width:560px){
.ring-nav{grid-template-columns:1fr 1fr;grid-template-areas:"line line" "prev next"}
.ring-nav button{width:100%}.ring-nav .ring-prev{grid-area:prev}.ring-nav .ring-next{grid-area:next}.ring-boundary{grid-area:line}
.ring-pane__cards{border-left:0;border-top:1px solid var(--line)}
.ring-call{flex-direction:column}
}
@media(min-width:561px){.ring-pane__cards{border-top:0}}

/* Agent swarm: decorative, aria-hidden canvas; every cue also has a shape or a word. */
.swarm{margin:0;border:1px solid var(--line);background:var(--panel)}
.swarm-canvas{position:relative;aspect-ratio:5/2;min-height:260px;max-height:440px;width:100%;overflow:hidden}
.swarm-canvas canvas{display:block;width:100%;height:100%}
.swarm-labels{position:absolute;inset:0;pointer-events:none}
.swarm-label{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;padding:4px 9px;border:2px solid var(--rope);background:var(--panel);color:var(--fg)}
.swarm-label.is-current{background:var(--yellow);color:#08090b;border-color:var(--yellow);font-size:17px}
.swarm-label--you{background:#c7321f;color:#fff;border-color:#c7321f;transform:translate(-50%,-190%)}
.swarm-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;align-items:center;padding:14px clamp(16px,2vw,24px);border-top:1px solid var(--line)}
.swarm-caption{grid-column:1/-1;display:grid;font-family:Anton,Impact,sans-serif;font-size:clamp(18px,2vw,22px);line-height:1.25;text-transform:uppercase;letter-spacing:.01em}
.swarm-caption span{grid-area:1/1;visibility:hidden}.swarm-caption span.is-current{visibility:visible}
.swarm-legend{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:16px;font-weight:500;color:var(--body)}
.swarm-legend span{display:inline-flex;align-items:center;gap:8px}
.glyph{display:inline-block;width:15px;height:15px;background:currentColor}
.glyph-scout{color:var(--sw-scout);clip-path:polygon(50% 0,100% 100%,0 100%)}
.glyph-scribe{color:var(--sw-scribe);height:11px}
.glyph-checker{color:var(--sw-checker);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.glyph-you{color:var(--sw-you);border-radius:50%}
.swarm-toggle{all:unset;box-sizing:border-box;cursor:pointer;min-height:48px;min-width:210px;padding:10px 16px;text-align:center;border:2px solid var(--fg);color:var(--fg);font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase}
.swarm-toggle:hover{background:var(--fg);color:var(--bg)}
.swarm-toggle:focus-visible{outline:4px solid var(--link);outline-offset:4px}
@media(max-width:700px){.swarm-canvas{aspect-ratio:4/3}.swarm-bar{grid-template-columns:1fr}.swarm-toggle{justify-self:start}}
@media(forced-colors:active){.swarm,.swarm-label,.swarm-toggle{border-color:CanvasText}.glyph{background:CanvasText}}

/* Game plan */
.ring-plan{background:var(--band)}
.ring-plan .ring-wrap{padding-block:80px;display:flex;flex-direction:column;gap:36px}
.ring-rounds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}
.ring-rounds li{background:var(--panel);display:flex;flex-direction:column}
.ring-rounds__art{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--art)}
.ring-rounds__art img{width:100%;height:100%;object-fit:contain}
.ring-rounds__copy{padding:24px;display:flex;flex-direction:column;gap:10px}
.ring-rounds__num{font-size:15px;letter-spacing:.1em;color:var(--gold);text-transform:uppercase}
.ring-rounds h3{font-weight:700;font-size:28px;line-height:1.1}
.ring-rounds__copy>p:last-child{font-size:16px;line-height:1.55;color:var(--body2)}

/* Status + footer */
.ring-training{border-top:4px solid var(--rope)}
.ring-training .ring-wrap{padding-block:64px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;align-items:center}
.ring-training .ring-wrap>div{display:flex;flex-direction:column;gap:12px;max-width:640px}
.ring-training h2{font-size:44px}
.ring-training p{font-size:17px;line-height:1.55;color:var(--body2)}
.ring-gym{border:2px solid var(--fg);color:var(--fg);padding:14px 24px;min-height:48px;font-weight:700;font-size:17px;letter-spacing:.08em}
.ring-gym:hover{background:var(--fg);color:var(--bg)}
.ring-footer{border-top:1px solid var(--footer-line)}
.ring-footer .ring-wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-block:22px;font-size:15px;color:var(--muted)}
.ring-footer a{color:var(--body);display:inline-flex;align-items:center;min-height:48px}

@media(prefers-reduced-motion:reduce){.ring *{transition:none!important}}
@media(forced-colors:active){.ring-tabs button,.ring-nav button,.ring-pane,.ring-card{border:2px solid CanvasText}.ring-tabs button[aria-selected=true]{outline:3px solid Highlight}}
