/* HaZix support (Settings > HaZix support: public/js/admin/support-access.js; the bar: support-bar.js). Tokens from admin.css, logical properties (RTL-safe), light + dark through the tokens, phone first at 375 px. */
.sup-page { display: grid; gap: 16px; align-content: start; }
.sup-card { padding: 16px; display: grid; gap: 12px; min-inline-size: 0; }
.sup-card > .card-head { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sup-card h3, .sup-card h4 { margin: 0; }
.sup-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sup-text { display: grid; gap: 2px; min-inline-size: 0; }
.sup-facts { display: grid; gap: 6px; margin: 0; }
.sup-fact { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding-block-end: 6px; border-block-end: 1px solid var(--line-2, var(--line)); font-size: 14px; }
.sup-fact dt { color: var(--muted); }
.sup-fact dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.sup-form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
.sup-form .field { min-inline-size: 0; }
.sup-form select { inline-size: 100%; min-block-size: 44px; }
.sup-check { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.sup-check input { margin-block-start: 4px; inline-size: 18px; block-size: 18px; accent-color: var(--accent); flex: none; }
.sup-check span { display: grid; gap: 2px; }
.sup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sup-pending { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.sup-active { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.sup-idle { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2, var(--panel)); color: var(--muted); font-weight: 650; }
.sup-sub { display: block; }
@media (max-width: 600px) {
  .sup-card { padding: 12px; }
  .sup-actions .btn { flex: 1 1 100%; min-block-size: 44px; }
}

/* the bar while HaZix support is signed in: info colours, not red (the licence bar's classes, public/css/license.css) */
.lic-support { background: var(--info-soft); color: var(--ink); border-color: color-mix(in srgb, var(--info) 40%, var(--line)); }
.lic-support > .ico:first-child { color: var(--info-ink, var(--info)); }