:root {
color-scheme: light;
--brand: #0b6e3b;
--brand-strong: #075a2f;
--brand-soft: #e3f3ea;
--on-brand: #ffffff;
--accent: #f5b700;
--accent-soft: #fff4cc;
--on-accent: #1d1600;
--in: #0a7440;
--on-in: #ffffff;
--on-out: #ffffff;
--in-soft: #dcf5e7;
--out: #c2410c;
--out-soft: #fde6d9;
--bg: #ffffff;
--surface: #f5f8f6;
--surface-2: #ebf1ed;
--elevated: #ffffff;
--text: #0f1a14;
--text-2: #33443a;
--muted: #5b6b62;
--border: #d5ded8;
--border-strong: #7d8d84;
--focus: #1d6fe0;
--danger: #b42318;
--warn-bg: #fff6db;
--warn-text: #6b4a00;
--info-bg: #e8f1ff;
--info-text: #123e7a;
--pitch: #2f8f4e;
--pitch-stripe: #2a8547;
--pitch-line: rgba(255, 255, 255, 0.85);
--gk: #e69f00;
--def: #0072b2;
--mid: #009e73;
--fwd: #cc79a7;
--bench: #9aa5a0;
--gk-soft: #fdf0d5;
--def-soft: #d9ebf6;
--mid-soft: #d6f1e8;
--fwd-soft: #f6e4ee;
--bench-soft: #eef1ef;
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
--fs-xs: 0.8125rem;
--fs-sm: 0.9375rem;
--fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
--fs-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
--fs-h3: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
--fs-h2: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
--fs-h1: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 18px;
--radius-pill: 999px;
--shadow-1: 0 1px 2px rgba(15, 26, 20, 0.06), 0 1px 3px rgba(15, 26, 20, 0.08);
--shadow-2: 0 4px 12px rgba(15, 26, 20, 0.08), 0 2px 4px rgba(15, 26, 20, 0.06);
--shadow-3: 0 12px 32px rgba(15, 26, 20, 0.16);
--container: 1200px;
--container-wide: 1440px;
--prose: 72ch;
--header-h: 60px;
--actionbar-h: 0px;
--tap: 44px;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="sun"]) {
color-scheme: dark;
--brand: #34c17a;
--brand-strong: #5ad495;
--brand-soft: #143322;
--on-brand: #04170c;
--accent: #f5c33b;
--accent-soft: #3a3010;
--on-accent: #1d1600;
--in: #3ddc84;
--in-soft: #12331f;
--out: #ff8a5b;
--on-in: #04170c;
--on-out: #1d0b03;
--out-soft: #3b1d11;
--bg: #0e1411;
--surface: #141c18;
--surface-2: #1b2520;
--elevated: #18211c;
--text: #e8f0eb;
--text-2: #c4d2c9;
--muted: #9ab0a3;
--border: #2a3830;
--border-strong: #64796d;
--focus: #6aa8ff;
--danger: #ff6b5e;
--warn-bg: #3a2f0d;
--warn-text: #ffd978;
--info-bg: #13253f;
--info-text: #a9c9ff;
--pitch: #1f6b39;
--pitch-stripe: #1c6235;
--gk-soft: #3d2e0b;
--def-soft: #0f2a3d;
--mid-soft: #0d3326;
--fwd-soft: #3a2232;
--bench-soft: #222b26;
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
--shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--brand: #34c17a;
--brand-strong: #5ad495;
--brand-soft: #143322;
--on-brand: #04170c;
--accent: #f5c33b;
--accent-soft: #3a3010;
--on-accent: #1d1600;
--in: #3ddc84;
--in-soft: #12331f;
--out: #ff8a5b;
--on-in: #04170c;
--on-out: #1d0b03;
--out-soft: #3b1d11;
--bg: #0e1411;
--surface: #141c18;
--surface-2: #1b2520;
--elevated: #18211c;
--text: #e8f0eb;
--text-2: #c4d2c9;
--muted: #9ab0a3;
--border: #2a3830;
--border-strong: #64796d;
--focus: #6aa8ff;
--danger: #ff6b5e;
--warn-bg: #3a2f0d;
--warn-text: #ffd978;
--info-bg: #13253f;
--info-text: #a9c9ff;
--pitch: #1f6b39;
--pitch-stripe: #1c6235;
--gk-soft: #3d2e0b;
--def-soft: #0f2a3d;
--mid-soft: #0d3326;
--fwd-soft: #3a2232;
--bench-soft: #222b26;
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
--shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
}
:root[data-theme="sun"] {
color-scheme: light;
--brand: #005c2b;
--brand-strong: #003d1c;
--brand-soft: #d2f0de;
--text: #000000;
--text-2: #000000;
--muted: #1f2a24;
--border: #000000;
--border-strong: #000000;
--surface: #ffffff;
--surface-2: #f1f1f1;
--in: #006b33;
--out: #a3330a;
--fs-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
--shadow-1: none;
--shadow-2: 0 0 0 2px #000;
--shadow-3: 0 0 0 3px #000;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 12px);
scroll-padding-bottom: calc(var(--actionbar-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: var(--fs-base);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-wrap: break-word;
}
main {
flex: 1 0 auto;
outline: none;
}
h1,
h2,
h3,
h4 {
line-height: 1.2;
letter-spacing: -0.015em;
margin: 0 0 var(--space-3);
color: var(--text);
text-wrap: balance;
}
h1 {
font-size: var(--fs-h1);
font-weight: 800;
letter-spacing: -0.025em;
}
h2 {
font-size: var(--fs-h2);
font-weight: 750;
margin-top: var(--space-7);
}
h3,
.h3 {
font-size: var(--fs-h3);
font-weight: 700;
margin-top: var(--space-5);
}
h4 {
font-size: var(--fs-lg);
font-weight: 700;
margin-top: var(--space-4);
}
p,
ul,
ol,
dl,
table,
figure,
blockquote {
margin: 0 0 var(--space-4);
}
p {
text-wrap: pretty;
}
ul,
ol {
padding-left: 1.4em;
}
li + li {
margin-top: 0.35em;
}
a {
color: var(--brand);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover {
color: var(--brand-strong);
text-decoration-thickness: 2px;
}
img,
svg,
video,
canvas {
max-width: 100%;
height: auto;
}
img,
svg {
vertical-align: middle;
}
hr {
border: 0;
border-top: 1px solid var(--border);
margin: var(--space-6) 0;
}
strong,
b {
font-weight: 700;
}
small {
font-size: var(--fs-xs);
}
code,
kbd {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--surface-2);
padding: 0.1em 0.35em;
border-radius: 6px;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
input,
select,
textarea {
font-size: max(16px, 1em);
}
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
border-radius: 4px;
}
::selection {
background: var(--brand-soft);
color: var(--text);
}
[hidden] {
display: none !important;
}
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: 12px;
top: -100px;
z-index: 1000;
background: var(--brand);
color: var(--on-brand);
padding: 10px 16px;
border-radius: var(--radius-sm);
font-weight: 700;
text-decoration: none;
}
.skip-link:focus {
top: 12px;
}
.tabular {
font-variant-numeric: tabular-nums;
}
@media (forced-colors: active) {
.btn,
.chip,
.seg button {
border: 1px solid ButtonText;
}
}
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}
.container-wide {
max-width: var(--container-wide);
}
.prose {
max-width: var(--prose);
}
.section {
padding-block: var(--space-6);
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: saturate(1.4) blur(10px);
-webkit-backdrop-filter: saturate(1.4) blur(10px);
border-bottom: 1px solid var(--border);
padding-top: env(safe-area-inset-top);
}
.site-header .bar {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--header-h);
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 1.05rem;
letter-spacing: -0.02em;
color: var(--text);
text-decoration: none;
white-space: nowrap;
margin-right: auto;
}
.brand:hover {
color: var(--text);
text-decoration: none;
}
.brand svg {
width: 32px;
height: 32px;
flex: none;
}
.brand .brand-accent {
color: var(--brand);
}
.nav {
display: none;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 2px;
}
.nav li + li {
margin-top: 0;
}
.nav a,
.nav .nav-more {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 40px;
padding: 6px 12px;
border-radius: var(--radius-pill);
color: var(--text-2);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
background: none;
border: 0;
}
.nav a:hover,
.nav .nav-more:hover {
background: var(--surface-2);
color: var(--text);
}
.nav a[aria-current="page"] {
color: var(--brand);
background: var(--brand-soft);
}
.nav-dropdown {
position: relative;
}
.nav-dropdown .menu {
position: absolute;
right: 0;
top: calc(100% + 8px);
width: min(560px, 90vw);
background: var(--elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-3);
padding: var(--space-3);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.nav-dropdown .menu a {
border-radius: var(--radius-sm);
width: 100%;
}
.chev {
width: 16px;
height: 16px;
transition: transform 0.2s var(--ease);
}
[aria-expanded="true"] > .chev {
transform: rotate(180deg);
}
.header-actions {
display: flex;
align-items: center;
gap: 4px;
}
.icon-btn {
display: inline-grid;
place-items: center;
width: var(--tap);
height: var(--tap);
border-radius: var(--radius-pill);
border: 0;
background: none;
color: var(--text-2);
}
.icon-btn:hover {
background: var(--surface-2);
color: var(--text);
}
.icon-btn svg {
width: 22px;
height: 22px;
}
.theme-menu {
position: relative;
}
.theme-menu .menu {
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 200px;
background: var(--elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-3);
padding: 6px;
z-index: 60;
}
.theme-menu .menu button {
display: flex;
width: 100%;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 8px 12px;
border: 0;
border-radius: var(--radius-sm);
background: none;
text-align: left;
font-weight: 600;
}
.theme-menu .menu button:hover {
background: var(--surface-2);
}
.theme-menu .menu button[aria-checked="true"] {
color: var(--brand);
background: var(--brand-soft);
}
.mobile-nav {
position: fixed;
inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 0 0;
z-index: 49;
background: var(--bg);
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--space-4) max(16px, env(safe-area-inset-right)) calc(var(--space-7) + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.mobile-nav h2 {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin: var(--space-5) 0 var(--space-2);
}
.mobile-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
gap: 6px;
}
.mobile-nav li + li {
margin-top: 0;
}
.mobile-nav a {
display: flex;
align-items: center;
min-height: 48px;
padding: 10px 14px;
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font-weight: 600;
text-decoration: none;
}
.mobile-nav a[aria-current="page"] {
background: var(--brand-soft);
color: var(--brand);
}
body.nav-open {
overflow: hidden;
}
@media (min-width: 1024px) {
.nav {
display: block;
}
.nav-toggle,
.mobile-nav {
display: none !important;
}
}
.breadcrumbs {
font-size: var(--fs-sm);
color: var(--muted);
padding-top: var(--space-4);
}
.breadcrumbs ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 0;
padding: 0;
}
.breadcrumbs li + li {
margin-top: 0;
}
.breadcrumbs li + li::before {
content: "›";
margin-right: 6px;
color: var(--border-strong);
}
.breadcrumbs a {
color: var(--muted);
text-decoration: none;
}
.breadcrumbs a:hover {
color: var(--brand);
text-decoration: underline;
}
.page-hero {
padding-top: var(--space-5);
padding-bottom: var(--space-4);
}
.page-hero .lead {
font-size: var(--fs-lg);
color: var(--text-2);
max-width: 62ch;
margin-bottom: var(--space-3);
}
.updated {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--fs-sm);
color: var(--muted);
}
.article-layout {
display: grid;
gap: var(--space-6);
}
@media (min-width: 1280px) {
.article-layout.has-aside {
grid-template-columns: minmax(0, 1fr) 300px;
}
.article-aside {
position: sticky;
top: calc(var(--header-h) + 24px);
align-self: start;
}
}
.article-body > :first-child,
.article-body > .ad-slot:first-child + * {
margin-top: 0;
}
.site-footer {
margin-top: var(--space-8);
background: var(--surface);
border-top: 1px solid var(--border);
padding-top: var(--space-7);
padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom) + var(--actionbar-h));
font-size: var(--fs-sm);
color: var(--text-2);
}
.footer-grid {
display: grid;
gap: var(--space-6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.footer-grid h2 {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin: 0 0 var(--space-3);
}
.footer-grid ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-grid li + li {
margin-top: 0;
}
.footer-grid a {
display: inline-block;
padding: 6px 0;
color: var(--text-2);
text-decoration: none;
}
.footer-grid a:hover {
color: var(--brand);
text-decoration: underline;
}
.footer-brand p {
max-width: 34ch;
}
.footer-bottom {
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-3);
color: var(--muted);
}
.privacy-note {
display: inline-flex;
align-items: center;
gap: 8px;
}
.privacy-note svg {
width: 18px;
height: 18px;
color: var(--brand);
}
@media (max-width: 359.98px) {
.container {
padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
}
.site-header .bar {
gap: 4px;
}
.brand {
gap: 6px;
font-size: 0.9rem;
}
.brand svg {
width: 26px;
height: 26px;
}
.header-actions .icon-btn {
width: 40px;
height: 40px;
}
}
.btn {
--btn-bg: var(--surface-2);
--btn-fg: var(--text);
--btn-bd: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--tap);
padding: 10px 18px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--btn-bd);
background: var(--btn-bg);
color: var(--btn-fg);
font-weight: 700;
font-size: 0.975rem;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s var(--ease), transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.btn:hover {
text-decoration: none;
color: var(--btn-fg);
filter: brightness(0.97);
}
.btn:active {
transform: translateY(1px);
}
.btn svg {
width: 20px;
height: 20px;
flex: none;
}
.btn-primary {
--btn-bg: var(--brand);
--btn-fg: var(--on-brand);
box-shadow: var(--shadow-1);
}
.btn-primary:hover {
--btn-bg: var(--brand-strong);
filter: none;
}
.btn-accent {
--btn-bg: var(--accent);
--btn-fg: var(--on-accent);
}
.btn-outline {
--btn-bg: transparent;
--btn-fg: var(--text);
--btn-bd: var(--border-strong);
}
.btn-outline:hover {
--btn-bg: var(--surface-2);
filter: none;
}
.btn-ghost {
--btn-bg: transparent;
--btn-fg: var(--text-2);
}
.btn-ghost:hover {
--btn-bg: var(--surface-2);
filter: none;
}
.btn-danger {
--btn-bg: transparent;
--btn-fg: var(--danger);
--btn-bd: currentColor;
}
.btn-sm {
min-height: 36px;
padding: 6px 12px;
font-size: var(--fs-sm);
}
.btn-lg {
min-height: 52px;
padding: 14px 24px;
font-size: 1.05rem;
}
.btn-block {
width: 100%;
}
.btn[disabled],
.btn[aria-disabled="true"] {
opacity: 0.5;
pointer-events: none;
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.trust-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
padding: 0;
margin: 0 0 var(--space-4);
}
.trust-chips li + li {
margin-top: 0;
}
.trust-chips li {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: var(--radius-pill);
background: var(--brand-soft);
color: var(--brand-strong);
font-weight: 650;
font-size: var(--fs-sm);
}
:root[data-theme="dark"] .trust-chips li {
color: var(--brand);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="sun"]) .trust-chips li {
color: var(--brand);
}
}
.trust-chips svg {
width: 16px;
height: 16px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: 700;
background: var(--surface-2);
color: var(--text-2);
white-space: nowrap;
}
.role {
display: inline-grid;
place-items: center;
min-width: 2.1em;
height: 1.7em;
padding: 0 0.4em;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.02em;
color: #fff;
background: var(--bench);
}
.role-gk {
background: var(--gk);
color: #241600;
}
.role-def {
background: var(--def);
}
.role-mid {
background: var(--mid);
color: #00221a;
}
.role-fwd {
background: var(--fwd);
color: #2a0d1d;
}
.field {
display: grid;
gap: 6px;
margin-bottom: var(--space-4);
}
.field > label,
.field-label {
font-weight: 650;
font-size: var(--fs-sm);
color: var(--text);
}
.field .hint {
font-size: var(--fs-xs);
color: var(--muted);
margin: 0;
}
.input,
.select,
.textarea {
width: 100%;
min-height: var(--tap);
padding: 10px 12px;
border: 1.5px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--text);
transition: border-color 0.15s, box-shadow 0.15s;
}
.textarea {
min-height: 140px;
resize: vertical;
line-height: 1.5;
}
.input:focus,
.select:focus,
.textarea:focus {
border-color: var(--focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
outline: none;
}
.select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.seg {
display: flex;
flex-wrap: wrap;
gap: 6px;
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
.seg legend {
font-weight: 650;
font-size: var(--fs-sm);
margin-bottom: 6px;
padding: 0;
}
.seg label {
position: relative;
cursor: pointer;
}
.seg input {
position: absolute;
opacity: 0;
inset: 0;
margin: 0;
cursor: pointer;
}
.seg span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
min-width: 52px;
padding: 8px 14px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--border-strong);
background: var(--bg);
font-weight: 700;
font-size: var(--fs-sm);
color: var(--text-2);
transition: all 0.15s var(--ease);
}
.seg input:checked + span {
background: var(--brand);
border-color: var(--brand);
color: var(--on-brand);
}
.seg input:focus-visible + span {
outline: 3px solid var(--focus);
outline-offset: 2px;
}
.seg label:hover span {
border-color: var(--brand);
}
.stepper {
display: inline-flex;
align-items: stretch;
border: 1.5px solid var(--border-strong);
border-radius: var(--radius-pill);
overflow: hidden;
background: var(--bg);
min-height: var(--tap);
}
.stepper button {
width: var(--tap);
border: 0;
background: var(--surface);
color: var(--text);
font-size: 1.3rem;
font-weight: 700;
line-height: 1;
}
.stepper button:hover {
background: var(--surface-2);
}
.stepper input {
width: 4.2ch;
min-width: 52px;
border: 0;
text-align: center;
font-weight: 800;
font-variant-numeric: tabular-nums;
background: transparent;
-moz-appearance: textfield;
appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.stepper input:focus {
outline: none;
}
.stepper:focus-within {
border-color: var(--focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
}
.stepper-unit {
align-self: center;
margin-left: 8px;
color: var(--muted);
font-size: var(--fs-sm);
}
.switch {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: var(--tap);
cursor: pointer;
}
.switch input {
appearance: none;
-webkit-appearance: none;
flex: none;
width: 48px;
height: 28px;
border-radius: 999px;
background: var(--border-strong);
position: relative;
cursor: pointer;
transition: background 0.2s var(--ease);
margin: 0;
}
.switch input::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
transition: transform 0.2s var(--ease);
}
.switch input:checked {
background: var(--brand);
}
.switch input:checked::after {
transform: translateX(20px);
}
.switch .switch-text {
font-weight: 600;
font-size: var(--fs-sm);
}
.switch .switch-text small {
display: block;
font-weight: 400;
color: var(--muted);
}
.card {
background: var(--elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-1);
}
.card > :last-child {
margin-bottom: 0;
}
.card-grid {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
margin: 0 0 var(--space-5);
padding: 0;
list-style: none;
}
.card-grid li + li {
margin-top: 0;
}
.link-card {
display: flex;
flex-direction: column;
gap: 6px;
height: 100%;
padding: var(--space-4) var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--elevated);
color: var(--text);
text-decoration: none;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s var(--ease);
}
.link-card:hover {
color: var(--text);
text-decoration: none;
border-color: var(--brand);
box-shadow: var(--shadow-2);
transform: translateY(-1px);
}
.link-card strong {
font-size: 1.05rem;
color: var(--brand);
}
.link-card span {
color: var(--text-2);
font-size: var(--fs-sm);
line-height: 1.5;
}
.answer-box {
position: relative;
border: 1.5px solid color-mix(in srgb, var(--brand) 35%, var(--border));
background: linear-gradient(180deg, var(--brand-soft), transparent 140%);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin: var(--space-4) 0 var(--space-6);
}
.answer-box > :last-child {
margin-bottom: 0;
}
.answer-box .answer {
font-size: var(--fs-lg);
font-weight: 500;
color: var(--text);
}
.answer-box .answer strong {
color: var(--brand-strong);
}
:root[data-theme="dark"] .answer-box .answer strong {
color: var(--brand);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="sun"]) .answer-box .answer strong {
color: var(--brand);
}
}
.callout {
display: flex;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius);
background: var(--info-bg);
color: var(--info-text);
margin: 0 0 var(--space-4);
font-size: var(--fs-sm);
}
.callout.warn {
background: var(--warn-bg);
color: var(--warn-text);
}
.callout.tip {
background: var(--brand-soft);
color: var(--text);
}
.callout svg {
flex: none;
width: 20px;
height: 20px;
margin-top: 2px;
}
.callout > div > :last-child {
margin-bottom: 0;
}
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 0 var(--space-5);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--elevated);
}
.table-wrap:focus-visible {
outline: 3px solid var(--focus);
}
table.data {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
margin: 0;
font-variant-numeric: tabular-nums;
}
table.data caption {
text-align: left;
padding: var(--space-3) var(--space-4) 0;
font-weight: 700;
color: var(--text);
caption-side: top;
}
table.data th,
table.data td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
table.data thead th {
background: var(--surface);
font-weight: 700;
color: var(--text);
white-space: nowrap;
position: sticky;
top: 0;
}
table.data tbody tr:last-child > * {
border-bottom: 0;
}
table.data tbody tr:hover {
background: var(--surface);
}
table.data td.num,
table.data th.num {
text-align: right;
}
table.data .hl {
background: var(--brand-soft);
font-weight: 700;
}
figure.diagram {
margin: var(--space-4) 0 var(--space-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
text-align: center;
}
figure.diagram img {
display: block;
margin-inline: auto;
width: 100%;
max-width: 340px;
height: auto;
}
figure.diagram figcaption {
margin-top: var(--space-3);
font-size: var(--fs-sm);
color: var(--muted);
}
.diagram-grid {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.diagram-grid figure.diagram {
margin: 0;
}
.toc {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
padding: var(--space-3) var(--space-4);
margin: 0 0 var(--space-5);
}
.toc summary {
cursor: pointer;
font-weight: 700;
min-height: 36px;
display: flex;
align-items: center;
}
.toc ol {
margin: var(--space-2) 0 var(--space-2);
columns: 2 220px;
column-gap: var(--space-5);
}
.toc li {
break-inside: avoid;
}
.faq {
display: grid;
gap: var(--space-2);
margin: 0 0 var(--space-5);
}
.faq details {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--elevated);
overflow: hidden;
}
.faq summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: 52px;
padding: 12px var(--space-4);
font-weight: 700;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: "";
flex: none;
width: 12px;
height: 12px;
border-right: 2.5px solid var(--muted);
border-bottom: 2.5px solid var(--muted);
transform: rotate(45deg) translate(-3px, -3px);
transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after {
transform: rotate(225deg) translate(-3px, -3px);
}
.faq .faq-a {
padding: 0 var(--space-4) var(--space-4);
color: var(--text-2);
}
.faq .faq-a > :last-child {
margin-bottom: 0;
}
.related {
margin-top: var(--space-7);
}
.related h2 {
margin-top: 0;
}
.cta-band {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5);
margin: var(--space-5) 0;
border-radius: var(--radius-lg);
background: var(--brand);
color: var(--on-brand);
}
.cta-band p {
margin: 0;
font-weight: 650;
font-size: var(--fs-lg);
max-width: 46ch;
}
.cta-band .btn {
--btn-bg: var(--bg);
--btn-fg: var(--brand-strong);
}
:root[data-theme="dark"] .cta-band .btn {
--btn-fg: var(--text);
}
.sources {
font-size: var(--fs-sm);
color: var(--text-2);
border-top: 1px solid var(--border);
padding-top: var(--space-4);
margin-top: var(--space-6);
}
.sources h2 {
font-size: var(--fs-lg);
margin-top: 0;
}
.sources ul {
padding-left: 1.2em;
}
.ad-slot {
display: block;
width: 100%;
clear: both;
}
.ad-slot.is-filled {
margin-block: var(--space-6);
}
.ad-slot > [id^="container-"] {
max-width: 100%;
overflow: clip;
}
.page-content.has-ad-rail {
position: relative;
}
.ad-rail {
position: absolute;
right: max(16px, env(safe-area-inset-right));
width: 300px;
}
.ad-rail .ad-slot {
position: sticky;
top: calc(var(--header-h) + 24px);
}
.ad-rail .ad-slot.is-filled {
margin-block: 0;
}
.toast-region {
position: fixed;
left: 50%;
bottom: calc(16px + env(safe-area-inset-bottom) + var(--actionbar-h));
transform: translateX(-50%);
z-index: 200;
display: grid;
gap: 8px;
width: min(92vw, 420px);
pointer-events: none;
}
.toast {
pointer-events: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-radius: var(--radius);
background: #13201a;
color: #f2f7f4;
box-shadow: var(--shadow-3);
font-weight: 600;
font-size: var(--fs-sm);
animation: toast-in 0.25s var(--ease);
}
.toast button {
background: none;
border: 0;
color: #8ff0b8;
font-weight: 800;
min-height: 36px;
}
@keyframes toast-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
}
dialog.sheet {
border: 0;
padding: 0;
margin: auto auto 0;
width: 100%;
max-width: 560px;
max-height: 88dvh;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: var(--elevated);
color: var(--text);
box-shadow: var(--shadow-3);
}
dialog.sheet::backdrop {
background: rgba(8, 14, 11, 0.55);
}
dialog.sheet[open] {
animation: sheet-in 0.25s var(--ease);
}
@media (min-width: 640px) {
dialog.sheet {
margin: auto;
border-radius: var(--radius-lg);
}
}
@keyframes sheet-in {
from {
transform: translateY(24px);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
.sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
background: var(--elevated);
z-index: 1;
}
.sheet-head h2 {
margin: 0;
font-size: var(--fs-lg);
}
.sheet-body {
padding: var(--space-5);
overflow-y: auto;
}
.sheet-foot {
display: flex;
gap: var(--space-2);
justify-content: flex-end;
padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom));
border-top: 1px solid var(--border);
position: sticky;
bottom: 0;
background: var(--elevated);
}
.tabs {
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
border-bottom: 1px solid var(--border);
margin-bottom: var(--space-4);
}
.tabs::-webkit-scrollbar {
display: none;
}
.tabs [role="tab"] {
flex: none;
min-height: var(--tap);
padding: 8px 14px;
border: 0;
border-bottom: 3px solid transparent;
background: none;
font-weight: 700;
font-size: var(--fs-sm);
color: var(--muted);
white-space: nowrap;
}
.tabs [role="tab"][aria-selected="true"] {
color: var(--brand);
border-bottom-color: var(--brand);
}
.tabs [role="tab"]:hover {
color: var(--text);
}
.stack > * + * {
margin-top: var(--space-4);
}
.muted {
color: var(--muted);
}
.center {
text-align: center;
}
.nowrap {
white-space: nowrap;
}
.mt-0 {
margin-top: 0 !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.btn {
max-width: 100%;
}
.cta-band .btn,
.btn-block {
white-space: normal;
text-align: center;
}
@media (max-width: 480px) {
.btn-lg {
white-space: normal;
text-align: center;
}
}
.table-wrap {
background:
linear-gradient(to right, var(--elevated) 30%, transparent) left / 28px 100% no-repeat local,
linear-gradient(to left, var(--elevated) 30%, transparent) right / 28px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.22), transparent) left / 12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.22), transparent) right / 12px 100% no-repeat scroll,
var(--elevated);
}
@media (max-width: 599.98px) {
table.data thead th {
white-space: normal;
}
table.data th,
table.data td {
padding: 8px 10px;
}
}
.tool-section {
padding-bottom: var(--space-6);
}
.planner {
display: grid;
gap: var(--space-4);
align-items: start;
}
.planner-left {
display: grid;
gap: var(--space-4);
min-width: 0;
}
.panel {
background: var(--elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
box-shadow: var(--shadow-1);
min-width: 0;
}
@media (min-width: 480px) {
.panel {
padding: var(--space-5);
}
}
.panel-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-3);
margin-bottom: var(--space-4);
}
.panel-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: var(--fs-h3);
}
.panel-title .count {
display: inline-grid;
place-items: center;
min-width: 28px;
height: 28px;
padding: 0 8px;
border-radius: var(--radius-pill);
background: var(--surface-2);
font-size: var(--fs-sm);
}
.step-num {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--brand);
color: var(--on-brand);
font-size: 0.9rem;
font-weight: 800;
flex: none;
}
.step-tabs {
display: none;
}
@media (max-width: 899.98px) {
.js .planner[data-active-step] .step-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
position: sticky;
top: calc(var(--header-h) + env(safe-area-inset-top));
z-index: 20;
padding: 6px;
margin: 0;
background: color-mix(in srgb, var(--bg) 92%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--radius);
}
.step-tabs button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: var(--tap);
border: 1.5px solid var(--border);
border-radius: var(--radius-pill);
background: var(--bg);
font-weight: 750;
font-size: var(--fs-sm);
color: var(--text-2);
}
.step-tabs button span {
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--surface-2);
font-size: 0.75rem;
}
.step-tabs button[aria-current="true"] {
border-color: var(--brand);
background: var(--brand);
color: var(--on-brand);
}
.step-tabs button[aria-current="true"] span {
background: rgba(255, 255, 255, 0.25);
}
@media (max-width: 340px) {
.step-tabs button span {
display: none;
}
}
.js .planner[data-active-step="game"] [data-step]:not([data-step="game"]),
.js .planner[data-active-step="players"] [data-step]:not([data-step="players"]),
.js .planner[data-active-step="plan"] [data-step]:not([data-step="plan"]) {
display: none;
}
}
@media (min-width: 900px) {
.planner {
grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
}
.results {
position: sticky;
top: calc(var(--header-h) + 16px);
}
}
@media (min-width: 1280px) {
.planner {
grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
}
}
.planner .seg,
.planner .field,
.planner .switch {
margin-bottom: var(--space-4);
}
.seg-format span {
min-width: 58px;
}
.stepper-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.sub-detail {
margin-top: calc(var(--space-2) * -1);
}
.interval-tip:empty {
display: none;
}
.tip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
padding: 10px 12px;
margin: 0 0 var(--space-4);
border-radius: var(--radius);
background: var(--accent-soft);
font-size: var(--fs-sm);
}
.tip > span {
flex: 1 1 180px;
}
.tip.ok {
background: var(--brand-soft);
}
.tip svg {
width: 18px;
height: 18px;
flex: none;
color: var(--brand);
}
.advanced {
border-top: 1px solid var(--border);
padding-top: var(--space-3);
}
.advanced summary {
display: flex;
align-items: center;
gap: 8px;
min-height: var(--tap);
cursor: pointer;
font-weight: 700;
color: var(--text-2);
}
.advanced summary svg {
width: 18px;
height: 18px;
}
.advanced-body {
padding-top: var(--space-3);
}
.roster-status {
font-size: var(--fs-sm);
color: var(--muted);
margin: calc(var(--space-3) * -1) 0 var(--space-3);
}
.warn-text {
color: var(--out);
font-weight: 650;
}
.paste-box {
padding: var(--space-4);
margin-bottom: var(--space-4);
border-radius: var(--radius);
background: var(--surface);
border: 1px dashed var(--border-strong);
}
.paste-box .textarea {
margin: 6px 0;
}
.roster {
list-style: none;
margin: 0 0 var(--space-3);
padding: 0;
display: grid;
gap: 6px;
}
.roster li + li {
margin-top: 0;
}
.player-row {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto auto;
align-items: start;
gap: 6px;
padding: 6px;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid transparent;
}
.player-row:focus-within {
border-color: var(--border-strong);
}
.player-row .input {
min-height: 42px;
padding: 8px 10px;
background: var(--bg);
}
.num-input {
text-align: center;
font-weight: 800;
font-variant-numeric: tabular-nums;
padding-inline: 4px !important;
}
.name-input {
font-weight: 650;
}
.prefs {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.prefs:empty {
display: none;
}
.pref {
font-size: 0.72rem;
font-weight: 700;
padding: 1px 7px;
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--text-2);
}
.pref-yes {
background: var(--in-soft);
color: var(--in);
}
.pref-no {
background: var(--out-soft);
color: var(--out);
}
.gk-toggle {
min-width: 58px;
min-height: 42px;
padding: 0 8px;
border-radius: var(--radius-sm);
border: 1.5px dashed var(--border-strong);
background: transparent;
color: var(--muted);
font-weight: 800;
font-size: 0.8rem;
}
.gk-toggle.gk-can {
border-style: solid;
border-color: var(--gk);
color: var(--text);
background: var(--gk-soft);
}
.gk-toggle.gk-prefer {
border-style: solid;
border-color: var(--gk);
background: var(--gk);
color: #241600;
}
.player-row .icon-btn {
width: 42px;
height: 42px;
}
.player-row.is-out {
opacity: 0.55;
}
.player-row.is-out .name-input {
text-decoration: line-through;
}
.roster-actions {
margin-top: var(--space-2);
}
.results-head {
align-items: flex-start;
}
.results-actions .btn {
min-height: 40px;
}
.summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3) var(--space-4);
align-items: center;
padding: var(--space-4);
margin-bottom: var(--space-4);
border-radius: var(--radius);
background: var(--surface);
}
.summary.empty {
display: block;
color: var(--muted);
}
.score {
position: relative;
width: 76px;
height: 76px;
}
.score svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.score-track {
fill: none;
stroke: var(--surface-2);
stroke-width: 3.5;
}
.score-bar {
fill: none;
stroke: var(--brand);
stroke-width: 3.5;
stroke-linecap: round;
transition: stroke-dasharray 0.4s var(--ease);
}
.score-good .score-bar {
stroke: var(--accent);
}
.score-meh .score-bar {
stroke: var(--out);
}
.score span {
position: absolute;
inset: 0;
display: grid;
place-content: center;
text-align: center;
line-height: 1;
}
.score strong {
font-size: 1.45rem;
font-weight: 850;
}
.score small {
font-size: 0.7rem;
color: var(--muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 8px 16px;
margin: 0;
}
.stats div {
min-width: 0;
}
.stats dt {
font-size: var(--fs-xs);
color: var(--muted);
font-weight: 650;
}
.stats dd {
margin: 0;
font-weight: 800;
font-size: 1.05rem;
}
.notes {
grid-column: 1 / -1;
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
font-size: var(--fs-sm);
}
.notes li {
display: flex;
gap: 8px;
margin: 0;
padding: 8px 10px;
border-radius: var(--radius-sm);
background: var(--info-bg);
color: var(--info-text);
}
.notes li.note-warn {
background: var(--warn-bg);
color: var(--warn-text);
}
.notes svg {
width: 18px;
height: 18px;
flex: none;
margin-top: 2px;
}
.tab-panel {
min-height: 240px;
}
.grid-help,
.mins-help {
font-size: var(--fs-sm);
color: var(--muted);
margin-bottom: var(--space-3);
}
.grid-wrap {
overflow: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--border);
border-radius: var(--radius);
max-height: 72vh;
background: var(--bg);
overscroll-behavior-x: contain;
}
.rot-grid {
border-collapse: separate;
border-spacing: 0;
width: 100%;
font-size: var(--fs-sm);
font-variant-numeric: tabular-nums;
}
.rot-grid th,
.rot-grid td {
padding: 3px;
text-align: center;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.rot-grid thead th {
position: sticky;
background: var(--surface);
z-index: 2;
font-weight: 750;
font-size: var(--fs-xs);
color: var(--text-2);
}
.rot-grid .period-row th {
top: 0;
height: 30px;
}
.rot-grid .time-row th {
top: 30px;
font-weight: 650;
color: var(--muted);
}
.rot-grid .sticky-col {
position: sticky;
left: 0;
z-index: 3;
background: var(--elevated);
text-align: left;
padding: 4px 10px;
min-width: 110px;
max-width: 150px;
border-right: 1px solid var(--border);
}
.rot-grid thead .sticky-col {
z-index: 4;
background: var(--surface);
top: 0;
}
.rot-grid .pstart {
border-left: 2px solid var(--border-strong);
}
.rot-grid .pname {
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 700;
}
.jersey {
display: inline-grid;
place-items: center;
min-width: 24px;
height: 20px;
padding: 0 4px;
border-radius: 5px;
background: var(--surface-2);
font-size: 0.72rem;
font-weight: 800;
flex: none;
}
.cell {
display: inline-grid;
place-items: center;
width: 38px;
min-width: 38px;
height: 34px;
border-radius: 7px;
border: 0;
font-weight: 800;
font-size: 0.74rem;
letter-spacing: 0.01em;
color: #fff;
position: relative;
}
button.cell:hover {
filter: brightness(1.08);
box-shadow: 0 0 0 2px var(--text-2) inset;
}
.cell.r-gk {
background: var(--gk);
color: #241600;
}
.cell.r-def {
background: var(--def);
}
.cell.r-mid {
background: var(--mid);
color: #00221a;
}
.cell.r-fwd {
background: var(--fwd);
color: #2a0d1d;
}
.cell.bench {
background: var(--bench-soft);
color: var(--muted);
}
.cell.absent {
background: transparent;
color: var(--border-strong);
}
.cell.is-in::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.25);
}
.cell.is-locked::after {
content: "🔒";
position: absolute;
right: -3px;
bottom: -4px;
font-size: 10px;
line-height: 1;
}
.rot-grid .total {
position: sticky;
right: 0;
background: var(--elevated);
border-left: 1px solid var(--border);
padding: 4px 10px;
font-weight: 800;
text-align: right;
z-index: 1;
}
.rot-grid .total small {
display: block;
font-weight: 600;
color: var(--muted);
font-size: 0.7rem;
}
.rot-grid thead .total-head {
position: sticky;
right: 0;
top: 0;
z-index: 4;
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
align-items: center;
font-size: var(--fs-xs);
color: var(--muted);
margin-top: var(--space-3);
}
.lg {
display: inline-grid;
place-items: center;
min-width: 26px;
height: 20px;
border-radius: 5px;
margin-right: 4px;
font-weight: 800;
font-size: 0.68rem;
color: #fff;
}
.lg.r-gk {
background: var(--gk);
color: #241600;
}
.lg.r-def {
background: var(--def);
}
.lg.r-mid {
background: var(--mid);
color: #00221a;
}
.lg.r-fwd {
background: var(--fwd);
color: #2a0d1d;
}
.lg.bench {
background: var(--bench-soft);
color: var(--muted);
}
.seg-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: var(--space-3);
padding: 6px;
border-radius: var(--radius);
background: var(--surface);
}
.seg-nav .icon-btn[disabled] {
opacity: 0.3;
pointer-events: none;
}
.seg-label {
display: grid;
text-align: center;
line-height: 1.25;
}
.seg-label small {
color: var(--muted);
}
.pitch-layout {
display: grid;
gap: var(--space-4);
}
@media (min-width: 640px) {
.pitch-layout {
grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
align-items: start;
}
}
.pitch-box svg {
display: block;
width: 100%;
max-height: 64vh;
border-radius: var(--radius);
box-shadow: var(--shadow-2);
}
.changes-title {
font-weight: 750;
margin: 0 0 var(--space-2);
}
.changes,
.bench-list {
list-style: none;
padding: 0;
margin: 0 0 var(--space-4);
display: grid;
gap: 6px;
font-size: var(--fs-sm);
}
.changes li,
.bench-list li {
margin: 0;
}
.bench-list {
display: flex;
flex-wrap: wrap;
}
.bench-list li {
padding: 4px 10px;
border-radius: var(--radius-pill);
background: var(--surface-2);
font-weight: 650;
}
.tag {
display: inline-block;
margin-right: 6px;
padding: 1px 7px;
border-radius: 5px;
font-size: 0.7rem;
font-weight: 850;
letter-spacing: 0.04em;
background: var(--surface-2);
color: var(--text-2);
vertical-align: 1px;
}
.tag-in {
background: var(--in);
color: var(--on-in);
}
.tag-out {
background: var(--out);
color: var(--on-out);
}
.bench-card {
font-size: var(--fs-sm);
}
.bc-head {
margin-bottom: var(--space-4);
}
.bc-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--space-2);
}
.bc-fields label {
display: grid;
gap: 4px;
font-weight: 650;
font-size: var(--fs-xs);
color: var(--muted);
}
.bc-meta {
margin: var(--space-2) 0 0;
color: var(--muted);
}
.bc-period {
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: var(--space-3);
overflow: hidden;
break-inside: avoid;
}
.bc-period h3 {
margin: 0;
padding: 8px 12px;
background: var(--surface);
font-size: 1rem;
}
.bc-row {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) 22px;
gap: 10px;
align-items: start;
padding: 8px 12px;
border-top: 1px solid var(--border);
}
.bc-time {
font-weight: 800;
}
.bc-subs,
.bc-lineup {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 4px;
}
.bc-subs li,
.bc-lineup li {
margin: 0;
}
.bc-lineup .role {
margin-right: 6px;
}
.bc-check {
width: 18px;
height: 18px;
border: 2px solid var(--border-strong);
border-radius: 4px;
margin-top: 2px;
}
.bc-start {
grid-template-columns: 64px minmax(0, 1fr);
}
.bc-minutes ul {
list-style: none;
margin: 0;
padding: 8px 12px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 4px 16px;
}
.bc-minutes li {
display: flex;
justify-content: space-between;
gap: 8px;
margin: 0;
border-bottom: 1px dotted var(--border);
}
.bc-foot {
font-size: var(--fs-xs);
color: var(--muted);
text-align: right;
margin: 0;
}
.arrow {
color: var(--muted);
}
.minutes {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.minutes li {
margin: 0;
}
.mrow-head {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: var(--fs-sm);
}
.mrow-head .pname {
font-weight: 700;
}
.mbar {
position: relative;
height: 12px;
border-radius: 6px;
background: var(--surface-2);
margin: 4px 0 2px;
}
.mfill {
position: absolute;
inset: 0 auto 0 0;
border-radius: 6px;
background: var(--brand);
}
.mtarget {
position: absolute;
top: -3px;
bottom: -3px;
width: 2px;
background: var(--text);
border-radius: 1px;
}
.action-bar {
display: none;
}
@media (max-width: 899.98px) {
body.has-action-bar {
--actionbar-h: 68px;
}
.action-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
display: flex;
gap: 8px;
padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
background: color-mix(in srgb, var(--elevated) 94%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.action-bar .btn {
flex: 1 1 0;
min-width: 0;
padding-inline: 10px;
}
.action-bar .btn span {
overflow: hidden;
text-overflow: ellipsis;
}
.results-actions {
display: none;
}
}
.sheet .seg {
margin-bottom: var(--space-4);
}
.pos-pref {
display: grid;
gap: 8px;
margin-bottom: var(--space-4);
}
.pos-pref-row {
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
align-items: center;
gap: 8px;
}
.pos-pref-row .seg span {
min-width: 0;
padding-inline: 10px;
}
.inline-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.swap-list {
list-style: none;
margin: 0 0 var(--space-4);
padding: 0;
display: grid;
gap: 6px;
}
.swap-list li {
margin: 0;
}
.swap-list button {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 48px;
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
font-weight: 650;
text-align: left;
}
.swap-list button:hover {
border-color: var(--brand);
background: var(--brand-soft);
}
.team-list {
list-style: none;
margin: 0 0 var(--space-4);
padding: 0;
display: grid;
gap: 6px;
}
.team-list li {
margin: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.team-list .grow {
flex: 1;
min-width: 0;
}
.team-list small {
display: block;
color: var(--muted);
}
@media print {
body.print-bench .planner > :not(.results),
body.print-grid .planner > :not(.results) {
display: none !important;
}
body.print-bench .results > :not([role="tabpanel"]),
body.print-grid .results > :not([role="tabpanel"]) {
display: none !important;
}
body.print-bench #panel-bench,
body.print-grid #panel-grid {
display: block !important;
}
body.print-bench .tab-panel:not(#panel-bench),
body.print-grid .tab-panel:not(#panel-grid) {
display: none !important;
}
body.print-bench .page-hero,
body.print-grid .page-hero,
body.print-bench .page-content,
body.print-grid .page-content {
display: none !important;
}
.results,
.panel {
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
position: static !important;
}
.grid-wrap {
max-height: none !important;
overflow: visible !important;
border: 0 !important;
}
.rot-grid .sticky-col,
.rot-grid .total,
.rot-grid thead th {
position: static !important;
}
.cell {
width: 30px;
min-width: 30px;
height: 24px;
font-size: 9pt;
}
.bc-fields .input {
border: 0 !important;
border-bottom: 1px solid #999 !important;
border-radius: 0 !important;
padding: 2px 0 !important;
min-height: 0 !important;
}
.bc-row {
padding: 5px 10px;
}
}
dialog.gameday {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: var(--bg);
color: var(--text);
overflow-y: auto;
overscroll-behavior: contain;
}
dialog.gameday::backdrop {
background: var(--bg);
}
body.gameday-open {
overflow: hidden;
}
.gd-wrap {
max-width: 720px;
margin: 0 auto;
padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.gd-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.gd-title {
margin: 0;
font-weight: 800;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gd-head [aria-pressed="false"] {
opacity: 0.45;
}
.gd-clock {
text-align: center;
padding: var(--space-4) 0;
}
.gd-period {
margin: 0;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--fs-sm);
}
.gd-time {
margin: 0;
font-size: clamp(4rem, 22vw, 7.5rem);
font-weight: 850;
line-height: 1;
letter-spacing: -0.03em;
}
.gd-clock.is-over .gd-time {
color: var(--out);
}
.gd-progress {
height: 6px;
border-radius: 3px;
background: var(--surface-2);
margin: var(--space-3) auto var(--space-4);
max-width: 420px;
overflow: hidden;
}
.gd-progress span {
display: block;
height: 100%;
width: 0;
background: var(--brand);
transition: width 0.25s linear;
}
.gd-controls {
justify-content: center;
}
.gd-main {
min-width: 180px;
}
.gd-next {
padding: var(--space-4);
border-radius: var(--radius-lg);
background: var(--surface);
border: 2px solid var(--border);
margin-bottom: var(--space-4);
transition: background 0.3s, border-color 0.3s;
}
.gd-next.is-soon {
border-color: var(--accent);
background: var(--accent-soft);
}
.gd-next.is-due {
border-color: var(--out);
background: var(--out-soft);
}
.gd-next-title {
margin: 0 0 var(--space-2);
font-weight: 800;
font-size: var(--fs-lg);
}
.gd-next .bc-subs {
margin-bottom: var(--space-3);
font-size: 1.05rem;
}
.gd-cols {
display: grid;
gap: var(--space-4);
}
@media (min-width: 560px) {
.gd-cols {
grid-template-columns: 1fr 1fr;
}
}
.gd-cols h2 {
font-size: var(--fs-sm);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin: 0 0 var(--space-2);
}
.gd-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
.gd-list li {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 6px 10px;
border-radius: var(--radius-sm);
background: var(--surface);
min-height: 40px;
}
.gd-name {
flex: 1;
min-width: 0;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gd-min {
color: var(--muted);
font-weight: 700;
}
.gd-tools {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: var(--space-5);
}
.gd-tools .btn {
min-height: 52px;
padding-inline: 8px;
}
.gd-done {
padding-top: var(--space-4);
}
dialog.gameday.flash {
animation: gd-flash 0.4s ease-in-out 3;
}
@keyframes gd-flash {
50% {
background: var(--accent-soft);
}
}
.role-gk { background: var(--gk); color: #241600; }
.role-def { background: var(--def); }
.role-mid { background: var(--mid); color: #00221a; }
.role-fwd { background: var(--fwd); color: #2a0d1d; }
.example-plan {
margin: var(--space-4) 0 var(--space-5);
}
.example-plan .grid-wrap {
max-height: none;
}
.example-plan .summary {
margin-bottom: var(--space-3);
}
.sheet-wide {
max-width: 760px;
}
@media (max-width: 899.98px) {
body.has-action-bar {
--actionbar-h: 64px;
}
.action-bar {
gap: 6px;
padding-top: 6px;
padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
.action-bar .btn {
flex-direction: column;
gap: 2px;
min-height: 52px;
padding: 4px 6px;
border-radius: var(--radius);
font-size: 0.75rem;
line-height: 1.1;
}
.action-bar .btn svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 559.98px) {
.summary {
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3);
padding: var(--space-3);
}
.score {
width: 64px;
height: 64px;
}
.score strong {
font-size: 1.2rem;
}
.stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 12px;
}
.stats dd {
font-size: 0.95rem;
}
.rot-grid .sticky-col {
min-width: 84px;
max-width: 112px;
padding: 4px 6px;
}
.cell {
width: 34px;
min-width: 34px;
height: 32px;
font-size: 0.7rem;
}
.rot-grid .total {
padding: 4px 6px;
}
.tabs [role="tab"] {
padding: 8px 10px;
}
.tabs [role="tab"] svg {
width: 18px;
height: 18px;
}
}
.tabs [role="tab"] {
display: inline-flex;
align-items: center;
gap: 6px;
}
.tabs [role="tab"] svg {
width: 18px;
height: 18px;
}
.calc {
margin: var(--space-5) 0;
}
.calc-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 0 var(--space-3);
}
.calc-out {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-2);
padding: var(--space-4);
border-radius: var(--radius);
background: var(--brand-soft);
}
.calc-out p {
margin: 0;
}
.calc-out strong {
display: block;
font-size: 1.35rem;
font-variant-numeric: tabular-nums;
}
#print-root {
display: none;
}
.tool-card {
display: grid;
gap: var(--space-5);
padding: var(--space-4);
margin-bottom: var(--space-6);
background: var(--elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-2);
}
@media (min-width: 480px) {
.tool-card {
padding: var(--space-5);
}
}
@media (min-width: 900px) {
.tool-card {
grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
align-items: start;
padding: var(--space-6);
}
}
.tool-card .seg,
.tool-card .field {
margin-bottom: var(--space-4);
}
.ptc-big {
text-align: center;
padding: var(--space-5) var(--space-4);
border-radius: var(--radius-lg);
background: var(--brand-soft);
margin-bottom: var(--space-4);
}
.ptc-label {
margin: 0;
font-weight: 700;
color: var(--text-2);
}
.ptc-value {
margin: 0;
font-size: clamp(2.8rem, 10vw, 4rem);
font-weight: 850;
line-height: 1.1;
color: var(--brand-strong);
}
:root[data-theme="dark"] .ptc-value {
color: var(--brand);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="sun"]) .ptc-value {
color: var(--brand);
}
}
.ptc-sub {
margin: 0;
color: var(--text-2);
}
.ptc-facts {
list-style: none;
padding: 0;
margin: 0 0 var(--space-4);
display: grid;
gap: 8px;
font-size: var(--fs-sm);
}
.ptc-facts li {
display: flex;
gap: 8px;
margin: 0;
}
.ptc-facts svg {
width: 18px;
height: 18px;
flex: none;
margin-top: 3px;
color: var(--brand);
}
.ptc-out .h3 {
margin-top: 0;
font-size: var(--fs-lg);
}
.ptc-out td svg {
width: 16px;
height: 16px;
color: var(--in);
vertical-align: -3px;
}
.tool-card {
grid-template-columns: minmax(0, 1fr);
}
.tool-card > *,
.tool-card form,
.planner > *,
.page-content > * {
min-width: 0;
}
@media (min-width: 900px) {
.tool-card {
grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
}
}
.calc-row .stepper-row {
flex-wrap: nowrap;
}
@media (max-width: 420px) {
.calc-row {
grid-template-columns: minmax(0, 1fr);
}
}
.age-result {
padding: var(--space-4);
border-radius: var(--radius-lg);
background: var(--surface);
}
.age-u {
margin: 0;
font-size: clamp(2.6rem, 9vw, 3.6rem);
font-weight: 850;
line-height: 1;
color: var(--brand);
}
.age-range {
margin: 4px 0 var(--space-4);
font-weight: 650;
color: var(--text-2);
}
.age-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px 16px;
margin: 0 0 var(--space-4);
}
.age-facts dt {
font-size: var(--fs-xs);
color: var(--muted);
font-weight: 650;
}
.age-facts dd {
margin: 0;
font-weight: 700;
}
.field-figure {
margin: 0 0 var(--space-4);
padding: var(--space-3);
}
figure.field-figure img {
max-width: 100%;
border-radius: var(--radius);
}
.field-svg {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
}
.field-facts dd {
font-size: var(--fs-sm);
}
.chart-block {
margin: var(--space-4) 0 var(--space-6);
}
.chart-print {
min-width: 0;
}
.chart-title {
font-weight: 800;
font-size: var(--fs-lg);
margin: 0 0 4px;
}
.chart-meta {
color: var(--muted);
font-size: var(--fs-sm);
margin: 0 0 var(--space-3);
}
.chart-key {
margin-top: var(--space-3);
}
.key-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 6px 16px;
}
.key-list li {
display: flex;
align-items: flex-end;
gap: 6px;
margin: 0;
}
.write-line {
flex: 1;
border-bottom: 1px solid var(--border-strong);
min-height: 1.2em;
}
.blank-grid th,
.blank-grid td {
border: 1px solid var(--border) !important;
min-width: 40px;
height: 32px;
}
.blank-grid .blank-name {
min-width: 120px;
}
.chart-gen .chart-print .grid-wrap {
max-height: none;
}
@media (min-width: 900px) {
.lineup-tool {
grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
}
}
.lu-stage {
display: grid;
gap: var(--space-3);
min-width: 0;
}
.lu-help {
margin: 0;
font-size: var(--fs-sm);
color: var(--muted);
}
.lu-pitch {
max-width: 520px;
width: 100%;
margin-inline: auto;
}
.lu-title {
text-align: center;
font-weight: 800;
font-size: var(--fs-lg);
margin: 0 0 var(--space-2);
}
.lu-title small {
display: block;
font-weight: 600;
color: var(--muted);
font-size: var(--fs-sm);
}
.lineup-svg {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
box-shadow: var(--shadow-2);
touch-action: pan-y pinch-zoom;
user-select: none;
-webkit-user-select: none;
}
.lineup-svg .tok {
cursor: grab;
}
.lineup-svg .tok:focus {
outline: none;
}
.lineup-svg .tok:focus-visible circle:not([fill="none"]) {
stroke: #f5b700;
stroke-width: 1.2;
}
.chip-list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
}
.chip-list li {
margin: 0;
}
.chip-btn {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
padding: 6px 12px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--border-strong);
background: var(--bg);
font-weight: 650;
}
.chip-btn.is-target {
border-color: var(--accent);
background: var(--accent-soft);
}
.lu-roster {
list-style: none;
margin: 0 0 var(--space-3);
padding: 0;
display: grid;
gap: 6px;
max-height: 360px;
overflow-y: auto;
}
.lu-player {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) auto;
gap: 6px;
margin: 0;
}
.lu-player .input {
min-height: 40px;
padding: 6px 10px;
}
.color-row {
align-items: end;
}
.color-field {
display: grid;
gap: 4px;
font-weight: 650;
font-size: var(--fs-sm);
}
.color-field input {
width: 100%;
height: 42px;
border: 1.5px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--bg);
padding: 3px;
}
.blank-lineup-grid {
display: grid;
gap: var(--space-3);
}
.blank-pitch svg {
display: block;
width: 100%;
max-width: 300px;
margin-inline: auto;
}
.blank-names {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.blank-lineup .chart-title {
font-size: 1rem;
}
.lu-pitch {
max-width: min(520px, calc((100vh - 220px) * 68 / 105));
max-width: min(520px, calc((100dvh - 220px) * 68 / 105));
min-width: min(240px, 100%);
}
.lu-help {
min-height: 2.8em;
}
.drill {
border-top: 1px solid var(--border);
padding-top: var(--space-5);
margin-top: var(--space-6);
}
.drill h3 {
margin-top: 0;
}
.drill-focus {
color: var(--text-2);
}
.drill-grid {
display: grid;
gap: var(--space-4);
margin-bottom: var(--space-3);
}
@media (min-width: 720px) {
.drill-grid {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
align-items: start;
}
}
.drill-figure {
margin: 0;
}
.drill-figure img {
width: 100%;
height: auto;
max-height: none;
border-radius: var(--radius-sm);
}
.drill-meta {
display: grid;
gap: 8px;
margin: 0;
padding: var(--space-4);
border-radius: var(--radius);
background: var(--surface);
}
.drill-meta dt {
font-size: var(--fs-xs);
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.drill-meta dd {
margin: 0 0 4px;
font-weight: 600;
}
.drill h4 {
margin-top: var(--space-4);
font-size: 1rem;
}
.drill-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
font-size: var(--fs-sm);
color: var(--text-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius);
background: var(--surface);
}
.lg-dot {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
margin-right: 4px;
vertical-align: -2px;
}
.lg-a { background: #0072b2; }
.lg-b { background: #d55e00; }
.lg-c { background: #f5b700; }
.lg-cone {
display: inline-block;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 13px solid #ff8c1a;
margin-right: 4px;
}
.lg-line {
display: inline-block;
width: 26px;
border-top: 3px solid var(--text-2);
margin-right: 4px;
vertical-align: 3px;
}
.lg-run {
border-top-style: dashed;
border-top-color: #b38f00;
}
.lg-drib {
border-top-style: dotted;
}
body.embed {
min-height: 0;
background: var(--bg);
}
.embed-wrap {
padding: 12px;
}
.embed-title {
font-size: 1.25rem;
margin: 0 0 12px;
}
.embed .tool-card {
margin-bottom: 8px;
box-shadow: none;
}
.embed-credit {
margin: 0;
font-size: var(--fs-xs);
color: var(--muted);
text-align: center;
}
.embed-code {
width: 100%;
min-height: 92px;
font-family: var(--font-mono);
font-size: 0.8rem;
}
.lg-gk { background: #e69f00; }
.lg-shot {
border-top-color: #e05a5a;
}
.sample-note {
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
border-radius: var(--radius);
background: var(--accent-soft);
font-size: var(--fs-sm);
}
.sample-note p {
margin: 0 0 var(--space-2);
}
.sample-note-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 var(--space-3);
padding: 8px 12px;
border-radius: var(--radius-sm);
background: var(--accent-soft);
font-size: var(--fs-sm);
}
.sample-note-inline > span {
flex: 1 1 140px;
}
.sample-note-inline svg,
.gk-hint svg {
width: 18px;
height: 18px;
flex: none;
}
.gk-hint {
display: flex;
gap: 6px;
align-items: flex-start;
margin: calc(var(--space-2) * -1) 0 var(--space-3);
}