/* ===========================================================================
   The shared parts
   ===========================================================================

   Everything here exists because the views were writing it inline, over and
   over, in values that never quite matched. Counted across 116 views there
   were 488 hand-written `style="..."` attributes, and among them:

       17 different sizes for what is all meant to be "small text"
        9 different sizes for what is all meant to be "the big number"
        6 different heights for a progress bar
       28 copies of the same empty-state icon

   None of that follows a theme, and none of it can be changed in one place.
   The classes below are the same ideas named once. A view says what a thing
   IS; this file says what that looks like; theme-base.css says in what
   colours.

   Ordering: this loads after elbe-look.css, so a part may lean on the palette
   and on section 16's button sizing. It should not need !important -- if a
   rule here is being beaten, the view is probably still carrying the inline
   style it was meant to give up.
   =========================================================================== */


/* ===== 1. Type ==============================================

   Four sizes, which is enough. The rem values the views used -- 0.68 through
   0.9 -- landed on seventeen distinct pixel sizes for text that all reads at
   a glance as "the small print". These are stated in px because the shell
   already scales as a whole with the top bar's zoom. */

.elbe-t-xs { font-size: 11px; }
.elbe-t-sm { font-size: 12px; }
.elbe-t-md { font-size: 13px; }
.elbe-t-lg { font-size: 14px; }

/* Muted small print -- the commonest pairing of the lot, and the one most
   often written as `text-muted` plus an inline size. */
.elbe-note {
    font-size: 12px;
    color: var(--elbe-ivory-dim);
}

.elbe-note-sm { font-size: 11px; color: var(--elbe-ivory-dim); }

/* The little uppercase label over a figure or a block. The original sets it
   in brass; the views were setting `letter-spacing: 1px` and guessing at the
   rest. */
.elbe-eyebrow {
    font-size: 10.5px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--elbe-ivory-dim);
}

.elbe-eyebrow.brass { color: var(--elbe-eyebrow); }

/* A figure: a count, a rating, a score. Tabular so a column of them lines up,
   which is the reason the stat tiles already use the mono face. */
.elbe-figure {
    font-family: var(--elbe-mono);
    font-variant-numeric: tabular-nums;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.15;
}

.elbe-figure.lg { font-size: 34px; letter-spacing: -1px; }
.elbe-figure.sm { font-size: 20px; letter-spacing: -0.5px; }

/* Lettering in one of the palette's colours, for the times a word rather than
   a tag has to carry the meaning. */
.elbe-ink-brass  { color: var(--elbe-brass-text); }
.elbe-ink-felt   { color: var(--elbe-felt-text); }
.elbe-ink-wine   { color: var(--elbe-wine-text); }
.elbe-ink-sky    { color: var(--elbe-sky-text); }
.elbe-ink-violet { color: var(--elbe-violet-text); }
.elbe-ink-dim    { color: var(--elbe-ivory-dim); }

/* Text kept as typed -- a pasted PGN, a message, an address. */
.elbe-pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* ===== 2. The empty state ===================================

   Twenty-eight screens draw the same thing when they have nothing to show: a
   faint glyph, a line of muted text under it, air around both. */

.elbe-empty {
    text-align: center;
    padding: 34px 18px;
    color: var(--elbe-ivory-dim);
}

.elbe-empty > i,
.elbe-empty-icon {
    display: block;
    font-size: 2rem;
    line-height: 1;
    opacity: 0.4;
    margin-bottom: 9px;
}

.elbe-empty-icon.lg { font-size: 2.6rem; }


/* ===== 3. Chips and bars ====================================

   A chip is a tag that carries a number rather than a word, so it is tighter
   and takes the mono face. `.elbe-tag` remains the one for words. */

.elbe-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 7px;
    font-family: var(--elbe-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    background: color-mix(in srgb, var(--elbe-ivory-dim) 12%, transparent);
    color: var(--elbe-ivory-dim);
    white-space: nowrap;
}

.elbe-chip.brass { background: color-mix(in srgb, var(--elbe-brass-text) 14%, transparent); color: var(--elbe-brass-text); }
.elbe-chip.felt  { background: color-mix(in srgb, var(--elbe-felt-text) 14%, transparent);  color: var(--elbe-felt-text); }
.elbe-chip.wine  { background: color-mix(in srgb, var(--elbe-wine-text) 14%, transparent);  color: var(--elbe-wine-text); }
.elbe-chip.sky   { background: color-mix(in srgb, var(--elbe-sky-text) 14%, transparent);   color: var(--elbe-sky-text); }

/* A progress track. The views used five heights between 5px and 8px; this is
   one, and `.thin`/`.thick` for the two that meant it. */
.elbe-bar {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--elbe-ivory-dim) 18%, transparent);
}

.elbe-bar.thin { height: 4px; }
.elbe-bar.thick { height: 9px; }

.elbe-bar > .progress-bar,
.elbe-bar > .fill {
    height: 100%;
    background: var(--elbe-brass);
    border-radius: inherit;
    transition: width 0.25s ease;
}

.elbe-bar > .fill.felt { background: var(--elbe-felt); }
.elbe-bar > .fill.wine { background: var(--elbe-wine); }


/* ===== 4. Small layout habits ===============================

   Not styling so much as the same three arrangements, written out by hand in
   a dozen views each. */

/* Lets a flex child shrink below its content, which is what makes an ellipsis
   work inside a row. Written as `min-width: 0` inline twelve times. */
.min-w-0 { min-width: 0; }

/* A box that scrolls rather than growing without limit. */
.elbe-scroll { max-height: 200px; overflow-y: auto; }
.elbe-scroll.tall { max-height: 300px; }
.elbe-scroll.short { max-height: 120px; }

/* A hairline above a block, in the theme's own rule colour. */
.elbe-rule-top {
    border-top: 1px solid var(--elbe-line);
    padding-top: 9px;
    margin-top: 9px;
}

/* A quoted or called-out block, marked by a brass edge down its start side.
   Logical properties, so it flips with Arabic and Persian. */
.elbe-quote {
    border-inline-start: 3px solid var(--elbe-brass);
    padding-inline-start: 12px;
}

/* A colour sample -- a board square, a theme swatch, a legend dot. */
.elbe-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: 1px solid var(--elbe-line);
    vertical-align: -1px;
}

.elbe-swatch.sm { width: 10px; height: 10px; border-radius: 3px; }

/* Which side a player had. Board colours, not theme colours: white is white on
   every theme, which is the whole point of the mark. */
.elbe-swatch.side-white { background: #F2F2F2; border-color: rgba(128, 128, 128, 0.5); }
.elbe-swatch.side-black { background: #1B1B1B; border-color: rgba(128, 128, 128, 0.5); }

/* A badge holding a word that varies in length -- a day, a level -- kept wide
   enough that a column of them lines up. */
.elbe-badge-wide { min-width: 130px; }


/* ===== 5. The switch ========================================

   Bootstrap's switch takes the browser's blue when it is on, which is the one
   colour on the screen that belongs to nobody. It takes the theme's accent
   here, and one size, so a switch in a dialog matches a switch on a card.

   The thumb is drawn as an SVG data URI because that is how Bootstrap builds
   it; the colour in each is the only difference. */

/*  The width is stated twice on purpose: once as the box's own size, and
    once as a figure site.css can read, so the space reserved for the box at
    the start of the row follows it. See "A switch never touches its wording"
    at the foot of site.css. */
.form-switch { --elbe-switch-w: 2.6rem; }

.form-switch .form-check-input {
    width: 2.6rem;
    height: 1.4rem;
    margin-top: 0.1rem;
    background-color: color-mix(in srgb, var(--elbe-ivory-dim) 34%, transparent);
    border: none;
    cursor: pointer;
    transition: background-color 0.18s ease, background-position 0.18s ease;
}

.form-switch .form-check-input:checked {
    background-color: var(--elbe-brass);
    border: none;
}

.form-check-input:focus,
.form-switch .form-check-input:focus {
    box-shadow: none;
    outline: 2px solid var(--elbe-brass-text);
    outline-offset: 2px;
}

/* A switch with its wording beside it, which is how every settings row on the
   site is built and none of them the same way twice. */
.elbe-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
}

.elbe-switch-row + .elbe-switch-row { border-top: 1px solid var(--elbe-line); }

.elbe-switch-row .label { font-size: 13px; font-weight: 600; }
.elbe-switch-row .hint { font-size: 11.5px; color: var(--elbe-ivory-dim); }


/* ===== 6. What a calendar entry is ==========================

   Five kinds, five colours, white lettering on each. They were a dictionary in
   the calendar view and were pasted onto every entry and every legend dot --
   eighty-odd inline styles on a busy month, and nowhere to change them from.

   Each is measured for white text at 4.6:1 or better, and each keeps an edge
   against both the ivory card and the dark one. */

.elbe-kind {
    background: var(--kind, var(--elbe-ivory-dim));
    color: #FFFFFF;
}

.elbe-kind-0 { --kind: #4F6D7A; }   /* lesson     -- slate blue, 5.3:1 */
.elbe-kind-1 { --kind: #8A6A00; }   /* exam       -- brass,      5.1:1 */
.elbe-kind-2 { --kind: #7A4E8C; }   /* homework   -- plum,       6.1:1 */
.elbe-kind-3 { --kind: #2E7D6B; }   /* event      -- teal,       4.8:1 */
.elbe-kind-4 { --kind: #B23A2E; }   /* tournament -- red,        5.9:1 */

/* The legend's dot: the same five colours, as a square sample. */
.elbe-kind-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--kind, var(--elbe-ivory-dim));
}


/* ===== 7. The eight avatar colours ==========================

   `PALETTE` in the original's index.html, in its order. Which of the eight a
   person gets is still decided in C# -- it is the original's hash of their id,
   and it is what keeps somebody the colour they were on the old site -- but
   the colours themselves are here, where a theme can reach them.

   White lettering on the original's eight ran from 2.4:1 to 4.3:1. The note
   here used to say that was tolerable because the person's full name is always
   beside the tile, so the initials repeat rather than carry -- and that
   darkening them was a change to these eight lines and nothing else.

   It is those eight lines. Each keeps its hue and saturation and gives up only
   lightness, until white on it reaches 4.5:1: the tiles read as the same eight
   colours, a shade deeper. Measured, in order: 4.50, 4.58, 4.51, 4.54, 4.53,
   4.58, 4.53, 4.56. */

.elbe-avatar-c0 { background: #92722C; }
.elbe-avatar-c1 { background: #42825D; }
.elbe-avatar-c2 { background: #3D7DA2; }
.elbe-avatar-c3 { background: #C05546; }
.elbe-avatar-c4 { background: #9C5BBC; }
.elbe-avatar-c5 { background: #AD6324; }
.elbe-avatar-c6 { background: #43835C; }
.elbe-avatar-c7 { background: #B5567F; }


/* ===== 8. Faded, and other small states =====================

   A row that is there but no longer current -- a closed group, a deleted
   account. It reads, but it does not compete with the live ones. */

.elbe-faded { opacity: 0.65; }


/* ===== 9. The search bar ====================================

   Four screens had grown their own -- a field with a glyph inside it, a count
   beside it, a button at the end. Same shape, four sets of measurements. */

.elbe-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.elbe-bar-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--elbe-serif);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.3px;
    white-space: nowrap;
    margin: 0;
}

.elbe-bar-title > i { color: var(--elbe-brass-text); font-size: 16px; }

.elbe-search { position: relative; flex: 1 1 220px; max-width: 340px; }

.elbe-search > i {
    position: absolute;
    inset-inline-start: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--elbe-ivory-dim);
    pointer-events: none;
}

.elbe-search input {
    padding-inline-start: 30px;
    height: 32px;
    min-height: 32px;
}

/* Pushed to the far end of the bar, whichever end that is. */
.elbe-bar-count {
    margin-inline-start: auto;
    font-size: 13px;
    color: var(--elbe-ivory-dim);
}