/* Geometry lives in src/css/availability-grid.css, shared with the
   results heat map. Only the states unique to answering a form are here. */
table.availGrid { user-select: none; }
.takeWrap { max-width: 720px; margin: 0 auto; padding: 24px 20px 70px; font-family: var(--font-mono); }
.takeWrap h1 { color: var(--heading); font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; margin: 0 0 6px; }
.takeDesc { color: var(--text-muted); font-size: 0.88rem; margin: 0 0 30px; }
.fieldBlock { margin-bottom: 26px; }
.fieldBlock label.fieldLabel { display: block; font-size: 0.92rem; color: var(--text); margin-bottom: 8px; font-weight: 700; }
/* Only present when the form is set to number its questions. Quieter than the
   label so it counts without competing with what is being asked. */
.fieldNo { color: var(--text-muted); font-weight: 500; margin-right: 6px; }
/* Line breaks typed in the builder stand: a description can have shape. */
.fieldBlock .helpText { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 14px; white-space: pre-line; line-height: 1.55; }
.fieldBlock .helpText b, .takeDesc b { color: var(--text); font-weight: 700; }
.fieldBlock .helpText u, .takeDesc u { text-underline-offset: 2px; }
.fieldBlock .helpText a, .takeDesc a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.fieldBlock .helpText a:hover, .takeDesc a:hover { color: var(--gold-light); text-decoration-color: var(--gold-light); text-underline-offset: 3px; text-shadow: 0 0 8px color-mix(in srgb, var(--gold) 45%, transparent); }
.fieldBlock .helpText a, .takeDesc a { transition: color 0.15s, text-underline-offset 0.15s, text-shadow 0.15s; }
.fieldBlock input[type="text"], .fieldBlock textarea {
    width: 100%; background: var(--overlay-soft); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text); padding: 10px; font-family: inherit; font-size: 13px;
    box-sizing: border-box;
}
.fieldBlock input:focus, .fieldBlock textarea:focus, .fieldBlock select:focus { outline: none; border-color: var(--gold-dim); }
.choiceOption { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.88rem; color: var(--text); }
.choiceOption input { width: auto; }
/* The box a text option opens: its name over it, the choices left as they were. */
.choiceText { margin: 4px 0 8px 24px; }
.choiceText[hidden] { display: none; }
.choiceText .textField { width: 100%; box-sizing: border-box; }
select.selectField { width: 100%; background: var(--overlay-soft); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 9px; font-family: inherit; }

/* Availability grid */
.availTzRow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.availTzRow select { background: var(--overlay-soft); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 6px 8px; font-family: inherit; font-size: 0.8rem; }
.autoTzBtn { font-size: 0.75rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--gold-dim); background: transparent; color: var(--gold); cursor: pointer; font-family: inherit; }
.autoTzBtn:hover { background: rgba(201,168,76,0.08); }
table.availGrid td.cell.selected { background: linear-gradient(140deg, var(--gold-dim), var(--gold)); }
.availHint { font-size: 0.72rem; color: var(--text-muted); margin-top: 8px; }

.submitBtn {
    padding: 11px 24px; border-radius: 999px; border: 1px solid var(--gold-dim);
    background: linear-gradient(140deg, var(--gold), var(--gold-light)); color: var(--on-gold);
    font-weight: 700; cursor: pointer; font-family: inherit; font-size: 0.9rem;
}
#submitStatus { margin-top: 12px; font-size: 0.85rem; color: var(--text-muted); }
.alreadyDone { color: var(--gold); font-size: 0.95rem; padding: 30px 0; }

.draftBanner {
    background: rgba(201,168,76,0.12);
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--gold);
    line-height: 1.55;
}

.previewBanner {
    background: rgba(126,170,237,0.1);
    border: 1px solid rgba(126,170,237,0.45);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--side-blue);
    line-height: 1.55;
}
.previewBanner strong { color: var(--side-blue); }
.previewUnsaved { display: block; margin-top: 3px; opacity: 0.85; }
.submitBtn:disabled { opacity: 0.5; cursor: not-allowed; }

.availTzLabel { font-size: 0.8rem; color: var(--text-muted); }
.availCtl {
    background: var(--overlay-soft);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.availCtl:hover { border-color: var(--gold-dim); color: var(--text); }
.availCtl[aria-pressed="true"] { border-color: var(--gold-dim); color: var(--gold); }

.availNow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 0 4px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-muted);
}
.availNowDot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--verified);
    box-shadow: 0 0 6px var(--verified);
    flex: none;
}

/* "Now" on the grid: a ring on the cell, and a faint tint down the row so the
   current hour is findable without hunting for one highlighted square. */

table.availGrid th.slotHead.nowCol .hourTick { color: var(--gold); font-weight: 700; }
table.availGrid td.cell.nowCol { background: rgba(201,168,76,0.06); }
/* The hour it is right now. */
table.availGrid td.cell.isNow { box-shadow: inset 0 0 0 2px var(--verified); }
table.availGrid td.cell.selected.nowCol { background: var(--gold); }

/* Segmented 12h / 24h: both options visible, the active one lit. */
.availSeg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.availSeg .availCtl { border: 0; border-radius: 0; }
.availSeg .availCtl + .availCtl { border-left: 1px solid var(--border); }
/* --overlay-border, not --overlay-soft: at 3% the fill was invisible and the
   only thing separating 12h from 24h was the weight of the text. */
.availCtl.on { background: var(--overlay-border); color: var(--heading); font-weight: 700; }

/* Required marker: present, not shouting. */
/* --blood-light is a surface tone, not a text one: 2.71:1 against the form
   background, under AA. --red-x is the palette's text red and clears it. */
.reqMark { color: var(--red-x); margin-left: 3px; font-size: 0.72em; vertical-align: super; line-height: 1; }

/* --- Form structure --------------------------------------------------- */
.takeHead { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.takeHead h1 { margin: 0 0 6px; }
.takeMeta { margin: 8px 0 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.4px; text-transform: uppercase; }
/* The availability week, out of the reading column and across the page.
   Centred on the column it came out of, capped so it does not run edge to
   edge on a wide monitor, and never wider than the viewport allows. Below
   that cap it is simply the column width again, so nothing special happens on
   a phone. */
.fieldBlock.fieldWide {
    width: min(1400px, calc(100vw - 40px));
    margin-left: 50%;
    transform: translateX(-50%);
}

.fieldBlock { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.fieldBlock:last-of-type { border-bottom: 0; }

/* --- Org gate: shown instead of the form when the respondent has not
   verified a work email yet. It replaced a bare 403 that told a player to
   go and find the org's own site. ------------------------------------- */
.orgGate { max-width: 460px; }

/* The no-form states: gate, already answered, closed.
 *
 * .orgGate is 460px inside a 720px wrap, so it sat against the left edge of a
 * rule far wider than itself and read as misaligned rather than centred. Here
 * the column narrows to the content, so the header, the rule and the block
 * below it are all the same width and share one axis. */
.takeWrap.takeCentred { max-width: 520px; padding-top: 44px; text-align: center; }
.takeWrap.takeCentred .orgGate { max-width: none; }
.takeWrap.takeCentred .takeHead { margin-bottom: 26px; }
.takeWrap.takeCentred #orgGateForm { justify-content: center; }
.takeWrap.takeCentred #orgGateEmail { flex: 1 1 240px; text-align: center; }
.takeWrap.takeCentred .alreadyDone { padding: 10px 0 0; }
.orgGate h2 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--heading);
    margin: 0 0 10px;
}
.orgGate p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 10px; }
.orgGate strong { color: var(--text); }
.orgGateNote { font-size: 0.76rem; opacity: 0.85; }
#orgGateForm { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
#orgGateEmail {
    flex: 1 1 240px;
    background: var(--overlay-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 10px;
    font-family: inherit;
    font-size: 13px;
}
#orgGateEmail:focus { outline: none; border-color: var(--gold-dim); }
#orgGateStatus { margin-top: 12px; font-size: 0.82rem; color: var(--text-muted); min-height: 1.2em; }
#orgGateStatus.sent { color: var(--verified); }
#orgGateStatus.failed { color: var(--red-x); }

/* ===== Editing an answer that already exists ===== */

.editBanner {
    background: rgba(201,168,76,0.1);
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 22px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.editBanner strong { color: var(--gold); }
.editBanner.locked { background: var(--overlay-soft); border-color: var(--border); }
.editBanner.locked strong { color: var(--text); }
.editBanner .editMeta { display: block; margin-top: 3px; opacity: 0.8; font-size: 0.74rem; }

/* Frozen, not hidden. The ticks stay legible and stop responding -- without
   pointer-events a drag still paints cells that will never be saved. */
table.availGrid.frozen { pointer-events: none; }
table.availGrid.frozen td.cell { opacity: 0.85; }

.submitBtn:disabled { opacity: 0.55; cursor: default; }

/* What the pointer is over. A 15-minute column cannot carry a label of its
   own, so the exact slice is named here instead. */
/* The readout always says something, so this line can never appear, vanish or
   change height and move the grid a line while the pointer is inside it. The
   verb is fixed-width for the same reason: Hovering, Selecting and Selected
   are different lengths and the time after them would slide as you dragged. */
.availReadout {
    margin-left: 10px;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: baseline; gap: 7px;
    min-height: 1.2em;
}
.readVerb {
    display: inline-block;
    min-width: 62px;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.availReadout[data-verb="Selecting"] .readVerb,
.availReadout[data-verb="Selected"]  .readVerb { color: var(--verified); }
.availReadout[data-verb="Clearing"]  .readVerb,
.availReadout[data-verb="Cleared"]   .readVerb { color: var(--red-x); }
.readWhat { color: var(--gold); }
/* Idle: the same shape as an answer, holding the space rather than filling
   it. */
.readIdle { color: var(--text-muted); opacity: 0.45; }

/* ===== Riot ID ===== */
.riotIdRow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* The tick belongs inside the box. A verified state announced on a line
   underneath is a state about a different thing by the time you have read it;
   inside the field it is unmistakably about the value in the field. */
.riotIdField { position: relative; flex: 1 1 220px; display: flex; }
.riotIdInput {
    font-family: var(--font-mono);
    flex: 1; margin: 0;
    /* Room for the tick, always, so text never slides sideways when one
       appears. */
    padding-right: 30px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.riotFieldTick {
    position: absolute;
    right: 10px; top: 50%; transform: translateY(-50%);
    color: var(--verified);
    font-weight: 700; font-size: 0.9rem; line-height: 1;
    opacity: 0; transition: opacity 0.18s ease;
    pointer-events: none;
}
.riotIdField.ok .riotIdInput {
    border-color: var(--verified);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--verified) 45%, transparent);
}
.riotIdField.ok .riotFieldTick { opacity: 1; }
.riotIdField.bad .riotIdInput { border-color: var(--red-x); }
/* Mid-check: neither right nor wrong yet, so it says neither. */
.riotIdField.busy .riotIdInput { border-color: var(--gold-dim); }

/* The card's slot exists whether or not there is a card in it, so nothing
   below moves when an account resolves. Dotted while empty: an outline that
   is clearly a space waiting to be filled rather than a box that failed. */
.riotCard {
    margin-top: 10px;
    min-height: 58px;
    display: flex; align-items: center;
    border: 1px dashed color-mix(in srgb, var(--text-muted) 45%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--text) 4%, transparent);
    padding: 8px 12px;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.riotCard:has(.riotCardBody:not([hidden])) {
    border-style: solid;
    border-color: color-mix(in srgb, var(--verified) 50%, transparent);
    background: color-mix(in srgb, var(--verified) 8%, transparent);
}
.riotCardEmpty {
    font-family: var(--font-mono);
    font-size: 0.72rem; color: var(--text-muted);
    opacity: 0.75;
}
.riotCardBody { display: flex; align-items: center; gap: 12px; width: 100%; }
.riotCardBody[hidden] { display: none; }
.riotIcon {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 8px; overflow: hidden;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
}
.riotIcon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.riotWho { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.riotName { color: var(--text); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; }
.riotRank { color: var(--gold); font-family: var(--font-mono); font-size: 0.72rem; }
/* The server the account resolved on, at the right-hand end of the card --
   the same order the lookup page reads in: who, then rank, then where. */
.riotRegion {
    font-family: var(--font-mono); font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.riotRegion:empty { display: none; }
/* Riot did not answer about the rank. Muted and dotted rather than gold: gold
   here reads as a fact about the account, and this is a fact about the
   lookup. The account is still verified either way. */
.riotRank.isUnread {
    color: var(--text-muted);
    border-bottom: 1px dotted var(--text-muted);
    cursor: help;
}
.riotMeta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.riotLevel { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.7rem; }
.riotLink { color: var(--gold); text-decoration: none; font-family: var(--font-mono); font-size: 0.7rem; }
.riotLink[hidden] { display: none; }
.riotLink:hover, .riotLink:focus-visible { color: var(--gold-light, #e8d9a0); text-decoration: underline; outline: none; }

.riotIdHint { margin-top: 6px; font-size: 0.75rem; min-height: 1.1em; }
.riotIdHint.ok  { color: var(--verified); }
.riotIdHint.bad { color: var(--red-x); }

/* ===== Regions ===== */
/* Codes not full names: seventeen full names is a wall, and anyone choosing
   a second server already knows what EUW means. */
.regionGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 2px 10px;
}
.regionGrid .choiceOption { font-family: var(--font-mono); font-size: 0.76rem; }

/* ===== Drag to rank ===== */
/* Lane priority, cloned from my.lafter.gg/preferences: same card, same
   1st/2nd/3rd/× steps, same gold-silver-bronze-red, same click to cycle. The
   two are the same question asked in two places, so they are the same
   control. */
.lanesGrid { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 4px 0 10px; }
.laneItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    border: 1.5px solid transparent;
    transition: transform 0.15s, border-color 0.2s, opacity 0.2s;
    user-select: none;
}
.laneItem:hover { transform: scale(1.08); }
.laneItem:focus-visible { outline: 1px solid var(--gold-dim); outline-offset: 2px; }

.laneItem.priority-1 { border-color: var(--gold); }
.laneItem.priority-2 { border-color: var(--silver); }
.laneItem.priority-3 { border-color: var(--bronze); }
.laneItem.priority-x { border-color: var(--red-x); opacity: 0.4; }

.laneIcon { width: 46px; height: 46px; }
.laneIcon img { width: 100%; height: 100%; filter: brightness(0.9); }
.laneItem.priority-1 .laneIcon img { filter: brightness(1.1) drop-shadow(0 0 6px var(--gold)); }
.laneItem.priority-x .laneIcon img { filter: grayscale(1) brightness(0.5); }

.laneName { font-family: var(--font-head); font-size: 0.85rem; font-weight: 700; }
/* A FIXED box, not a minimum. min-height reserved 8px and the text drew at
   9.6, so the first lane anyone clicked grew the row by a pixel and a half and
   nudged everything under it down -- while the click was still happening. */
.lanePriority {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    height: 12px;
    line-height: 12px;
    overflow: hidden;
}
.laneItem.priority-1 .lanePriority { color: var(--gold); }
.laneItem.priority-2 .lanePriority { color: var(--silver); }
.laneItem.priority-3 .lanePriority { color: var(--bronze); }
.laneItem.priority-x .lanePriority { color: var(--red-x); }

.rankList { list-style: none; margin: 0; padding: 0; max-width: 320px; }
.rankItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 5px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--overlay-soft);
    cursor: grab;
    user-select: none;
}
.rankItem:hover { border-color: var(--gold-dim); }
.rankItem.dragging { opacity: 0.4; cursor: grabbing; }
.rankNum {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex-shrink: 0;
    border-radius: 50%;
    background: rgba(201,168,76,0.16);
    color: var(--gold);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}
.rankGrip { color: var(--text-muted); font-size: 0.8rem; }
.rankName { font-size: 0.82rem; color: var(--text); }
/* Frozen with everything else -- a list you can still drag but not save is
   worse than one that plainly cannot move. */
[data-read-only="1"] .rankItem { cursor: default; pointer-events: none; opacity: 0.85; }

/* ===== Advanced availability calendar ===== */

.calViews { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 12px; }
/* Week and month are the same size box.
   They are the two anyone flips between while answering, and they measured
   315px and 378px -- so every flip moved the buttons, the note and everything
   under the question by 63px, under a pointer that was about to click. The
   floor is the taller of the two; a short week view ends in space rather than
   in the next control jumping into where you were aiming.
   Split and year are not in this: a season is genuinely more to show, and
   padding a week out to its height would be most of a screen of nothing. */
/* One height for both, set once: the week is a column with Clear on its
   floor, and the month's six weeks stretch to that same floor.
   The week's is a floor, not a lid, and its grid is never squeezed to fit
   one. At 15.4rem the pane was 12px short of its own readout, seven rows and
   Clear; a column gives the shortfall to whatever can scroll, so the grid's
   box came out shorter than the week in it and wore a scrollbar down its
   side ("shouldnt be scrolling..."). */
.calPane[data-cal-pane="week"]:not([hidden]), .calPane[data-cal-pane="month"]:not([hidden]) { display: flex; flex-direction: column; }
.calPane[data-cal-pane="week"]:not([hidden]) { min-height: 16.2rem; }
.calPane[data-cal-pane="month"]:not([hidden]) { height: 16.2rem; }
.calPane[data-cal-pane="week"] .availGridScroll { flex: none; }
.calPane[data-cal-pane="week"] .calPatternBar { margin-top: auto; }
.calPane[data-cal-pane="month"] .monthGrid { flex: 1 1 auto; min-height: 0; grid-template-rows: auto repeat(6, minmax(0, 1fr)); }
.calPane[data-cal-pane="month"] .monthDay { min-height: 0; }
.calNav { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.calPeriod { font-size: 0.76rem; color: var(--text-muted); min-width: 11ch; text-align: center; }

.calPatternBar { display: flex; align-items: center; justify-content: flex-end; margin-top: 8px; }
/* The box, between the views and the arrows, in a frame of its own. */
.calMid { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
/* Kept in the row when it is not for this view, unseen, so the row is one height in both. */
.calMid[hidden] { display: flex; visibility: hidden; }
.calPatternToggle {
    display: inline-flex; align-items: center; gap: 7px; margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--overlay-soft, rgba(255,255,255,0.03));
    font-size: 0.78rem; color: var(--text-muted); white-space: nowrap;
}
/* Clear takes things away, and looks it. */
.calClear {
    padding: 0.35rem 0.9rem; border-radius: 6px; font-size: 0.72rem;
    border-color: color-mix(in srgb, var(--red-x) 60%, transparent);
    color: var(--red-x); background: color-mix(in srgb, var(--red-x) 10%, transparent);
}
.calClear:hover { border-color: var(--red-x); color: var(--red-x); background: color-mix(in srgb, var(--red-x) 22%, transparent); }

/* A day that no longer follows the pattern is marked, or there is no way to
   tell an intentional exception from the shape everything else has. */
table.availGrid td.dayLabel.hasOverride { color: var(--gold); }
table.availGrid td.dayLabel.hasOverride::after { content: ' •'; }

/* --- month: geometry is in availability-grid.css, shared with results.php.
       Only the states a respondent can put a day into live here. --- */
.monthDay { cursor: pointer; }
.monthDay:hover { border-color: var(--gold-dim); }
.monthDay.unavailable { opacity: 0.2; cursor: default; }
/* Gold marks a day set for itself, whatever it was set to -- including off.
   It says "this day does not follow the pattern", which is worth seeing on an
   off day as much as on a full one. */
.monthDay.overridden { border-color: var(--gold); }

/* --- a day already gone is not an answer anyone can give --- */
table.availGrid td.cell.pastDay { opacity: 0.28; pointer-events: none; }
table.availGrid td.dayLabel.pastLabel { opacity: 0.4; text-decoration: line-through; }

/* --- season: the splits, as blocks ---
   A flat list of 52 weeks is a wall with no landmarks. A season has shape,
   and that shape is what people plan around -- "I'm free most of Split 2". */
.yearGrid { display: flex; flex-direction: column; gap: 10px; }
.splitBlock {
.splitBlock.s0::before { background: var(--gold); }
    position: relative;
    padding: 11px 13px 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--overlay-soft);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}
.splitBlock:hover { border-color: var(--gold-dim); transform: translateY(-1px); }
/* One spine colour per split, so consecutive ones are tellable apart at a
   glance rather than by reading their labels. */
.splitBlock::before {
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
}
.splitBlock.s1::before { background: #4fa3c7; }
.splitBlock.s2::before { background: #9b7bc7; }
.splitHead { display: flex; align-items: baseline; gap: 10px; margin: 0 0 7px 8px; }
.splitName { font-size: 0.82rem; color: var(--text); font-weight: 700; }
.splitRange { font-size: 0.68rem; color: var(--text-muted); }
.splitStrip { display: flex; gap: 1px; margin-left: 8px; }
.splitDay {
    flex: 1; height: 16px; border-radius: 1px;
    background: color-mix(in srgb, var(--gold) calc(var(--fill, 0) * 75%), var(--overlay-soft));
    border: 1px solid var(--border);
}
.splitDay.overridden { border-color: var(--gold-dim); }
.splitFoot { margin: 6px 0 0 8px; font-size: 0.66rem; color: var(--text-muted); }
.splitMore { margin-top: 4px; align-self: flex-start; }

/* --- one split, month by month --- */
.splitGrid { display: flex; flex-direction: column; gap: 14px; }
.splitMonthName { font-size: 0.74rem; color: var(--gold); margin-bottom: 5px; }
.splitMonthGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.splitPad { visibility: hidden; }
.splitDate {
    display: flex; align-items: center; justify-content: center;
    height: 30px; border-radius: 5px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--gold) calc(var(--fill, 0) * 60%), var(--overlay-soft));
    font-size: 0.7rem; color: var(--text); cursor: pointer;
}
.splitDate:hover { border-color: var(--gold-dim); }
.splitDate.overridden { border-color: var(--gold); }
.splitDate.none { color: var(--text-muted); }

[data-read-only="1"] .monthDay,
[data-read-only="1"] .splitBlock,
[data-read-only="1"] .splitDate { cursor: default; }

/* Submit, and the one control that takes an answer back. The trash sits
   beside it rather than under the form: it is the opposite of the button next
   to it and belongs at the same moment, not in a danger zone further down. */
.submitRow { display: flex; align-items: center; gap: 10px; }
.discardBtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0;
    border: 1px solid color-mix(in srgb, var(--text-muted) 45%, transparent);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.discardBtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.discardBtn:hover { color: var(--red-x); border-color: var(--red-x); background: color-mix(in srgb, var(--red-x) 10%, transparent); }
.discardBtn:disabled { opacity: 0.5; cursor: default; }

/* The week button, after a day is painted in the month. Three beats and it
   stops: it is pointing at where the hours are, not asking to be pressed. */
@keyframes availTabPulse {
    0%, 100% { border-color: var(--border); color: var(--text-muted); }
    50%      { border-color: var(--gold); color: var(--gold); }
}
.availCtl.pulse { animation: availTabPulse 0.8s ease-in-out 3; }
/* Until it has been opened once: a slow breath, not a pulse. */
@keyframes availTabBreathe {
    0%, 100% { border-color: var(--border); box-shadow: none; }
    50% { border-color: var(--gold-dim); box-shadow: 0 0 10px rgba(201, 168, 76, 0.28); }
}
.availCtl.breathe { animation: availTabBreathe 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .availCtl.pulse { animation: none; border-color: var(--gold); color: var(--gold); }
    .availCtl.breathe { animation: none; border-color: var(--gold-dim); }
}

/* ---- Other accounts -----------------------------------------------------
   The same banner as the account above, because it is the same thing. It was
   a text field with the region and the rank written after it, which asked
   somebody to read an account out of a form control and put "is this valid"
   in words at the end of the line, where it read as a label.

   Gold rather than the verified green, so the two are told apart at a glance
   without the alt looking like it failed something. */
.riotAlts { margin-top: 10px; }
.riotAltsHead {
    font-family: var(--font-mono); font-size: 0.68rem;
    color: var(--text-muted); letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.riotAltCard {
    display: flex; align-items: center; gap: 12px;
    min-height: 58px;
    margin-bottom: 6px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--gold-dim) 55%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--gold-dim) 9%, transparent);
}
.riotNameRow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* On the card and next to the name, because that is what somebody reads when
   they are checking they put the right account in the right place. */
.riotAltTag {
    font-family: var(--font-mono); font-size: 0.58rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--gold-dim);
    border: 1px solid color-mix(in srgb, var(--gold-dim) 45%, transparent);
    border-radius: 3px;
    padding: 1px 5px;
}
.riotAltCard .riotMeta { margin-left: auto; }

/* Only open while somebody is adding one. */
.riotAltEntry { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.riotAltEntry[hidden] { display: none; }
.riotAltField { position: relative; flex: 1; min-width: 0; }
.riotAltInput {
    width: 100%;
    background: var(--overlay-soft);
    border: 1px solid var(--border); border-radius: 6px;
    color: var(--text);
    font-family: var(--font-mono); font-size: 0.78rem;
    padding: 7px 30px 7px 9px;
}
.riotAltInput:focus { outline: none; border-color: var(--gold-dim); }
/* A mark in the box rather than a word after it. Nothing until there is
   something to say -- an empty box has not failed anything. */
.riotAltMark {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px;
    font-size: 0.8rem; line-height: 14px; text-align: center;
    pointer-events: none;
}
.riotAltMark.is-ok::before  { content: '\2713'; color: var(--verified); }
.riotAltMark.is-bad::before { content: '\2715'; color: var(--red-x); }
.riotAltMark.is-busy::before {
    content: '';
    display: block; width: 11px; height: 11px; margin: 1px auto;
    border: 2px solid color-mix(in srgb, var(--text-muted) 40%, transparent);
    border-top-color: var(--gold-dim);
    border-radius: 50%;
    animation: riotAltSpin 0.7s linear infinite;
}
@keyframes riotAltSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .riotAltMark.is-busy::before { animation: none; }
}
/* Whatever went wrong with the one they just typed, and nothing when nothing
   did. Not a caption: a caption written here would be about one form's rules
   and would still be sitting there on the next form to switch this on. */
.riotAltHint {
    font-family: var(--font-mono); font-size: 0.68rem;
    color: var(--red-x); line-height: 1.5;
}
.riotAltHint:empty { display: none; }
/* .riotAltDel: .lafterXDel in style.css. */
.riotAltAdd {
    background: none; border: 1px dashed var(--border); border-radius: 6px;
    color: var(--text-muted);
    font-family: var(--font-mono); font-size: 0.72rem;
    padding: 5px 10px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.riotAltAdd:hover { color: var(--gold); border-color: var(--gold-dim); }
.riotAltAdd[hidden] { display: none; }

/* An i beside an availability question: how the calendar works, in a bubble. */
.fieldLabel { display: inline-flex; align-items: center; flex-wrap: wrap; }
.fieldInfo {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 8px;
    border: 1px solid var(--border); border-radius: 50%;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400; line-height: 1;
    cursor: default; opacity: 0.6; transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.fieldInfo:hover, .fieldInfo:focus-visible, .fieldInfo:focus-within { opacity: 1; color: var(--gold); border-color: var(--gold-dim); outline: none; }
.fieldTip {
    position: absolute; top: calc(100% + 8px); left: -6px; z-index: 6;
    width: max-content; max-width: min(360px, 80vw); padding: 10px 12px;
    background: var(--bg-card); border: 1px solid var(--gold-dim); border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,calc(0.45 * var(--shk, 1)));
    color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; line-height: 1.5;
    text-align: left; white-space: pre-line;
    opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.fieldTip b { color: var(--gold); font-weight: 400; }
.fieldTip::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.fieldInfo:hover .fieldTip, .fieldInfo:focus-within .fieldTip, .fieldInfo:focus-visible .fieldTip { opacity: 1; pointer-events: auto; }