/* Teamz — brand tokens from spec section 4 */
:root {
  --pitch: #1B7A3E; --deep: #0F4D27; --chalk: #FFFFFF; --turf: #F5F7F2;
  --charcoal: #1C2321; --yellow: #F5B301; --red: #C8102E; --grey: #6B7370;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--turf); color: var(--charcoal); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--deep); }
h1 { font-size: 1.35rem; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
h3 { font-size: 1rem; margin: .9rem 0 .3rem; }
small { color: var(--grey); font-weight: normal; }

header.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px; background: var(--pitch); color: var(--chalk); box-shadow: 0 2px 0 var(--deep); }
.wordmark { display: flex; align-items: center; gap: 8px; color: var(--chalk); text-decoration: none;
  font-weight: 800; font-stretch: condensed; text-transform: uppercase; letter-spacing: .04em; font-size: 1.2rem; }
header nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
header nav a, header nav .link { color: var(--chalk); }
header nav form { margin: 0; }

main { max-width: 960px; margin: 0 auto; padding: 16px; }
footer { background: var(--deep); padding: 16px; text-align: center; border-top: 2px solid var(--chalk); }
footer a { color: var(--chalk); }

.card { display: block; background: var(--chalk); border-radius: 10px; padding: 16px; margin: 0 0 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.hero { padding: 24px 0 8px; }
a.game { text-decoration: none; color: inherit; }
.scroll { overflow-x: auto; }

label { display: block; margin: 0 0 12px; font-weight: 600; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 10px; font: inherit; border: 1px solid #c3c9c5; border-radius: 6px; background: #fff; }
[hidden] { display: none !important; }
.chips { gap: 8px; align-items: center; }
.chip { position: relative; margin: 0; }
.chip input { position: absolute; opacity: 0; width: 0; }
.chip span { display: inline-block; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--pitch); color: var(--deep); font-weight: 700; cursor: pointer; }
.chip input:checked + span { background: var(--pitch); color: var(--chalk); }
.chip input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.chip-date { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: normal; }
.chip-date input { width: auto; margin: 0; }
.hint { flex-basis: 100%; margin: 4px 0 0; color: var(--grey); font-size: .9rem; }
.away { border-left: 6px solid var(--yellow); }
label.check { font-weight: normal; display: flex; align-items: center; gap: 8px; }
label.check input { width: auto; margin: 0; }
fieldset { border: 1px solid #dde2dd; border-radius: 6px; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
fieldset label.check { margin: 0; }
.trap { position: absolute; left: -9999px; }
form.inline { display: inline; margin: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; align-items: end; }
.grid .wide { grid-column: 1 / -1; }
.forgot { margin-top: 24px; border-top: 1px solid #dde2dd; padding-top: 16px; }

.btn { display: inline-block; padding: 10px 16px; border: 0; border-radius: 6px; background: var(--pitch); color: var(--chalk);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--deep); }
.btn.danger { background: var(--red); }
.btn.warn { background: var(--yellow); color: var(--charcoal); }
.btn.ghost { background: transparent; color: var(--deep); box-shadow: inset 0 0 0 2px var(--pitch); }
.btn.small { padding: 6px 12px; background: var(--chalk); color: var(--deep); }
form.filler-add { display: flex; gap: 6px; align-items: center; margin: 0; }
form.filler-add input { width: 13rem; margin: 0; }
details.blast[open] { flex-basis: 100%; }
details.blast form { margin-top: 12px; }
.chip input[type="checkbox"]:not(:checked) + span { text-decoration: line-through; color: var(--grey); box-shadow: inset 0 0 0 2px #c3c9c5; }
.btn.disabled { opacity: .55; cursor: not-allowed; }
.btn.big { padding: 16px 32px; font-size: 1.2rem; }
.alt { margin: 16px 0 12px; }
.reason-form { margin-top: 12px; }
.btn.tiny { padding: 4px 8px; font-size: .8rem; }
button.link { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; color: var(--deep); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 12px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] { flex-basis: 100%; }
details form { margin-top: 12px; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .85rem; font-weight: 700; background: var(--grey); color: var(--chalk); }
.pill.accepted, .pill.fx-confirmed { background: var(--pitch); }
.pill.invited, .pill.blast_invited, .pill.fx-inviting, .pill.fx-draft { background: var(--yellow); color: var(--charcoal); }
.pill.declined, .pill.cancelled, .pill.timed_out, .pill.removed, .pill.fx-cancelled { background: var(--red); }
.flash { background: #e3f1e7; border-left: 4px solid var(--pitch); padding: 10px 12px; border-radius: 4px; }
/* The result of the last action stays in view just under the header, wherever the page is scrolled to. */
main > .flash { position: sticky; top: 64px; z-index: 4; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.error { background: #fbe6ea; border-left: 4px solid var(--red); padding: 10px 12px; border-radius: 4px; }
.expiry { font-weight: 700; }
.message { font-style: italic; }
.summary { font-weight: 700; margin-top: 0; }

ul.names { margin: 0; padding-left: 20px; columns: 2; }
ul.placeholders { list-style: none; padding-left: 0; }
ul.placeholders li { color: var(--grey); font-style: italic; border: 1px dashed #c3c9c5; border-radius: 6px; padding: 4px 8px; margin: 0 0 6px; break-inside: avoid; }
ul.players { list-style: none; margin: 0; padding: 0; }
ul.players li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid #e6eae6; }
/* Squad places: numbered, with a background that shows at a glance where each one stands (always with a text label too). */
ol.slots { counter-reset: place; list-style: none; margin: 0; padding: 0; }
ol.slots li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
ol.slots li.slot { counter-increment: place; padding: 10px 10px 10px 44px; position: relative; border-style: solid; border-width: 0 0 0 6px; border-radius: 6px; margin-bottom: 6px; }
ol.slots li.slot::before { content: counter(place); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 1.1rem; width: 24px; text-align: center; }
li.slot.accepted, .key.accepted { background: #dff0e4; border-color: var(--pitch); }
li.slot.pending, li.slot.draft, .key.pending { background: #fdf1cc; border-color: var(--yellow); }
li.slot.open, .key.open { background: #fbdde2; border-color: var(--red); }
li.slot.open { border-left-style: dashed; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font-size: .85rem; }
.key { padding: 2px 10px; border-left: 6px solid; border-radius: 4px; }
ul.players li.unavailable { background: #eceeec; color: var(--grey); padding-left: 8px; padding-right: 8px; border-radius: 6px; }
ul.players li.unavailable a { color: var(--grey); }
/* Drag and drop in the squad builder */
.handle { border: 0; background: none; font-size: 1.35rem; line-height: 1; padding: 4px 8px 4px 0; color: var(--grey); cursor: grab; touch-action: none; vertical-align: middle; }
.handle:focus-visible { outline: 3px solid var(--yellow); border-radius: 4px; }
.js .moves.fallback { display: none; }
.js li.show-moves .moves.fallback { display: flex; }
li.dragging { opacity: .35; }
li.ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; list-style: none; display: flex; align-items: center; background: var(--chalk);
  padding: 10px; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
[data-drop] { min-height: 90px; }
[data-drop].drop-target { outline: 3px dashed var(--pitch); outline-offset: -3px; background: #eef7f1; }
li[data-user] { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.is-dragging, .is-dragging * { cursor: grabbing !important; }
li.insert-before { box-shadow: 0 -4px 0 var(--pitch); }
ul.insert-end { box-shadow: 0 4px 0 var(--pitch); }
ul.queue { counter-reset: queue; min-height: 24px; }
ul.queue li { justify-content: flex-start; }
ul.queue li .moves { margin-left: auto; }
ul.queue li[data-queue]::before { counter-increment: queue; content: counter(queue) "."; font-weight: 800; min-width: 1.6em; }
.answers { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; cursor: default; }
.answers details[open] { flex-basis: 100%; }
.drag-hint { color: var(--grey); margin: 0 0 12px; }
.tick { color: var(--pitch); font-weight: 800; font-size: 1.15rem; }
.moves { display: flex; gap: 4px; flex-wrap: wrap; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 16px; }
.tabs { display: flex; gap: 16px; margin-bottom: 12px; font-weight: 700; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #e6eae6; vertical-align: top; }
details.explain { margin: 0 0 12px; }
details.explain summary { list-style: revert; cursor: pointer; color: var(--deep); font-weight: 700; }
details.explain p { margin: 8px 0 0; }
/* Defaults page: label on the left, short value box and unit on the right, like rows of a table */
label.setting { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0; padding: 8px 0; border-bottom: 1px solid #e6eae6; font-weight: normal; }
label.setting:last-child { border-bottom: 0; }
label.setting .value { display: flex; align-items: center; gap: 8px; flex: 0 0 11.5rem; }
label.setting input { width: 6.5rem; margin: 0; padding: 6px 8px; text-align: right; }
label.setting input[type="time"] { text-align: left; width: 7.5rem; }
form.search label { margin-bottom: 4px; }
form.search .hint { margin: 0 0 8px; min-height: 1.3em; }
table.stats { width: auto; }
table.stats td { text-align: right; font-weight: 700; }
tr.muted td { color: var(--grey); }
input.seed { display: block; width: 6rem; }
.prose table { margin: 8px 0; }