/* mosaic.css
   How Mosaic.Client.Razor draws a Mosaic tree (Mosaic.Client.Razor-0005). Every colour, face, size, space and radius is
   a custom property Mosaic names itself (--m-*); a page that hosts Mosaic sets them from its own theme in one place
   (Enso maps its --ctrl-* tokens to them in enso.css), so Mosaic never knows a host's token names (canon A18). A tree
   carries no style (Mosaic.Protocol-0022): everything here is the client's.

   The defaults below are the browser's own system colours and faces, which follow the light or dark scheme a page
   declares: a page that sets nothing gets a plain, readable Mosaic, never one that assumes a dark theme. They sit in
   :where(:root), which has no specificity, so any host's :root rule wins wherever it is loaded.

   Two kinds of number stay written in: the container-query breakpoints (a custom property cannot stand in a query),
   and hairline widths: 1px for a border or outline, 2px for a focus ring, and -1px for a margin that tucks a part
   under a hairline.

   Created 2026-10-18, from the rules that were in Enso.Components' enso.css. */

:where(:root) {
    /* Ink and ground */
    --m-ink: CanvasText;
    --m-ink-muted: GrayText;
    --m-link: LinkText;
    --m-surface: Field;
    --m-surface-hover: color-mix(in srgb, CanvasText 8%, Canvas);
    --m-line: color-mix(in srgb, CanvasText 22%, Canvas);
    /* The accent: a button's fill, a picked item's ground, a focus ring */
    --m-accent: AccentColor;
    --m-accent-hover: color-mix(in srgb, AccentColor 85%, CanvasText);
    --m-accent-ink: AccentColorText;
    --m-accent-soft: color-mix(in srgb, AccentColor 22%, Canvas);
    --m-focus: AccentColor;
    /* Tones (Mosaic.Protocol-0027): the four meanings, then four categories that only tell parts apart. Mid tones
       that read on light and dark grounds. Each has a ground, the tone mixed thinly into whatever is behind it; a
       host that sets a tone gets its ground with it, and may set the ground too. */
    --m-tone-info: #3b7dbf;
    --m-tone-success: #2e8b57;
    --m-tone-warning: #c07a12;
    --m-tone-problem: #c9473f;
    --m-tone-1: #8a63d2;
    --m-tone-2: #1e9a8a;
    --m-tone-3: #c2569b;
    --m-tone-4: #a39321;
    --m-tone-info-bg: color-mix(in srgb, var(--m-tone-info) 14%, transparent);
    --m-tone-success-bg: color-mix(in srgb, var(--m-tone-success) 14%, transparent);
    --m-tone-warning-bg: color-mix(in srgb, var(--m-tone-warning) 14%, transparent);
    --m-tone-problem-bg: color-mix(in srgb, var(--m-tone-problem) 14%, transparent);
    --m-tone-1-bg: color-mix(in srgb, var(--m-tone-1) 14%, transparent);
    --m-tone-2-bg: color-mix(in srgb, var(--m-tone-2) 14%, transparent);
    --m-tone-3-bg: color-mix(in srgb, var(--m-tone-3) 14%, transparent);
    --m-tone-4-bg: color-mix(in srgb, var(--m-tone-4) 14%, transparent);
    /* Shape */
    --m-radius-sm: 4px;
    --m-radius-md: 8px;
    /* Type */
    --m-font: system-ui, sans-serif;
    --m-font-mono: ui-monospace, monospace;
    --m-size-title: 15px;
    --m-size-body: 13px;
    --m-size-label: 12px;
    --m-size-small: 12px;
    --m-size-code: 12px;
    /* Space, on the Porthol design system's steps */
    --m-space-1: 4px;
    --m-space-2: 8px;
    --m-space-3: 12px;
    --m-space-4: 16px;
    --m-space-6: 24px;
    /* The few sizes of Mosaic's own parts */
    --m-swatch-width: 320px;
    --m-swatch-height: 56px;
    --m-swatch-compact-width: 96px;
    --m-swatch-compact-height: 72px;
    --m-multiline-height: 68px;
    --m-listbox-height: 200px;
    /* The widest a menu's list grows, and how tall before it scrolls */
    --m-menu-width: 320px;
    --m-menu-height: 320px;
    --m-colour-input-width: 52px;
    --m-colour-input-height: 34px;
    /* The widths a layout gives its side regions, and the width a part in a row starts from */
    --m-track-navigation-min: 180px;
    --m-track-navigation-max: 240px;
    --m-track-inspector-min: 240px;
    --m-track-inspector-max: 320px;
    --m-track-sidebar-min: 200px;
    --m-track-sidebar-max: 260px;
    --m-track-sidebar-inspector-min: 260px;
    --m-track-sidebar-inspector-max: 340px;
    --m-row-part-basis: 200px;
    /* How far a focus ring stands off its part, a link's underline off its text, and how thick the shown tab's bar is */
    --m-focus-offset: 2px;
    --m-underline-offset: 2px;
    --m-tab-bar-width: 2px;
    /* A graph (porthol.mosaic:graph): each column's width, the gutter between columns and the gap between rows, how far
       a step sits in from its column's left, the connectors' ink, how round a connector's bends are, and the tallest
       its box grows before it clips what is below */
    --m-graph-column: 220px;
    --m-graph-gap: 32px;
    --m-graph-row-gap: var(--m-space-3);
    --m-graph-step-indent: 24px;
    --m-graph-line: var(--m-ink-muted);
    --m-graph-bend: 6px;
    --m-graph-max-height: 80vh;
    /* The size of what is there for a screen reader only (a graph's live region): the smallest a reader still reads */
    --m-unseen: 1px;
    /* How wide the accent edge on a process's leading side is */
    --m-graph-process-edge: 3px;
    /* A table (porthol.mosaic:table): a cell's swatch chip, and how far a cell's content sits from its edges */
    --m-table-swatch: 16px;
    --m-table-cell-pad: var(--m-space-2);
    /* A plot (porthol.mosaic:plot): how tall its lines' canvas is, on its own and in a graph's cell; how wide a line and
       a grid line are; the least room the y axis's ticks take, and the x axis's; how long a legend's key is */
    --m-plot-height: 12rem;
    --m-plot-cell-height: 4rem;
    --m-plot-line-width: 2px;
    --m-plot-grid-width: 1px;
    --m-plot-y-ticks-width: 3ch;
    --m-plot-x-ticks-height: 1.3em;
    --m-plot-key-width: 1.5em;
    /* An outline (porthol.mosaic:outline): how far each level sits in from the one above, and how wide an item's arrow is */
    --m-outline-indent: 1.25rem;
    --m-outline-twisty: 1em;
}

/* A container: its parts stacked. */
.m-group { display: flex; flex-direction: column; gap: var(--m-space-3); min-width: 0; }

/* A titled part of a view (porthol.mosaic:section, Mosaic.Protocol-0037): its title, then its parts stacked as a group's.
   The title is smaller than the view's heading, and a section within a section takes a lower heading level, not a
   smaller face. */
.m-section { display: flex; flex-direction: column; gap: var(--m-space-3); min-width: 0; margin: 0; }
.m-section-title, .m-card-title {
    margin: 0; font: 600 var(--m-size-body)/1.35 var(--m-font); color: var(--m-ink); word-break: break-word;
}

/* One thing shown as a unit (porthol.mosaic:card, Mosaic.Protocol-0038): its own surface, edged by a hairline, its title,
   its parts, and its actions together at its foot. */
.m-card {
    display: flex; flex-direction: column; gap: var(--m-space-3); min-width: 0; margin: 0;
    padding: var(--m-space-3); background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-radius-md);
}
.m-card-body { display: flex; flex-direction: column; gap: var(--m-space-3); min-width: 0; }
.m-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-space-2); }

/* A card's title with a badge beside it (a graph's cell). */
.m-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--m-space-1) var(--m-space-2); }

/* A graph (porthol.mosaic:graph, Mosaic.Protocol-0030; Mosaic.Client.Razor-0009): cells on a grid of equal columns,
   each at the top of its row. The renderer sets --m-graph-columns,
   a count, from the cells' places. Half a gutter pads each side, so a connector can run beside the first and last
   columns. The connectors are paths in an SVG layer under the cells, which Mosaic's script routes from the cells' boxes
   (mosaic.js): the cells are positioned, so they paint over it in the order drawn. Modified 2026-10-21: they were
   border runs on the grid. */
/* The graph's box and its camera (Mosaic.Client.Razor-0009; added 2026-10-21): the box is as tall as the graph, up to
   --m-graph-max-height, and clips; the script pans and zooms the surface with one transform from its top left. Its
   background can be dragged once the script is working (data-live), which also shows the box's buttons. */
.m-graph-view { position: relative; overflow: hidden; max-width: 100%; max-height: var(--m-graph-max-height); }
.m-graph-view[data-live] { cursor: grab; }
.m-graph-view--panning, .m-graph-view--panning * { cursor: grabbing; user-select: none; }
.m-graph-view[data-live] .m-cell { cursor: default; }
/* A cell being dragged rides above the others, edged in the accent. Added 2026-10-21. */
.m-cell--dragging { z-index: 3; }
.m-cell--dragging > .m-card { border-color: var(--m-accent); }
.m-graph-surface { width: max-content; transform-origin: 0 0; }
.m-graph-tools { display: none; position: absolute; z-index: 2; top: var(--m-space-1); right: var(--m-space-1); gap: var(--m-space-1); }
.m-graph-view[data-live] > .m-graph-tools { display: flex; }
.m-graph-tool {
    font: var(--m-size-small)/1.2 var(--m-font); color: var(--m-ink); background: var(--m-surface);
    border: 1px solid var(--m-line); border-radius: var(--m-radius-sm); padding: var(--m-space-1) var(--m-space-2); cursor: pointer;
}
.m-graph-tool:hover { background: var(--m-surface-hover); }
.m-graph-tool:focus-visible { outline: 2px solid var(--m-focus); outline-offset: var(--m-focus-offset); }
.m-graph {
    position: relative;
    display: grid; grid-template-columns: repeat(var(--m-graph-columns), var(--m-graph-column));
    column-gap: var(--m-graph-gap); row-gap: var(--m-graph-row-gap); width: max-content;
    padding: 0 calc(var(--m-graph-gap) / 2);
}
.m-graph-lines { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.m-graph-line { fill: none; stroke: var(--m-graph-line); stroke-width: 1; }
/* What a connector means: one cell holding another is drawn faint, a result not there yet dashed. */
.m-graph-line--owns { stroke: var(--m-line); }
.m-graph-line--pending { stroke-dasharray: 4 3; }
/* An attachment's link and a process's links (Mosaic.Protocol-0045): what a node is about is joined faintly, what a
   process aimed for dotted. */
.m-graph-line--attaches { stroke: var(--m-line); }
.m-graph-line--expected { stroke-dasharray: 1 3; stroke-linecap: round; }

/* A cell: a card at the top of its place. A step sits in from its column's left; a tone edges and tints it over its
   surface; a pending one is dashed and faded; a picked one is edged in the accent. Its pick is a button over it. */
.m-cell { position: relative; align-self: start; min-width: 0; }
.m-cell--step { margin-left: var(--m-graph-step-indent); }
/* An attachment is a quieter card, about the cell it joins. */
.m-cell--attachment > .m-card { background: var(--m-surface-hover); padding: var(--m-space-2) var(--m-space-3); gap: var(--m-space-2); }
.m-cell--attachment .m-card-title { font-size: var(--m-size-small); }
.m-cell[class*="m-tone--"] > .m-card {
    border-color: var(--m-part-tone); background: linear-gradient(var(--m-part-tone-bg), var(--m-part-tone-bg)), var(--m-surface);
}
.m-cell--pending > .m-card { border-style: dashed; }
.m-cell--pending .m-card-body { opacity: .7; }
.m-cell.m-cell--picked > .m-card { border-color: var(--m-accent); outline: 1px solid var(--m-accent); }
/* A process is edged on its leading side in the accent, toned, pending or picked alike: after those rules, and as
   specific as the tone's. A tone still tints its surface. */
.m-cell.m-cell--process > .m-card {
    border-left-width: var(--m-graph-process-edge); border-left-style: solid; border-left-color: var(--m-accent);
}
.m-cell-pick {
    position: absolute; inset: 0; padding: 0; cursor: pointer; background: none; border: 0; border-radius: var(--m-radius-md);
}
/* A hovered pick lights its card's edge; the pick itself stays clear. Added 2026-10-21. */
.m-cell:has(> .m-cell-pick:hover) > .m-card { border-color: var(--m-accent); }
/* The controls in a cell's body stay above its pick, so they can be reached. */
.m-cell :is(button, a, input, select, textarea, summary, [tabindex]):not(.m-cell-pick) { position: relative; z-index: 1; }
/* The graph's one tab stop is a cell (Mosaic.Client.Razor-0011; modified 2026-10-21): its card shows the focus ring. Its
   pick is the pointer's only, out of the tab order. A live region, unseen, says where a cell moved by the keys went. */
.m-cell:focus { outline: none; }
.m-cell:focus-visible > .m-card { outline: 2px solid var(--m-focus); outline-offset: var(--m-focus-offset); }
.m-graph-live { position: absolute; width: var(--m-unseen); height: var(--m-unseen); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.m-graph-problem { font: var(--m-size-small)/1.4 var(--m-font); color: var(--m-tone-problem); word-break: break-word; }

/* A line of secondary text under the part it describes (porthol.mosaic:caption, Mosaic.Protocol-0037): muted, and drawn
   close to the part above it rather than a whole gap away. */
.m-caption { margin: 0; font: var(--m-size-small)/1.4 var(--m-font); color: var(--m-ink-muted); word-break: break-word; }
.m-caption:not(:first-child) { margin-top: calc(var(--m-space-2) * -1); }

/* A label/value pair: the label above its value, unless its group or form places labels otherwise. It wraps rather
   than truncating. */
.m-text { display: flex; flex-direction: column; gap: calc(var(--m-space-1) / 2); min-width: 0; }
.m-text-value { font: var(--m-size-body)/1.4 var(--m-font); color: var(--m-ink); word-break: break-word; }

/* Every label a part carries looks the same: a text's, a field's, a choice's, a swatch's, a browser's, a code's.
   Sentence case, since a long label in capitals cannot be read. */
.m-text-label, .m-field-label, .m-view-choice-label, .m-swatch-label, .m-browser-label, .m-code-label {
    font: 600 var(--m-size-label)/1.35 var(--m-font); color: var(--m-ink-muted); word-break: break-word;
}

/* How a group, section or form places its parts' labels (Mosaic.Protocol-0020): above (the default), beside in one aligned
   column, or flowing on the value's line when it fits. Beside goes back to above where it is drawn too narrow for two
   columns. */
.m-labels--flow > .m-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--m-space-3); }
/* Named with its container's class, so it outranks .m-group's, .m-section's and .m-form's own display wherever they
   come. */
.m-group.m-labels--beside, .m-section.m-labels--beside, .m-form.m-labels--beside {
    container-type: inline-size;
    display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); column-gap: var(--m-space-4); align-items: baseline;
}
.m-labels--beside > * { grid-column: 1 / -1; }
.m-labels--beside > .m-text, .m-labels--beside > .m-field { display: contents; }
.m-labels--beside > .m-text > .m-text-label, .m-labels--beside > .m-field > .m-field-label { grid-column: 1; }
.m-labels--beside > .m-text > .m-text-value, .m-labels--beside > .m-field > :not(.m-field-label) { grid-column: 2; }
@container (max-width: 420px) {
    .m-labels--beside > .m-text, .m-labels--beside > .m-field { display: flex; flex-direction: column; grid-column: 1 / -1; }
}

/* The title of what a view shows (porthol.mosaic:heading, Mosaic.Protocol-0037). */
.m-heading { margin: var(--m-space-1) 0 0; font: 600 var(--m-size-title)/1.3 var(--m-font); color: var(--m-ink); word-break: break-word; }

/* Text a system named, not a person (porthol.mosaic:code): monospace, its line breaks kept, wrapping rather than
   scrolling. */
.m-code { display: flex; flex-direction: column; gap: var(--m-space-1); min-width: 0; }
.m-code-value {
    margin: 0; padding: var(--m-space-2) var(--m-space-3); white-space: pre-wrap; overflow-wrap: anywhere;
    font: var(--m-size-code)/1.5 var(--m-font-mono); color: var(--m-ink);
    background: var(--m-surface); border-radius: var(--m-radius-sm);
}

/* A link (porthol.mosaic:link, Mosaic.Protocol-0025): the label in the link colour, an outside address's host after it
   in the muted ink, and a resource link drawn as a button that looks like a link. */
.m-link-part { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--m-space-2); min-width: 0; }
.m-link {
    padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
    font: var(--m-size-body)/1.4 var(--m-font); color: var(--m-link); text-decoration: underline; text-underline-offset: var(--m-underline-offset);
    word-break: break-word;
}
.m-link:focus-visible { outline: 2px solid var(--m-focus); outline-offset: var(--m-focus-offset); }
.m-link--off { cursor: default; color: var(--m-ink-muted); text-decoration: none; }
.m-link-host, .m-link-note { font: var(--m-size-small)/1.4 var(--m-font); color: var(--m-ink-muted); }

/* An icon (porthol.mosaic:icon, Mosaic.Protocol-0026): Mosaic's own drawing in the ink, a line taller than the text it
   sits beside; an icon button is the icon in a square button, outlined like the secondary button. */
.m-icon { display: inline-block; width: calc(var(--m-size-body) * 1.5); height: calc(var(--m-size-body) * 1.5); color: var(--m-ink); vertical-align: middle; flex: none; }
.m-icon-label { font: var(--m-size-body)/1.4 var(--m-font); color: var(--m-ink); }
.m-icon-button-part { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--m-space-2); max-width: 100%; }
.m-icon-button {
    display: inline-flex; align-items: center; justify-content: center; padding: var(--m-space-2); cursor: pointer;
    color: var(--m-ink); background: none; border: 1px solid var(--m-line); border-radius: var(--m-radius-sm);
}
.m-icon-button:hover:not(:disabled) { background: var(--m-surface-hover); }
.m-icon-button:focus-visible { outline: 2px solid var(--m-focus); outline-offset: var(--m-focus-offset); }
.m-icon-button:disabled, .m-icon-button[aria-disabled="true"] { opacity: .5; cursor: default; }
.m-icon-button .m-icon { width: var(--m-size-title); height: var(--m-size-title); }

/* A section rule. Its margin is larger than the group's gap: what follows is a different thing. */
.m-divider { height: 0; margin: var(--m-space-2) 0; border-top: 1px solid var(--m-line); }

/* A picture a view sends as SVG (porthol.mosaic:svg) scales down to its pane, never past the swatch's width. A picture
   drawn in currentColor takes the ink. */
.m-svg { color: var(--m-ink); }
.m-svg svg { display: block; width: 100%; max-width: var(--m-swatch-width); height: auto; }

/* A plot (porthol.mosaic:plot, Mosaic.Protocol-0049): the lines' canvas fills the width it is given, the y axis's label
   and ticks on its left, the x axis's ticks, label and the legend under it. A line takes its series' category tone. In a
   graph's cell the plot is drawn small, with no axis text and no legend: its name still says what it shows. */
.m-plot { display: flex; flex-direction: column; gap: var(--m-space-1); min-width: 0; color: var(--m-ink); }
.m-plot-figure {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--m-space-1);
    grid-template-areas: "ylabel yticks chart" ". . xticks" ". . xlabel" ". . legend";
    font: var(--m-size-small)/1.3 var(--m-font); padding-top: calc(var(--m-plot-x-ticks-height) / 2);
}
/* The y axis's label is as tall as the canvas, so a long one wraps into another line rather than stretching the row. */
.m-plot-y-label { grid-area: ylabel; height: var(--m-plot-height); writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; color: var(--m-ink-muted); }
.m-plot-y-ticks { grid-area: yticks; position: relative; min-width: var(--m-plot-y-ticks-width); }
.m-plot-y-ticks span { position: absolute; right: 0; transform: translateY(50%); font-variant-numeric: tabular-nums; }
.m-plot-chart {
    grid-area: chart; display: block; width: 100%; height: var(--m-plot-height); overflow: visible;
    border-left: 1px solid var(--m-ink-muted); border-bottom: 1px solid var(--m-ink-muted);
}
.m-plot-x-ticks { grid-area: xticks; position: relative; height: var(--m-plot-x-ticks-height); }
.m-plot-x-ticks span { position: absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.m-plot-x-label { grid-area: xlabel; text-align: center; color: var(--m-ink-muted); }
.m-plot-legend { grid-area: legend; display: flex; flex-wrap: wrap; gap: var(--m-space-1) var(--m-space-3); margin: 0; padding: 0; list-style: none; }
.m-plot-key { display: inline-block; width: var(--m-plot-key-width); margin-right: var(--m-space-1); vertical-align: middle; border-top: var(--m-plot-line-width) solid var(--m-part-tone); }
.m-plot-nothing { color: var(--m-ink-muted); }
.m-plot-grid { stroke: var(--m-line); stroke-width: var(--m-plot-grid-width); }
.m-plot-line { fill: none; stroke: var(--m-part-tone); stroke-width: var(--m-plot-line-width); stroke-linejoin: round; stroke-linecap: round; }
.m-plot-values { font: var(--m-size-small)/1.4 var(--m-font); }
.m-plot-values table { border-collapse: collapse; margin-top: var(--m-space-1); }
.m-plot-values caption { text-align: start; font-weight: 600; }
.m-plot-values :is(th, td) { padding: 0 var(--m-space-2) 0 0; text-align: end; font-variant-numeric: tabular-nums; }
.m-cell .m-plot-figure { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chart"; }
.m-cell :is(.m-plot-y-label, .m-plot-y-ticks, .m-plot-x-ticks, .m-plot-x-label, .m-plot-legend) { display: none; }
.m-cell .m-plot-chart { height: var(--m-plot-cell-height); }

/* A token this client does not draw: a note in the warning colour, boxed so it reads as a hole in the view rather
   than as its text. */
.m-unknown {
    padding: var(--m-space-2) var(--m-space-3); font: var(--m-size-small)/1.4 var(--m-font); color: var(--m-tone-warning);
    border: 1px dashed var(--m-tone-warning); border-radius: var(--m-radius-sm);
}

/* A form: fields stacked, each label above its control, and the submit set apart from the last field so it reads as
   the end of the form rather than another row of it. */
.m-form { display: flex; flex-direction: column; gap: var(--m-space-3); min-width: 0; }
.m-field { display: flex; flex-direction: column; gap: var(--m-space-2); min-width: 0; }
.m-field-value, .m-field-resource { font: var(--m-size-body)/1.4 var(--m-font); color: var(--m-ink); }
.m-field-input, .m-view-choice-input {
    box-sizing: border-box; min-width: 0;
    padding: var(--m-space-2) var(--m-space-3); font: var(--m-size-body)/1.2 var(--m-font);
    color: var(--m-ink); background: var(--m-surface);
    border: 1px solid var(--m-line); border-radius: var(--m-radius-sm);
}
.m-field-input { width: 100%; }
.m-field-input:focus-visible, .m-view-choice-input:focus-visible { outline: none; border-color: var(--m-focus); }
.m-field-input:disabled, .m-view-choice-input:disabled { opacity: .55; cursor: default; }
.m-field-multiline { min-height: var(--m-multiline-height); line-height: 1.45; resize: vertical; }
/* A field that must have a value says so after its label; what it wants is a muted line under it; one with a problem
   (left empty, or named by a refused write: Mosaic.Protocol-0041) is edged in the problem tone, its problem under it. */
.m-field-required { margin-left: var(--m-space-2); font: 500 var(--m-size-small)/1 var(--m-font); color: var(--m-ink-muted); }
.m-field-hint { font: var(--m-size-small)/1.4 var(--m-font); color: var(--m-ink-muted); word-break: break-word; }
.m-field--invalid .m-field-input, .m-field--invalid .m-field-color { border-color: var(--m-tone-problem); }
.m-field--invalid .m-field-problem { color: var(--m-tone-problem); }
/* A number box with its unit after it; a listbox as a column of checkboxes, scrolling when it is long
   (Mosaic.Protocol-0044). */
/* A listbox is a fieldset: its own box and padding are the field's, not the browser's. */
fieldset.m-field { margin: 0; padding: 0; border: 0; min-width: 0; }
legend.m-field-label { padding: 0; margin-bottom: var(--m-space-1); }
.m-field-number { display: flex; align-items: center; gap: var(--m-space-2); min-width: 0; }
.m-field-number .m-field-input { flex: 1 1 auto; min-width: 0; }
.m-field-unit { flex: none; font: var(--m-size-body)/1.4 var(--m-font); color: var(--m-ink-muted); }
.m-field-listbox {
    display: flex; flex-direction: column; gap: var(--m-space-1); max-height: var(--m-listbox-height); overflow-y: auto;
    padding: var(--m-space-2); border: 1px solid var(--m-line); border-radius: var(--m-radius-sm);
}
.m-field-listbox-option { display: flex; align-items: center; gap: var(--m-space-2); font: var(--m-size-body)/1.4 var(--m-font); color: var(--m-ink); }
.m-field--invalid .m-field-listbox { border-color: var(--m-tone-problem); }
/* A checkbox sits before its label on one line (Mosaic.Protocol-0024); a slider shows the number it is on. */
.m-field--checkbox { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--m-space-2); }
.m-field-checkbox, .m-field-range { accent-color: var(--m-accent); margin: 0; }
.m-field-checkbox { width: var(--m-size-body); height: var(--m-size-body); }
.m-field-slider { display: flex; align-items: center; gap: var(--m-space-3); min-width: 0; }
.m-field-range { flex: 1 1 auto; min-width: 0; }
.m-field-slider-value { font: var(--m-size-body)/1.2 var(--m-font-mono); color: var(--m-ink); min-width: calc(var(--m-space-6) + var(--m-space-2)); text-align: right; }
.m-field-color {
    width: var(--m-colour-input-width); height: var(--m-colour-input-height); padding: calc(var(--m-space-1) / 2); cursor: pointer; background: none;
    border: 1px solid var(--m-line); border-radius: var(--m-radius-sm);
}

/* The form's submit, the primary button. */
.m-form-actions { display: flex; margin: var(--m-space-1) 0 calc(var(--m-space-1) / 2); }
.m-form-submit {
    padding: var(--m-space-2) var(--m-space-4); cursor: pointer;
    font: 600 var(--m-size-body)/1 var(--m-font); color: var(--m-accent-ink);
    background: var(--m-accent); border: 1px solid var(--m-accent); border-radius: var(--m-radius-sm);
}
.m-form-submit:hover:not(:disabled) { background: var(--m-accent-hover); }
.m-form-submit:disabled { opacity: .5; cursor: default; }
.m-form-msg { margin: 0; font: 500 var(--m-size-small)/1.45 var(--m-font); color: var(--m-tone-success); }
.m-form-msg--bad { color: var(--m-tone-problem); }

/* The resource field's Choose: a secondary button, outlined, sized to its words. */
.m-field-choose, .m-action {
    align-self: flex-start; padding: var(--m-space-2) var(--m-space-3); cursor: pointer;
    font: 600 var(--m-size-body)/1 var(--m-font); color: var(--m-ink); background: none;
    border: 1px solid var(--m-line); border-radius: var(--m-radius-sm);
}
.m-field-choose:hover:not(:disabled), .m-action:hover:not(:disabled) { background: var(--m-surface-hover); }
.m-field-choose:disabled, .m-action:disabled, .m-action[aria-disabled="true"] { opacity: .5; cursor: default; }
/* A labelled button outside a form (porthol.mosaic:action, Mosaic.Protocol-0036): drawn as the secondary button above,
   its failure beside it as an icon button's is. */
.m-action-part { display: inline-flex; flex-wrap: wrap; align-items: center; align-self: flex-start; gap: var(--m-space-2); max-width: 100%; }
.m-action { max-width: 100%; line-height: 1.3; text-align: left; word-break: break-word; }
.m-action:focus-visible { outline: 2px solid var(--m-focus); outline-offset: var(--m-focus-offset); }
/* Why an action cannot be taken now, beside it (Mosaic.Protocol-0043). */
.m-action-hint { font: var(--m-size-small)/1.4 var(--m-font); color: var(--m-ink-muted); word-break: break-word; }

/* An action that removes what cannot be restored (Mosaic.Protocol-0040): drawn in the problem tone, and before it is
   sent its question is asked inline, below its button: the question, then Cancel and a button outlined in the problem
   tone, its words in the tone on the surface, as a failure is written. */
.m-action.m-tone--problem, .m-icon-button.m-tone--problem, .m-menu-item.m-tone--problem { color: var(--m-part-tone); }
.m-action.m-tone--problem, .m-icon-button.m-tone--problem { border-color: var(--m-part-tone); }
.m-icon-button.m-tone--problem .m-icon { color: inherit; }
.m-confirm {
    flex-basis: 100%; display: flex; flex-direction: column; gap: var(--m-space-2); min-width: 0; padding: var(--m-space-3);
    background: var(--m-tone-problem-bg); border: 1px solid var(--m-tone-problem); border-radius: var(--m-radius-sm);
}
.m-confirm-question { margin: 0; font: var(--m-size-body)/1.4 var(--m-font); color: var(--m-ink); word-break: break-word; }
.m-confirm-actions { display: flex; flex-wrap: wrap; gap: var(--m-space-2); }
.m-confirm-cancel, .m-confirm-go {
    padding: var(--m-space-2) var(--m-space-3); cursor: pointer; font: 600 var(--m-size-body)/1.3 var(--m-font); text-align: left;
    word-break: break-word; color: var(--m-ink); background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-radius-sm);
}
.m-confirm-go { color: var(--m-part-tone); border-color: var(--m-part-tone); }
.m-confirm-cancel:focus-visible, .m-confirm-go:focus-visible { outline: 2px solid var(--m-focus); outline-offset: var(--m-focus-offset); }

/* A menu of actions (porthol.mosaic:menu, Mosaic.Protocol-0043): a secondary button that opens a list below it, over
   what follows. A disabled item stays in the list, greyed, with its hint under its label. */
.m-menu-part { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; align-self: flex-start; gap: var(--m-space-2); max-width: 100%; }
.m-menu-button {
    display: inline-flex; align-items: center; gap: var(--m-space-1); padding: var(--m-space-2) var(--m-space-3); cursor: pointer;
    font: 600 var(--m-size-body)/1 var(--m-font); color: var(--m-ink); background: none;
    border: 1px solid var(--m-line); border-radius: var(--m-radius-sm);
}
.m-menu-button:hover:not(:disabled) { background: var(--m-surface-hover); }
.m-menu-button:disabled { opacity: .5; cursor: default; }
.m-menu-button:focus-visible, .m-menu-item:focus-visible { outline: 2px solid var(--m-focus); outline-offset: var(--m-focus-offset); }
.m-menu-button .m-icon { width: var(--m-space-4); height: var(--m-space-4); }
.m-menu-list {
    position: absolute; top: 100%; left: 0; z-index: 10; display: flex; flex-direction: column; width: max-content; min-width: 100%; max-width: var(--m-menu-width);
    max-height: var(--m-menu-height); overflow-y: auto;
    margin-top: var(--m-space-1); padding: var(--m-space-1); background: var(--m-surface); border: 1px solid var(--m-line); border-radius: var(--m-radius-sm);
}
.m-menu-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--m-space-1) / 2); padding: var(--m-space-2) var(--m-space-3);
    cursor: pointer; text-align: left; font: var(--m-size-body)/1.3 var(--m-font); color: var(--m-ink);
    background: none; border: 0; border-radius: var(--m-radius-sm);
}
.m-menu-item:hover, .m-menu-item:focus-visible { background: var(--m-surface-hover); }
.m-menu-item--off { cursor: default; color: var(--m-ink-muted); }
.m-menu-item-hint { font: var(--m-size-small)/1.35 var(--m-font); color: var(--m-ink-muted); word-break: break-word; }

/* A choice a view offers (porthol.mosaic:viewChoice): its label above a select, as a field's is. */
.m-view-choice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--m-space-2); min-width: 0; }

/* A list: items stacked, each a label over an optional quieter second line, told apart by a hairline. A problem row
   (an item the client could not read) is drawn in the warning colour rather than dropped. */
.m-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.m-list-item {
    display: flex; flex-direction: column; gap: calc(var(--m-space-1) / 2); min-width: 0;
    padding: var(--m-space-2) var(--m-space-3); border-radius: var(--m-radius-sm);
}
.m-list-item + .m-list-item { border-top: 1px solid var(--m-line); border-radius: 0; }
.m-list-label { font: var(--m-size-body)/1.35 var(--m-font); color: var(--m-ink); word-break: break-word; }
.m-list-secondary { font: var(--m-size-small)/1.35 var(--m-font); color: var(--m-ink-muted); word-break: break-word; }
.m-list-empty { padding: var(--m-space-3); font: var(--m-size-body)/1.4 var(--m-font); color: var(--m-ink-muted); }

/* A list whose items can be picked: each item is a button filling its row, and the picked one is marked. Only such a
   list answers the pointer. */
.m-list-picks .m-list-item { padding: 0; }
.m-list-pick {
    display: flex; flex-direction: column; gap: calc(var(--m-space-1) / 2); width: 100%; min-width: 0; text-align: left;
    padding: var(--m-space-2) var(--m-space-3); border: 0; border-radius: var(--m-radius-sm);
    background: none; color: inherit; font: inherit; cursor: pointer;
}
.m-list-pick:hover { background: var(--m-surface-hover); }
.m-list-pick:focus-visible { outline: 2px solid var(--m-focus); outline-offset: calc(-1 * var(--m-focus-offset)); }
.m-list-item-selected .m-list-pick, .m-list-item-selected .m-list-pick:hover { background: var(--m-accent-soft); }

/* An outline (porthol.mosaic:outline, Mosaic.Protocol-0050): items stacked, each level in from the one above; an item's
   arrow points right when it is closed and down when it is open, and a leaf keeps the arrow's room so labels line up.
   The focused item's row is ringed, and the picked one is marked. */
.m-outline, .m-outline-group { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.m-outline-group { padding-left: var(--m-outline-indent); }
.m-outline-item { min-width: 0; }
.m-outline-item:focus { outline: none; }
.m-outline-item:focus-visible > .m-outline-row { outline: 2px solid var(--m-focus); outline-offset: calc(-1 * var(--m-focus-offset)); }
.m-outline-row {
    display: flex; align-items: baseline; gap: var(--m-space-1); min-width: 0;
    padding: var(--m-space-1) var(--m-space-2); border-radius: var(--m-radius-sm);
}
.m-outline-item[aria-expanded] > .m-outline-row, .m-outline--picks .m-outline-row { cursor: pointer; }
.m-outline-item[aria-expanded] > .m-outline-row:hover, .m-outline--picks .m-outline-row:hover { background: var(--m-surface-hover); }
.m-outline-item--picked > .m-outline-row, .m-outline-item--picked > .m-outline-row:hover { background: var(--m-accent-soft); }
.m-outline-twisty { flex: none; width: var(--m-outline-twisty); text-align: center; color: var(--m-ink-muted); }
.m-outline-twisty::before { content: "\25B8"; display: inline-block; }
.m-outline-item[aria-expanded="true"] > .m-outline-row > .m-outline-twisty::before { transform: rotate(90deg); }
.m-outline-twisty--leaf::before { content: ""; }
.m-outline-text { display: flex; flex-direction: column; gap: calc(var(--m-space-1) / 2); min-width: 0; }
.m-outline-label { font: var(--m-size-body)/1.35 var(--m-font); color: var(--m-ink); word-break: break-word; }
.m-outline-secondary { font: var(--m-size-small)/1.35 var(--m-font); color: var(--m-ink-muted); word-break: break-word; }
.m-outline-empty { padding: var(--m-space-3); font: var(--m-size-body)/1.4 var(--m-font); color: var(--m-ink-muted); }
.m-outline-item--problem { padding: var(--m-space-1) var(--m-space-2); }

/* A colour as a patch (porthol.mosaic:swatch): its label above, the patch, and what it stands for under it. */
.m-swatch { display: flex; flex-direction: column; gap: var(--m-space-2); min-width: 0; max-width: var(--m-swatch-width); }
.m-swatch-patch { height: var(--m-swatch-height); border-radius: 0; border: 1px solid var(--m-line); }
/* The swatch's shape (Mosaic.Protocol-0023): a rectangle, a rounded one, or a circle as tall as a rectangle is. */
.m-swatch--roundRect .m-swatch-patch { border-radius: var(--m-radius-md); }
.m-swatch--circle .m-swatch-patch { width: var(--m-swatch-height); aspect-ratio: 1; border-radius: 50%; }
.m-row-part > .m-swatch--circle .m-swatch-patch { width: var(--m-swatch-compact-height); }
.m-swatch-caption, .m-browser-note { font: var(--m-size-small)/1.4 var(--m-font); color: var(--m-ink-muted); }

/* A problem a part reports in place (an unreadable item, an unknown region, a choice that cannot be read). */
.m-icon-problem, .m-link-problem, .m-list-problem, .m-outline-problem, .m-outline-item--problem, .m-swatch-problem, .m-view-choice-problem, .m-region-problem, .m-tabs-problem, .m-browser-problem, .m-field-problem {
    font: var(--m-size-small)/1.4 var(--m-font); color: var(--m-tone-warning);
}

/* A tone a part names (Mosaic.Protocol-0027), as the pair of properties its rules read: the tone, and its ground. */
.m-tone--info { --m-part-tone: var(--m-tone-info); --m-part-tone-bg: var(--m-tone-info-bg); }
.m-tone--success { --m-part-tone: var(--m-tone-success); --m-part-tone-bg: var(--m-tone-success-bg); }
.m-tone--warning { --m-part-tone: var(--m-tone-warning); --m-part-tone-bg: var(--m-tone-warning-bg); }
.m-tone--problem { --m-part-tone: var(--m-tone-problem); --m-part-tone-bg: var(--m-tone-problem-bg); }
.m-tone--1 { --m-part-tone: var(--m-tone-1); --m-part-tone-bg: var(--m-tone-1-bg); }
.m-tone--2 { --m-part-tone: var(--m-tone-2); --m-part-tone-bg: var(--m-tone-2-bg); }
.m-tone--3 { --m-part-tone: var(--m-tone-3); --m-part-tone-bg: var(--m-tone-3-bg); }
.m-tone--4 { --m-part-tone: var(--m-tone-4); --m-part-tone-bg: var(--m-tone-4-bg); }

/* One thing the view says (porthol.mosaic:notice, Mosaic.Protocol-0035): a box on its tone's ground, edged in the tone,
   its title in the tone and its text in ink, so the words read whatever the tone. */
.m-notice {
    display: flex; flex-direction: column; gap: calc(var(--m-space-1) / 2); min-width: 0;
    padding: var(--m-space-2) var(--m-space-3); background: var(--m-part-tone-bg); border: 1px solid var(--m-part-tone);
    border-radius: var(--m-radius-sm);
}
.m-notice-title { font: 600 var(--m-size-body)/1.35 var(--m-font); color: var(--m-part-tone); word-break: break-word; }
.m-notice-text { font: var(--m-size-body)/1.4 var(--m-font); color: var(--m-ink); word-break: break-word; }

/* A short label marking a part (porthol.mosaic:badge): sized to its words, in its tone on the tone's ground, or muted
   and outlined when it has none. */
.m-badge {
    display: inline-block; align-self: flex-start; max-width: 100%; padding: 0 var(--m-space-2);
    font: 600 var(--m-size-small)/1.6 var(--m-font); color: var(--m-ink-muted); word-break: break-word;
    border: 1px solid var(--m-line); border-radius: var(--m-radius-sm);
}
.m-badge[class*="m-tone--"] {
    color: var(--m-part-tone); background: var(--m-part-tone-bg); border-color: var(--m-part-tone);
}

/* The page's resource browser drawn in a view (porthol.mosaic:browser): its label, the browser, and what a pick
   answered. */
.m-browser { display: flex; flex-direction: column; gap: var(--m-space-2); min-width: 0; }

/* A view laid out in regions (porthol.mosaic:layout, Mosaic.Protocol-0011). The layout is drawn in a frame it measures
   (Mosaic.Client.Razor-0004), so it arranges itself by the width it is given, not the window's. Stacked: the header
   spans the top, and the others share the row under it, navigation narrow on the left and the inspector on the right.
   Under 900px everything stacks. A region the client does not know spans the full width with its note. */
.m-layout-frame { container-type: inline-size; min-width: 0; }
.m-layout { display: grid; gap: var(--m-space-4) var(--m-space-6); grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.m-region { display: flex; flex-direction: column; gap: var(--m-space-3); min-width: 0; }
.m-region--header, .m-region--unknown { grid-column: 1 / -1; }
.m-region--navigation, .m-region--inspector { padding: 0 calc(var(--m-space-1) / 2); }
@container (min-width: 900px) {
    .m-layout--has-navigation.m-layout--has-main { grid-template-columns: minmax(var(--m-track-navigation-min), var(--m-track-navigation-max)) minmax(0, 1fr); }
    .m-layout--has-main.m-layout--has-inspector { grid-template-columns: minmax(0, 1fr) minmax(var(--m-track-inspector-min), var(--m-track-inspector-max)); }
    .m-layout--has-navigation.m-layout--has-main.m-layout--has-inspector {
        grid-template-columns: minmax(var(--m-track-navigation-min), var(--m-track-navigation-max)) minmax(0, 1fr) minmax(var(--m-track-inspector-min), var(--m-track-inspector-max));
    }
    .m-region--navigation { border-right: 1px solid var(--m-line); padding-right: var(--m-space-4); }
    .m-region--inspector { border-left: 1px solid var(--m-line); padding-left: var(--m-space-4); }
}

/* The sidebar base layout (Mosaic.Protocol-0011): the navigation full height on the left, the header across the rest,
   then main and the inspector under it. Under 900px of its frame it stacks like the default. Its own regions only
   (child selectors): a layout drawn inside a sidebar layout keeps its own arrangement. */
@container (min-width: 900px) {
    .m-layout--base-sidebar.m-layout--has-navigation {
        grid-template-columns: minmax(var(--m-track-sidebar-min), var(--m-track-sidebar-max)) minmax(0, 1fr);
        grid-template-areas: "navigation header" "navigation main";
        grid-template-rows: auto 1fr;
    }
    .m-layout--base-sidebar.m-layout--has-navigation.m-layout--has-inspector {
        grid-template-columns: minmax(var(--m-track-sidebar-min), var(--m-track-sidebar-max)) minmax(0, 1fr) minmax(var(--m-track-sidebar-inspector-min), var(--m-track-sidebar-inspector-max));
        grid-template-areas: "navigation header header" "navigation main inspector";
    }
    .m-layout--base-sidebar > .m-region--navigation { grid-area: navigation; }
    .m-layout--base-sidebar > .m-region--header { grid-area: header; }
    .m-layout--base-sidebar > .m-region--main { grid-area: main; }
    .m-layout--base-sidebar > .m-region--inspector { grid-area: inspector; }
}

/* Parts side by side (porthol.mosaic:row), wrapping into a column when narrow. A swatch beside other parts is a
   compact patch, so the parts beside it keep the width. */
.m-row { display: flex; flex-wrap: wrap; gap: var(--m-space-3) var(--m-space-6); align-items: flex-start; min-width: 0; }
.m-row-part { flex: 1 1 var(--m-row-part-basis); min-width: 0; }
.m-row-part:has(> .m-swatch) { flex: 0 0 auto; }
.m-row-part > .m-swatch { width: var(--m-swatch-compact-width); }
.m-row-part > .m-swatch .m-swatch-patch { height: var(--m-swatch-compact-height); }

/* Tabs (porthol.mosaic:tabs): a bar of tab buttons, the shown one underlined in the accent, then its content. A tab's
   label stays on one line; the bar scrolls. */
.m-tabs { display: flex; flex-direction: column; gap: var(--m-space-3); min-width: 0; }
.m-tabs-bar {
    display: flex; gap: var(--m-space-1); border-bottom: 1px solid var(--m-line);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.m-tab {
    flex: 0 0 auto; white-space: nowrap;
    padding: var(--m-space-2) var(--m-space-3); margin-bottom: -1px; cursor: pointer; background: none; border: 0;
    border-bottom: var(--m-tab-bar-width) solid transparent; color: var(--m-ink-muted);
    font: 500 var(--m-size-body)/1 var(--m-font);
}
.m-tab:hover:not(:disabled) { color: var(--m-ink); }
.m-tab:disabled { cursor: default; opacity: .6; }
.m-tab--on { color: var(--m-ink); border-bottom-color: var(--m-accent); }
.m-tab:focus-visible { outline: 2px solid var(--m-focus); outline-offset: calc(-1 * var(--m-focus-offset)); }
.m-tab-panel { display: flex; flex-direction: column; gap: var(--m-space-3); min-width: 0; }

/* A table (porthol.mosaic:table, Mosaic.Protocol-0046; its grid Mosaic.Client.Razor-0008): rows under a header, scrolling
   sideways in its region rather than squeezing; numbers aligned as numbers; a sortable header a quiet button with its
   direction marked; a pickable row lit on hover and when picked; a cell's swatch a chip before its text. */
.m-table-scroll { max-width: 100%; overflow-x: auto; }
.m-table { border-collapse: collapse; width: 100%; font: var(--m-size-body)/1.4 var(--m-font); color: var(--m-ink); }
.m-table-head {
    text-align: left; font-weight: 600; font-size: var(--m-size-label); color: var(--m-ink-muted);
    padding: var(--m-table-cell-pad); border-bottom: 1px solid var(--m-line); white-space: nowrap;
}
.m-table-head--number, .m-table-cell--number { text-align: right; font-variant-numeric: tabular-nums; }
.m-table-sort { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: var(--m-space-1); }
.m-table-sort:focus-visible { outline: 2px solid var(--m-focus); outline-offset: var(--m-focus-offset); }
.m-table-cell { padding: var(--m-table-cell-pad); border-bottom: 1px solid var(--m-line); vertical-align: middle; }
.m-table-cell > .m-swatch { display: inline-flex; vertical-align: middle; margin-right: var(--m-space-2); }
.m-table-cell .m-swatch-label, .m-table-cell .m-swatch-caption { display: none; }
.m-table-cell .m-swatch-patch { width: var(--m-table-swatch); height: var(--m-table-swatch); }
.m-table--picks .m-table-row { cursor: pointer; }
.m-table--picks .m-table-row:hover { background: var(--m-surface-hover); }
/* The grid's tab stop is a cell, or a header cell (Mosaic.Protocol-0046, -0047). */
.m-table-cell:focus-visible, .m-table-head:focus-visible { outline: 2px solid var(--m-focus); outline-offset: calc(-1 * var(--m-focus-offset)); }
.m-table-cell--editable { cursor: text; }
.m-table-editor {
    box-sizing: border-box; width: 100%; min-width: 0;
    padding: var(--m-space-1) var(--m-space-2); font: inherit; color: var(--m-ink); background: var(--m-surface);
    border: 1px solid var(--m-focus); border-radius: var(--m-radius-sm); text-align: inherit;
}
.m-table-editor:focus-visible { outline: none; }
.m-table-cell--invalid .m-table-editor { border-color: var(--m-tone-problem); }
.m-table-cell-problem { display: block; margin-top: var(--m-space-1); font: var(--m-size-small)/1.4 var(--m-font); color: var(--m-tone-problem); white-space: normal; }
.m-table-row--picked { background: var(--m-accent-soft); }
.m-table-empty { padding: var(--m-table-cell-pad); color: var(--m-ink-muted); }
/* What a list or table shows of a longer collection, and "Show more" (Mosaic.Protocol-0048). */
.m-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-space-2) var(--m-space-3); margin-top: var(--m-space-2); }
.m-more-caption { font: var(--m-size-small)/1.4 var(--m-font); color: var(--m-ink-muted); }
.m-more-button {
    font: var(--m-size-body)/1.2 var(--m-font); color: var(--m-ink); background: var(--m-surface);
    border: 1px solid var(--m-line); border-radius: var(--m-radius-sm); padding: var(--m-space-1) var(--m-space-3); cursor: pointer;
}
.m-more-button:hover:not(:disabled) { background: var(--m-surface-hover); }
.m-more-button:focus-visible { outline: 2px solid var(--m-focus); outline-offset: var(--m-focus-offset); }
.m-more-button:disabled { opacity: .55; cursor: default; }
.m-more-problem { font: var(--m-size-small)/1.4 var(--m-font); color: var(--m-tone-problem); }
.m-table-problem { font: var(--m-size-small)/1.4 var(--m-font); color: var(--m-tone-problem); }