/* TG Kit Builder studio. Uses theme tokens (--tg-*) with fallbacks. */
/* One green is not enough: the brand green is 2.74:1, which fails behind white
   text and as text on white. --g stays the brand green for borders and other
   decoration; --g-fill and --g-text are the theme's accessible pair. */
.tgkb {
	--g: var(--tg-green, #5faf2d);
	--g-fill: var(--tg-green-fill, #43841e);
	--g-text: var(--tg-green-text, #3f7d1d);
	--ink: var(--tg-ink, #141414); --line: var(--tg-border, #e3e6e9);
	--muted: var(--tg-text-muted, #565c63); --paper: var(--tg-paper, #f6f6f4);
}
.tgkb, .tgkb * { box-sizing: border-box; }
.tgkb-gate { text-align: center; padding: 48px 16px; }
.tgkb__loading { padding: 48px; text-align: center; color: var(--muted); }

/* Stepper */
.tgkb-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; overflow-x: auto; }
.tgkb-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tgkb-steps li.is-active { border-color: var(--g); color: var(--ink); }
.tgkb-steps li.is-done { color: var(--g); border-color: var(--g); }
.tgkb-steps__num { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--paper); font-size: 12px; }
.tgkb-steps li.is-active .tgkb-steps__num, .tgkb-steps li.is-done .tgkb-steps__num { background: var(--g-fill); color: #fff; }
/* Phone: every step visible, but only the current one named.
   The four labels together are 613px, so on a 390px screen step three was cut
   mid-word and step four sat off the end of a scroller with nothing to say it
   was there. Numbers for all four and a label for the one you are on shows the
   whole journey and where you are in it. */
@media (max-width: 560px) {
	.tgkb-steps { overflow-x: visible; gap: 6px; }
	.tgkb-steps li { padding: 6px 10px; }
	.tgkb-steps li:not(.is-active) { gap: 0; }
	.tgkb-steps li:not(.is-active) .tgkb-steps__label {
		position: absolute; width: 1px; height: 1px;
		overflow: hidden; clip-path: inset(50%); white-space: nowrap;
	}
}

/* Body layout */
.tgkb-body { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
@media (min-width: 900px) { .tgkb-body { grid-template-columns: minmax(0,1fr) 320px; align-items: start; } }
/* The preview sits above the running total in one column, and the pair sticks
   together so the kit stays on screen while the club works down the form. */
.tgkb-aside { display: grid; gap: 18px; align-content: start; }
@media (min-width: 900px) { .tgkb-aside { position: sticky; top: 88px; } }

/* Persistent mobile action bar (fixed above the site's bottom nav) */
.tgkb-mobilebar { display: none; }
@media (max-width: 899px) {
	.tgkb-mobilebar {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		position: fixed; left: 0; right: 0; bottom: var(--tg-bottombar-h, 0px); z-index: 60;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(0,0,0,.08);
	}
	.tgkb-mobilebar__total { display: flex; flex-direction: column; line-height: 1.1; }
	.tgkb-mobilebar__total small { color: var(--muted); font-size: 11px; }
	.tgkb-mobilebar__total strong { font-size: 18px; color: var(--g); }
	.tgkb-mobilebar .tg-btn { flex: 0 0 auto; min-width: 150px; }
	/* Keep the inline Continue/Submit out of the way; the bar drives it on mobile. */
	.tgkb-nav [data-next], .tgkb-nav [data-submit] { display: none; }
	.tgkb-body { padding-bottom: 72px; }
}
.tgkb-stage h2 { font-size: 1.6rem; margin: 0 0 8px; }
.tgkb-hint { color: var(--muted); margin-bottom: 16px; }

/* Summary (sticky) */
.tgkb-summary { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
/* The aside is the sticky element now; two nested stickies fight each other. */
.tgkb-summary h3 { margin: 0 0 12px; }
.tgkb-summary__rows { margin: 0 0 12px; }
.tgkb-summary__rows > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.tgkb-summary__rows dt { color: var(--muted); margin: 0; } .tgkb-summary__rows dd { margin: 0; font-weight: 600; }
.tgkb-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line); font-size: 18px; }
.tgkb-summary__total strong { color: var(--g-text); }
.tgkb-summary__eta { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.tgkb-summary__warn { color: #cf3b2e; font-size: 13px; margin: 6px 0 0; }
.tgkb-save { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; min-height: 16px; }

/* Fields */
.tgkb-field { margin: 16px 0; }
.tgkb-field > label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.tgkb-field input, .tgkb-field select, .tgkb-field textarea { width: 100%; min-height: 46px; padding: 8px 12px; border: 1px solid var(--tg-border-strong, #cdd2d7); border-radius: 10px; font: inherit; }
.tgkb-field select { padding-right: 34px; } /* room for the themed chevron */
.tgkb-chosen { color: var(--muted); font-weight: 400; }

/* Kit cards */
.tgkb-kits { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin-bottom: 8px; }
@media (min-width: 620px) { .tgkb-kits { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.tgkb-kit { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; }
.tgkb-kit input { position: absolute; opacity: 0; }
.tgkb-kit.is-selected { border-color: var(--g); background: rgba(95,175,45,.05); }
.tgkb-kit__name { font-weight: 800; font-size: 1.05rem; }
.tgkb-kit__blurb { color: var(--muted); font-size: 13px; }
.tgkb-kit__price { font-weight: 700; margin-top: 6px; } .tgkb-kit__price small { color: var(--muted); font-weight: 400; }
.tgkb-kit__moq { position: absolute; top: 12px; right: 12px; font-size: 11px; color: var(--muted); }

/* Swatches */
.tgkb-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.tgkb-swatch { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--tg-border-strong,#cdd2d7); box-shadow: inset 0 0 0 2px #fff; cursor: pointer; padding: 0; }
.tgkb-swatch.is-selected { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--ink); }

/* Matching add-ons */
.tgkb-addons { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
@media (min-width: 620px) { .tgkb-addons { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tgkb-addon { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; }
.tgkb-addon input { position: absolute; opacity: 0; }
.tgkb-addon.is-selected { border-color: var(--g); background: rgba(95,175,45,.05); }
.tgkb-addon__name { font-weight: 600; } .tgkb-addon__blurb { font-size: 13px; color: var(--muted); } .tgkb-addon__price { font-size: 13px; font-weight: 600; color: var(--g-text); margin-top: 2px; }
.tgkb-field--gk { margin-top: 12px; }
.tgkb-summary__break { font-size: 13px; color: var(--g); font-weight: 600; margin: 8px 0 0; }
.tgkb-summary__eta small { color: var(--muted); font-weight: 400; }

/* Decorations */
.tgkb-decos { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
@media (min-width: 620px) { .tgkb-decos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.tgkb-deco { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; }
.tgkb-deco input { position: absolute; opacity: 0; }
.tgkb-deco.is-selected { border-color: var(--g); background: rgba(95,175,45,.05); }
.tgkb-deco__name { font-weight: 600; } .tgkb-deco__cost { font-size: 13px; color: var(--muted); } .tgkb-deco__lead { font-size: 12px; color: var(--g); }

/* Upload */
/* ===== Decoration cards (step 2) =====
   Three cards, one per thing a club can add, as Ben's mockup: club badge,
   sponsor logo and player number. Each holds its own upload and its own
   options, which is why the generic type/placement/method dropdowns are gone. */
.tgkb-cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin-bottom: 14px; }
@media (min-width: 760px) { .tgkb-cards { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.tgkb-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
}
.tgkb-card__name { margin: 0; font-size: .95rem; font-weight: 700; }
.tgkb-card__art {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	padding: 10px;
	border-radius: 10px;
	background: #f5f4f7;
	color: #111;
}
.tgkb-card__art svg { width: 54px; height: auto; }
.tgkb-card__art--sponsor { font-weight: 800; letter-spacing: .08em; font-size: 1.1rem; }
.tgkb-card__art--number { font-weight: 800; font-size: 2.6rem; letter-spacing: -.03em; }
.tgkb-card__note { margin: 0; font-size: .75rem; color: var(--muted, #5b5b5b); }
.tgkb-card__sub { margin: 0; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.tgkb-card__up { align-self: start; }
.tgkb-card__files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tgkb-card__files li { display: flex; align-items: center; gap: 8px; font-size: .75rem; }
.tgkb-card__files img { width: 28px; height: 28px; object-fit: contain; background: #f5f4f7; border-radius: 4px; }
.tgkb-card__files em { color: #a33; font-style: normal; }

/* Pills are a SINGLE choice per group, so a badge cannot be billed as both
   embroidered and printed, which the old checkbox list allowed. */
.tgkb-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tgkb-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
}
.tgkb-pill.is-on { border-color: var(--g); background: rgba(95,175,45,.08); }
.tgkb-pill:focus-visible { outline: 2px solid var(--tg-green, #5faf2d); outline-offset: 2px; }
/* A margin, not the flex gap: a bare text node beside the span does not take
   the gap, so the label ran straight into the price ("Embroidered£3.50"). */
.tgkb-pill__cost { margin-left: 5px; font-weight: 500; color: var(--muted, #5b5b5b); }
/* flex-shrink 0, or a 12px dot collapses to a sliver next to the label. */
.tgkb-pill__dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); }
.tgkb-pill--none { color: var(--muted, #5b5b5b); }

/* ===== Quantity and sizes (step 1) =====
   A price before the squad page. Junior and adult sit apart because they do
   not cost the same. */
.tgkb-sizes__head { display: block; font-weight: 700; }
.tgkb-sizes__band { margin-top: 10px; }
.tgkb-sizes__bandname {
	display: block;
	margin-bottom: 4px;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--muted, #5b5b5b);
}
.tgkb-sizes__grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tgkb-sizes__col { display: flex; flex-direction: column; gap: 2px; width: 62px; }
.tgkb-sizes__sz { font-size: .7rem; text-align: center; color: var(--muted, #5b5b5b); }
.tgkb-sizes__qty {
	width: 100%;
	padding: 7px 4px;
	border: 1px solid var(--line);
	border-radius: 8px;
	text-align: center;
	font-size: .875rem;
}
.tgkb-sizes__total { margin: 8px 0 0; font-size: .8125rem; font-weight: 600; }

.tgkb-upload { display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--tg-border-strong,#cdd2d7); border-radius: 12px; }
.tgkb-upload input[type=file] { min-width: 180px; }
.tgkb-upload__opts { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
@media (min-width: 620px) { .tgkb-upload__opts { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.tgkb-upload__opts select { padding: 8px 32px 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.tgkb-upres { margin: 0; font-size: 13px; color: var(--muted); }
.tgkb-upres.is-low { color: #cf7a13; font-weight: 600; }
.tgkb-rights { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.tgkb-rights input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--g); }
.tgkb-art__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tgkb-art__res { font-size: 12px; color: var(--muted); }
.tgkb-art__res.is-low { color: #cf7a13; font-weight: 600; }
.tgkb-uperr { color: #cf3b2e; font-size: 13px; margin: 8px 0 0; }
.tgkb-arts { list-style: none; margin: 12px 0 0; padding: 0; }
.tgkb-art { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; }
.tgkb-art em { color: var(--muted); font-style: normal; font-size: 12px; }
.tgkb-art__x, .tgkb-srow__x { background: none; border: 0; font-size: 20px; color: #cf3b2e; cursor: pointer; }
.tgkb-uperr { color: #cf3b2e; font-size: 13px; }

/* Squad grid */
/* Three buttons and a text link. align-items:center left the link floating
   half way up a taller button once the row wrapped on a phone, so the buttons
   align along their tops and the link is pushed onto its own line. */
.tgkb-squad-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.tgkb-squad-tools .tgkb-link { align-self: center; }
@media (max-width: 560px) {
	.tgkb-squad-tools { gap: 8px 10px; }
	/* Its own line, left-aligned under the buttons rather than beside one. */
	.tgkb-squad-tools .tgkb-link { flex: 1 0 100%; align-self: start; }
}
.tgkb-link { font-size: 13px; }
/* ===== Size grids, one per garment (step 1) =====
   Ben, 30 Oct: shirts, shorts and socks are confirmed separately, each with the
   sizes its own product is sold in. */
.tgkb-sizes__head { display: block; font-weight: 700; }
.tgkb-sizes__sets { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin-top: 10px; }
@media (min-width: 900px) { .tgkb-sizes__sets { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.tgkb-sizeset { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.tgkb-sizeset__name { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.tgkb-sizeset__product { font-weight: 400; color: var(--muted); }
.tgkb-sizeset__total { margin: 10px 0 0; font-size: 13px; font-weight: 600; }
.tgkb-sizes__band + .tgkb-sizes__band { margin-top: 8px; }
.tgkb-sizes__oos { font-size: 10px; text-align: center; color: var(--muted); }
.tgkb-sizes__qty:disabled { background: #f3f3f3; color: #999; }
/* Five fixed columns, not a wrapping flex row: at a third of the page each set
   is narrow enough that 58px boxes pushed XL onto a line of its own, and the
   bands then no longer read as one run of sizes. A grid also keeps every box
   the same width whether its band holds four sizes or five. */
.tgkb-sizes__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
}
.tgkb-sizes__col { width: auto; }
.tgkb-sizeset__colour { margin: -4px 0 8px; font-size: 13px; color: var(--muted); }
/* The age range under a youth box, and the shoe range under a sock box: the
   code alone does not tell a parent which one fits (Ben's mock-up, 30 Oct). */
.tgkb-sizes__age { font-size: 10px; text-align: center; color: var(--muted); }

/* A club is committing to quantities here and on review, so the stock
   disclaimer sits under both (Ben, 30 Oct). */
.tgkb-stocknote { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* ===== Player numbers (step 3) =====
   One row per size that has a quantity, generated from the step 1 grid, as
   Ben's mockup of 29 Oct: SIZE | QUANTITY | PLAYER NUMBERS. */
.tgkb-numbers { margin-top: 4px; }
.tgkb-nrow { display: grid; grid-template-columns: 110px 90px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tgkb-nrow--head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.tgkb-nrow--head em { font-style: normal; text-transform: none; letter-spacing: 0; }
.tgkb-nrow__size { font-weight: 700; }
.tgkb-nrow__qty { color: var(--muted); }
.tgkb-nrow__nums { display: flex; flex-direction: column; gap: 4px; }
.tgkb-nrow__nums input { width: 100%; }
.tgkb-nrow__err { font-size: 12px; color: #cf3b2e; }
@media (max-width: 560px) {
	/* Stacked, with the size and count on one line above the field: three
	   columns at 110px each leaves nothing for the numbers on a phone. */
	.tgkb-nrow { grid-template-columns: auto auto; grid-template-areas: 'size qty' 'nums nums'; gap: 6px 10px; padding: 12px 0; }
	.tgkb-nrow--head { display: none; }
	.tgkb-nrow__size { grid-area: size; }
	.tgkb-nrow__qty { grid-area: qty; }
	.tgkb-nrow__qty::before { content: "x"; }
	.tgkb-nrow__nums { grid-area: nums; }
}

.tgkb-srow { display: grid; grid-template-columns: 1fr 64px 84px 130px 40px; gap: 8px; align-items: center; padding: 6px 0; }
.tgkb-srow--head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.tgkb-in { min-height: 44px; padding: 6px 10px; border: 1px solid var(--tg-border-strong,#cdd2d7); border-radius: 8px; font: inherit; width: 100%; }
select.tgkb-in { padding-right: 30px; background-position: right 8px center; }
.tgkb-in.is-err { border-color: #cf3b2e; }
.tgkb-in.is-warn { border-color: #e0a800; }
.tgkb-empty { color: var(--muted); padding: 12px 0; }
.tgkb-squad-err { color: #cf3b2e; font-size: 13px; font-weight: 600; margin: 10px 0 0; }
.tgkb-squad-note { color: var(--muted); font-size: 13px; margin: 8px 0 0; }

/* Share link (controlled player-size collection) */
.tgkb-share { margin: 0 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(95,175,45,.04); }
.tgkb-share__lead { margin: 0 0 10px; font-size: 14px; }
.tgkb-share__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tgkb-share__row input { flex: 1; min-width: 220px; padding: 10px; border: 1px solid var(--tg-border-strong,#cdd2d7); border-radius: 8px; font: inherit; }
.tgkb-share__status { margin: 8px 0 0; font-size: 13px; color: var(--g); font-weight: 600; }

/* Public player-size form */
.tgkb-sizeform { max-width: 520px; margin: 0 auto; }
.tgkb-sizeform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tgkb-sizeform__form .tgkb-field { margin-bottom: 14px; }
.tgkb-sizeform__form select { padding-right: 34px; }
.tgkb-sizeform__form input, .tgkb-sizeform__form select { width: 100%; min-height: 46px; padding: 10px; border: 1px solid var(--tg-border-strong,#cdd2d7); border-radius: 8px; font: inherit; }
.tgkb-sizeform__ok { padding: 16px; border: 1px solid var(--g); border-radius: 12px; background: rgba(95,175,45,.06); }

@media (max-width: 620px) {
	/* One player per card: each roster row becomes a self-contained card. */
	.tgkb-srow { grid-template-columns: 1fr 56px 40px; grid-template-areas: 'name name x' 'num init init' 'size size size'; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
	.tgkb-srow--head { display: none; }
	.tgkb-srow [data-f=player_name] { grid-area: name; }
	.tgkb-srow [data-f=player_number] { grid-area: num; }
	.tgkb-srow [data-f=initials] { grid-area: init; }
	.tgkb-srow [data-f=shirt_size] { grid-area: size; }
	.tgkb-srow__x { grid-area: x; justify-self: end; }
}

/* Review */
.tgkb-review { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.tgkb-review__card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.tgkb-review__card h3 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; color: var(--muted); }
.tgkb-warn { color: #cf3b2e; } .tgkb-note { color: var(--muted); font-size: 13px; } .tgkb-submit-err { color: #cf3b2e; }

/* Nav */
.tgkb-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Account: orders + single */
/* Account order views sit on the full-width builder template; keep them readable. */
.tgkb-orders, .tgkb-order { max-width: 860px; }
.tgkb-orders__list { list-style: none; margin: 0; padding: 0; }
.tgkb-orders__list a { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; color: inherit; }
.tgkb-pill, .tgkb-adm-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--paper); }
.tgkb-pill--proofing { background: #fff4d6; } .tgkb-pill--approved { background: #e6f3e0; } .tgkb-pill--paid, .tgkb-pill--production { background: #d9f0d4; color: #1f5c3a; }
.tgkb-order__head { display: flex; align-items: center; gap: 12px; }
.tgkb-order__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; margin-top: 16px; }
@media (min-width: 800px) { .tgkb-order__grid { grid-template-columns: 1fr 1fr; } }
.tgkb-order__roster { width: 100%; border-collapse: collapse; }
.tgkb-order__roster th, .tgkb-order__roster td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.tgkb-approve label, .tgkb-approve textarea { display: block; margin: 10px 0; width: 100%; }
.tgkb-approve textarea { min-height: 80px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.tgkb-pill--changes_requested { background: #ffe3d6; color: #a5401f; }
/* Front/back proof viewer */
.tgkb-proofs { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin-bottom: 12px; }
@media (min-width: 480px) { .tgkb-proofs { grid-template-columns: 1fr 1fr; } }
.tgkb-proof { margin: 0; }
.tgkb-proof figcaption { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.tgkb-proof__img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; display: block; background: #fff; }
.tgkb-approved { color: #1f5c3a; font-weight: 600; }
/* Request changes + PO */
.tgkb-reqchanges, .tgkb-po { margin-top: 14px; }
.tgkb-reqchanges summary, .tgkb-po summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.tgkb-reqchanges__form textarea, .tgkb-po__form input { display: block; width: 100%; margin: 8px 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.tgkb-reqchanges__form textarea { min-height: 80px; }
.tgkb-reqchanges__form label, .tgkb-po__form label { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; }
.tgkb-changes { color: #a5401f; font-weight: 600; }
.tgkb-changes__note { margin: 8px 0; padding: 10px 12px; border-left: 3px solid var(--line); color: var(--muted); font-style: italic; }
.tgkb-pay { margin-top: 8px; }

/* Sign-in step: a guest has built stages 1-3 and needs an account to submit. */
.tgkb-signin {
	border: 1px solid var(--tg-green, #49b928); border-radius: 12px;
	background: rgba(73, 185, 40, .06); padding: 20px; margin: 24px 0;
}
.tgkb-signin h3 { margin: 0 0 8px; }
.tgkb-signin p { margin: 0 0 12px; }
.tgkb-signin__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* The stage heading is focused programmatically on each stage change (so the
   change is announced); it is not a control, so it gets no focus ring. */
.tgkb-stage h2[tabindex="-1"]:focus,
.tgkb-stage h2[tabindex="-1"]:focus-visible { outline: none; }


/* ===== Live kit preview =====
   SVG garments recoloured from the palette. Chosen over photography because the
   palette is twelve hex values and a photographic preview would need a shot of
   every garment in every colour. */
.tgkb-pv {
	/* Matched to the product shots' own backdrop, measured off their corners at
	   #f5f4f7. The shirt and shorts carry that grey baked in, so a panel of any
	   other colour showed it as a rectangle around each garment; with the panel
	   the same colour they sit on it seamlessly, and the socks' pure white
	   drops to the same shade through the multiply above. */
	background: #f5f4f7;
	border: 1px solid var(--line, #e4e4e0);
	border-radius: 14px;
	padding: 14px;
}
.tgkb-pv__views { display: flex; gap: 6px; margin-bottom: 10px; }
.tgkb-pv__view {
	flex: 1 1 auto;
	padding: 7px 10px;
	border: 1px solid var(--line, #e4e4e0);
	border-radius: 999px;
	background: #fff;
	font-size: .8125rem;
	font-weight: 600;
	cursor: pointer;
}
.tgkb-pv__view.is-on { background: #111; border-color: #111; color: #fff; }
.tgkb-pv__view:focus-visible { outline: 2px solid var(--tg-green, #5faf2d); outline-offset: 2px; }
.tgkb-pv__stage { display: flex; justify-content: center; }
.tgkb-pv__stage .tgkb-pv__svg { width: 100%; max-width: 240px; height: auto; }
.tgkb-pv__stage--ghost { opacity: .5; }
.tgkb-pv__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line, #e4e4e0);
}
/* The goalkeeper kit has socks and nothing else below the stage, so its row
   holds one tile; at the two-up cell width that read as an oversized sock
   photo pushed to the left. */
.tgkb-pv__row--solo { grid-template-columns: minmax(0, 190px); justify-content: center; }
.tgkb-pv__item { text-align: center; }
.tgkb-pv__item .tgkb-pv__svg { width: 100%; max-width: 104px; height: auto; }
.tgkb-pv__item span {
	display: block;
	margin-top: 2px;
	font-size: .75rem;
	color: var(--muted, #5b5b5b);
}
/* A pair, not a single sock. */
.tgkb-pv__socks { display: flex; justify-content: center; gap: 4px; }
.tgkb-pv__socks .tgkb-pv__svg { max-width: 54px; }
.tgkb-pv__note {
	margin: 12px 0 0;
	font-size: .75rem;
	line-height: 1.45;
	color: var(--muted, #5b5b5b);
}
.tgkb-pv__empty { margin: 0 0 10px; font-size: .8125rem; color: var(--muted, #5b5b5b); }


/* ===== Photographic kit preview =====
   Product shots from the shop, with the decoration marks laid over them as
   percentages of the frame so they hold position at any size. */
.tgkb-pv__photo { position: relative; display: block; }
/* The photo is a flex item on the stage, so without a width it sizes to the
   file's own pixels. The shop's shirt shots are wide enough not to show it,
   but the goalkeeper slices are barely 108px across and rendered at half the
   size of the socks beneath them. */
.tgkb-pv__stage .tgkb-pv__photo { width: 100%; max-width: 240px; }
.tgkb-pv__item .tgkb-pv__photo { width: 100%; }
/* No blend mode here, deliberately.

   multiply was tried to hide the socks' pure-white backdrop, and it worked for
   that, but grey multiplied by grey is darker than either: it turned the shirt
   and shorts' own #f5f4f7 ground into a visible rectangle on the panel. Matching
   the panel to that same grey (above) does the job for both, and leaves the
   socks a shade lighter than their neighbours rather than a shade darker, which
   is far less noticeable. */
.tgkb-pv__photo img { display: block; width: 100%; height: auto; }
/* The shop has no back shot, so the back view mirrors the front. */
.tgkb-pv__photo.is-mirrored img { transform: scaleX(-1); }
.tgkb-pv__mark {
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: none;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}
.tgkb-pv__mark--badge { transform: translate(-50%, -50%); }
.tgkb-pv__mark--badge svg { display: block; width: 100%; height: auto; }
.tgkb-pv__mark--sponsor { font-size: clamp(.5rem, 2.1vw, .8rem); font-weight: 800; letter-spacing: .06em; }
.tgkb-pv__mark--name { font-size: clamp(.45rem, 1.8vw, .7rem); font-weight: 700; letter-spacing: .12em; }
.tgkb-pv__mark--number { font-size: clamp(1.6rem, 7vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; }
/* The chosen colourway, named under the kit. */
.tgkb-pv__colour {
	margin: 10px 0 0;
	font-size: .8125rem;
	font-weight: 600;
	text-align: center;
}


/* Each garment's own colour name under its tile, since the three can differ. */
.tgkb-pv__swatchname {
	display: block;
	font-size: .6875rem;
	color: var(--muted, #5b5b5b);
}
/* The three colour rows read as one group. */
.tgkb-field--colour { margin: 0 0 10px; }
.tgkb-field--colour > label { font-size: .8125rem; font-weight: 600; }

/* ===== Step 1 sub-sections (Ben's mock-up, 30 Oct) =====
   Colours, then quantities, then the goalkeeper kit, each behind a numbered
   marker so a club can see where it is in a long first step. */
.tgkb-sec { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; margin-top: 22px; }
.tgkb-sec__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tg-green-fill, #43841e);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}
.tgkb-sec__body > .tgkb-field:first-child,
.tgkb-sec__body > .tgkb-sizes:first-child { margin-top: 0; }
@media (max-width: 560px) {
	/* The marker costs a third of the row on a phone, so it sits above. */
	.tgkb-sec { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* The goalkeeper kit: one card that opens its own colours and sizes. */
.tgkb-gk { margin-top: 0; }
.tgkb-addons--gk { grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; }
@media (min-width: 620px) { .tgkb-addons--gk { grid-template-columns: minmax(0, 1fr); } }
.tgkb-gk__opts { display: grid; gap: 12px; }
.tgkb-sizes__sets--gk { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .tgkb-sizes__sets--gk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Player numbers, now a section of step 2 rather than a step of its own. */
.tgkb-numsec { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.tgkb-numsec__head { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 700; }

/* A goalkeeper kit added to an outfield order previews in its own card. */
.tgkb-pv--gk { margin-top: 14px; }
.tgkb-pv__head { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.tgkb-pv__pill {
	display: inline-block;
	margin: 0 0 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #16181a;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}