/* Conditional tool library. All spacing, colours and typography use FSE tokens. */
.lfcg-tool-studio { border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--card); overflow: clip; background: var(--wp--preset--color--card-surface); }
.lfcg-tool-studio.lfcg-tool-form { gap: 0; }
.lfcg-tool-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--16); padding: var(--wp--preset--spacing--20); background: var(--wp--preset--color--dark-slate); border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--border); }
.lfcg-tool-brand img { inline-size: var(--wp--custom--tool--logo); block-size: auto; }
.lfcg-tool-brand a { color: var(--wp--preset--color--cream-accent); text-decoration: none; font-size: var(--wp--custom--type--micro); }
.lfcg-tool-edition { font: 600 var(--wp--custom--type--micro) var(--wp--preset--font-family--inter); letter-spacing: var(--wp--custom--type--tracking); color: var(--wp--preset--color--muted-gray); }
.lfcg-studio-body { padding: var(--wp--preset--spacing--16); }
.lfcg-tool-intro { display: grid; gap: var(--wp--preset--spacing--8); }
.lfcg-tool-intro h3 { font: 700 var(--wp--preset--font-size--xx-large)/1 var(--wp--preset--font-family--barlow-condensed); text-transform: uppercase; }
.lfcg-tool-actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--12); align-items: center; }
.lfcg-tool-actions > button { flex: 1 1 auto; }
.lfcg-artwork-actions { display: grid; gap: var(--wp--preset--spacing--12); }
.lfcg-xi-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wp--custom--tool--settings-min)), 1fr)); gap: var(--wp--preset--spacing--16); }
.lfcg-xi-progress { display: grid; gap: var(--wp--preset--spacing--8); }
.lfcg-xi-progress progress { inline-size: 100%; block-size: var(--wp--preset--spacing--8); accent-color: var(--wp--preset--color--link); }
.lfcg-xi-art { --lfcg-kit: var(--wp--preset--color--liverpool-crimson); --lfcg-kit-text: var(--wp--preset--color--pure-white); border-radius: var(--wp--custom--radius--card); overflow: clip; border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); }
.lfcg-xi-art[data-kit=away] { --lfcg-kit: var(--wp--custom--tool--away); --lfcg-kit-text: var(--wp--preset--color--dark-slate); }
.lfcg-xi-art[data-kit=third] { --lfcg-kit: var(--wp--custom--tool--third); }
.lfcg-pitch-stage { inline-size: 100%; min-inline-size: 0; position: relative; isolation: isolate; aspect-ratio: var(--wp--custom--tool--mobile-stage-ratio); min-block-size: var(--wp--custom--tool--mobile-pitch-height); background: repeating-linear-gradient(to bottom, var(--wp--custom--tool--pitch-dark) 0 10%, var(--wp--custom--tool--pitch-light) 10% 20%); }
.lfcg-pitch-lines { position: absolute; inset: 0; color: var(--wp--custom--tool--pitch-line); opacity: .65; pointer-events: none; }
.lfcg-pitch-lines svg { inline-size: 100%; block-size: 100%; }
.lfcg-tool-form .lfcg-pitch-slot, .lfcg-pitch-slot { position: absolute; inset-inline-start: var(--lfcg-slot-x); inset-block-start: var(--lfcg-slot-y); transform: translate(-50%, -50%); display: grid; justify-items: center; align-items: start; gap: var(--wp--preset--spacing--8); inline-size: var(--wp--custom--tool--slot-width); min-inline-size: var(--wp--custom--dimension--touch); padding: 0; border: 0; background: transparent; color: var(--wp--preset--color--cream-accent); font: 600 var(--wp--custom--type--micro)/1.25 var(--wp--preset--font-family--inter); text-align: center; min-block-size: var(--wp--custom--dimension--touch); cursor: pointer; }
.lfcg-tool-form .lfcg-pitch-slot:disabled { opacity: 1; cursor: default; }
.lfcg-fan-shirt { display: inline-grid; place-items: center; position: relative; inline-size: var(--wp--custom--tool--shirt); max-inline-size: 100%; color: var(--lfcg-kit, var(--wp--preset--color--liverpool-crimson)); }
.lfcg-fan-shirt > span:first-child { display: block; inline-size: 100%; }
.lfcg-fan-shirt > img { display: block; inline-size: 100%; block-size: auto; }
.lfcg-fan-shirt[data-kit=away][data-goalkeeper=false] { --lfcg-kit-text: var(--wp--custom--tool--away-ink); }
.lfcg-fan-shirt[data-goalkeeper=true] { --lfcg-kit-text: var(--wp--preset--color--pure-white); }
.lfcg-fan-shirt svg { display: block; inline-size: 100%; block-size: auto; }
.lfcg-fan-shirt > b { position: absolute; inset-block-start: 38%; inset-inline: 0; color: var(--lfcg-kit-text, var(--wp--preset--color--pure-white)); font: 700 var(--wp--preset--font-size--large)/1 var(--wp--preset--font-family--barlow-condensed); }
.lfcg-captain-badge { position: absolute; inset-inline-end: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: var(--wp--preset--spacing--20); block-size: var(--wp--preset--spacing--20); border-radius: 50%; background: var(--wp--preset--color--cream); color: var(--wp--preset--color--dark-slate); font: 800 var(--wp--custom--type--micro) var(--wp--preset--font-family--inter); }
.lfcg-pitch-name { font-weight: 700; font-family: var(--wp--preset--font-family--barlow-condensed); white-space: nowrap; text-overflow: ellipsis; background: var(--wp--preset--color--dark-slate); padding: var(--wp--preset--spacing--4); border-radius: var(--wp--custom--radius--control); max-inline-size: 100%; display: block; overflow: hidden; }
.lfcg-art-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--12); padding: var(--wp--preset--spacing--16); background: var(--wp--preset--color--dark-slate); font-size: var(--wp--custom--type--micro); color: var(--wp--preset--color--muted-gray); }
.lfcg-tool-history[open], .lfcg-xi-list[open] { display: grid; gap: var(--wp--preset--spacing--16); }
.lfcg-player-picker { position: fixed; inset-block-start: 50%; inset-inline-start: 50%; inset-inline-end: auto; inset-block-end: auto; transform: translate(-50%, -50%); inline-size: min(var(--wp--custom--tool--picker), calc(100% - var(--wp--preset--spacing--32))); max-block-size: calc(100dvh - var(--wp--preset--spacing--48)); overflow-y: auto; padding: var(--lfcg-card-padding); color: var(--wp--preset--color--cream-accent); background: var(--wp--preset--color--card-surface); border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--card); overscroll-behavior: contain; }
.lfcg-player-picker:not([open]) { display: none; }
.lfcg-player-picker[open] { display: grid; }
.lfcg-player-picker::backdrop { background: color-mix(in srgb, var(--wp--preset--color--dark-slate) 85%, transparent); }
.lfcg-picker-list { display: grid; gap: var(--wp--preset--spacing--8); }
.lfcg-tool-form .lfcg-player-option { display: flex; gap: var(--wp--preset--spacing--12); text-align: start; align-items: center; background: var(--wp--preset--color--dark-slate); border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); }
.lfcg-player-option > span { display: grid; gap: var(--wp--preset--spacing--4); }
.lfcg-player-option > img, .lfcg-player-option > .lfcg-fan-shirt { inline-size: var(--wp--custom--dimension--portrait); block-size: var(--wp--custom--dimension--portrait); object-fit: contain; flex-shrink: 0; }
.lfcg-player-option small { color: var(--wp--preset--color--muted-gray); font-size: var(--wp--custom--type--micro); }
.lfcg-player-picker button[aria-pressed=true] { box-shadow: inset 0 0 0 var(--wp--custom--border--width) var(--wp--preset--color--link); }
.lfcg-prediction-art { border-radius: var(--wp--custom--radius--card); overflow: clip; background: linear-gradient(var(--wp--custom--art--angle), var(--wp--preset--color--card-surface), var(--wp--preset--color--pitch)); border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); }
.lfcg-scoreboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--16); padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--12); }
.lfcg-score-team { display: grid; gap: var(--wp--preset--spacing--16); justify-items: center; text-align: center; min-inline-size: 0; }
.lfcg-score-crest { display: grid; place-items: center; inline-size: var(--wp--custom--tool--crest); block-size: var(--wp--custom--tool--crest); }
.lfcg-crest-fallback, .lfcg-crest-fallback svg { display: block; inline-size: 100%; block-size: 100%; }
.lfcg-tool-studio .lfcg-score-crest img { inline-size: var(--wp--custom--tool--crest); block-size: var(--wp--custom--tool--crest); object-fit: contain; }
.lfcg-score-club { font: 700 var(--wp--custom--tool--scoreboard)/1.1 var(--wp--preset--font-family--barlow-condensed); min-block-size: 2.3em; }
.lfcg-tool-form .lfcg-score-choice { inline-size: 100%; }
.lfcg-tool-form .lfcg-score-choice input { font: 700 var(--wp--custom--tool--score)/1 var(--wp--preset--font-family--barlow-condensed); text-align: center; background: transparent; border-color: transparent; padding: var(--wp--preset--spacing--8); font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.lfcg-tool-form .lfcg-score-choice input::-webkit-inner-spin-button, .lfcg-tool-form .lfcg-score-choice input::-webkit-outer-spin-button { appearance: none; -webkit-appearance: none; }
.lfcg-score-steppers { display: flex; gap: var(--wp--preset--spacing--12); }
.lfcg-ratings-highlight { display: flex; gap: var(--wp--preset--spacing--20); align-items: center; padding: var(--lfcg-card-padding); background: linear-gradient(var(--wp--custom--art--angle),var(--wp--preset--color--pitch),var(--wp--preset--color--card-surface)); border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--card); }
.lfcg-ratings-highlight > img { inline-size: var(--wp--custom--tool--shirt); block-size: var(--wp--custom--tool--shirt); object-fit: contain; }
.lfcg-ratings-highlight > div { display: grid; gap: var(--wp--preset--spacing--8); }
.lfcg-ratings-highlight strong { font: 700 var(--wp--preset--font-size--x-large)/1.1 var(--wp--preset--font-family--barlow-condensed); }
.lfcg-ratings-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, var(--wp--custom--tool--ratings-min)),1fr)); gap: var(--wp--preset--spacing--12); }
.lfcg-tool-form .lfcg-rating-row { grid-template-columns: var(--wp--custom--dimension--portrait) minmax(0,1fr); border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); padding: var(--wp--preset--spacing--16); border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--dark-slate); }
.lfcg-rating-row[data-selected=true] { border-color: var(--wp--preset--color--link); }
.lfcg-rating-row > .lfcg-rating-mark { display: grid; place-items: center; color: var(--wp--preset--color--link); font: 700 var(--wp--preset--font-size--x-large)/1 var(--wp--preset--font-family--barlow-condensed); }
.lfcg-tool-form .lfcg-rating-row > label { grid-column: 1 / -1; }
.lfcg-rating-portrait { inline-size: var(--wp--custom--dimension--portrait); block-size: var(--wp--custom--dimension--portrait); object-fit: contain; }
.lfcg-shared-lineup > .lfcg-tool-studio { max-inline-size: var(--wp--style--global--content-size); inline-size: 100%; align-self: center; }
/* The theme owns the match hub grid; this stylesheet styles tool interiors. */
@media (min-width: 48rem) {
  .lfcg-pitch-stage { aspect-ratio: var(--wp--custom--tool--stage-ratio); }
  .lfcg-studio-body { padding: var(--lfcg-card-padding); }
  .lfcg-tool-brand { padding: var(--wp--preset--spacing--24); }
}

.lfcg-social-panel { display: grid; gap: var(--wp--preset--spacing--12); }
.lfcg-social-actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--12); }
.lfcg-social-actions.lfcg-social-actions > :is(a, button) { display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--8); flex: 1 1 auto; min-block-size: var(--wp--custom--dimension--touch); padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16); border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--card-surface); color: var(--wp--preset--color--cream-accent); font: inherit; text-decoration: none; }
.lfcg-social-actions svg { inline-size: var(--wp--preset--spacing--20); block-size: var(--wp--preset--spacing--20); flex-shrink: 0; }
.lfcg-social-actions > a:hover { border-color: var(--wp--preset--color--link); color: var(--wp--preset--color--link); }

/* Immediate confirmations keep focus and leave important details beside the action. */
.lfcg-tool-form button[data-feedback-state=success] { background: var(--wp--preset--color--pitch); color: var(--wp--preset--color--success); box-shadow: inset 0 0 0 var(--wp--custom--border--width) var(--wp--preset--color--success); }
.lfcg-feedback-detail { display: flex; align-items: start; gap: var(--wp--preset--spacing--12); padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16); border-inline-start: var(--wp--custom--border--accent) solid var(--wp--preset--color--success); border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--pitch); color: var(--wp--preset--color--cream-accent); overflow-wrap: anywhere; }
.lfcg-feedback-detail[data-kind=error] { border-color: var(--wp--preset--color--link); background: var(--wp--preset--color--dark-slate); }
.lfcg-feedback-detail > span { color: var(--wp--preset--color--success); font-weight: 700; }
.lfcg-feedback-detail[data-kind=error] > span { color: var(--wp--preset--color--link); }
.lfcg-feedback-announcer { position: absolute; inline-size: var(--wp--custom--border--width); block-size: var(--wp--custom--border--width); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lfcg-notification { --lfcg-notification-accent: var(--wp--preset--color--success); position: fixed; z-index: var(--wp--custom--feedback--layer); inset-inline: var(--wp--preset--spacing--16); inset-block-end: calc(var(--wp--preset--spacing--16) + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: var(--wp--preset--spacing--24) minmax(0,1fr) var(--wp--custom--dimension--touch); align-items: start; gap: var(--wp--preset--spacing--12); padding: var(--wp--preset--spacing--16); border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); border-inline-start: var(--wp--custom--border--accent) solid var(--lfcg-notification-accent); border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--card-surface); color: var(--wp--preset--color--cream-accent); box-shadow: var(--wp--custom--feedback--shadow); max-block-size: calc(100dvh - var(--wp--preset--spacing--48)); overflow-y: auto; font: 400 var(--wp--preset--font-size--small)/1.5 var(--wp--preset--font-family--inter); }
.lfcg-notification[hidden] { display: none; }
.lfcg-notification[data-kind=error] { --lfcg-notification-accent: var(--wp--preset--color--link); }
.lfcg-notification-content { display: grid; gap: var(--wp--preset--spacing--4); overflow-wrap: anywhere; }
.lfcg-notification-content strong { color: var(--lfcg-notification-accent); }
.lfcg-notification-content p { color: var(--wp--preset--color--cream-accent); }
.lfcg-notification-icon { display: grid; place-items: center; inline-size: var(--wp--preset--spacing--24); block-size: var(--wp--preset--spacing--24); border: var(--wp--custom--border--width) solid currentColor; border-radius: 50%; color: var(--lfcg-notification-accent); font-weight: 700; }
.lfcg-notification-close { display: grid; place-items: center; inline-size: var(--wp--custom--dimension--touch); min-block-size: var(--wp--custom--dimension--touch); padding: 0; background: var(--wp--preset--color--soft); border: 0; border-radius: var(--wp--custom--radius--control); color: var(--wp--preset--color--cream-accent); font: 400 var(--wp--preset--font-size--large) var(--wp--preset--font-family--inter); cursor: pointer; }
.lfcg-notification-close:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--link); outline-offset: var(--wp--custom--focus--offset); }
@media (min-width: 48rem) {
  .lfcg-notification { inset-inline-start: auto; inset-inline-end: var(--wp--preset--spacing--24); inline-size: var(--wp--custom--feedback--width); }
}

.lfcg-tool-form button[aria-busy=true] { opacity: .7; cursor: progress; }

.lfcg-tool-form button[data-feedback-state=error] { box-shadow: inset 0 0 0 var(--wp--custom--border--width) var(--wp--preset--color--link); }

/* Match freshness controls share the existing light/dark colour and spacing tokens. */
.lfcg-live-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--16); margin-block: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--16); border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--card); background: var(--lfcg-color-card-surface); }
.lfcg-live-copy { flex: 1 1 20rem; min-inline-size: 0; }
.lfcg-live-copy p { margin-block: var(--wp--preset--spacing--8) 0; }
.lfcg-live-copy strong { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--8); }
.lfcg-live-copy strong::before { content: ''; inline-size: .55rem; block-size: .55rem; flex: none; border-radius: 50%; background: currentColor; }
.lfcg-live-controls[data-state="automatic"] strong { color: var(--wp--preset--color--link); }
.lfcg-live-checked { color: var(--lfcg-color-muted-gray); font-size: var(--wp--custom--type--micro); font-variant-numeric: tabular-nums; }
.lfcg-live-actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--8); max-inline-size: 100%; }
.lfcg-live-actions button { min-block-size: var(--wp--custom--dimension--touch); padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16); border: var(--wp--custom--border--width) solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--soft); color: var(--lfcg-color-cream-accent); font: inherit; font-weight: 700; white-space: normal; max-inline-size: 100%; cursor: pointer; }
.lfcg-live-actions button:hover { border-color: currentColor; }
.lfcg-live-actions button[aria-disabled="true"] { opacity: .65; cursor: default; }
[data-lfcg-live-details] > * + * { margin-block-start: var(--wp--preset--spacing--20); }