/* M240 Cloud: the controller's own look.

   Somebody goes from these pages to a controller's pages (in a new tab or
   in the split view's frame) and back again, so the two have to read as
   one product. The tokens, the top bar, cards, buttons, pills, fields and
   tables are copied from the controller's stylesheet
   (linux-seriald-ui/static/m240/styles.css): the cloud cannot load files
   from a controller. Keep them in step when that file changes. */

:root {
  color-scheme: light dark;

  --bg: #0f1319;
  --bg-raised: #161c25;
  --bg-sunken: #0b0e13;
  --line: #26303d;
  --line-soft: #1c242f;

  --ink: #e8edf4;
  --ink-dim: #97a4b6;
  --ink-faint: #6b7a8f;

  --accent: #2f81f7;
  --accent-ink: #ffffff;

  --ok: #2ea043;
  --ok-bg: rgba(46, 160, 67, .14);
  --warn: #d29922;
  --warn-bg: rgba(210, 153, 34, .14);
  --bad: #f85149;
  --bad-bg: rgba(248, 81, 73, .14);
  --idle: #6b7a8f;
  --idle-bg: rgba(107, 122, 143, .14);
  --busy: #a371f7;
  --busy-bg: rgba(163, 113, 247, .16);

  --bar-bg: rgba(15, 19, 25, .92);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Light by the device's own setting -- unless a theme was chosen on the
   controller's own pages, which the cloud follows (data-theme on <html>,
   app.js applyTheme), as the controller does. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f2f4f8; --bg-raised: #ffffff; --bg-sunken: #f7f9fc;
    --line: #d9e0ea; --line-soft: #e8edf3;
    --ink: #131920; --ink-dim: #4d5b6e; --ink-faint: #7a8798;
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 26px rgba(16,24,40,.09);
    --bar-bg: rgba(255, 255, 255, .93);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f4f8; --bg-raised: #ffffff; --bg-sunken: #f7f9fc;
  --line: #d9e0ea; --line-soft: #e8edf3;
  --ink: #131920; --ink-dim: #4d5b6e; --ink-faint: #7a8798;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 26px rgba(16,24,40,.09);
  --bar-bg: rgba(255, 255, 255, .93);
}
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
body { padding-bottom: env(safe-area-inset-bottom); }

a { color: inherit; text-decoration: none; }
main a, .live-bar a { color: var(--accent); }
main a:hover, .live-bar a:hover { text-decoration: underline; }
button { font: inherit; }

/* -- the top bar ------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  background: var(--bar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; flex: none; }

.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #7c4dff);
  position: relative; flex: none;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 8px 6px;
  border-top: 2px solid rgba(255,255,255,.9);
  border-bottom: 2px solid rgba(255,255,255,.9);
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 15px; letter-spacing: .04em; }
.brand-text small { font-size: 11px; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; }

.topnav { display: flex; gap: 4px; margin-inline-start: auto; flex-wrap: wrap; }
.topnav a {
  padding: 7px 13px; border-radius: 999px;
  font-size: 13.5px; color: var(--ink-dim);
}
.topnav a:hover { background: var(--bg-raised); color: var(--ink); }
.topnav a.on { background: var(--accent); color: var(--accent-ink); }

.topbar-right { display: flex; align-items: center; gap: 10px; flex: none; }

.lang-select {
  font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink);
  max-width: 9.5em; width: auto;
}
.lang-select:focus { outline: none; border-color: var(--accent); }

.user-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
             border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink);
             font-size: 13px; white-space: nowrap; }
.user-chip:hover { border-color: var(--ink-faint); }
.user-chip .user-role { color: var(--ink-faint); font-size: 12px; }
button.user-chip { cursor: pointer; font: inherit; font-size: 13px; }
.user-caret { color: var(--ink-faint); font-size: 11px; }

/* The user menu: the name opens it (app.js userMenu). */
.user-menu { position: relative; }
.user-pop { display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60;
            min-width: 220px; padding: 6px; border-radius: var(--radius-sm);
            border: 1px solid var(--line); background: var(--bg-raised); box-shadow: var(--shadow); }
.user-menu.open .user-pop { display: block; }
.user-menu.open .user-chip { border-color: var(--accent); }
.user-pop-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.user-pop a { display: block; padding: 9px 10px; border-radius: 7px; color: var(--ink); font-size: 14px; }
.user-pop a:hover, .user-pop a:focus { background: var(--bg-sunken); outline: none; }
.user-pop-sep { border-top: 1px solid var(--line-soft); margin: 4px 0; }

/* The folded menu, as on the controller: below this width the items fold
   behind a button that names the page you are on, and open as a panel
   under the bar, big enough to hit with a thumb. The language and the
   account go in with them. */
.menu-btn { display: none; }
.menu-panel { display: contents; }
.menu-icon { position: relative; width: 16px; height: 12px; flex: none;
             border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menu-icon span { position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }
.menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1000px) {
  .menu-btn {
    display: inline-flex; align-items: center; gap: 9px;
    flex: 0 1 auto; min-width: 0; min-height: 40px;
    margin-inline-start: auto; padding: 0 15px 0 13px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink);
    font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .menu-btn:hover { border-color: var(--ink-faint); }
  .menu-open .menu-btn { border-color: var(--accent); }

  .menu-panel {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 10px 14px 14px;
    background: var(--bg-raised); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .menu-open .menu-panel { display: block; }
  .topnav {
    display: grid; margin: 0; gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .topnav a {
    display: flex; align-items: center; min-height: 46px;
    padding: 10px 16px; border-radius: 12px; font-size: 15px;
  }
  .topbar-right {
    justify-content: space-between; flex-wrap: wrap;
    margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line);
  }
  .topbar-right .lang-select { min-height: 40px; max-width: none; font-size: 14px; }
  .topbar-right .user-chip { min-height: 40px; font-size: 14px; }
  /* Folded, the user menu opens in place, under the name. */
  .user-menu { width: 100%; }
  .user-pop { position: static; box-shadow: none; margin-top: 8px; min-width: 0; }
  .user-pop a { min-height: 44px; display: flex; align-items: center; font-size: 15px; }
  /* Signed out there is no menu, only the language, beside the brand. */
  .signed-out .menu-btn { display: none; }
  .signed-out .menu-panel { display: contents; }
  .signed-out .topbar-right { margin: 0; margin-inline-start: auto; padding: 0; border: 0; }
}
@media (max-width: 620px) {
  .menu-panel { padding: 8px 12px 12px; }
  .topnav { grid-template-columns: 1fr 1fr; }
}

/* -- the page ---------------------------------------------------------- */

.view { max-width: 1180px; margin: 0 auto; padding: 22px 20px 64px; }

h1 { font-size: 25px; margin: 0 0 4px; letter-spacing: -.01em; }
.view > h1 { margin-bottom: 14px; }
.view > h1 + p { margin-top: -8px; }
h2 { font-size: 17px; margin: 0 0 14px; }
p { margin: 0 0 12px; color: var(--ink-dim); line-height: 1.55; }
.muted { color: var(--ink-faint); }
.tiny { font-size: 12.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.error { color: var(--bad); min-height: 1.2em; }

.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-bottom: 14px; }
.grid > .card { margin-bottom: 0; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 9px 20px; margin: 8px 0 14px; font-size: 14.5px; }
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; text-align: end; font-weight: 550; overflow-wrap: anywhere; }

/* -- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-raised); color: var(--ink);
  cursor: pointer; font-size: 14.5px; font-weight: 500;
  transition: background .12s, border-color .12s, transform .06s;
  text-decoration: none;
}
.btn:hover:not(:disabled) { border-color: var(--ink-faint); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn.danger:hover:not(:disabled) { background: var(--bad-bg); }
/* In a table row, the controller's small button. */
td .btn { padding: 6px 12px; font-size: 13px; border-radius: 8px; }

.actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 12px; }
.actions .btn { flex: 1 1 auto; }

/* -- fields ------------------------------------------------------------ */

input[type=text], input[type=password], input[type=email], input[type=tel], input[type=search], select, textarea {
  width: 100%; max-width: 420px; padding: 11px 13px;
  background: var(--bg-sunken); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 15px;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,129,247,.2);
}
textarea { max-width: 100%; min-height: 120px; resize: vertical;
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 6px; }
label.field > span.tiny { margin: 6px 0 0; }
.checks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 6px 0 14px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.card > select + p { margin-top: 12px; }
pre { white-space: pre-wrap; color: var(--ink-dim); }

.login { max-width: 420px; margin: 48px auto; display: flex; flex-direction: column; gap: 12px; }
.login label.field { margin-bottom: 0; }
.login .error { margin: 0; }
.login input { max-width: none; }

/* -- status ------------------------------------------------------------ */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--idle-bg); color: var(--idle);
  white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.good { background: var(--ok-bg); color: var(--ok); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }

.lv-alarm, .lv-error { color: var(--bad); font-weight: 600; }
.lv-warning { color: var(--warn); font-weight: 600; }

/* -- tables (the controller's .bms-table) ----------------------------- */

table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 14px; }
th { text-align: start; color: var(--ink-faint); font-weight: 600; padding: 6px 8px;
     border-bottom: 1px solid var(--line-soft); }
td { padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; text-align: start; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(127,127,127,.04); }
td .tiny.muted { margin-top: 2px; }
.table-wrap { overflow-x: auto; }

/* -- the toast --------------------------------------------------------- */

#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 90;
         width: max-content; max-width: min(92vw, 460px);
         padding: 13px 17px; border-radius: 11px; background: var(--bg-raised); color: var(--ink);
         border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 14.5px; }
#toast.bad { border-color: var(--bad); color: var(--bad); }

/* -- the assistant ----------------------------------------------------- */

textarea.ask-input { min-height: 0; font: inherit; font-size: 15px; max-width: 100%; }
.ask-steps { margin: 6px 0; padding-inline-start: 18px; }
.ask-answer { white-space: pre-wrap; line-height: 1.55; }
.ask-answer:empty { display: none; }
.ask-turn { border-top: 1px solid var(--line-soft); padding: 12px 0; }
.ask-q { font-weight: 600; white-space: pre-wrap; margin-bottom: 4px; }
.ask-turn p { margin: 6px 0 0; }
.ask-log:empty { display: none; }
.ask-where:empty, .ask-turn .tiny:empty, .ask-turn .error:empty { display: none; }
/* A proposed action: confirm or cancel. A zone-wide one is marked in the
   warning colour. */
.ask-card { background: var(--bg-sunken); border: 1px solid var(--line); border-inline-start: 3px solid var(--accent);
            border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0; }
.ask-card.zone-wide { border-inline-start-color: var(--warn); }
.ask-card-what { font-weight: 600; margin-top: 2px; }
.ask-card-warn { color: var(--warn); font-size: 13px; margin-top: 4px; }
.ask-card-done { color: var(--ok); }
.ask-card .actions { margin-top: 8px; }
.ask-cards:empty { display: none; }
.ask-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ask-rate:empty { display: none; }
.ask-thumb { padding: 2px 8px; min-height: 0; }
.ask-thumb.on { border-color: var(--accent); background: var(--bg-sunken); }
.ask-rate-why { flex: 1; min-width: 160px; }
.rated .ask-answer { margin-top: 8px; }
.rated-why { color: var(--warn); }

/* -- right to left ------------------------------------------------------ */

/* A value such as "1.8 s" keeps its own direction inside a right-to-left
   page; ids and versions stay left to right. */
[dir="rtl"] dd, [dir="rtl"] td { unicode-bidi: plaintext; }
/* A question or an answer in another script reads in its own direction. */
[dir="rtl"] .ask-q, [dir="rtl"] .ask-answer, [dir="rtl"] .ask-input { unicode-bidi: plaintext; }
[dir="rtl"] .mono { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 640px) { .hide-sm { display: none; } }
@media (max-width: 620px) {
  .view { padding: 16px 13px 52px; }
  h1 { font-size: 21px; }
  .topbar { padding: 10px 13px; gap: 12px; }
  .actions .btn { flex-basis: 100%; }
  .kv { font-size: 14px; }
  .grid { grid-template-columns: 1fr; }
  /* A table keeps the phone's width rather than scrolling sideways. */
  .card.table-wrap { padding: 12px 10px; }
  th, td { padding: 7px 5px; }
  td .pill { white-space: normal; }
}
@media (max-width: 360px) {
  .brand-text { display: none; }
}

/* -- the split view ------------------------------------------------------ */

/* The controller's pages full width, the assistant beside them when open,
   a small tab over them when closed. The bar is the top bar's look; the
   assistant is the controller's side panel. */
.live { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--bg); }
.live-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; flex-wrap: wrap;
            background: var(--bar-bg); border-bottom: 1px solid var(--line); font-size: 14px; }
.live-bar .brand-mark { width: 24px; height: 24px; border-radius: 7px; }
.live-bar .brand-mark::after { inset: 6px 5px; }
.live-bar .btn { padding: 7px 14px; border-radius: 999px; font-size: 13.5px; }
.live-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.live-body { flex: 1; display: flex; min-height: 0; position: relative; }
.live-main { flex: 1; position: relative; min-width: 0; }
.live-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); }
.live-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: var(--bg); text-align: center; }
.live-cover[hidden] { display: none; }
.live-tab { position: absolute; inset-inline-end: 16px; bottom: 16px; z-index: 2;
            border-radius: 999px; box-shadow: var(--shadow); }
.live-chat { display: none; position: relative; width: 420px; max-width: 100%; flex-direction: column; min-height: 0;
             background: var(--bg-raised); border-inline-start: 1px solid var(--line); }
.live-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                  padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.live-chat-head strong { font-weight: 650; }
.live-chat-head .btn { width: 26px; height: 26px; padding: 0; flex: none; border-radius: 7px;
                       background: var(--bg-sunken); color: var(--ink-dim); font-size: 15px; line-height: 1; }
.live-chat-head .btn:hover { color: var(--ink); }
.live-ask { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 12px 16px; }
.live-ask .ask-log { flex: 1; overflow-y: auto; min-height: 0; }
.live-ask .actions { margin-top: 10px; }
.live.chat-open .live-chat { display: flex; }
.live.chat-open .live-tab, .live:not(.chat-open) .live-toggle { display: none; }
@media (max-width: 800px) {
  .live-chat { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(420px, 100%) !important; z-index: 3; box-shadow: var(--shadow); }
}
@media (max-width: 620px) {
  .live-bar { padding: 8px 13px; gap: 10px; }
  .live-ask .actions .btn { flex-basis: auto; }
}

/* The assistant's answers, drawn from their Markdown (app.js markdown). */
.ask-answer p { margin: 0 0 8px; }
.ask-answer p:last-child { margin-bottom: 0; }
.ask-answer .md-h { font-weight: 700; margin-top: 10px; }
.ask-answer ul, .ask-answer ol { margin: 0 0 8px; padding-inline-start: 22px; }
.ask-answer li { margin: 2px 0; }
.ask-answer code { font-family: var(--mono, ui-monospace, monospace); font-size: .92em;
                   padding: 1px 5px; border-radius: 5px; background: var(--bg-raised, rgba(127,127,127,.15)); }

/* Dragging the chat panel's inner edge sets its width (app.js resizer). */
.live-resize { position: absolute; inset-block: 0; inset-inline-start: -4px; width: 8px; z-index: 4;
               cursor: col-resize; touch-action: none; }
.live-resize::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 3px; width: 2px;
                      background: transparent; transition: background .15s; }
.live-resize:hover::after, .resizing .live-resize::after { background: var(--accent); }
.resizing { cursor: col-resize; user-select: none; }
.ask-log .ask-lead { margin: 0 0 10px; }
@media (max-width: 800px) { .live-resize { display: none; } }

/* -- units (2026-11-11): the controller's status tiles, health signs,
   the unit page's Advanced section ------------------------------------- */

/* Three tiles, always on one row: wrapped 2+1 they read as a mistake. */
.grid.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) { .stat { padding: 12px 12px; } .stat .n { font-size: 24px; } .stat .k { font-size: 11px; letter-spacing: .03em; } }
@media (min-width: 621px) { td .pill { white-space: nowrap; } }
.stat { padding: 16px 18px; }
.stat .n { font-size: 30px; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; }
.stat .k { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }
.stat.ok .n { color: var(--ok); }
.stat.bad .n { color: var(--bad); }
.stat.warn .n { color: var(--warn); }
.stat.accent .n { color: var(--accent); }
[dir="rtl"] .stat .n { unicode-bidi: plaintext; }

.health { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.health-sign { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
               border-radius: 50%; font-size: 11px; font-weight: 800; flex: none; }
.health.ok { color: var(--ok); }
.health.ok .health-sign { background: var(--ok-bg); }
.health.warn { color: var(--warn); }
.health.warn .health-sign { background: var(--warn-bg); }
.health.bad { color: var(--bad); }
.health.bad .health-sign { background: var(--bad-bg); }
.health-word { font-size: 12.5px; font-weight: 600; opacity: .9; }

.unit-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 2px 0 10px; }
.unit-desc { color: var(--ink); max-width: 70ch; white-space: pre-wrap; }
.unit-actions { margin: 6px 0 4px; }
.unit-actions .btn { flex: 0 1 auto; }
textarea.short { min-height: 72px; font: inherit; }

details.advanced { margin-top: 18px; }
details.advanced > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-raised);
  color: var(--ink-dim); font-weight: 600; font-size: 14px; user-select: none; margin-bottom: 14px; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before { content: "▸"; font-size: 12px; transition: transform .15s ease; }
[dir="rtl"] details.advanced > summary::before { transform: scaleX(-1); }
details.advanced[open] > summary::before { transform: rotate(90deg); }
details.advanced > summary:hover { border-color: var(--ink-faint); color: var(--ink); }

/* Tabs over the units table (Assigned / Unassigned), as a segmented control. */
.segs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 10px; border-radius: 999px;
        background: var(--bg-sunken); border: 1px solid var(--line); }
.seg { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; border: 0;
       background: transparent; color: var(--ink-dim); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.seg:hover { color: var(--ink); }
.seg.on { background: var(--accent); color: var(--accent-ink); }
.seg-n { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; text-align: center;
         background: var(--idle-bg); color: inherit; font-variant-numeric: tabular-nums; }
.seg.on .seg-n { background: rgba(255,255,255,.22); }

/* The unit page's head: the name and its line, Open at the end of the row. */
.unit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.unit-title { min-width: 0; }
.unit-title h1 { overflow-wrap: anywhere; }
.unit-head > .btn { flex: none; padding-inline: 26px; margin-top: 2px; }

/* A card that folds (the unit's logs): its heading is the switch. */
details.card.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
details.card.fold > summary::-webkit-details-marker { display: none; }
details.card.fold > summary h2 { margin: 0; }
details.card.fold > summary::before { content: "▸"; color: var(--ink-faint); font-size: 13px; transition: transform .15s ease; }
[dir="rtl"] details.card.fold > summary::before { transform: scaleX(-1); }
details.card.fold[open] > summary::before { transform: rotate(90deg); }
details.card.fold[open] > summary { margin-bottom: 14px; }
.actions.start .btn { flex: 0 0 auto; padding-inline: 28px; }
textarea.short { max-width: 640px; }

/* A page's heading with its button at the end of the row. */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.page-head h1 { margin-bottom: 4px; }
.row-btns { white-space: nowrap; }
.row-btns .btn + .btn { margin-inline-start: 6px; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* The searchable customer list (app.js customerPicker). */
.picker { max-width: 520px; margin: 6px 0 8px; }
input.picker-search { width: 100%; max-width: 520px; margin-bottom: 8px; }
.card > input.picker-search { margin-bottom: 4px; }
.picker-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm);
               background: var(--bg-sunken); padding: 4px; }
.picker-opt { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 12px;
              padding: 9px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--ink);
              font: inherit; font-size: 14px; text-align: start; cursor: pointer; }
.picker-opt:hover { background: var(--bg-raised); }
.picker-opt.on { background: var(--accent); color: var(--accent-ink); }
.picker-opt.on .muted { color: var(--accent-ink); opacity: .85; }
.picker-opt.none { color: var(--ink-dim); font-style: italic; }
.picker-opt.on.none { color: var(--accent-ink); }
.picker-empty { padding: 8px 10px; margin: 0; }
.field-label { display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 6px; }
div.field { margin-bottom: 14px; }

/* The assign dialog. */
dialog.modal { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: var(--radius);
               background: var(--bg-raised); color: var(--ink); padding: 22px; box-shadow: var(--shadow); }
dialog.modal::backdrop { background: rgba(10, 14, 20, .55); }

/* The language, in the user menu. */
.user-pop-lang { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                 padding: 8px 10px; font-size: 14px; color: var(--ink); border-top: 1px solid var(--line-soft); margin-top: 4px; }
.user-pop-lang .lang-select { max-width: 11em; }

/* Premium (2026-11-11): the customers' badge, the switch, the offer. */
.badge-premium { display: inline-block; margin-inline-start: 8px; padding: 2px 9px; border-radius: 999px; vertical-align: middle;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #6b4a00; background: linear-gradient(135deg, #ffd86b, #f5b83d); }
h1 .badge-premium { font-size: 12px; position: relative; top: -3px; }
.premium-switch { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; cursor: pointer; }
.premium-switch input { width: 18px; height: 18px; margin-top: 2px; accent-color: #f5b83d; }
.premium-switch span { display: flex; flex-direction: column; gap: 2px; }
.premium-offer { border-color: rgba(245, 184, 61, .55); background: linear-gradient(180deg, rgba(255, 216, 107, .12), var(--bg-raised)); }
.premium-offer .badge-premium { margin: 0 10px 0 0; }
[dir="rtl"] .premium-offer .badge-premium { margin: 0 0 0 10px; }
.premium-offer p { margin: 6px 0 0; }

/* Priority support (2026-11-11, support.py): the unit's Support card, the
   staff's queue and one request. */
.badge-priority { display: inline-block; margin-inline-start: 8px; padding: 2px 9px; border-radius: 999px; vertical-align: middle;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #6b4a00; background: linear-gradient(135deg, #ffd86b, #f5b83d); }
h1 .badge-priority, h2 .badge-priority { font-size: 11.5px; position: relative; top: -2px; }
.pill.info { background: rgba(47, 129, 247, .14); color: var(--accent); }
.support-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.support-head .badge-priority { margin: 0; }
.support-req { border-top: 1px solid var(--line-soft); padding: 12px 0 10px; }
.support-req.overdue { border-inline-start: 3px solid var(--bad); padding-inline-start: 12px; }
.support-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.support-note { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-sunken);
                border-inline-start: 3px solid var(--accent); }
.support-ask { margin: 12px 0 6px; }
.support-ask > summary { display: inline-flex; list-style: none; cursor: pointer; }
.support-ask > summary::-webkit-details-marker { display: none; }
.support-ask[open] > summary { margin-bottom: 14px; }
.premium-line { display: flex; align-items: baseline; gap: 10px; margin: 8px 0; }
.premium-line .badge-premium { margin: 0; flex: none; }
.support-excerpt { display: block; overflow-wrap: anywhere; }
tr.overdue td { background: var(--bad-bg); }
tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
[dir="rtl"] tr.overdue td:first-child { box-shadow: inset -3px 0 0 var(--bad); }
.card.overdue { border-color: var(--bad); }

/* Sites (2026-11-11): the units by site, each with its own tiles. */
.units-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.site-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 4px; }
.site-head h2 { margin: 0 0 2px; }
.site-tiles { display: flex; gap: 8px; }
.site-tile { display: flex; flex-direction: column; align-items: center; min-width: 84px; padding: 6px 10px;
             border-radius: var(--radius-sm); background: var(--bg-sunken); border: 1px solid var(--line-soft); }
.site-tile .n { font-size: 20px; font-weight: 650; line-height: 1.15; }
.site-tile .k { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.site-tile.ok .n { color: var(--ok); }
.site-tile.warn .n { color: var(--warn); }
.site-tile.bad .n { color: var(--bad); }
.site-chip { padding: 2px 10px; border-radius: 999px; background: var(--idle-bg); font-size: 13px; }
tr.site-row td { background: var(--bg-sunken); padding-top: 10px; }

/* Seats (2026-11-11): "Users: 2 of 3" for a Basic customer. */
.seats { margin: 4px 0 14px; }
.seats.full strong { color: var(--warn); }
/* Damper health (Premium, damper_health.py): those to act on first, each reason on its own line. */
.dh h2 .badge-premium { font-size: 10.5px; position: relative; top: -2px; }
.dh-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.dh-list { border-top: 1px solid var(--line-soft); }
.dh-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.dh-row > .pill { flex: 0 0 auto; min-width: 100px; justify-content: center; margin-top: 1px; }
.dh-what { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.dh-reasons { margin: 4px 0 0; padding-inline-start: 18px; color: var(--ink-dim); font-size: 14px; }
.dh-reasons li { margin: 2px 0; }
.dh-reasons li .tiny { margin-inline-start: 8px; }
.dh-empty { margin: 4px 0 10px; color: var(--ok); font-weight: 550; }
.dh-good { margin: 10px 0 4px; }
.dh-good > summary { cursor: pointer; color: var(--ink-dim); font-size: 13.5px; }
.dh-good p { margin: 6px 0 0; }
.dh-line { color: var(--warn); margin-top: 4px; }
.dh-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 620px) { .dh-row { flex-direction: column; gap: 6px; } .dh-row > .pill { min-width: 0; } }
/* A Premium customer's units page: a fourth tile, Dampers to watch -- one row, two by two on a phone. */
.grid.stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 620px) { .grid.stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Premium (2026-11-11): compliance reports, long history, CSV export. */
.unit-head-btns { display: flex; flex: none; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.unit-head-btns > .btn { padding-inline: 22px; }
.log-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.log-tools select { flex: 0 1 220px; }
.btn.small { padding: 7px 14px; font-size: 13.5px; }
.premium-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.premium-inline .badge-premium { margin: 0; }

.report-controls-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.report-controls-row select { width: auto; }
.report-date { display: flex; flex-direction: column; gap: 3px; }
.report-date input { padding: 9px 11px; background: var(--bg-sunken); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: 14.5px; }
.report-check { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; cursor: pointer; }
.report-check input { width: 16px; height: 16px; }

.report-doc { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; }
.report-head { border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin-bottom: 18px; }
.report-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.report-brand strong { font-size: 18px; letter-spacing: .02em; }
.report-head h1 { font-size: 24px; margin: 0 0 10px; }
.report-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0; font-size: 14px; }
.report-meta dt { color: var(--ink-faint); }
.report-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
[dir="rtl"] .report-meta dd { text-align: right; }
.report-table td.num { text-align: start; }
.report-section { margin: 20px 0 6px; }
.report-section h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim);
  margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.report-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
.report-tile { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0; }
.report-tile .n { font-size: 22px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.report-tile .k { font-size: 11.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.report-tile .tiny { margin-top: 3px; overflow-wrap: anywhere; }
.report-tile.ok .n { color: var(--ok); }
.report-tile.bad .n { color: var(--bad); }
.report-tile.warn .n { color: var(--warn); }
.report-table { font-size: 13px; }
.report-table td, .report-table th { padding: 5px 7px; }
.report-unit { margin-top: 30px; padding-top: 16px; border-top: 2px solid var(--line); }
.report-unit h2 { font-size: 19px; margin: 0 0 6px; }
.report-notes { margin: 6px 0; padding-inline-start: 20px; font-size: 13px; color: var(--ink-dim); }
.report-notes li { margin: 3px 0; }
.report-foot { margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .report-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-doc { padding: 18px 14px; }
}

/* Print / Save as PDF: the report alone, black on white, A4. */
@page { size: A4; margin: 14mm 12mm; }
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    color-scheme: light;
    --bg: #fff; --bg-raised: #fff; --bg-sunken: #fff; --line: #c9d1dc; --line-soft: #e3e8ee;
    --ink: #000; --ink-dim: #333; --ink-faint: #555;
    --ok: #1a7f37; --ok-bg: #fff; --warn: #9a6700; --warn-bg: #fff; --bad: #cf222e; --bad-bg: #fff;
  }
  html, body { background: #fff !important; color: #000; font-size: 11pt; }
  .topbar, .no-print, #toast { display: none !important; }
  main.view { padding: 0; margin: 0; max-width: none; }
  .report-doc { border: none; border-radius: 0; padding: 0; box-shadow: none; }
  .report-table, .report-meta { font-size: 9pt; }
  .report-tile .n { font-size: 16pt; }
  .report-table thead { display: table-header-group; }
  .report-table tr, .report-tile, .report-head { break-inside: avoid; page-break-inside: avoid; }
  .report-section h3 { break-after: avoid; page-break-after: avoid; }
  .report-unit { break-before: page; page-break-before: always; border-top: none; margin-top: 0; padding-top: 0; }
  .pill { border: 1px solid currentColor; padding: 0 6px; }
  .pill::before { display: none; }
  .table-wrap { overflow: visible; }
  tbody tr:hover td { background: none; }
  a { color: inherit; text-decoration: none; }
}
/* Remote updates (Premium, 2026-11-11, updates.py). */
.updates h2 .badge-premium { position: relative; top: -2px; }
.updates h3 { font-size: 14.5px; margin: 18px 0 8px; }
.update-job { padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.update-job ul { margin: 2px 0; padding-inline-start: 18px; }
.update-job progress { width: 100%; max-width: 420px; height: 8px; accent-color: var(--accent); }
.update-units { max-height: 50vh; overflow-y: auto; margin: 4px 0 8px; }
.update-unit { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.update-unit input { width: 18px; height: 18px; flex: 0 0 auto; }
dialog.modal select { margin-bottom: 10px; }
input[type=file] { max-width: 100%; font: inherit; font-size: 14px; color: var(--ink-dim); }

/* A customer's name beside the logo, for the customer's people (2026-11-13). */
.brand-org { padding-inline-start: 11px; border-inline-start: 1px solid var(--line); font-weight: 600; font-size: 14px;
             max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-org[hidden] { display: none; }
@media (max-width: 620px) { .brand-org { max-width: 9em; font-size: 13px; } }

/* A customer's page (2026-11-13): the details and Add Super User on the
   left; the cloud users on the right, exactly as tall as the two (a long
   list scrolls inside its card). One column on a narrow screen. */
.cu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.cu-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cu-left > .card { margin-bottom: 0; }
.cu-left > .card:last-child { flex: 1; }
.cu-right { position: relative; min-width: 0; }
.cu-right > .card { position: absolute; inset: 0; margin-bottom: 0; overflow: auto; }
@media (max-width: 900px) {
  .cu-grid { grid-template-columns: minmax(0, 1fr); }
  .cu-right > .card { position: static; }
}
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.plain[disabled] { opacity: .55; }

/* The user type popup. */
.type-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.type-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
            border-radius: var(--radius); cursor: pointer; }
.type-opt:has(input:checked) { border-color: var(--accent); }
.type-opt input { margin-top: 3px; }
.type-opt > span { display: flex; flex-direction: column; gap: 2px; }

/* Choosing a customer (2026-11-13, app.js customerPicker / assignDialog). */
dialog.modal.cpick-modal { width: min(620px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.cpick-head { padding: 20px 22px 6px; }
.cpick-head h2 { margin: 0 0 4px; }
.cpick-modal .cpick { padding: 0 22px; margin: 0; max-width: none; }
.cpick-foot { padding: 14px 22px 18px; margin: 0; border-top: 1px solid var(--line-soft); }
.cpick { max-width: 560px; margin: 6px 0 8px; }
.cpick-search { position: relative; margin: 10px 0 6px; }
.cpick-icon { position: absolute; inset-inline-start: 12px; top: 50%; width: 14px; height: 14px; margin-top: -8px;
              border: 2px solid var(--ink-faint); border-radius: 50%; pointer-events: none; }
.cpick-icon::after { content: ""; position: absolute; width: 2px; height: 7px; background: var(--ink-faint);
                     inset-inline-end: -5px; bottom: -6px; transform: rotate(-45deg); border-radius: 1px; }
[dir="rtl"] .cpick-icon::after { transform: rotate(45deg); }
input.cpick-input { width: 100%; max-width: none; padding-inline-start: 38px; height: 44px; font-size: 15px; }
.cpick-count { margin: 0 2px 6px; }
.cpick-list { max-height: min(46vh, 380px); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm);
              background: var(--bg-sunken); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.cpick-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid transparent;
             border-radius: 8px; background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.cpick-row:hover, .cpick-row.active { background: var(--bg-raised); border-color: var(--line); }
.cpick-row.on { background: var(--bg-raised); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .cpick-row.on { box-shadow: inset -3px 0 0 var(--accent); }
.cpick-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
                font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--accent);
                background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cpick-row.on .cpick-avatar { background: var(--accent); color: var(--accent-ink); }
.cpick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cpick-name { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpick-sub { font-size: 12.5px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpick-row mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.cpick-tags { flex: none; display: flex; gap: 6px; align-items: center; }
.cpick-tag { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line);
             color: var(--ink-dim); white-space: nowrap; }
.cpick-check { flex: none; width: 18px; color: var(--accent); font-weight: 700; visibility: hidden; text-align: center; }
.cpick-row.on .cpick-check { visibility: visible; }
.cpick-row.none { margin-top: 6px; border-top: 1px dashed var(--line); border-radius: 0 0 8px 8px; }
.cpick-row.none .cpick-avatar { background: transparent; border: 1px dashed var(--ink-faint); color: var(--ink-faint); }
.cpick-row.none.on .cpick-avatar { border-style: solid; }
.cpick-empty { padding: 14px 12px; margin: 0; }
.cpick-current { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; flex-wrap: wrap; }
@media (max-width: 620px) {
  .cpick-head { padding: 16px 16px 4px; }
  .cpick-modal .cpick { padding: 0 16px; }
  .cpick-foot { padding: 12px 16px 14px; }
  .cpick-tags .badge-premium { display: none; }
  .cpick-list { max-height: 52vh; }
}

/* The Premium page (2026-11-13). */
.premium-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.premium-grid > .card { margin-bottom: 0; }
@media (max-width: 860px) { .premium-grid { grid-template-columns: minmax(0, 1fr); } }
.premium-list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.premium-buy { border-color: #f5b83d; }
.premium-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.premium-amount { font-size: 34px; font-weight: 800; letter-spacing: -.01em; }
.btn.big { padding: 12px 22px; font-size: 16px; }
.premium-thanks { border-color: var(--ok); }
.lv-ok { color: var(--ok); font-weight: 600; }
.premium-buy .actions { margin: 6px 0 10px; }

/* The unit page's Premium section (2026-11-13), above Advanced. */
details.advanced > .card:first-of-type, details.advanced > .grid:first-of-type { margin-top: 12px; }
details.premium-section > summary { border-color: #f5b83d; }
details.premium-section > summary { background: rgba(245, 184, 61, .12); font-weight: 700; }

/* M240 or Matrix (2026-11-13). */
.product-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px;
               border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); white-space: nowrap; }
.product-tag.product-m240 { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.product-tag.product-matrix { color: #8b5cf6; border-color: color-mix(in srgb, #8b5cf6 45%, transparent); }
.live-toggle[disabled] { opacity: .45; cursor: not-allowed; }