/* ------------------------------------------------------------------ *
   Last Man Standing - styling modelled on fantasy.premierleague.com

   FPL uses deep purple only on its header, nav and deadline bar; the screens
   people actually play on are light, with white cards. That's what this
   follows, so the purple anchors the brand without flooding the page.

   Brand colours, sampled from the live site:
     purple #37003c   deep #1e0021   green #00ff87
     pink   #e90052   cyan #04f5ff

   Pink means knocked out, matching the colour the Excel macro paints a draw
   or a loss, so the grid reads the way Peter already expects.

   The real site uses a licensed font called "PremierLeague" which can't be
   redistributed. Barlow is the closest free match.
 * ------------------------------------------------------------------ */

:root {
    --purple:     #37003c;
    --purple-dk:  #1e0021;
    --green:      #00ff87;
    --green-ink:  #0b6b3a;
    --pink:       #e90052;
    --cyan:       #04f5ff;
    --cyan-ink:   #0b6d8f;

    --page:       #ebebeb;
    --card:       #ffffff;
    --card-2:     #f7f7f8;
    --ink:        #242424;
    --ink-2:      #55555c;
    --ink-3:      #85858d;
    --line:       #dcdce1;
    --line-2:     #ececf0;

    --radius:     6px;
    --shadow:     0 1px 3px rgba(0, 0, 0, .1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--page);
    color: var(--ink);
    font-family: "Barlow", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--cyan-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- header ---------------- */

.masthead {
    background: linear-gradient(90deg, var(--purple-dk) 0%, var(--purple) 55%, #45004b 100%);
    border-bottom: 3px solid var(--green);
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    color: #fff;
}
.masthead h1 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.masthead h1 a { color: #fff; }
.masthead h1 .accent { color: var(--green); }
.masthead .spacer { flex: 1 1 auto; }
.masthead nav { display: flex; gap: .85rem; align-items: center; font-size: .82rem; }
.masthead nav a { color: #fff; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.masthead nav a:hover { color: var(--green); text-decoration: none; }

.env-badge {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    background: var(--cyan);
    color: var(--purple);
    padding: .15rem .45rem;
    border-radius: 3px;
    text-transform: uppercase;
}

/* ---------------- layout ---------------- */

.wrap { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.narrow { max-width: 460px; }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.15rem;
    margin-bottom: 1.15rem;
    box-shadow: var(--shadow);
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

h2 {
    font-size: 1.02rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 700;
    margin: 0 0 .85rem;
    color: var(--purple);
}
h3 {
    font-size: .92rem; text-transform: uppercase; letter-spacing: .07em;
    margin: 1.2rem 0 .6rem; color: var(--purple);
}

.muted { color: var(--ink-2); }
.small { font-size: .82rem; }
.tiny  { font-size: .72rem; }
.center { text-align: center; }
.hl { color: var(--green-ink); font-weight: 700; }

/* ---------------- the deadline bar ---------------- */

.deadline {
    background: var(--purple);
    color: #fff;
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin-bottom: 1.15rem;
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    box-shadow: var(--shadow);
}
.deadline .label {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .7rem;
    color: var(--green);
    font-weight: 700;
}
.deadline .when { font-weight: 700; font-size: 1.05rem; }
.deadline .muted { color: rgba(255, 255, 255, .7); }
.deadline.passed { background: #4a0030; }
.deadline.passed .label { color: #ff9ec0; }

/* ---------------- forms ---------------- */

label {
    display: block; font-size: .74rem; text-transform: uppercase;
    letter-spacing: .09em; color: var(--ink-2); margin: .9rem 0 .3rem; font-weight: 600;
}

input[type=text], input[type=password], input[type=number], input[type=datetime-local], select, textarea {
    width: 100%;
    padding: .6rem .7rem;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--purple);
    outline-offset: 1px;
    border-color: var(--purple);
}
input.code {
    text-transform: uppercase;
    letter-spacing: .3em;
    font-weight: 700;
    font-size: 1.15rem;
    text-align: center;
}

.btn {
    display: inline-block;
    padding: .62rem 1.15rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--green);
    color: #10241a;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .84rem;
    cursor: pointer;
}
.btn:hover { filter: brightness(.95); text-decoration: none; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; filter: none; }
.btn.secondary { background: #fff; color: var(--purple); border: 1px solid var(--line); }
.btn.secondary:hover { border-color: var(--purple); }
.btn.danger { background: var(--pink); color: #fff; }
.btn.block { display: block; width: 100%; }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; align-items: center; }

/* ---------------- flash messages ---------------- */

.flash {
    padding: .7rem .9rem; border-radius: var(--radius); margin-bottom: .8rem;
    font-size: .9rem; border-left: 4px solid; background: #fff; box-shadow: var(--shadow);
}
.flash.ok    { border-color: var(--green); }
.flash.warn  { border-color: var(--cyan); }
.flash.error { border-color: var(--pink); color: #a2003a; }

/* ---------------- line tabs ---------------- */

.line-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.line-tab {
    flex: 1 1 100px;
    padding: .65rem .5rem;
    text-align: center;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--purple);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
}
.line-tab .sub {
    display: block; font-size: .68rem; font-weight: 600; letter-spacing: .02em;
    color: var(--ink-2); text-transform: none; margin-top: .15rem;
}
.line-tab.todo .sub { color: var(--pink); }
.line-tab.active { border-color: var(--purple); border-width: 2px; background: #fff; }
.line-tab.active .sub { color: var(--green-ink); }
.line-tab.dead { opacity: .55; }
.line-tab.dead .sub { color: var(--pink); }
.line-tab:hover { text-decoration: none; border-color: var(--purple); }

/* ---------------- the team tiles ---------------- */

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: .55rem; }

.team-option { position: relative; }
.team-option input { position: absolute; opacity: 0; pointer-events: none; }
.team-option label {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: .55rem .7rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-size: .95rem;
    color: var(--ink);
    font-weight: 600;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.team-option label:hover { border-color: var(--purple); background: var(--card-2); }
.team-option input:checked + label {
    border-color: var(--green);
    background: #eafff4;
    box-shadow: inset 0 0 0 2px var(--green);
}
.team-option input:focus-visible + label { outline: 2px solid var(--purple); outline-offset: 2px; }
.team-option.blocked label { opacity: .45; cursor: not-allowed; background: var(--card-2); }
.team-option.blocked label:hover { border-color: var(--line); background: var(--card-2); }

.crest { flex: 0 0 30px; width: 30px; height: 30px; object-fit: contain; }
.crest-blank {
    display: inline-block; border-radius: 50%;
    background: var(--line-2); border: 1px solid var(--line);
}
.team-option.blocked .crest { filter: grayscale(1); }

.team-name { flex: 1 1 auto; line-height: 1.2; }
.chosen {
    display: block; font-size: .62rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--green-ink);
}
.team-fixture {
    font-size: .74rem; color: var(--ink-2); font-weight: 500;
    text-align: right; white-space: nowrap; line-height: 1.3;
}
.team-fixture .ha {
    display: inline-block; min-width: 1.1em; text-align: center;
    background: var(--purple); color: #fff; border-radius: 3px;
    font-size: .62rem; font-weight: 700; padding: 0 .18rem; margin-right: .1rem;
}
.team-fixture .ko { color: var(--ink-3); }
.team-blocked-why {
    font-size: .7rem; color: var(--pink); font-weight: 700;
    text-align: right; white-space: nowrap;
}

/* while the tap is being saved */
form.saving .team-grid { opacity: .55; pointer-events: none; }

/* the confirmation card once every line is in */
.done-card { border-left: 4px solid var(--green); }
.done-card .btn { padding: .75rem 2rem; font-size: .92rem; }

/* ---------------- the grid (the spreadsheet view) ---------------- */

.grid-scroll {
    overflow-x: auto; border: 1px solid var(--line);
    border-radius: var(--radius); background: #fff;
}
table.grid { border-collapse: collapse; width: 100%; font-size: .82rem; }
table.grid th, table.grid td {
    padding: .4rem .55rem; text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--line-2);
}
table.grid thead th {
    position: sticky; top: 0;
    background: var(--purple);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .68rem;
    font-weight: 700;
    z-index: 2;
}
table.grid tbody th {
    position: sticky; left: 0;
    background: #fff;
    font-weight: 600;
    z-index: 1;
    border-right: 1px solid var(--line);
}
table.grid tr.dead th { color: var(--ink-3); }
table.grid tr.dead { background: #fbfbfc; }
table.grid td.pick-w { color: var(--ink); font-weight: 600; }
table.grid td.pick-d, table.grid td.pick-l { color: var(--pink); font-weight: 600; }
table.grid td.pick-void { color: var(--cyan-ink); font-weight: 600; }
table.grid td.pick-pending { color: var(--ink-3); font-style: italic; }
/* the reader's own pick, awaiting a result: registered, not tentative */
table.grid td.pick-mine { color: var(--ink); font-weight: 700; }
table.grid td.pick-mine::after {
    content: "registered";
    margin-left: .4rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--green-ink);
}
table.grid tr.mine th { background: #f4fbf7; box-shadow: inset 3px 0 0 var(--green); }
table.grid tr.mine td { background: #fbfefc; }
table.grid tbody tr.mine:hover td, table.grid tbody tr.mine:hover th { background: #eef8f2; }
.you {
    display: inline-block; margin-left: .25rem; padding: .1rem .4rem;
    border-radius: 100px; background: var(--purple); color: #fff;
    font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
table.grid td.pick-hidden { color: var(--ink-3); }
table.grid td.empty { color: #c4c4cc; }
table.grid td .auto-flag { color: var(--cyan-ink); font-size: .66rem; font-weight: 700; }
table.grid tbody tr:hover td, table.grid tbody tr:hover th { background: #f4f4f7; }

.legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .74rem; color: var(--ink-2); margin-top: .7rem; }
.legend span::before { content: "\25A0"; margin-right: .3rem; }
.legend .w::before { color: var(--ink); }
.legend .l::before { color: var(--pink); }
.legend .v::before { color: var(--cyan-ink); }
.legend .p::before { color: var(--ink-3); }

/* ---------------- status pills ---------------- */

.pill {
    display: inline-block;
    padding: .16rem .5rem;
    border-radius: 100px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.pill.alive  { background: var(--green); color: #10241a; }
.pill.out    { background: var(--pink); color: #fff; }
.pill.won    { background: var(--cyan); color: var(--purple); }
.pill.pending{ background: var(--line-2); color: var(--ink-2); }

/* ---------------- tables (admin lists) ---------------- */

table.list { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.list th, table.list td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line-2); }
table.list th { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
table.list code { font-size: .95rem; letter-spacing: .16em; font-weight: 700; color: var(--purple); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; font-size: .88rem; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; }

/* ---------------- footer ---------------- */

.foot { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; font-size: .74rem; color: var(--ink-3); }

@media (max-width: 560px) {
    .wrap { padding: 1rem .75rem 3rem; }
    .team-grid { grid-template-columns: 1fr; }
    .masthead { padding: .6rem .75rem; gap: .5rem; }
    .masthead h1 { font-size: .9rem; letter-spacing: .08em; }
    .masthead nav { gap: .7rem; font-size: .72rem; }
    /* The league name and the player's name are just noise on a phone:
       the page itself already says whose picks these are. */
    .on-wide { display: none; }
    .line-tabs { gap: .4rem; }
    .line-tab { flex: 1 1 30%; padding: .55rem .3rem; font-size: .74rem; }
}