/* Almost nothing.

   MudBlazor owns the look (ADR 0003) — colours, type, spacing, tables, forms, dialogs — and
   it owns which layout a width gets, through its own display utilities on its own 600-pixel
   breakpoint. What is left here is two kinds of thing and nothing else.

   First, what a component library has no opinion about: the size of a chart, the colours of
   series that carry meaning, where a disclosure panel hangs.

   Second, the handful of MudBlazor component defaults that are wrong for a scoreboard read
   one-handed — a board's column widths, a fact table that has to read label-above-value, the
   gutters of a table of figures, a dialog that has to become a sheet. Each says what it
   overrides and why; ADR 0012 has the argument. They all live in the one narrow-screen block
   at the bottom of this file. */

/* --- Charts ---------------------------------------------------------------------------
   ECharts draws into a plain div and needs a height from somewhere, because a chart with
   no height renders as nothing at all and says nothing about why. */
.dis-chart {
    width: 100%;
    height: 180px;
    margin-block: .5rem 1.5rem;
}

/* A sparkline is a shape beside a figure, so it takes the room the row leaves it and no
   more. Forty pixels is enough for a trend and too little for anything to be read off. */
.dis-spark {
    flex: 1 1 auto;
    min-width: 6rem;
    height: 40px;
}

/* --- Chart series ---------------------------------------------------------------------
   Defined in CSS rather than in JavaScript so one place decides what the site looks like,
   and read from the body by script beside MudBlazor's own variables.

   These are not theme colours: they carry meaning. Blue and green rather than red and
   green, with the second series dashed as well, so the pair survives colour-vision
   deficiency. The restart marker is deliberately much lighter than both series so it
   stays separable in greyscale, where hue is no help. */
body {
    --dis-chart-line: #a58ce8;
    --dis-chart-resident: #4589ff;
    --dis-chart-managed: #08bdba;
    --dis-chart-server: #ff832b;
    --dis-chart-restart: #fdd13a;
}

/* --- Board columns --------------------------------------------------------------------
   Place and Points are short, and a fixed gutter stops the columns jiggling as two-digit
   scores become three. How wide a column of Places should be is the one thing about this
   table a component library cannot know. */
.dis-board__figure {
    width: 5rem;
}

/* A Member's name is an anchor before the circuit connects and a button after it, so that
   the history opens over the standings rather than navigating. A button brings a browser
   default look with it; this takes that back off, leaving MudBlazor's link classes to say
   what it is. Harmless on the anchor, which has none of it to undo. */
.dis-board__name {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

/* The caption under a row's name: what the row says about itself, at the width where its
   own columns are hidden. Caption-sized, because the name is the row and this is a note
   about it. Shared by the board and by Home, which narrow the same way. */
.dis-notes {
    font-size: var(--mud-typography-caption-size, .75rem);
    line-height: 1.4;
}

/* --- The app bar's narrow menu --------------------------------------------------------
   The disclosure in NavMenu, positioned (ADR 0013 says why it is a disclosure and not a
   MudMenu). Everything about how it looks is MudBlazor's — the summary borrows the button
   classes and the panel borrows a paper — so what is left here is where the panel goes,
   which no component library can know for us. */
.dis-navmenu {
    position: relative;
}

.dis-navmenu > summary {
    /* A summary is a list-item by default, marker and all. */
    display: inline-flex;
    cursor: pointer;
    list-style: none;
}

.dis-navmenu > summary::-webkit-details-marker {
    display: none;
}

.dis-navmenu__items {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--mud-zindex-popover, 1200);
    min-width: 10rem;
}

/* --- Toggletip ------------------------------------------------------------------------
   Explanations wrap rather than stretching into one unreadable line. The rest of a
   toggletip is MudBlazor's. */
.dis-toggletip__text {
    max-width: 22rem;
}

/* --- Inline code ----------------------------------------------------------------------
   Snowflakes, Module keys and event names are shown as <code>, and a proportional font
   makes two long ids impossible to compare at a glance. MudBlazor has no opinion about a
   bare code element. */
code {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .875em;
}

/* --- A narrow screen ------------------------------------------------------------------
   One block, and the site's one breakpoint. Its value is MudBlazor's own xs, and the query
   is the exact complement of the `min-width: 600px` its display utilities use — so at every
   width exactly one of the two applies, and the site never holds two ideas of "narrow".

   The number appears once more, in js/viewport.js, where a component asks whether a fetch
   is worth making. That answer decides cost, never layout: layout is decided here, so that
   a page is never painted wide and then rearranged. Change one and change the other. */
@media (max-width: 599.98px) {

    /* Every pixel belongs to the name and its caption here. */
    .dis-board__figure {
        width: auto;
    }

    /* A name is the row's one target, so on a touch screen it has to be one a thumb can
       hit. Only at this width: a pointer needs no help, and 44 pixels of row height on a
       desktop board would undo the density the table is dense for. */
    .dis-board__name {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* A label beside a value is a two-column table, and here the value column becomes a
       140-pixel column of prose. The label sits above what it labels instead.

       A platform class rather than a Core one: the board's rules block is Core's and the
       member view's figures are the Word game's, and both reach for this the way both
       already reach for .dis-chart.

       MudSimpleTable's own cell rule carries the same specificity as this one, so what
       settles it is source order — this stylesheet is linked after MudBlazor's. */
    .dis-facts table tr > td {
        display: block;
        border-bottom: none;
        padding-block: 0;
    }

    /* The label, read as a label: quieter and smaller than the answer under it. */
    .dis-facts table tr > td:first-child {
        padding-top: .625rem;
        color: var(--mud-palette-text-secondary);
        font-size: var(--mud-typography-caption-size, .75rem);
    }

    /* One rule between facts rather than one between cells. The last fact keeps MudBlazor's
       own borderless last row, whose selector is a class deeper than this one — which is
       the right look anyway: no trailing rule under the block. */
    .dis-facts table tr > td:last-child {
        padding-bottom: .625rem;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    /* Five columns at sixteen pixels a side spend more of a 360-pixel screen on padding
       than on figures. The gutters give way; MudBlazor's own overflow on the table
       container stays as the floor, so a table still too wide scrolls inside itself rather
       than dragging the page sideways.

       The selector carries MudBlazor's own class deliberately: its dense rule is two
       classes deep, so a single-class override would lose on specificity and silently do
       nothing. */
    .dis-compact.mud-simple-table table tr > td,
    .dis-compact.mud-simple-table table tr > th {
        padding-inline: .375rem;
    }

    /* The board's two halves sit in MudBlazor's grid so that they can be side by side above
       md. Stacked, that grid's gutters are not the spacing this page had: it pads every item
       and pulls itself left to compensate. Undone here, so a narrow board is exactly what it
       was — every pixel to the name — with the gap the Rules Block's own margin used to give
       it. */
    .dis-board__layout {
        width: 100%;
        margin: 0;
    }

    .dis-board__layout > .mud-grid-item {
        padding: 0;
    }

    .dis-board__layout > .mud-grid-item + .mud-grid-item {
        margin-top: 1.5rem;
    }

    /* MudBlazor's full-width dialog is the screen less 64 pixels, and its content adds 48
       more of padding — so a calendar, two tables of figures and a chart were drawn in
       about 248 pixels of a 360-pixel phone. Here it becomes a sheet: exactly what
       MudBlazor's own full-screen dialog class does, at this width only.

       FullScreen in DialogOptions would be the tidier switch, but it is a bool in C# and
       would need the viewport measured to be set correctly. Matched on both the dialog
       surface and a wrapper carrying the class, so it holds wherever MudBlazor puts it. */
    .dis-sheet.mud-dialog,
    .dis-sheet .mud-dialog {
        width: 100%;
        height: 100%;
        margin: 0;
        max-width: 100%;
        max-height: none;
        border-radius: 0;

        /* The content area scrolls instead, as it does in a full-screen dialog. */
        overflow-y: hidden;
    }
}