/*
 * League page, "Wegweiser": the vernacular of German road signs, since the page is about km and trips.
 * Asphalt text, one Autobahn blue for what is chosen, lines instead of boxes and shadows, and a single
 * signpost under the map. Umleitungsgelb marks only the farthest trip (and keyboard focus).
 */
.lp {
    --asphalt: #253032;
    --blue: #1b4f9c;
    --blue-deep: #163f7d;
    --blue-wash: #eef3fa;
    --line: #e3e7ea;
    --muted: #5b6770;
    --yellow: #f2b705;
    font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--asphalt);
}

.lp h1, .lp h2, .lp h3, .lp-num, .lp-km, .lp-sign {
    font-family: 'Barlow Semi Condensed', 'Barlow', 'Helvetica Neue', Arial, sans-serif;
}

.lp-num, .lp-km { font-variant-numeric: tabular-nums; white-space: nowrap; }

.lp h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.25; }
.lp h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.lp-muted { color: var(--muted); }
.lp-small { font-size: .875rem; }

.lp :focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* Header: the league's name as the sign's destination */
.lp-hero h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
@media (max-width: 640px) { .lp-hero h1 { font-size: 1.75rem; } }

/* Buttons: one blue for the main action, a quiet outline for the rest */
.lp-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--blue); color: #fff; font-weight: 600;
    padding: .5rem 1.25rem; border-radius: 4px; border: 2px solid var(--blue);
}
.lp-btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.lp-btn:disabled { opacity: .45; cursor: not-allowed; }
.lp-btn-quiet {
    display: inline-flex; align-items: center; gap: .5rem;
    color: #fff; font-weight: 600; padding: .375rem 1rem; border-radius: 4px; border: 2px solid rgba(255, 255, 255, .7);
}
.lp-btn-quiet:hover { background: rgba(255, 255, 255, .12); }

/* Sections are set off by a rule and their heading, not by boxes */
.lp-section { border-top: 2px solid var(--asphalt); padding-top: .75rem; }

/* New calculation: folds open under its rule */
.lp-calc > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.lp-calc > summary::-webkit-details-marker { display: none; }
.lp-calc > summary h2::before { content: '+'; display: inline-block; width: 1.1em; color: var(--blue); }
.lp-calc[open] > summary h2::before { content: '–'; }
.lp-calc [data-objective-card] { border-radius: 4px; }
.lp-calc [data-objective-card].border-blue-500 { border-color: var(--blue); background: var(--blue-wash); }
.lp-calc [data-objective-card].border-gray-200 { border-color: var(--line); }
.lp-calc input[type=radio], .lp-calc input[type=checkbox] { accent-color: var(--blue); }
.lp-start { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f7f8f9; }

/* Main: the runs beside the map; on small screens the map comes first */
.lp-main { display: grid; gap: 2rem; }
.lp-result { order: -1; }
@media (min-width: 1024px) {
    .lp-main { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
    .lp-result { order: 0; }
    /* The runs stay in view while the map's division lists scroll by */
    .lp-main > .lp-section { position: sticky; top: 1rem; }
}

/* Runs */
.lp-runs { width: 100%; border-collapse: collapse; }
.lp-runs th { font-weight: 500; font-size: .8125rem; color: var(--muted); text-align: left; padding: .25rem .5rem; vertical-align: bottom; line-height: 1.2; }
.lp-runs td { padding: .5rem; vertical-align: top; border-top: 1px solid var(--line); }
/* Headings of figures stand over their figures, on the right */
.lp-runs th.text-right { text-align: right; }
.lp-runs [data-run-row] { cursor: pointer; }
.lp-runs [data-run-row]:hover { background: #f7f8f9; }
.lp-runs [data-run-row].run-shown, .lp-runs [data-run-row].run-shown:hover { background: var(--blue-wash); }
.lp-runs .run-shown > td:first-child { box-shadow: inset 4px 0 0 var(--blue); }
.lp-run-no { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 1.125rem; color: var(--asphalt); }
.lp-star { display: inline-block; font-size: .8125rem; line-height: 1.3; margin-right: .5rem; }
.lp-goal { font-size: .8125rem; color: var(--muted); line-height: 1.3; }
.lp-runs .lp-num { font-size: 1rem; }

/* The signpost of the run shown: one line per division, like a distance sign */
/* Signpost of a run: the goal and its total on a blue sign, the divisions below on a light wash */
.lp-sign { border: 2px solid var(--blue); border-radius: 6px; overflow: hidden; background: var(--blue-wash); }
.lp-sign-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 1rem; background: var(--blue); color: #fff; }
.lp-sign-head h2 { font-size: 1.125rem; font-weight: 600; }
.lp-sign-head .lp-goal-star { color: #fff !important; }
.lp-sign .lp-sign-head .lp-km { font-size: 1.25rem; font-weight: 700; color: #fff; }
.lp-sign ul { display: grid; gap: 0 2rem; padding: .375rem 1rem .5rem; }
@media (min-width: 640px) { .lp-sign ul.lp-sign-2 { grid-template-columns: 1fr 1fr; } }
.lp-sign li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .25rem 0; font-size: 1rem; font-weight: 500; }
.lp-sign li + li { border-top: 1px solid rgba(27, 79, 156, .12); }
@media (min-width: 640px) { .lp-sign ul.lp-sign-2 li:nth-child(2) { border-top: 0; } }
.lp-sign label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.lp-sign input[type=checkbox] { accent-color: var(--blue); width: 1rem; height: 1rem; }
.lp-swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; }
.lp-sign .lp-km { font-size: 1.0625rem; font-weight: 600; color: var(--asphalt); }

/* Division lists under the sign */
.lp-divisions { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .lp-divisions { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.lp-divisions h3 { display: flex; align-items: center; gap: .5rem; border-bottom: 2px solid var(--asphalt); padding-bottom: .25rem; margin-bottom: .25rem; }
.lp-divisions li { display: flex; justify-content: space-between; gap: .75rem; font-size: .9375rem; padding: .125rem 0; }
.lp-trip { font-size: .8125rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .375rem; }
.lp-trip.lp-farthest { color: var(--asphalt); background: var(--yellow); border-top-color: var(--yellow); padding: .375rem .5rem; border-radius: 3px; }

.lp-map { border: 1px solid var(--line); border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
    .lp .animate-pulse, .lp .animate-spin { animation: none; }
}

#calculation-bar { background: var(--blue); }
#calculation-bar[data-status=failed] { background: #c62828; }
.lp-calc [data-limits-fields] input, .lp-start input { border-color: #c9d0d5; }

/* Grid items may shrink below their content, so the run table fits a phone */
.lp-main > * { min-width: 0; }
@media (max-width: 640px) {
    .lp-runs th, .lp-runs td { padding: .4rem .25rem; }
    .lp-runs th { font-size: .75rem; hyphens: auto; }
    .lp-runs .lp-num { font-size: .875rem; }
    .lp-star { font-size: .75rem; }
}

/* Each goal's star: the same colour on its card, its progress and its result */
.lp-goal-star { font-size: 1.05em; margin-right: .15rem; }
.lp-goal span + span::before { content: ', '; color: var(--muted); }

/* Tooltips of the figures: a small dark sign above, on hover or keyboard focus */
.lp-tip { position: relative; cursor: help; border-bottom: 1px dotted #9aa4ab; }
.lp-tip::after {
    content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30;
    background: var(--asphalt); color: #fff; font-family: 'Barlow', sans-serif; font-size: .8125rem; font-weight: 500;
    line-height: 1.3; white-space: nowrap; padding: .3rem .55rem; border-radius: 4px;
    opacity: 0; visibility: hidden; transform: translateY(2px); pointer-events: none;
    transition: opacity .12s, transform .12s, visibility .12s;
}
.lp-tip:hover::after, .lp-tip:focus::after { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .lp-tip::after { transition: none; } }

/* Tabs of the league page: calculation, teams, distances */
.lp-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--line); }
.lp-tab { padding: .5rem 1rem; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.lp-tab:hover { color: var(--asphalt); }
.lp-tab-on { color: var(--blue); border-bottom-color: var(--blue); }

/* The measure a distance is taken by, as cards in the form and chips over the matrix */
.lp-calc [data-metric-card] { border-radius: 4px; }
.lp-calc [data-metric-card].border-blue-500 { border-color: var(--blue); background: var(--blue-wash); }
.lp-calc [data-metric-card].border-gray-200 { border-color: var(--line); }
.lp-chip { padding: .125rem .75rem; border: 2px solid var(--line); border-radius: 999px; }
.lp-chip:hover { border-color: var(--blue); }
.lp-chip-on { border-color: var(--blue); background: var(--blue-wash); color: var(--blue); font-weight: 600; }

/* Distance matrix: team names stay in view on the left, the numbers on top */
.lp-matrix-wrap { overflow: auto; max-height: 75vh; border: 1px solid var(--line); }
.lp-matrix { border-collapse: separate; border-spacing: 0; font-size: .75rem; font-variant-numeric: tabular-nums; }
.lp-matrix th, .lp-matrix td { padding: .125rem .375rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; text-align: right; }
.lp-matrix thead th { position: sticky; top: 0; background: #f7f8f9; z-index: 1; font-weight: 600; }
.lp-matrix tbody th { position: sticky; left: 0; background: #fff; text-align: left; font-weight: 500; z-index: 1; }
.lp-matrix .lp-matrix-corner { left: 0; z-index: 2; }
.lp-matrix .lp-matrix-self { background: #f7f8f9; }
.lp-matrix tbody tr:hover td, .lp-matrix tbody tr:hover th { background: var(--blue-wash); }

/* Popup of a result's goal: its name and explanation as on its card, on hover or keyboard focus */
.lp-goal-cell { position: relative; }
.lp-pop {
    display: none; position: absolute; left: .5rem; top: calc(100% - .25rem); z-index: 40;
    width: max-content; max-width: 20rem; cursor: default; white-space: normal; text-align: left;
    background: #fff; color: var(--asphalt); border: 1px solid var(--line); border-left: 4px solid var(--blue);
    border-radius: 4px; box-shadow: 0 8px 24px rgba(37, 48, 50, .16); padding: .5rem .75rem; font-size: .8125rem; line-height: 1.35;
}
.lp-goal-cell:hover .lp-pop, .lp-goal-cell:focus-within .lp-pop { display: block; }
.lp-pop-head { font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-weight: 600; font-size: .9375rem; margin-bottom: .375rem; }
.lp-pop-note { margin-top: .375rem; padding-top: .375rem; border-top: 1px solid var(--line); color: var(--muted); }
/* The metric tabs over the results sit below the page's tabs, one size smaller */
/* The goals as narrow boxes; opened, each shows what it does below its tick, side by side at one height */
.lp-goals { display: flex; flex-wrap: wrap; gap: .5rem; }
.lp-goal-card { display: inline-flex; flex-direction: column; padding: .4rem .8rem; border-radius: 6px; line-height: 1.25; }
.lp-goal-name { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.lp-goal-card input { accent-color: var(--blue); }
.lp-goal-card .lp-goal-star { margin-right: 0; }
.lp-goal-text { display: none; font-size: .875rem; line-height: 1.4; color: var(--muted); margin-top: .35rem; }
.lp-goals-open { display: grid; gap: .75rem; }
@media (min-width: 768px) { .lp-goals-open { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lp-goals-open { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-goals-open .lp-goal-card { display: flex; padding: .65rem .8rem; }
.lp-goals-open .lp-goal-text { display: block; }
.lp-goals-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; color: var(--muted); }
.lp-goals-toggle::before { content: '▸'; color: var(--blue); transition: transform .12s; }
.lp-goals-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.lp-goals-toggle:hover { color: var(--asphalt); }
@media (prefers-reduced-motion: reduce) { .lp-goals-toggle::before { transition: none; } }

/* What the open measure measures, in full sentences: the choice matters, so it is explained, not hinted at */
.lp-measure-hint {
    font-size: .9375rem; line-height: 1.55; color: var(--asphalt);
    background: var(--blue-wash); border-left: 4px solid var(--blue); border-radius: 0 4px 4px 0;
    padding: .75rem 1rem; margin-top: -1.25rem;
}
.lp-measure-hint > span { display: block; max-width: 52rem; }

/* The measures under the calculation: three signs side by side, the open one Autobahn blue */
.lp-measures { display: flex; gap: .5rem; border-bottom: 3px solid var(--blue); }
.lp-measure-tab {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1.1rem .5rem; border-radius: 6px 6px 0 0;
    font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-size: 1.125rem; font-weight: 700; line-height: 1.2;
    color: var(--asphalt); background: #eef1f3; border: 2px solid transparent; border-bottom: 0;
}
.lp-measure-tab:hover { background: var(--blue-wash); color: var(--blue-deep); }
.lp-measure-tab.lp-tab-on { background: var(--blue); color: #fff; }
.lp-measure-count {
    font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 1.5em; text-align: center;
    padding: .05rem .4rem; border-radius: 999px; background: #fff; color: var(--muted);
}
.lp-measure-tab.lp-tab-on .lp-measure-count { color: var(--blue); }
@media (max-width: 640px) {
    .lp-measures { gap: .2rem; }
    .lp-measure-tab { font-size: 1rem; padding: .45rem .45rem .4rem; gap: .3rem; }
    .lp-measure-tab svg { display: none; }
    /* The league's tabs scroll sideways on a phone instead of widening the page */
    .lp-tabs { overflow-x: auto; scrollbar-width: none; }
    .lp-tabs::-webkit-scrollbar { display: none; }
    .lp-tab { white-space: nowrap; margin-bottom: 0; }
}

/* Teams tab: the list beside a map of the teams, which stays in view while the list scrolls; on small screens the map comes first */
.lp-teams { display: grid; gap: 1.5rem; }
.lp-teams-map { order: -1; }
.lp-teams-map .lp-map { height: 320px; }
@media (min-width: 1024px) {
    .lp-teams { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
    .lp-teams-map { order: 0; position: sticky; top: 1rem; }
    .lp-teams-map .lp-map { height: min(640px, calc(100vh - 2rem)); }
}
.lp #team-rows tr { transition: background-color .3s; }
.lp #team-rows tr:hover, .lp #team-rows tr.lp-row-marked { background: var(--blue-wash); }
.lp #team-rows tr.lp-row-marked { background: #fdf3cf; }
.lp-derby { border-radius: 4px; padding-left: .375rem; cursor: default; }
.lp-derby:hover, .lp-derby:focus, .lp-derby:focus-within { background: #fdecec; }

/*
 * The list of leagues: the same lines and figures as the league page. Each league carries a small picture of
 * where its teams play, coloured by its best split once there is one, so the list shows the shape of each league.
 */
.lp-index { padding-bottom: 2rem; }
.lp-index-section { margin-top: 2rem; }
.lp-index-section > h2 { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .25rem; }
.lp-count { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; font-size: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.lp-intro { color: var(--muted); font-size: .9375rem; max-width: 42rem; margin-bottom: .5rem; }
.lp-empty { color: var(--muted); padding: 1rem 0; }

.lp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1.5rem; font-size: .9375rem; }
.lp-filters label { display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.lp-select { padding: .3rem 1.75rem .3rem .6rem; border: 1px solid #c9d0d5; border-radius: 4px; background-color: #fff; color: var(--asphalt); }
.lp-select:hover { border-color: var(--asphalt); }
.lp-link-quiet { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.lp-link-quiet:hover { color: var(--asphalt); }

.lp-note { margin-top: 1.25rem; font-size: .9375rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: .75rem; max-width: 48rem; }
.lp-note a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.lp-list { width: 100%; border-collapse: collapse; }
.lp-list th { font-weight: 500; font-size: .8125rem; color: var(--muted); text-align: left; padding: .25rem .625rem; vertical-align: bottom; }
.lp-list th.text-right { text-align: right; }
.lp-list td { padding: .5rem .625rem; vertical-align: middle; border-top: 1px solid var(--line); }
.lp-list tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.lp-list tbody tr:hover { background: #f7f8f9; }
.lp-list .lp-num { font-size: 1rem; }

.lp-col-picture { width: 7.5rem; padding-left: 0 !important; }
.lp-picture { display: block; width: 7rem; height: 4.5rem; background: #f1f3f4; border-radius: 4px; }
.lp-picture svg { display: block; width: 100%; height: 100%; }

.lp-list-name { font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-size: 1.1875rem; font-weight: 600; line-height: 1.25; }
.lp-list-name a { color: var(--blue); }
.lp-list-name a:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
/* A guest's way into an example from the list is a form, so that following a link does not make a copy; it reads as the link */
.lp-list-link { font: inherit; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.lp-list-link:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.lp-list-name img { vertical-align: 0; }
.lp-list-meta { display: none; font-size: .875rem; color: var(--muted); }
.lp-list-best { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.lp-list-actions { white-space: nowrap; text-align: right; padding-right: 0 !important; }
.lp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 4px; color: var(--blue); }
.lp-icon-btn:hover { background: var(--blue-wash); color: var(--blue-deep); }
.lp-icon-danger { color: #b42318; }
.lp-icon-danger:hover { background: #fdecea; color: #8f1d14; }
.lp-btn-outline {
    display: inline-flex; align-items: center; gap: .375rem;
    color: var(--blue); font-weight: 600; font-size: .9375rem; padding: .3rem .8rem;
    border: 2px solid var(--blue); border-radius: 4px;
}
.lp-btn-outline:hover { background: var(--blue); color: #fff; }

/* A phone keeps picture, name, best result and actions; the other figures move under the name */
@media (max-width: 767px) {
    .lp-col-wide { display: none; }
    .lp-list-meta { display: block; }
    .lp-col-picture { width: 4.75rem; }
    .lp-picture { width: 4.25rem; height: 3rem; }
    .lp-list td { padding: .5rem .375rem; }
    .lp-list-name { font-size: 1.0625rem; }
    /* Icons above one another and the copy button as its icon leave the name the room */
    .lp-list-actions form { display: block; }
    .lp-btn-outline { padding: .4rem; }
    .lp-btn-outline .lp-btn-label { display: none; }
}

/*
 * Profile: the account as the sign at the top — its name large, what belongs to it, today's road values —,
 * the settings below in two columns, each beside a sentence on what it changes; deleting last, folded away.
 */
.lp-profile { max-width: 56rem; padding: 1.5rem 0 2.5rem; }
.lp-account { border-bottom: 2px solid var(--asphalt); padding-bottom: 1.25rem; }
.lp-account h2 { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.lp-account-mail { color: var(--muted); margin-top: .25rem; }
.lp-account-ok { display: inline-block; margin-left: .5rem; font-size: .8125rem; font-weight: 600; color: #166534; }
.lp-account-ok::before { content: '✓ '; }
.lp-account-todo { margin-top: .75rem; padding: .6rem .9rem; background: #fef7d6; border-left: 4px solid var(--yellow); font-size: .9375rem; }
.lp-account-todo button { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; margin-left: .25rem; }
.lp-account-owns { margin-top: .75rem; font-size: 1.0625rem; }
.lp-account-owns a { color: var(--blue); font-weight: 600; }
.lp-account-owns a:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }

.lp-allowance { margin-top: 1rem; max-width: 30rem; }
.lp-allowance > p:first-child { font-size: .9375rem; }
.lp-allowance .lp-num { font-weight: 600; }
.lp-allowance-bar { height: .5rem; margin-top: .35rem; background: var(--line); border-radius: 999px; overflow: hidden; }
.lp-allowance-bar > span { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.lp-allowance-bar > span.lp-allowance-full { background: var(--yellow); }
.lp-allowance-note { font-size: .8125rem; color: var(--muted); margin-top: .4rem; line-height: 1.4; }

.lp-setting { display: grid; gap: .75rem 2.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .lp-setting { grid-template-columns: 16rem minmax(0, 28rem); } }
.lp-setting h2 { font-size: 1.1875rem; font-weight: 600; margin-bottom: .25rem; }
.lp-setting > div > p { font-size: .875rem; color: var(--muted); line-height: 1.45; }
.lp-setting label { color: var(--asphalt); font-weight: 500; }
.lp-setting input { border-color: #c9d0d5; border-radius: 4px; }
.lp-setting input:focus { border-color: var(--blue); }

.lp-delete { margin-top: 2rem; }
.lp-delete > summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none; font-weight: 600; color: #b42318; }
.lp-delete > summary::-webkit-details-marker { display: none; }
.lp-delete > summary::before { content: '▸'; transition: transform .12s; }
.lp-delete[open] > summary::before { transform: rotate(90deg); }
.lp-delete .lp-setting { border-bottom: 0; padding-top: 1rem; }
.lp-btn.lp-btn-danger { background: #b42318; border-color: #b42318; }
.lp-btn.lp-btn-danger:hover { background: #8f1d14; border-color: #8f1d14; }
@media (prefers-reduced-motion: reduce) { .lp-delete > summary::before { transition: none; } }

/*
 * League settings: the profile's rows — each setting beside a sentence on what it changes —, with the divisions on
 * a plate of their own, as the one number that shapes every split; deleting last, folded away.
 */
.lp-settings { max-width: 56rem; padding-top: .25rem; }
.lp-settings > form > .lp-setting:first-child { padding-top: .75rem; }
.lp-fields { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.lp-fields > * { width: 100%; }
.lp-fields > .lp-btn { width: auto; }
.lp-field-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.lp-field-grow { flex: 1 1 12rem; }
.lp-field label { display: block; font-size: .875rem; margin-bottom: .25rem; }
.lp-field input, .lp-field select, .lp-field textarea {
    width: 100%; padding: .5rem .75rem; background: #fff;
    border: 1px solid #c9d0d5; border-radius: 4px; color: var(--asphalt);
}
.lp-field input:focus, .lp-field select:focus, .lp-field textarea:focus { border-color: var(--blue); }
.lp-field .lp-season { width: 7.5rem; }
.lp-setting .lp-error { font-size: .875rem; color: #b42318; margin-top: .25rem; }
.lp-setting-action { align-self: center; }

/* The divisions: white figures on Autobahn blue, as tall as the fields around, stepped by − and + */
.lp-plate-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.lp-plate { display: inline-flex; border: 2px solid var(--blue); border-radius: 4px; overflow: hidden; }
.lp-plate button {
    width: 2.25rem; font-size: 1.25rem; font-weight: 600; line-height: 1;
    color: var(--blue); background: #fff;
}
.lp-plate button:hover { background: var(--blue-wash); }
.lp-plate input {
    width: 3.5rem; padding: .3rem 0; border: 0; border-radius: 0; text-align: center;
    font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-size: 1.375rem; font-weight: 700; line-height: 1.2;
    font-variant-numeric: tabular-nums; color: #fff; background: var(--blue);
    -moz-appearance: textfield; appearance: textfield;
}
.lp-plate input::-webkit-outer-spin-button, .lp-plate input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lp-plate-note { font-family: 'Barlow Semi Condensed', 'Barlow', sans-serif; font-size: 1.125rem; font-weight: 600; color: var(--asphalt); }
/* The form's button: below its rows, under the fields, with no line of its own */
.lp-setting.lp-setting-save { padding-top: 1rem; }

/* A template's switches: blue when on, each with what it does beneath its name; flipping one saves it */
.lp-switches { display: grid; gap: 1.25rem; align-content: start; }
.lp-switch { display: flex; align-items: flex-start; gap: .875rem; cursor: pointer; }
.lp-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lp-switch-track {
    flex: none; position: relative; width: 2.75rem; height: 1.5rem; margin-top: .1rem;
    border-radius: 999px; background: #c9d0d5; transition: background .15s;
}
.lp-switch-track::after {
    content: ''; position: absolute; top: .1875rem; left: .1875rem; width: 1.125rem; height: 1.125rem;
    border-radius: 50%; background: #fff; transition: transform .15s;
}
.lp-switch input:checked + .lp-switch-track { background: var(--blue); }
.lp-switch input:checked + .lp-switch-track::after { transform: translateX(1.25rem); }
.lp-switch input:focus-visible + .lp-switch-track { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lp-switch-label { display: block; font-weight: 600; }
.lp-switch-note { display: block; font-size: .875rem; color: var(--muted); line-height: 1.4; }
.lp-switch.lp-switch-off { cursor: not-allowed; }
.lp-switch.lp-switch-off .lp-switch-track, .lp-switch.lp-switch-off .lp-switch-label { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .lp-switch-track, .lp-switch-track::after { transition: none; } }
.lp-switch-status { font-size: .875rem; color: #166534; min-height: 1.25rem; }