/* App-specific rules only. Colors, fonts, radii, and shadows come from triarc-design tokens. */
.wrap { max-width: var(--wrap-max, 1200px); margin: 0 auto; }
.hidden { display: none !important; }

body { background: var(--bg); padding: 28px 24px 40px; }
.help { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 400; margin: 0 0 6px; }
.people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 4px 3px 10px; }
.chip.me { padding-right: 10px; }
.chip button { border: 0; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
.steps { display: flex; gap: 6px; font-size: 12px; }
.step { flex: 1; border-top: 3px solid var(--border); padding-top: 6px; color: var(--text-faint); }
.step.done { border-color: var(--ok); color: var(--ok); }
.step.now { border-color: var(--info); color: var(--info); font-weight: 600; }
.spacer { flex: 1; }

/* Cards. Tone and grid width are set here, not inline, because the CSP has no 'unsafe-inline'. */
#mine .card-grid, #shared .card-grid { --card-min: 340px; }
.card[data-tone="ok"] { --card-edge: var(--ok); }
.card[data-tone="info"] { --card-edge: var(--info); }
.card[data-tone="warn"] { --card-edge: var(--warn); }
.card[data-tone="error"] { --card-edge: var(--error); }
.card[data-tone="neutral"] { --card-edge: var(--neutral); }
#mockBanner { background: var(--hl); color: var(--text); border-radius: var(--radius-ctl); padding: 8px 12px; font-size: 13px; margin-bottom: 18px; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--surface); border: 1px solid var(--border-strong); border-left: 4px solid var(--info); border-radius: var(--radius-ctl); box-shadow: var(--shadow-modal); padding: 10px 14px; font-size: 14px; }
.toast[data-tone="error"] { border-left-color: var(--error); }
.toast[data-tone="ok"] { border-left-color: var(--ok); }
#usedCount { font-size: 13px; color: var(--text-muted); }
.signin-btn { font: inherit; }
.share { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.share input { min-width: 220px; }

/* Delete dialog */
.stack { display: flex; flex-direction: column; gap: 8px; }
.choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border-strong); border-radius: var(--radius-ctl); padding: 10px 12px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: var(--focus-ring); }
.choice.off { opacity: .55; cursor: not-allowed; }
.choice b { display: block; font-size: 14px; }
.choice small { color: var(--text-faint); font-size: 12px; }
.callout { background: var(--info-bg); color: var(--info); border-radius: var(--radius-ctl); padding: 8px 10px; font-size: 13px; }
.callout.warn { background: var(--warn-bg); color: var(--warn); }
.callout[hidden] { display: none; }

/* New VM dialog */
.choice .right { margin-left: auto; text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }
#createDialog .modal-body { display: flex; flex-direction: column; gap: 10px; max-height: 90vh; overflow-y: auto; }
#createDialog .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#createDialog .note { font-size: 13px; color: var(--warn); }
#createDialog .note[hidden], #createDialog [data-release][hidden] { display: none; }
.form-error { color: var(--error); font-size: 13px; }
.form-error:empty { display: none; }

/* Rebuild dialog */
#rebuildDialog .modal-body { display: flex; flex-direction: column; gap: 10px; max-height: 90vh; overflow-y: auto; }
#rebuildDialog .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#rebuildDialog .note { font-size: 13px; color: var(--warn); }
#rebuildDialog .note[hidden] { display: none; }
#rebuildDialog .modal-hint { margin: 0; color: var(--text-faint); font-size: 13px; }
#rebuildDialog .seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--border-strong); border-radius: var(--radius-ctl); overflow: hidden; }
#rebuildDialog .seg button { border: 0; background: transparent; color: var(--text); padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
#rebuildDialog .seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent, #fff); }
#rebuildDialog .table th, #rebuildDialog .table td { padding: 8px 10px; white-space: nowrap; }
#rebuildDialog .table td b { display: block; font-size: 14px; }
#rebuildDialog .table small { color: var(--text-faint); font-size: 12px; }
#rebuildDialog .table tr.off { opacity: .55; }
#rebuildDialog .table-wrap { overflow-x: auto; max-width: 100%; }
#rebuildDialog { max-width: min(640px, calc(100% - 32px)); width: 640px; }
#rebuildDialog tbody tr:not(.off) { cursor: pointer; }