/* Virtual.Support design system component styles (copied from the design system; keep in sync). */
/* Virtual.Support Design System — component styles. Tokens come from tokens.css. */
:root, [data-theme] { --accent: var(--brand); --accent-soft: var(--brand-soft); --focus: var(--brand); }
[data-product="support"] { --accent: var(--brand); --accent-soft: var(--brand-soft); }
[data-product="email"] { --accent: var(--email); --accent-soft: var(--email-soft); }
[data-product="phone"], [data-product="fax"] { --accent: var(--phone); --accent-soft: var(--phone-soft); }
[data-product="sms"] { --accent: var(--sms); --accent-soft: var(--sms-soft); }
[data-product="security"], [data-product="ssl"] { --accent: var(--security); --accent-soft: var(--security-soft); }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.vs-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.vs-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vs-icon { flex: none; display: inline-block; vertical-align: middle; }
a { color: var(--brand); }
:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Button */
.vs-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: 500 14px/20px var(--font-sans); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.vs-btn-sm { height: 32px; padding: 0 var(--space-3); }
.vs-btn-lg { height: 48px; padding: 0 var(--space-5); font-size: 16px; }
.vs-btn-block { display: flex; width: 100%; }
.vs-btn-primary { background: var(--brand); color: var(--on-brand); }
.vs-btn-primary:hover { box-shadow: inset 0 0 0 100px rgba(0,0,0,0.12); }
[data-theme="dark"] .vs-btn-primary:hover { box-shadow: inset 0 0 0 100px rgba(255,255,255,0.14); }
.vs-btn-secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.vs-btn-secondary:hover { background: var(--surface-sunken); }
.vs-btn-quiet { background: transparent; color: var(--brand); }
.vs-btn-quiet:hover { background: var(--brand-soft); }
.vs-btn-danger { background: var(--danger); color: var(--on-danger); }
.vs-btn[disabled], .vs-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Status */
.vs-status { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 12px/16px var(--font-sans); color: var(--ink); }
.vs-status-pill { padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: var(--radius-pill); }
.vs-status-glyph { width: 10px; height: 10px; flex: none; }
.vs-status-operational { --tone: var(--success); --tone-soft: var(--success-soft); }
.vs-status-degraded, .vs-status-pending-action { --tone: var(--warning); --tone-soft: var(--warning-soft); }
.vs-status-outage { --tone: var(--danger); --tone-soft: var(--danger-soft); }
.vs-status-maintenance { --tone: var(--brand); --tone-soft: var(--brand-soft); }
.vs-status-pending { --tone: var(--ink-muted); --tone-soft: var(--surface-sunken); }
.vs-status .vs-status-glyph { fill: var(--tone); stroke: var(--tone); }
.vs-status-pill { background: var(--tone-soft); color: var(--tone); }

/* Card */
.vs-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
@media (min-width: 600px) { .vs-card { padding: var(--space-5); } }
.vs-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.vs-eyebrow { font: 500 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-1); }
.vs-card-title { font: 600 18px/26px var(--font-sans); margin: 0; }
.vs-card-desc { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.vs-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }

/* Lockup */
.vs-lockup { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--ink); line-height: 1; }
.vs-lockup-word { font: 600 20px/24px var(--font-sans); letter-spacing: -.01em; white-space: nowrap; }
.vs-lockup-dot { color: var(--accent); }
.vs-lockup-by { font: 500 11px/14px var(--font-sans); color: var(--ink-muted); margin-top: 2px; }

/* Service tile */
.vs-tile { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; transition: box-shadow .15s, border-color .15s; min-width: 0; }
.vs-tile:hover { box-shadow: var(--shadow-2); border-color: var(--accent); }
.vs-tile-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.vs-tile-well { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.vs-tile-name { font: 600 18px/26px var(--font-sans); margin: 0; }
.vs-tile-name .vs-lockup-dot { color: var(--accent); }
.vs-tile-desc { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.vs-tile-meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); display: flex; justify-content: space-between; gap: var(--space-2); border-top: 1px solid var(--line); padding-top: var(--space-3); margin-top: auto; }
.vs-tile-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vs-tile-link { color: inherit; text-decoration: none; }

/* Pricing */
.vs-price { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); min-width: 0; }
.vs-price-featured { border: 2px solid var(--brand); box-shadow: var(--shadow-2); }
.vs-price-badge { align-self: flex-start; font: 500 12px/16px var(--font-sans); background: var(--brand-soft); color: var(--brand); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); }
.vs-price-name { font: 600 18px/26px var(--font-sans); margin: 0; }
.vs-price-desc { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.vs-price-amount { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.vs-price-num { font: 600 44px/48px var(--font-sans); letter-spacing: -.02em; }
.vs-price-unit { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.vs-price-features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 14px; line-height: 20px; }
.vs-price-features li { display: flex; gap: var(--space-2); align-items: flex-start; }
.vs-price-features .vs-icon { color: var(--success); margin-top: 1px; }
.vs-price .vs-btn { margin-top: auto; }

/* Top nav */
.vs-nav { background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.vs-nav-bar { display: flex; align-items: center; gap: var(--space-4); height: 64px; padding: 0 var(--space-4); max-width: 1200px; margin: 0 auto; }
@media (min-width: 900px) { .vs-nav-bar { padding: 0 var(--space-5); } }
.vs-nav-links { display: none; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.vs-nav-links a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font: 500 14px/20px var(--font-sans); }
.vs-nav-links a:hover { background: var(--surface-sunken); }
.vs-nav-links a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.vs-nav-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.vs-nav-cta { display: none; }
.vs-nav-menu { display: inline-flex; }
@media (min-width: 900px) { .vs-nav-links { display: flex; } .vs-nav-menu { display: none; } .vs-nav-cta { display: inline-flex; } }
.vs-nav-panel { border-top: 1px solid var(--line); padding: var(--space-3) var(--space-4) var(--space-4); display: grid; gap: var(--space-1); }
.vs-nav-panel a { padding: var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font: 500 16px/24px var(--font-sans); }
.vs-nav-panel a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
@media (min-width: 900px) { .vs-nav-panel { display: none; } }
.vs-iconbtn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.vs-iconbtn:hover { background: var(--surface-sunken); }

/* Dashboard shell */
.vs-shell { display: grid; grid-template-columns: 1fr; min-height: 100%; background: var(--surface); }
.vs-side { background: var(--surface-sunken); border-bottom: 1px solid var(--line); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.vs-side-nav { display: flex; gap: var(--space-1); overflow-x: auto; margin: 0; padding: 0; list-style: none; }
.vs-side-nav a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font: 500 14px/20px var(--font-sans); white-space: nowrap; }
.vs-side-nav a:hover { background: var(--surface-raised); }
.vs-side-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
.vs-side-nav .vs-icon { color: var(--ink-muted); }
.vs-side-nav a[aria-current="page"] .vs-icon { color: var(--brand); }
.vs-side-count { margin-left: auto; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.vs-side-group { font: 500 12px/16px var(--font-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); padding: var(--space-3) var(--space-3) var(--space-1); display: none; }
.vs-main { padding: var(--space-4); display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.vs-main-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.vs-main-title { font: 600 24px/32px var(--font-sans); margin: 0; }
@media (min-width: 900px) {
  .vs-shell { grid-template-columns: 248px 1fr; }
  .vs-side { border-bottom: 0; border-right: 1px solid var(--line); padding: var(--space-5) var(--space-3); }
  .vs-side-nav { flex-direction: column; overflow: visible; }
  .vs-side-group { display: block; }
  .vs-main { padding: var(--space-6); }
  .vs-main-title { font-size: 32px; line-height: 40px; }
}

/* Usage meter */
.vs-meter { display: grid; gap: var(--space-2); min-width: 0; }
.vs-meter-row { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 14px; line-height: 20px; }
.vs-meter-label { font-weight: 500; }
.vs-meter-val { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.vs-meter-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.vs-meter-fill { height: 100%; border-radius: inherit; background: var(--accent); }
.vs-meter-warn .vs-meter-fill { background: var(--warning); }
.vs-meter-full .vs-meter-fill { background: var(--danger); }
.vs-meter-note { font-size: 12px; line-height: 16px; font-weight: 500; }
.vs-meter-warn .vs-meter-note { color: var(--warning); }
.vs-meter-full .vs-meter-note { color: var(--danger); }

/* Notice */
.vs-notice { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--tone-soft); color: var(--ink); border: 1px solid var(--tone); }
.vs-notice > .vs-icon { color: var(--tone); margin-top: 2px; }
.vs-notice-info { --tone: var(--brand); --tone-soft: var(--brand-soft); }
.vs-notice-success { --tone: var(--success); --tone-soft: var(--success-soft); }
.vs-notice-warning { --tone: var(--warning); --tone-soft: var(--warning-soft); }
.vs-notice-danger { --tone: var(--danger); --tone-soft: var(--danger-soft); }
.vs-notice-body { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; }
.vs-notice-title { font-weight: 600; margin: 0 0 2px; font-size: 14px; line-height: 20px; }
.vs-notice-body p { margin: 0; }
.vs-notice-action { margin-top: var(--space-2); }

/* Support */
.vs-support { display: grid; gap: var(--space-4); }
.vs-search { display: flex; align-items: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink-muted); }
.vs-search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.vs-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 16px/24px var(--font-sans); color: var(--ink); outline: none; }
.vs-search input::placeholder { color: var(--ink-muted); }
.vs-support-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.vs-support-item { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-raised); }
.vs-support-item:hover { border-color: var(--brand); }
.vs-support-item .vs-tile-well { width: 36px; height: 36px; background: var(--brand-soft); color: var(--brand); flex: none; }
.vs-support-item a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; }
.vs-support-item a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vs-support-item p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.vs-support-meta { margin-left: auto; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; }

/* Form fields */
.vs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vs-field-label { font: 500 14px/20px var(--font-sans); color: var(--ink); padding: 0; }
.vs-field-opt { font-weight: 400; color: var(--ink-muted); }
.vs-field-hint { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.vs-field-error { margin: 0; display: flex; gap: var(--space-1); align-items: flex-start; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--danger); }
.vs-field-error .vs-icon { margin-top: 2px; }
.vs-input { width: 100%; min-width: 0; height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 400 16px/24px var(--font-sans); box-sizing: border-box; }
textarea.vs-input { height: auto; min-height: 96px; padding: 10px var(--space-3); resize: vertical; }
.vs-input::placeholder { color: var(--ink-muted); }
.vs-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vs-input:disabled { background: var(--surface-sunken); color: var(--ink-muted); cursor: not-allowed; }
.vs-field-invalid .vs-input { border: 2px solid var(--danger); padding-left: 11px; }
.vs-input-group { display: flex; align-items: stretch; }
.vs-input-group .vs-input { flex: 1; border-radius: 0; }
.vs-input-group > :first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.vs-input-group > :last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.vs-input-addon { display: flex; align-items: center; padding: 0 var(--space-3); background: var(--surface-sunken); border: 1px solid var(--line-strong); color: var(--ink-muted); font: 400 14px/20px var(--font-mono); white-space: nowrap; }
.vs-input-addon:first-child { border-right: 0; }
.vs-input-addon:last-child { border-left: 0; }
.vs-select { position: relative; }
.vs-select select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.vs-select-caret { position: absolute; right: 12px; top: 14px; pointer-events: none; color: var(--ink-muted); }
.vs-choices { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.vs-choices-items { display: flex; flex-direction: column; gap: var(--space-3); }
.vs-choices-card .vs-choices-items { display: grid; gap: var(--space-3); }
.vs-choice, .vs-check { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; font-size: 16px; line-height: 24px; color: var(--ink); }
.vs-choice input, .vs-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--brand); cursor: pointer; }
.vs-choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vs-choice-label { font-weight: 500; }
.vs-choice-desc { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.vs-choice-meta { font-size: 14px; line-height: 20px; font-weight: 600; margin-top: var(--space-1); }
.vs-choices-card .vs-choice { padding: 15px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); transition: border-color .15s, background-color .15s; }
.vs-choices-card .vs-choice:hover { border-color: var(--brand); }
.vs-choices-card .vs-choice-on { padding: 14px; border: 2px solid var(--brand); background: var(--brand-soft); }
.vs-choice-disabled { opacity: .5; cursor: not-allowed; }