/* ==========================================================================
   Мониторинг

   Отдельный файл, а не хвост app.css: раздел появился позже остальных и
   живёт своей жизнью. Стили пользуются общими переменными портала —
   мониторинг не должен выглядеть чужим корпоративным дашбордом внутри
   семейного сайта.
   ========================================================================== */

/* --- состояние узла ------------------------------------------------------ */

.mon-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 570;
    white-space: nowrap;
}

.mon-status.is-ok      { background: #e0f7f1; color: #12805f; }
.mon-status.is-warn    { background: #fff3e0; color: #9a6209; }
.mon-status.is-error   { background: var(--danger-soft); color: #b53049; }
.mon-status.is-offline { background: #eceef6; color: #4b5163; }
.mon-status.is-muted   { background: var(--surface-tertiary); color: var(--text-soft); }

/* Состояние возможности. Отдельный вид от состояния узла: «нет прав» —
   не тревога и не отказ, это факт об окружении. */
.mon-cap {
    display: inline-block;
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 550;
    white-space: nowrap;
}

.mon-cap.is-ok    { background: #e0f7f1; color: #12805f; }
.mon-cap.is-warn  { background: #fff3e0; color: #9a6209; }
.mon-cap.is-error { background: var(--danger-soft); color: #b53049; }
.mon-cap.is-muted { background: var(--surface-tertiary); color: var(--text-soft); }

/* --- карточки узлов ------------------------------------------------------ */

.mon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.mon-node {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease;
}

.mon-node:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.mon-node-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mon-node-name { font-weight: 620; font-size: 16px; }
.mon-node-sub  { font-size: 12.5px; color: var(--text-soft); margin-top: 2px; }

.mon-node-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

/* Устаревшая телеметрия помечается явно: показывать старые числа как
   текущие — худший вид вранья в мониторинге. */
.mon-stale { color: var(--warn); font-weight: 550; }

/* --- плитки метрик ------------------------------------------------------- */

.mon-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.mon-tile {
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mon-tile-title { font-size: 12px; color: var(--text-soft); }
.mon-tile-value { font-size: 20px; font-weight: 640; letter-spacing: -.01em; }
.mon-tile-hint  { font-size: 11.5px; color: var(--text-soft); }

.mon-meter {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-tertiary);
    overflow: hidden;
}

.mon-meter-fill { display: block; height: 100%; border-radius: 999px; }
.mon-meter-fill.is-ok    { background: var(--ok); }
.mon-meter-fill.is-warn  { background: var(--warn); }
.mon-meter-fill.is-error { background: var(--danger); }

/* --- разделы страницы узла ----------------------------------------------- */

.mon-section { margin-top: 16px; }
.mon-section h2 { font-size: 16px; margin-bottom: 12px; }

.mon-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.mon-section-head h2 { margin-bottom: 0; }

.mon-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px 18px;
}

.mon-facts dt { font-size: 12px; color: var(--text-soft); }
.mon-facts dd { font-size: 14px; font-weight: 550; margin-top: 2px; }

.mon-inline-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 14px;
}

.mon-inline-facts > div { display: flex; align-items: center; gap: 8px; }
.mon-inline-facts span  { font-size: 12.5px; color: var(--text-soft); }

.mon-psi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.mon-note { font-size: 12.5px; color: var(--text-soft); margin-top: 12px; }
.mon-note.is-warn { color: var(--warn); }
.mon-dim { color: var(--text-soft); font-weight: 400; }

/* --- таблицы ------------------------------------------------------------- */

/* Таблицы прокручиваются внутри себя: на телефоне страница не должна
   ехать вбок из-за одной широкой строки. */
.mon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.mon-table + .mon-table { margin-top: 18px; }

.mon-table th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-soft);
    font-weight: 600;
    padding: 0 14px 8px 0;
    border-bottom: 1px solid var(--border);
}

.mon-table td {
    padding: 9px 14px 9px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.mon-table tr:last-child td { border-bottom: none; }
.mon-table tr.is-failed td { background: var(--danger-soft); }
.mon-table td .mon-meter { margin-top: 5px; min-width: 90px; }

.mon-service {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 550;
}

.mon-service.is-ok    { color: #12805f; }
.mon-service.is-warn  { color: #9a6209; }
.mon-service.is-error { color: #b53049; }

/* --- тревоги ------------------------------------------------------------- */

.mon-alerts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.mon-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.mon-alert.is-warn  { border-color: #f2d9a8; background: #fffaf0; }
.mon-alert.is-error { border-color: #f3c2cb; background: var(--danger-soft); }

.mon-alert-mark    { font-size: 17px; line-height: 1.2; }
.mon-alert-summary { font-weight: 570; font-size: 14px; }
.mon-alert-meta    { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* --- узкие экраны -------------------------------------------------------- */

@media (max-width: 640px) {
    .mon-grid { grid-template-columns: 1fr; }
    .mon-tiles { grid-template-columns: repeat(2, 1fr); }
    .mon-node-foot { flex-direction: column; gap: 4px; }
    .mon-facts { grid-template-columns: 1fr 1fr; }
    .mon-tile-value { font-size: 18px; }
}

/* --- состояние сборщика --------------------------------------------------
   Отдельный блок над карточками узлов. Молчащий сборщик и недоступный
   сервер выглядят в данных одинаково, поэтому у них разные места на
   экране и разные слова. */

.mon-collector {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: 13.5px;
}

.mon-collector.is-warn { border-color: #f2d9a8; background: #fffaf0; }
.mon-collector-mark { font-size: 16px; line-height: 1.3; }
.mon-collector-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }

/* --- подразделы «Железа» -------------------------------------------------
   Причина недоступности показывается ровно один раз — рядом с тем, что
   она объясняет. Сводная таблица возможностей на неё только ссылается. */

.mon-subsection-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 10px;
}

.mon-subsection-head:first-of-type { margin-top: 4px; }
.mon-subsection-head h3 { font-size: 14px; font-weight: 620; }

.mon-subsection-reason {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: -4px 0 10px;
}

/* ==========================================================================
   Фаза 5D: горизонтальные строки устройств и мини-графики

   Цвет здесь работает, а не украшает: зелёный — норма, оранжевый —
   температура и предупреждение, красный — критично, серый — данных нет.
   Критичное устройство подсвечивается тонкой рамкой слева, а не заливкой:
   заливка на всю строку мешает читать сами цифры.
   ========================================================================== */

/* --- сводка сверху -------------------------------------------------------- */

.mon-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.mon-summary-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 12px 16px;
    box-shadow: var(--shadow-sm);
}

.mon-summary-card.is-ok    { border-left-color: var(--ok); }
.mon-summary-card.is-warn  { border-left-color: var(--warn); }
.mon-summary-card.is-error { border-left-color: var(--danger); }

.mon-summary-value { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.mon-summary-value-small { font-size: 16px; font-weight: 600; padding-top: 7px; }
.mon-summary-title { font-size: 12px; color: var(--text-soft); margin-top: 2px; }

/* --- тревоги одной строкой ------------------------------------------------ */

.mon-alert-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.mon-alert-bar.is-warn  { border-color: #f2d9a8; background: #fffaf0; }
.mon-alert-bar.is-error { border-color: #f3c2cb; background: var(--danger-soft); }

.mon-alert-bar-body { flex: 1; min-width: 0; font-size: 13.5px; }

.mon-alert-bar-top {
    display: block;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mon-alert-toggle > summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 570;
    color: var(--accent);
    white-space: nowrap;
    list-style: none;
}

.mon-alert-toggle > summary::-webkit-details-marker { display: none; }
.mon-alert-toggle[open] > summary { margin-bottom: 10px; }

.mon-alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

/* Раскрытый список выходит на всю ширину строки, а не жмётся вправо. */
.mon-alert-bar:has(.mon-alert-toggle[open]) { flex-wrap: wrap; }
.mon-alert-bar .mon-alert-toggle[open] { flex-basis: 100%; }

/* --- строка устройства ---------------------------------------------------- */

.mon-devices { display: flex; flex-direction: column; gap: 12px; }

.mon-device {
    display: grid;
    grid-template-columns: minmax(190px, 240px) 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .16s ease;
}

.mon-device:hover { box-shadow: var(--shadow); }

.mon-device.is-online   { border-left-color: var(--ok); }
.mon-device.is-warning  { border-left-color: var(--warn); }
.mon-device.is-critical { border-left-color: var(--danger); background: #fffcfc; }
.mon-device.is-offline  { border-left-color: var(--text-soft); }
.mon-device.is-unknown  { border-left-color: var(--border-strong); }

.mon-device-identity { min-width: 0; }

.mon-device-name {
    display: block;
    font-size: 16px;
    font-weight: 640;
    color: var(--text);
    text-decoration: none;
}

.mon-device-name:hover { color: var(--accent); }

.mon-device-sub {
    font-size: 12.5px;
    color: var(--text-soft);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mon-device-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.mon-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-tertiary);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 550;
    white-space: nowrap;
}

.mon-chip.is-warn  { background: #fff3e0; color: #9a6209; }
.mon-chip.is-error { background: var(--danger-soft); color: #b53049; }

/* --- показатели внутри строки --------------------------------------------- */

.mon-device-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(84px, .8fr)) repeat(2, minmax(200px, 1.3fr));
    gap: 16px;
    align-items: start;
    min-width: 0;
}

.mon-metric { min-width: 0; }

.mon-metric-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.mon-metric-title { font-size: 11.5px; color: var(--text-soft); white-space: nowrap; }

.mon-metric-note {
    font-size: 11px;
    color: var(--text-soft);
    opacity: .8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mon-metric-value {
    font-size: 19px;
    font-weight: 640;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.mon-metric.is-compact .mon-metric-value { font-size: 17px; }

.mon-metric-value.is-ok    { color: var(--text); }
.mon-metric-value.is-info  { color: var(--sky); }
.mon-metric-value.is-heat  { color: #b8600a; }
.mon-metric-value.is-warn  { color: #9a6209; }
.mon-metric-value.is-error { color: #b53049; }
.mon-metric-value.is-muted { color: var(--text-soft); }

.mon-metric-empty { color: var(--text-soft); font-weight: 500; }

.mon-metric-chart { margin-top: 4px; min-height: 22px; }

.mon-metric-nohistory {
    display: inline-block;
    font-size: 11px;
    color: var(--text-soft);
    padding-top: 4px;
}

/* Сгруппированные показатели: температуры и накопители.
   Заголовок один, внутри — две независимые величины. */
.mon-metric-group { min-width: 0; }

.mon-metric-group-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-soft);
    font-weight: 600;
    margin-bottom: 6px;
}

.mon-metric-group-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-width: 0;
}

.mon-metric-smart { display: flex; align-items: center; }

.mon-device-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius);
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 570;
    text-decoration: none;
    white-space: nowrap;
}

.mon-device-more:hover {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent);
}

/* --- сводка SMART --------------------------------------------------------- */

.mon-smart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 550;
    white-space: nowrap;
}

.mon-smart-key {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .7;
}

.mon-smart.is-ok    { background: #e0f7f1; color: #12805f; }
.mon-smart.is-warn  { background: #fff3e0; color: #9a6209; }
.mon-smart.is-error { background: var(--danger-soft); color: #b53049; }
.mon-smart.is-muted { background: var(--surface-tertiary); color: var(--text-soft); }

/* --- мини-графики --------------------------------------------------------- */

.spark { display: block; width: 100%; height: 34px; overflow: visible; }

.spark-line { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark-dot  { stroke: none; }

.spark-ok    .spark-line { stroke: var(--ok); }
.spark-ok    .spark-dot  { fill: var(--ok); }

.spark-info  .spark-line { stroke: var(--sky); }
.spark-info  .spark-dot  { fill: var(--sky); }

.spark-heat  .spark-line { stroke: #e08a2e; }
.spark-heat  .spark-dot  { fill: #e08a2e; }

.spark-warn  .spark-line { stroke: var(--warn); }
.spark-warn  .spark-dot  { fill: var(--warn); }

.spark-error .spark-line { stroke: var(--danger); }
.spark-error .spark-dot  { fill: var(--danger); }

.spark-muted .spark-line { stroke: var(--text-soft); }
.spark-muted .spark-dot  { fill: var(--text-soft); }

/* --- крупные графики на странице узла ------------------------------------- */

.mon-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.mon-metric-grid .spark { height: 44px; }

.mon-chart-large { margin: 10px 0 18px; }
.mon-chart-large .spark { height: 120px; }

.mon-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 6px;
}

.mon-chart-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.mon-chart-small .spark { height: 64px; }

.mon-chart-small-title {
    font-size: 12.5px;
    font-weight: 570;
    margin-bottom: 4px;
}

.mon-details > summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--accent);
    font-weight: 550;
    margin: 12px 0;
}

.mon-device-head-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- сужение экрана -------------------------------------------------------
   Информация не исчезает: строка сначала отдаёт кнопку «Подробнее» под
   метрики, затем метрики выстраиваются в две колонки, и только на
   телефоне — в одну. */

@media (max-width: 1280px) {
    .mon-device-metrics {
        grid-template-columns: repeat(2, minmax(84px, .7fr)) repeat(2, minmax(170px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 1080px) {
    .mon-device { grid-template-columns: minmax(180px, 220px) 1fr; }
    .mon-device-more { grid-column: 1 / -1; justify-self: start; }
    .mon-device-metrics { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 640px) {
    .mon-device { grid-template-columns: 1fr; gap: 12px; }
    .mon-device-metrics { grid-template-columns: 1fr; }
    .mon-metric-group-body { grid-template-columns: 1fr 1fr; }
    .mon-summary { grid-template-columns: 1fr 1fr; }
    .mon-alert-bar { flex-wrap: wrap; }
}

/* --- наведение на графики ------------------------------------------------
   Направляющая, маркер и подсказка лежат в разметке всегда и просто
   скрыты. Так наведение не меняет размеров: график не дёргается, и
   курсор не убегает от точки, на которую наведён. */

.spark-slot { fill: transparent; stroke: none; }

.spark-guide {
    stroke: var(--text-soft);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    vector-effect: non-scaling-stroke;
    opacity: 0;
}

.spark-marker { fill: var(--bg-card); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; }

.spark.is-hovered .spark-guide { opacity: .7; }
.spark.is-hovered .spark-marker { opacity: 1; }

.spark-ok    .spark-marker { stroke: var(--ok); }
.spark-info  .spark-marker { stroke: var(--sky); }
.spark-heat  .spark-marker { stroke: #e08a2e; }
.spark-warn  .spark-marker { stroke: var(--warn); }
.spark-error .spark-marker { stroke: var(--danger); }
.spark-muted .spark-marker { stroke: var(--text-soft); }

/* Контейнер графика — система отсчёта для подсказки. */
.spark-host { position: relative; }

.spark-tip {
    position: absolute;
    top: 0;
    z-index: 5;
    display: none;
    min-width: 74px;
    max-width: 220px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: 0 6px 18px rgba(17, 22, 38, .16);
    font-size: 12px;
    line-height: 1.35;
    /* Подсказка не перехватывает указатель: иначе она встанет под
       курсор, наведение слетит, и она замигает. */
    pointer-events: none;
    white-space: nowrap;
}

.spark-host.is-hovered .spark-tip { display: block; }

.spark-tip-time { margin-bottom: 2px; color: var(--text-soft); font-size: 11px; }
.spark-tip-row + .spark-tip-row { margin-top: 4px; }
.spark-tip-name { color: var(--text-soft); font-size: 11px; }
.spark-tip-value { font-weight: 600; }
.spark-tip-range { color: var(--text-soft); font-size: 11px; }

/* --- 5D.2: диапазон корзины, разреженная история, группы --------------- */

/* Заливки диапазона больше нет вовсе: сначала она давала треугольники,
   потом частокол прямоугольников. Осталась линия среднего, а разброс —
   тонким усом и только там, где он о чём-то говорит. */
.spark-whisker {
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    opacity: .22;
}

.spark-ok    .spark-whisker { stroke: var(--ok); }
.spark-info  .spark-whisker { stroke: var(--sky); }
.spark-heat  .spark-whisker { stroke: #e08a2e; }
.spark-warn  .spark-whisker { stroke: var(--warn); }
.spark-error .spark-whisker { stroke: var(--danger); }
.spark-muted .spark-whisker { stroke: var(--text-soft); }

/* Второй и третий ряд на общем графике различаются штрихом, а не только
   оттенком: цветом одну линию от другой отличит не каждый глаз. */
.spark-track-2 .spark-line { stroke-dasharray: 5 3; }
.spark-track-3 .spark-line { stroke-dasharray: 1.5 2.5; }
.spark-track-2 .spark-whisker,
.spark-track-3 .spark-whisker { opacity: .18; }

.mon-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.mon-legend-mark {
    width: 14px; height: 0; border-top: 2px solid currentColor; opacity: .8;
}
.mon-legend-2 .mon-legend-mark { border-top-style: dashed; }
.mon-legend-3 .mon-legend-mark { border-top-style: dotted; }

.mon-metric-collecting {
    display: block;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 11px;
}

/* Точки монтирования одного носителя. */
.mon-mounts { display: inline; }
.mon-mounts > summary {
    display: inline;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 12px;
}
.mon-mounts ul { margin: 4px 0 0; padding-left: 18px; }
.mon-mounts li { color: var(--text-soft); font-size: 12px; }

.mon-badge {
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-soft);
    font-size: 11px;
}

.mon-hint { margin-top: 2px; font-size: 11px; }

.mon-service.is-muted { color: var(--text-soft); }