/* Versona personal connector tools: Connections, a Versona's Tools, the Auto mode warning and badge (2026-10-07).
   The Hub's Cosmos language (versona-hub-cosmos.css): ink ground, bone text, brass for what is on or primary, rust for what
   leaves a mark (actions, Auto mode, disconnecting), dust hairlines, square corners. Big Shoulders Stencil for titles, IBM Plex
   Mono for the machine, Sora for anything read. Loaded by home.html and visit.html, which both define these tokens; the
   fallbacks keep it readable anywhere else. */

.vt-tools, .vc-root, .vt-dialog, .vt-auto-badge, .vt-auto-actions, .vt-auto-paused, .vt-details-section {
    color-scheme: dark;   /* native checkboxes, selects and scrollbars drawn for an ink ground */
    --vt-ink: var(--ink, #120d0a);
    --vt-ink-2: var(--ink-2, #1a130e);
    --vt-ink-3: var(--ink-3, #241a12);
    --vt-bone: var(--bone, #efe6d2);
    --vt-sand: var(--sand, #b9a88f);
    --vt-dust: var(--dust, #8c7a66);
    --vt-brass: var(--brass, #d9a441);
    --vt-brass-hi: var(--brass-hi, #e8c77e);
    --vt-rust: var(--rust, #b4462a);
    --vt-ember: var(--ember, #d0613f);
    --vt-line: var(--line, rgba(140, 122, 102, 0.35));
    --vt-line-strong: var(--line-strong, rgba(140, 122, 102, 0.55));
    --vt-line-brass: var(--line-brass, rgba(217, 164, 65, 0.32));
    --vt-display: var(--f-display, 'Big Shoulders Stencil Display', 'Arial Narrow', Impact, sans-serif);
    --vt-mono: var(--f-mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
    --vt-body: var(--f-body, Sora, 'Segoe UI', system-ui, sans-serif);
}

/* home.html carries a page-wide "* { font-family: Arial }": inside these pieces every element takes its parent's face
   unless a rule below names one (they come later, at the same specificity, so they win). */
.vt-tools *, .vc-root *, .vt-dialog *, .vt-auto-badge *, .vt-auto-actions *, .vt-auto-paused *, .vt-details-section * { font-family: inherit; }

/* ── Buttons ── */
.vt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 34px; padding: 7px 14px;
    border: 1px solid var(--vt-line-strong); border-radius: 0;
    background: transparent; color: var(--vt-bone);
    font: 600 11px/1.2 var(--vt-mono); letter-spacing: 0.12em; text-transform: uppercase;
    cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.vt-btn:hover:not(:disabled) { border-color: var(--vt-brass); color: var(--vt-brass-hi); background: rgba(217, 164, 65, 0.08); }
.vt-btn:focus-visible { outline: 2px solid var(--vt-brass); outline-offset: 2px; }
.vt-btn:disabled { opacity: 0.45; cursor: default; }
.vt-btn-primary { background: var(--vt-brass); border-color: var(--vt-brass); color: var(--vt-ink); }
.vt-btn-primary:hover:not(:disabled) { background: var(--vt-bone); border-color: var(--vt-bone); color: var(--vt-ink); }
.vt-btn-danger { border-color: rgba(180, 70, 42, 0.75); color: var(--vt-ember); }
.vt-btn-danger:hover:not(:disabled) { border-color: var(--vt-ember); color: #f08a6a; background: rgba(180, 70, 42, 0.12); }
.vt-btn-small { min-height: 28px; padding: 4px 10px; font-size: 10.5px; }

.vt-note { margin: 6px 0; font: 300 13px/1.55 var(--vt-body); color: var(--vt-sand); }
.vt-error { margin: 6px 0; font: 400 13px/1.5 var(--vt-body); color: #f08a6a; }
.vt-error:empty { display: none; }
.vt-warn { margin: 4px 0 10px 28px; padding-left: 10px; border-left: 2px solid var(--vt-rust); font: 300 12.5px/1.55 var(--vt-body); color: var(--vt-sand); }
.vt-subtitle { margin: 0 0 4px; font: 700 20px/1.1 var(--vt-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--vt-bone); }
.vt-input {
    width: 100%; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid var(--vt-line-strong); border-radius: 0;
    background: rgba(18, 13, 10, 0.62); color: var(--vt-bone);
    font: 400 13px/1.4 var(--vt-body);
}
.vt-input:focus { outline: none; border-color: var(--vt-brass); }
.vt-input::placeholder { color: var(--vt-dust); opacity: 1; }
.vc-textarea { font: 400 12px/1.5 var(--vt-mono); resize: vertical; }

/* Monogram: the connector's first letter, stamped (no brand logos in the ledger) */
.vt-mono {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: 1px solid var(--vt-line-strong);
    font: 700 19px/1 var(--vt-display); color: var(--vt-sand); background: var(--vt-ink-2);
}

/* ── Switch (role=switch on a real checkbox) ── */
.vt-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 32px; }
.vt-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.vt-switch-track {
    flex: none; position: relative; width: 38px; height: 20px;
    border: 1px solid var(--vt-line-strong); background: var(--vt-ink);
    transition: background-color 0.15s, border-color 0.15s;
}
.vt-switch-track::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px;
    background: var(--vt-dust); transition: transform 0.15s, background-color 0.15s;
}
.vt-switch input:checked + .vt-switch-track { border-color: var(--vt-brass); background: rgba(217, 164, 65, 0.18); }
.vt-switch input:checked + .vt-switch-track::after { transform: translateX(18px); background: var(--vt-brass); }
.vt-switch input:focus-visible + .vt-switch-track { outline: 2px solid var(--vt-brass); outline-offset: 2px; }
.vt-switch input:disabled + .vt-switch-track { opacity: 0.4; }
.vt-switch:has(input:disabled) { cursor: default; }
.vt-switch-label { font: 400 13.5px/1.35 var(--vt-body); color: var(--vt-bone); }
/* Auto mode's switch turns rust when on: it is the one switch that removes a safeguard. */
.vt-switch-auto .vt-switch-label { font: 600 12px/1 var(--vt-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.vt-switch-auto input:checked + .vt-switch-track { border-color: var(--vt-rust); background: rgba(180, 70, 42, 0.22); }
.vt-switch-auto input:checked + .vt-switch-track::after { background: var(--vt-ember); }

.vt-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font: 400 13.5px/1.4 var(--vt-body); color: var(--vt-bone); }
.vt-check input, .vt-dialog-check input, .vt-check-input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--vt-brass); }

/* ── Lookup / Action badges ── */
.vt-kind {
    flex: none; padding: 2px 7px; border: 1px solid var(--vt-line-strong);
    font: 600 10px/1.4 var(--vt-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--vt-sand);
}
.vt-kind-action { border-color: rgba(180, 70, 42, 0.75); color: var(--vt-ember); }

/* ── The Tools settings (the right column of the details modal) ── */
.vt-tools-view[hidden], .modal-details[hidden] { display: none !important; }
.vt-tools-view { min-width: 0; }
.vt-tools { font-family: var(--vt-body); color: var(--vt-bone); }
.vt-tools-top { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--vt-line); }
.vt-tools-title { margin: 0; font: 700 28px/1 var(--vt-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--vt-bone); outline: none; }
.vt-back::before { content: '\2039'; font-size: 16px; line-height: 0; margin-right: 2px; }
.vt-lede { margin: 12px 0 14px; font: 400 14px/1.55 var(--vt-body); color: var(--vt-bone); }
.vt-auto { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--vt-line); border-left: 3px solid var(--vt-line-strong); background: rgba(18, 13, 10, 0.5); }
.vt-auto:has(input:checked) { border-left-color: var(--vt-rust); }
.vt-auto-help { margin-bottom: 0; }
.vt-auto .vt-auto-slot { margin-top: 10px; }
.vt-options { margin: 0 0 16px; }
.vt-options .vt-check { margin-top: 10px; }
.vt-opt-note { margin: 2px 0 0 28px; font-size: 12.5px; }

.vt-services { border-top: 1px solid var(--vt-line); }
.vt-svc { border-bottom: 1px solid var(--vt-line); }
.vt-svc-head {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 2px;
    border: 0; background: transparent; color: var(--vt-bone); text-align: left; cursor: pointer;
}
.vt-svc-head:hover .vt-svc-name { color: var(--vt-brass-hi); }
.vt-svc-head:focus-visible { outline: 2px solid var(--vt-brass); outline-offset: 2px; }
.vt-svc-head::after { content: '+'; margin-left: 4px; font: 500 16px/1 var(--vt-mono); color: var(--vt-dust); }
.vt-svc-head[aria-expanded="true"]::after { content: '\2212'; }
.vt-svc-name { flex: 1; min-width: 0; font: 600 14px/1.3 var(--vt-body); overflow-wrap: anywhere; }
.vt-svc-count { font: 600 11px/1 var(--vt-mono); letter-spacing: 0.08em; color: var(--vt-brass); }
.vt-svc-status { font: 500 10.5px/1.3 var(--vt-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vt-sand); }
.vt-svc-status.vt-st-attention, .vt-svc-status.vt-st-plan { color: var(--vt-ember); }
.vt-svc-status.vt-st-sensitive { color: var(--vt-brass-hi); }
.vt-svc-locked .vt-svc-name { color: var(--vt-sand); }
.vt-ops { padding: 0 0 12px 44px; }
.vt-ops-note { margin-top: 0; font-size: 12.5px; }
.vt-lock { margin: 0 0 8px; font: 400 12.5px/1.5 var(--vt-body); color: var(--vt-brass-hi); }
.vt-lock[hidden] { display: none; }
.vt-upgrade { color: var(--vt-brass); font-weight: 600; }
.vt-op { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; border-top: 1px dashed rgba(140, 122, 102, 0.25); }
.vt-op:first-of-type { border-top: 0; }
.vt-op .vt-switch { flex: 1; min-width: 180px; }
.vt-try-panel { flex-basis: 100%; padding: 10px 12px; border: 1px solid var(--vt-line); background: rgba(18, 13, 10, 0.55); }
.vt-try-panel[hidden] { display: none; }
.vt-args { display: grid; gap: 8px; margin-bottom: 10px; }
.vt-arg-label { display: block; margin-bottom: 3px; font: 500 10.5px/1.3 var(--vt-mono); letter-spacing: 0.1em; color: var(--vt-dust); }
.vt-try-out {
    margin: 10px 0 0; max-height: 240px; overflow: auto; padding: 8px 10px;
    border-left: 2px solid var(--vt-brass); background: var(--vt-ink);
    font: 400 12px/1.5 var(--vt-mono); color: var(--vt-bone); white-space: pre-wrap; overflow-wrap: anywhere;
}
.vt-try-out.vt-try-failed { border-left-color: var(--vt-rust); color: #f0b39e; }
.vt-not-connected { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--vt-line); }
.vt-save-row { position: sticky; bottom: -30px; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 0; border-top: 1px solid var(--vt-line-brass); background: var(--panel, rgba(22, 16, 12, 0.97)); box-shadow: 0 -18px 16px -10px rgba(22, 16, 12, 0.97); }
.vt-total { font: 600 11px/1 var(--vt-mono); letter-spacing: 0.1em; color: var(--vt-sand); }
.vt-total.vt-over { color: var(--vt-ember); }
.vt-save-status { flex: 1; min-width: 160px; font: 400 12.5px/1.4 var(--vt-body); color: var(--vt-sand); }
.vt-save-status[data-kind="error"] { color: #f08a6a; }
.vt-save-status[data-kind="saved"] { color: var(--vt-brass-hi); }

/* The details modal's own section */
.vt-details-section .vt-open-tools { flex: none; margin-top: 8px; }
.vt-details-summary { margin: 0; }

/* ── "Auto mode is on": a rust stamp with its own way out ── */
.vt-auto-slot[hidden] { display: none; }
.vt-auto-badge {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    padding: 4px 4px 4px 10px; border: 2px solid var(--vt-rust); background: rgba(180, 70, 42, 0.12);
    font: 600 11px/1.2 var(--vt-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-ember);
}
.vt-auto-pip { width: 8px; height: 8px; background: var(--vt-ember); flex: none; }
.vt-auto-off {
    min-height: 26px; padding: 3px 10px; border: 1px solid var(--vt-ember); border-radius: 0;
    background: var(--vt-ember); color: var(--vt-ink); cursor: pointer;
    font: 700 10.5px/1 var(--vt-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.vt-auto-off:hover:not(:disabled) { background: var(--vt-bone); border-color: var(--vt-bone); }
.vt-auto-off:focus-visible { outline: 2px solid var(--vt-bone); outline-offset: 2px; }
.vt-auto-off:disabled { opacity: 0.55; cursor: default; }
.vt-auto-err { flex-basis: 100%; font: 400 12px/1.4 var(--vt-body); letter-spacing: 0; text-transform: none; color: #f08a6a; }
.vt-auto-err:empty { display: none; }
.vt-auto-badge-compact { padding: 2px 2px 2px 8px; font-size: 10px; }

/* ── The lines under a reply for actions taken without asking ── */
.vt-auto-actions { margin-top: 8px; padding: 6px 10px; border-left: 2px solid var(--vt-rust); background: rgba(180, 70, 42, 0.08); }
.vt-auto-actions-head { font: 600 10px/1.4 var(--vt-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--vt-ember); }
.vt-auto-actions-list { margin: 4px 0 0; padding: 0 0 0 16px; font: 400 12.5px/1.5 var(--vt-body); color: var(--vt-bone); }
.vt-auto-actions-list li { overflow-wrap: anywhere; }

/* ── Auto mode paused for the hour (its ceiling): brass, the colour of what waits for you, beside the rust of what acted.
      The badge's filled pip, drawn hollow: on, then paused. ── */
.vt-auto-paused {
    display: flex; align-items: baseline; gap: 9px; margin: 8px 0 0; padding: 6px 10px;
    border-left: 2px solid var(--vt-brass); background: rgba(217, 164, 65, 0.08);
    font: 400 12.5px/1.5 var(--vt-body); color: var(--vt-bone);
}
.vt-auto-paused-pip { flex: none; width: 8px; height: 8px; border: 2px solid var(--vt-brass); box-sizing: border-box; transform: translateY(-1px); }
.vt-auto-paused-text { overflow-wrap: anywhere; }

/* The visit room: the badge sits under the name stamp; the lines are their own chat row */
.vv-auto-mode { padding: 8px 16px; border-bottom: 1px solid var(--line, rgba(140, 122, 102, 0.35)); }
.vv-auto-mode[hidden] { display: none; }
.vv-auto-actions .message-content { padding: 6px 8px; }
.vv-auto-actions .vt-auto-actions { margin-top: 0; }
.vv-auto-paused .message-content { padding: 6px 8px; }
.vv-auto-paused .vt-auto-paused { margin-top: 0; }

/* The Hub chat keeps those lines as a plain-text message; on screen it carries the same rust rule (the pause: brass) */
.chat-msg.versona-auto-actions .chat-msg-bubble { border-left-color: var(--rust, #b4462a) !important; background: rgba(180, 70, 42, 0.08) !important; font-size: 12.5px; }
.chat-msg.versona-auto-paused .chat-msg-bubble { border-left-color: var(--brass, #d9a441) !important; background: rgba(217, 164, 65, 0.08) !important; font-size: 12.5px; }
/* The pause's hollow pip, drawn by CSS: the message itself stays plain text in the chat's history */
.chat-msg.versona-auto-paused .versona-plain::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 9px; vertical-align: 0;
    border: 2px solid var(--brass, #d9a441); box-sizing: border-box;
}
.chat-toolbar-left .vt-auto-slot { display: inline-flex; }
.chat-toolbar-left .vt-auto-slot[hidden] { display: none; }

/* ── The Auto mode warning (native <dialog>, top layer) ── */
.vt-dialog {
    box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
    margin: auto; padding: 26px 28px 22px;
    border: 1px solid rgba(180, 70, 42, 0.55); border-top: 3px solid var(--vt-rust); border-radius: 0;
    background: var(--vt-ink-2); color: var(--vt-bone); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
    font-family: var(--vt-body);
}
.vt-dialog::backdrop { background: rgba(8, 6, 4, 0.78); }
.vt-dialog.vt-dialog-fallback { position: fixed; inset: 0; z-index: 2147483000; }
.vt-dialog-title { margin: 0 0 14px; font: 700 34px/1 var(--vt-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--vt-bone); }
.vt-dialog-lede { margin: 0 0 12px; font: 400 15px/1.6 var(--vt-body); color: var(--vt-bone); }
.vt-dialog-points { margin: 0 0 16px; padding: 0 0 0 18px; font: 300 14px/1.6 var(--vt-body); color: var(--vt-sand); }
.vt-dialog-points li + li { margin-top: 4px; }
.vt-dialog-scope { margin: 0 0 18px; padding: 10px 12px; border: 1px solid var(--vt-line); background: rgba(18, 13, 10, 0.6); }
.vt-dialog-scope-title { font: 600 10.5px/1.4 var(--vt-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--vt-ember); }
.vt-dialog-scope-list { margin: 6px 0 0; padding: 0; list-style: none; max-height: 150px; overflow: auto; }
.vt-dialog-scope-list li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 1px dashed rgba(140, 122, 102, 0.25); font: 400 13px/1.4 var(--vt-body); }
.vt-dialog-scope-list li:first-child { border-top: 0; }
.vt-dialog-scope-svc { font: 500 11px/1.4 var(--vt-mono); color: var(--vt-sand); white-space: nowrap; }
.vt-dialog-scope-none { margin: 6px 0 0; font: 300 13px/1.5 var(--vt-body); color: var(--vt-sand); }
.vt-dialog-check { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; cursor: pointer; font: 600 14px/1.45 var(--vt-body); color: var(--vt-bone); }
.vt-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.vt-dialog-confirm { background: var(--vt-rust); border-color: var(--vt-rust); color: var(--vt-bone); }
.vt-dialog-confirm:hover:not(:disabled) { background: var(--vt-ember); border-color: var(--vt-ember); color: var(--vt-ink); }
.vt-dialog-confirm:disabled { background: transparent; color: var(--vt-dust); border-color: var(--vt-line-strong); opacity: 1; }

/* ── Connections ── */
.vc-root { max-width: 1100px; font-family: var(--vt-body); color: var(--vt-bone); }
.vc-head { margin-bottom: 14px; }
.vc-title { margin: 0; font: 700 36px/1 var(--vt-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--vt-bone); }
.vc-shared { margin: 8px 0 0; font: 400 14px/1.5 var(--vt-body); color: var(--vt-sand); }
.vc-families { display: grid; gap: 0; margin: 0 0 18px; border: 1px solid var(--vt-line-brass); border-left: 3px solid var(--vt-brass); background: rgba(18, 13, 10, 0.55); }
.vc-family { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px 14px; padding: 12px 14px; }
.vc-family + .vc-family { border-top: 1px solid var(--vt-line); }
.vc-family .vc-msg { grid-column: 2 / -1; }
.vc-covers { margin-top: 3px; font: 400 12px/1.45 var(--vt-body); color: var(--vt-sand); }
.vc-filters { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; background: var(--vt-ink); border-bottom: 1px solid var(--vt-line); }
.vc-search-wrap { flex: 1 1 240px; }
.vc-search {
    width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--vt-line-strong); border-radius: 0;
    background: rgba(18, 13, 10, 0.7); color: var(--vt-bone); font: 400 14px/1.3 var(--vt-body);
}
.vc-search:focus { outline: none; border-color: var(--vt-brass); }
.vc-search::placeholder { color: var(--vt-dust); }
.vc-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--vt-brass); }
.vc-seg-btn { min-height: 34px; border: 0; border-radius: 0; }
.vc-seg-btn + .vc-seg-btn { border-left: 1px solid var(--vt-line-brass); }
.vc-seg-btn[aria-pressed="true"], .vc-seg-btn[aria-pressed="true"]:hover:not(:disabled) { background: var(--vt-brass); color: var(--vt-ink); }
.vc-group { margin-top: 22px; }
.vc-group[hidden], .vc-row[hidden] { display: none; }
.vc-group-title { margin: 0 0 4px; font: 700 22px/1.1 var(--vt-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--vt-brass); }
.vc-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--vt-line-strong); }
.vc-row { border-bottom: 1px solid var(--vt-line); }
.vc-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px 14px; padding: 10px 2px; }
.vc-main { min-width: 0; }
.vc-name { font: 600 14px/1.3 var(--vt-body); color: var(--vt-bone); overflow-wrap: anywhere; }
.vc-desc { margin-top: 2px; font: 300 12.5px/1.45 var(--vt-body); color: var(--vt-sand); overflow-wrap: anywhere; }
.vc-status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: 500 10.5px/1.3 var(--vt-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vt-dust); }
.vc-pip { width: 8px; height: 8px; border: 1px solid var(--vt-dust); flex: none; }
.vc-st-ok { color: var(--vt-brass-hi); }
.vc-st-ok .vc-pip { background: var(--vt-brass); border-color: var(--vt-brass); }
.vc-st-attention { padding: 2px 7px; border: 1px solid var(--vt-rust); color: var(--vt-ember); }
.vc-st-attention .vc-pip { background: var(--vt-ember); border-color: var(--vt-ember); }
.vc-st-none .vc-pip, .vc-st-elsewhere .vc-pip { border-style: dashed; }
.vc-row[data-status="ok"] .vt-mono, .vc-family[data-status="ok"] .vt-mono { border-color: var(--vt-brass); color: var(--vt-brass); }
.vc-row[data-status="attention"] .vt-mono, .vc-family[data-status="attention"] .vt-mono { border-color: var(--vt-rust); color: var(--vt-ember); }
.vc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.vc-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-width: 520px; }
.vc-confirm-text { flex: 1 1 240px; font: 400 13px/1.45 var(--vt-body); color: var(--vt-bone); text-align: left; }
.vc-edit { padding: 4px 2px 16px 46px; }
.vc-edit[hidden] { display: none; }
.vc-form { display: grid; gap: 10px; max-width: 560px; }
.vc-label { display: block; margin-bottom: 4px; font: 500 10.5px/1.3 var(--vt-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vt-dust); }
.vc-field-help { margin: 0 0 4px; font: 300 12px/1.45 var(--vt-body); color: var(--vt-sand); }
.vc-help { justify-self: start; font: 500 12px/1.4 var(--vt-mono); color: var(--vt-brass); }
.vc-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vc-msg { margin: 0 2px 10px 46px; padding: 6px 10px; border-left: 2px solid var(--vt-line-strong); font: 400 12.5px/1.45 var(--vt-body); color: var(--vt-sand); }
.vc-msg[hidden] { display: none; }
.vc-msg[data-kind="success"] { border-left-color: var(--vt-brass); color: var(--vt-brass-hi); }
.vc-msg[data-kind="error"] { border-left-color: var(--vt-rust); color: #f08a6a; }
.vc-empty { margin-top: 18px; }
.vc-only { margin-top: 4px; font: 500 10.5px/1.4 var(--vt-mono); letter-spacing: 0.08em; color: var(--vt-dust); }
.vt-not-available { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--vt-line); }

@media (max-width: 760px) {
    .vc-line, .vc-family { grid-template-columns: auto minmax(0, 1fr); }
    .vc-line .vc-status, .vc-family .vc-status { grid-column: 2; justify-self: start; }
    .vc-line .vc-actions, .vc-family .vc-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .vc-edit, .vc-msg { padding-left: 0; margin-left: 0; }
    .vc-title { font-size: 30px; }
    .vt-ops { padding-left: 0; }
    .vt-dialog { padding: 20px 18px 18px; }
    .vt-dialog-title { font-size: 28px; }
    .vt-dialog-actions .vt-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .vt-btn, .vt-switch-track, .vt-switch-track::after { transition: none; }
}