/*
  The design system of the BEEES Mobile App (MOB-UIC-006, MOB-UIC-007).
  One set of tokens for colors, type, spacing, radius and sizes, with a light and a dark theme, taken from the BEEES logo:
  a light gold (#f2c94c, lighter #f7da7c, deeper #d9ad3c), navy (#0a1628) and a light teal of its circuits (#5eead4); the gold and the teal
  are lighter than in the logo (owner, 2026-10-10). Texts on the light theme use darker inks of both, so that they stay readable.
  The hexagon of the logo stands for a node.
  Rules: one content column (at most 720 pixels) holds the header, the navigation, the page and every row of buttons, so they share one left and
  one right edge; every button is 48 pixels high with the same type; a row of buttons (.actions) fills the column with buttons of the same width;
  every field is 48 pixels high; texts use the type scale only; colors come from the tokens only.
  A host links this file as _content/Beees.Mob.Ui/css/beees.css.
*/
:root {
    /* Brand colors (fixed). */
    --brand-gold: #f2c94c;
    --brand-gold-light: #f7da7c;
    --brand-gold-deep: #d9ad3c;
    --brand-navy: #0a1628;
    --brand-teal: #5eead4;
    /* The colors of the state of an asset in the waiting animation of the app mark (owner, 2026-10-10). */
    --tone-teal: #1fc7b6;
    --tone-orange: #ff9a3c;

    /* Light theme. */
    --bg: #f6f3ea;
    --surface: #ffffff;
    --surface-2: #efe9da;
    --text: #0a1628;
    --muted: #4b5a70;
    --line: #d9d1bd;
    --accent: var(--brand-gold);
    --accent-ink: #8a6516;
    --on-accent: var(--brand-navy);
    --live: #0e8a7c;
    --ok: #0e8a7c;
    --warning: #9a5b00;
    --alarm: #b3261e;
    --focus: #7a5a12;
    --shadow: 0 1px 2px rgb(10 22 40 / 0.08), 0 4px 12px rgb(10 22 40 / 0.06);

    /* Type. */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --size-xs: 12px;
    --size-small: 14px;
    --size-body: 16px;
    --size-lead: 18px;
    --size-title: 24px;
    --size-value: 28px;
    --weight-body: 400;
    --weight-strong: 600;
    --weight-title: 700;
    --line-height: 1.5;

    /* Spacing, radius and sizes. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --radius: 12px;
    --radius-small: 8px;
    --touch: 48px;
    --button-min: 160px;
    --nav-height: 60px;
    --column: 720px;
    /* The side space that puts content on the edges of the column: the gutter of 16 pixels on a phone, more on a wide screen. */
    --gutter: max(var(--space-3), calc((100% - var(--column)) / 2 + var(--space-3)));
}

/* The dark theme: with the theme of the system (the choice "auto" of the list in the header) and when the user chose it. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: var(--brand-navy);
        --surface: #10223b;
        --surface-2: #17304f;
        --text: #f3ecda;
        --muted: #a8b4c8;
        --line: #26405f;
        --accent-ink: #f7da7c;
        --live: var(--brand-teal);
        --ok: var(--brand-teal);
        --warning: #f4b350;
        --alarm: #ff8a80;
        --focus: var(--brand-gold);
        --shadow: none;
    }
}

:root[data-theme="dark"] {
    --bg: var(--brand-navy);
    --surface: #10223b;
    --surface-2: #17304f;
    --text: #f3ecda;
    --muted: #a8b4c8;
    --line: #26405f;
    --accent-ink: #f7da7c;
    --live: var(--brand-teal);
    --ok: var(--brand-teal);
    --warning: #f4b350;
    --alarm: #ff8a80;
    --focus: var(--brand-gold);
    --shadow: none;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: var(--weight-body) var(--size-body) / var(--line-height) var(--font);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1 { font-size: var(--size-title); font-weight: var(--weight-title); line-height: 1.25; margin: 0 0 var(--space-3); }

h2 { font-size: var(--size-lead); font-weight: var(--weight-strong); margin: var(--space-4) 0 var(--space-2); }

p { margin: 0 0 var(--space-3); }

/* Layout: header with the logo, navigation, page. */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.app-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 60px;
    padding: var(--space-1) var(--gutter);
    background: var(--brand-navy);
    color: #f3ecda;
}

/* The app mark: the bee in a hexagon with three small hexagons, in the same light gold as the title and the demonstration mark.
   While the app waits, the small cells roll around the big hexagon like wheels (the animation of the component AppMark). */
.app-logo { width: 56px; height: 56px; flex: none; overflow: visible; }
.app-mark-large { overflow: visible; display: block; width: 120px; height: 120px; margin: var(--space-4) auto var(--space-2); }
.app-mark-inline { width: 44px; height: 44px; flex: none; overflow: visible; }
.app-mark.waiting .mark-still { display: none; }
/* While it waits, the hexagons take the color of the state of the asset: teal when it works, orange with a warning or an alarm, gold when it needs configuration. */
.app-mark.waiting.tone-teal .mark-frame, .app-mark.waiting.tone-teal .mark-cells path { stroke: var(--tone-teal); }
.app-mark.waiting.tone-orange .mark-frame, .app-mark.waiting.tone-orange .mark-cells path { stroke: var(--tone-orange); }
/* The link to the page above, at the top of a page below the navigation, on the left edge of the column. */
.back-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; margin: calc(-1 * var(--space-2)) 0 var(--space-1); color: var(--accent-ink); font-size: var(--size-small); font-weight: var(--weight-strong); text-decoration: none; }
.back-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-left: -4px; }
.back-link:hover { color: var(--accent); }

.node-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.node-title h1 { margin: 0; }

/* Now and then the bee blinks, flutters its wings or moves an antenna on its own; short and rare, so that it does not distract. */
.app-mark .bee-wing, .app-mark .bee-antenna, .app-mark .bee-eyes { transform-box: fill-box; }
.app-mark .bee-eyes { transform-origin: 50% 50%; animation: bee-blink 5s ease-in-out 1s infinite; }
.app-mark .bee-wing-left { transform-origin: 90% 80%; animation: bee-wing-left 9s ease-in-out 3s infinite; }
.app-mark .bee-wing-right { transform-origin: 10% 80%; animation: bee-wing-right 9s ease-in-out 3s infinite; }
.app-mark .bee-antenna-right { transform-origin: 0% 100%; animation: bee-antenna 7s ease-in-out 5s infinite; }
@keyframes bee-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}
@keyframes bee-wing-left {
    0%, 88%, 100% { transform: rotate(0deg); }
    90%, 94% { transform: rotate(-16deg); }
    92%, 96% { transform: rotate(0deg); }
}
@keyframes bee-wing-right {
    0%, 88%, 100% { transform: rotate(0deg); }
    90%, 94% { transform: rotate(16deg); }
    92%, 96% { transform: rotate(0deg); }
}
@keyframes bee-antenna {
    0%, 90%, 100% { transform: rotate(0deg); }
    93% { transform: rotate(14deg); }
    96% { transform: rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .app-mark.waiting .mark-still { display: inline; }
    .app-mark.waiting .mark-rolling { display: none; }
    .app-mark .bee-eyes, .app-mark .bee-wing, .app-mark .bee-antenna { animation: none; }
}

/* The controls of the shell on the right of the header: the theme and the language as drop-down lists. */
.app-controls { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

.app-header .select {
    height: 36px;
    max-width: 150px;
    padding: 0 var(--space-2);
    border: 1px solid rgb(247 218 124 / 0.45);
    border-radius: var(--radius-small);
    background: rgb(247 218 124 / 0.08);
    color: var(--brand-gold-light);
    font: inherit;
    font-size: var(--size-small);
}

.app-header .select option { background: #ffffff; color: var(--brand-navy); }

.app-title { font-size: var(--size-lead); font-weight: var(--weight-title); line-height: 56px; letter-spacing: 0.14em; color: var(--brand-gold-light); }

/* The mark of the demonstration is quiet: centered on the logo, light gold on a faint fill. */
.app-header .demo-mark {
    align-self: center;
    line-height: 20px;
    border-color: rgb(247 218 124 / 0.45);
    background: rgb(247 218 124 / 0.08);
    color: var(--brand-gold-light);
    font-weight: var(--weight-body);
}

/* The navigation: five tabs at the bottom on a phone (one line each), a row under the header on a wide screen. */
.app-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--nav-height);
    color: var(--muted);
    text-decoration: none;
    font-size: var(--size-xs);
    font-weight: var(--weight-strong);
    white-space: nowrap;
}

.nav-item svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

.nav-item.active { color: var(--accent-ink); }

.nav-item.active svg { stroke: var(--accent); }

.nav-badge {
    position: absolute;
    top: 6px;
    left: calc(50% + 6px);
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--alarm);
    color: #ffffff;
    font-size: 11px;
    font-weight: var(--weight-title);
    line-height: 18px;
    text-align: center;
}

.app-main {
    flex: 1;
    width: 100%;
    max-width: var(--column);
    margin: 0 auto;
    padding: var(--space-4) var(--space-3) calc(var(--nav-height) + var(--space-4) + env(safe-area-inset-bottom));
}

@media (min-width: 720px) {
    .app-nav {
        position: sticky;
        top: 0;
        border-top: none;
        border-bottom: 1px solid var(--line);
        padding: 0 var(--gutter);
    }

    .nav-item { flex-direction: row; gap: var(--space-2); min-height: var(--touch); padding: 0 var(--space-1); font-size: var(--size-small); }

    .nav-item.active { box-shadow: inset 0 -3px 0 var(--accent); }

    .nav-badge { position: static; }

    .app-main { padding-bottom: var(--space-4); }
}

/* Buttons: one height, one type; a row of buttons (.actions) fills the column, and its buttons share one width, like the tabs of the navigation. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--touch);
    min-width: var(--button-min);
    padding: 0 var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: var(--weight-strong) var(--size-body) / 1 var(--font);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.button:hover { border-color: var(--accent); }

.button-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.button-primary:hover { background: var(--brand-gold-light); border-color: var(--brand-gold-light); color: var(--on-accent); }

.button-warning { background: transparent; border-color: var(--warning); color: var(--warning); }

/* A button that cannot be used now is quiet and flat: no faded gold, the same look for every kind of button. */
.button:disabled, .button-primary:disabled, .button-warning:disabled { background: var(--surface-2); border-color: var(--line); color: var(--muted); opacity: 1; cursor: default; }

.actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--button-min), 1fr));
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.actions .button { width: 100%; min-width: 0; }

/* Buttons whose texts do not fit side by side stand one under the other. */
.actions.stacked { grid-template-columns: 1fr; }

/* A square button with a symbol only (the place of an asset on the map). */
.button.icon-button { min-width: var(--touch); width: var(--touch); padding: 0; font-size: var(--size-lead); }

/* Tabs of a choice (the sites). */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }

.tab {
    height: 40px;
    padding: 0 var(--space-3);
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: var(--weight-strong) var(--size-small) / 1 var(--font);
    cursor: pointer;
}

.tab.selected { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Fields. */
.input {
    width: 100%;
    height: var(--touch);
    padding: 0 var(--space-3);
    border-radius: var(--radius-small);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: var(--weight-body) var(--size-body) / 1 var(--font);
}

textarea.input { height: auto; min-height: 96px; padding: var(--space-2) var(--space-3); line-height: var(--line-height); }

.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(242 201 76 / 0.35); }

.field { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0; }

.field > span { color: var(--muted); font-size: var(--size-small); font-weight: var(--weight-strong); }

.check { display: flex; gap: var(--space-2); align-items: center; min-height: var(--touch); }

.check input { width: 20px; height: 20px; accent-color: var(--accent); }

.inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; }

.inline-form .input { flex: 1 1 200px; width: auto; }

/* Cards and lists. */
.list { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* The tab Nodes: the card of the connection and the tree of the bound nodes, indented by their place in the chain (D50, D53). */
h3 { font-size: var(--size-body); font-weight: var(--weight-strong); margin: var(--space-3) 0 var(--space-2); }

.card.connection-card { border-color: var(--live); margin-bottom: var(--space-3); }

.card.connection-card .problem { margin: var(--space-2) 0 0; }

.node-group + .node-group { margin-top: var(--space-3); }

.node-tree { display: grid; gap: var(--space-2); }

.tree-row { width: auto; }

.tree-row.depth-1 { margin-left: var(--space-4); }

.tree-row.depth-2 { margin-left: calc(2 * var(--space-4)); }

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-height: var(--touch);
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    font: inherit;
    text-align: left;
}

button.card { cursor: pointer; }

button.card:hover { border-color: var(--accent); }

fieldset.card { margin: var(--space-3) 0; }

legend { font-weight: var(--weight-strong); padding: 0 var(--space-1); }

.card-head { display: flex; align-items: center; gap: var(--space-2); }

.card .actions { margin-bottom: 0; }

.node-name, .channel-name { font-weight: var(--weight-strong); overflow-wrap: anywhere; }

.node-meta, .channel-meta { color: var(--muted); font-size: var(--size-small); }

.channel-details { color: var(--text); font-size: var(--size-small); }

.move-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.sensor-type { display: grid; gap: var(--space-1); margin-top: var(--space-3); }

.sensor-type-name { font-weight: var(--weight-strong); }

.channel-value { font-size: var(--size-value); font-weight: var(--weight-title); line-height: 1.2; }

.channel-tile.stale .channel-value { color: var(--muted); }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: var(--space-3) 0; }

.facts dt { color: var(--muted); }

.facts dd { margin: 0; }

/* The hexagon of a node (the hexagons of the logo stand for the nodes). */
.hex { width: 22px; height: 22px; flex: none; }

.hex path { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linejoin: round; }

.hex circle { fill: var(--muted); }

.hex.hex-live path, .hex.hex-bound path { stroke: var(--live); }

.hex.hex-live circle, .hex.hex-bound circle { fill: var(--live); }

.hex.hex-offline path { stroke: var(--alarm); }

.hex.hex-offline circle { fill: var(--alarm); }

.hex.hex-known path { stroke: var(--accent); }

.hex.hex-known circle { fill: var(--accent); }

/* Marks and states. */
.mark {
    align-self: flex-start;
    padding: 1px var(--space-2);
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: var(--size-xs);
    font-weight: var(--weight-strong);
}

.mark-bound { border-color: var(--ok); color: var(--ok); }

.mark-warning { border-color: var(--warning); color: var(--warning); }

.badge { font-size: var(--size-small); font-weight: var(--weight-strong); color: var(--muted); }

.state-active { color: var(--live); }

.state-failed { color: var(--alarm); }

.done { color: var(--ok); font-weight: var(--weight-strong); }

.empty { color: var(--muted); }

.warning, p.warning { color: var(--warning); }

.problem {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border-radius: var(--radius-small);
    border-left: 4px solid var(--alarm);
    background: var(--surface-2);
}

.problem p { margin: 0; }

.problem-cause { font-weight: var(--weight-strong); }

.problem-remedy { color: var(--muted); margin-top: var(--space-1); }

.steps { padding-left: var(--space-4); }

.steps li { margin-bottom: var(--space-2); }

/* Map. The board holds the grid (rows of fixed heights, columns of equal widths) and over it, under the icons, the SVG with the lines of the kept
   chains, which MapPage draws from the centers of the icons (the same sizes as the constants of MapPage); the cells let a tap through to a line. */
.map-scroll { overflow-x: auto; margin: var(--space-3) 0; }

.map-board { position: relative; }

.map-grid { position: relative; z-index: 1; display: grid; gap: 0; pointer-events: none; }

.map-cell { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-1); padding: var(--space-2); border: 1px dashed var(--line); border-radius: var(--radius); }

.map-cell button, .map-cell select, .map-cell input { pointer-events: auto; }

.map-stack { display: flex; flex-direction: column; gap: var(--space-2); }

/* Every place has the same geometry: the icon, then the buttons at the right edge, so that a line from the center of an icon to the center of its
   next hop is not covered by a button; a free place keeps the room of an icon. */
.map-cell.free::before { content: ""; flex: none; height: 76px; }

.map-cell-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* The switch between the view mode and the edit mode of the map sits next to the tabs of the sites; the view mode draws no editing button (owner, 2026-10-14). */
.map-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.map-toolbar .tabs { margin-bottom: var(--space-3); }
.map-toolbar .map-mode { margin-bottom: var(--space-3); white-space: nowrap; }

/* Every asset icon has the same size whatever its state: one line for the name and one for the value and the state, cut with an ellipsis
   (the full text is the title of the icon and the panel of the asset); the marks of a role and of an open lid sit on the top edge (owner, 2026-10-11). */
.asset-icon { position: relative; height: 76px; justify-content: center; padding-top: var(--space-2); padding-bottom: var(--space-2); }

.asset-icon .card-head { min-width: 0; }

.asset-icon .card-head .hex { flex: none; }

.asset-icon .node-name, .asset-icon .node-meta { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.asset-icon .mark-lid { position: absolute; top: -10px; right: var(--space-2); background: var(--surface); }

.asset-icon .mark-role { position: absolute; top: -10px; left: var(--space-2); background: var(--surface); }

.asset-icon.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

.asset-icon.kind-hub { border-color: var(--live); }

.asset-icon.kind-relay { border-style: dashed; border-color: var(--live); }

/* A hub sends out rings, a relay shows the chevrons of a forward. */
.hex .hub-wave { fill: none; stroke: var(--muted); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: hub-wave 2.8s ease-out infinite; }

.hex.hex-live .hub-wave { stroke: var(--live); }

.hex.hex-offline .hub-wave { stroke: var(--alarm); }

.hex.hex-known .hub-wave { stroke: var(--accent); }

.hex .relay-chevrons { stroke-width: 1.8; stroke-linecap: round; }

@keyframes hub-wave {
    0% { transform: scale(0.5); opacity: 0.9; }
    80%, 100% { transform: scale(1.9); opacity: 0; }
}

/* "Show on the map": the icon pulses three times and keeps a gold frame. */
.asset-icon.highlight { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); animation: map-highlight 1.4s ease-in-out 3; }

@keyframes map-highlight {
    0%, 100% { box-shadow: 0 0 0 3px var(--accent); }
    50% { box-shadow: 0 0 0 9px transparent; }
}

.map-cell .icon-button .hex { width: 26px; height: 26px; }

.hex .hex-plus { stroke: var(--live); stroke-width: 2; stroke-linecap: round; }

/* The lines: the tone gives the color, "silent" is gray and dashed, and the small dots of a heard node flow toward the hub (the direction of
   the line). The wide transparent line is the target of a tap. */
.map-links { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.map-link { color: var(--muted); cursor: pointer; pointer-events: stroke; outline: none; }

.map-link-hit { stroke: transparent; stroke-width: 20; }

.map-link-line { stroke: currentColor; stroke-width: 3; stroke-linecap: round; }

.map-link-arrow { stroke: none; }

.map-arrow { fill: var(--muted); }

.map-link-flow { stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0.1 17.9; animation: map-flow 1.8s linear infinite; pointer-events: none; }

.map-link.tone-good { color: var(--live); }

.map-link.tone-weak { color: var(--warning); }

.map-link.tone-limit { color: var(--alarm); }

.map-link.tone-heard { color: var(--accent-ink); }

.map-link.silent .map-link-line { stroke: var(--muted); stroke-dasharray: 7 7; stroke-width: 2; opacity: 0.8; }

.map-arrow.tone-good { fill: var(--live); }

.map-arrow.tone-weak { fill: var(--warning); }

.map-arrow.tone-limit { fill: var(--alarm); }

.map-arrow.tone-heard { fill: var(--accent-ink); }

.map-arrow.tone-silent { fill: var(--muted); }

.map-link:hover .map-link-line, .map-link:focus-visible .map-link-line, .map-link.selected .map-link-line { stroke-width: 5; }

.map-link.silent:hover .map-link-line, .map-link.silent:focus-visible .map-link-line, .map-link.silent.selected .map-link-line { stroke-width: 4; }

@keyframes map-flow {
    to { stroke-dashoffset: -18; }
}

.map-legend, .chain-label, .place-hint { margin: var(--space-2) 0; }

.link-panel h2, .asset-panel h2 { margin: 0 0 var(--space-2); }

/* A phone that asks for reduced motion gets still dots, still rings and no pulse. */
@media (prefers-reduced-motion: reduce) {
    .map-link-flow, .hex .hub-wave, .asset-icon.highlight { animation: none; }
    .hex .hub-wave { opacity: 0.6; transform: scale(1.2); }
}

/* A toast: the short confirmation of a completed action over the navigation, gone by itself after the duration of Beees.Bcp; problems stay
   on their page (owner, 2026-10-11). */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + var(--space-3));
    z-index: 20;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 2 * var(--space-4));
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--ok);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    box-shadow: var(--shadow);
    font-size: var(--size-small);
    animation: toast-in 0.2s ease-out;
}

@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* The link to the demonstration keeps a distance from the card or the problem above it. */
.try-demo-line { margin-top: var(--space-3); }

/* Alerts and events. */
.alert-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }

.alert.level-alarm { border-left: 4px solid var(--alarm); }

.alert.level-warning { border-left: 4px solid var(--warning); }

.alert.state-cleared { opacity: 0.7; }

.alert-text { overflow-wrap: anywhere; }

.counters { padding-left: var(--space-4); }

/* Limits. */
.limits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }

/* The card of an output channel (the speed setting of a fan): the switch and the slider on one row, the speed of the device below (MOB-MON-014 to MOB-MON-016). */
.output-tile { display: grid; gap: var(--space-2); }

.output-tile.pending .output-value { color: var(--muted); }

.output-controls { display: flex; align-items: center; gap: var(--space-3); }

.output-switch-label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; flex: none; }

.output-switch { width: 22px; height: 22px; accent-color: var(--accent); }

.output-slider { flex: 1; min-width: 0; min-height: 48px; accent-color: var(--accent); }

.output-speed { display: grid; gap: var(--space-1); }

.output-speed .speed-value.stale { color: var(--muted); }

/* The unit label of a node (the sticker of its board) next to its name, when the option is on (MOB-ACC-014). */
.unit-label { display: inline-block; margin-left: var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--accent); border-radius: 999px; font-size: var(--size-small); font-weight: var(--weight-strong); color: var(--accent); white-space: nowrap; vertical-align: middle; }

.unit-label-field { display: grid; gap: var(--space-1); margin-top: var(--space-3); }