/* Vilkax · /app/ "Your protection" card + the inline-SVG quick-action icons.
 * Loaded by apps/web/app/index.html after app.css. Tokens only (no raw hex):
 * the /app/* CSP is style-src 'self', so styling lives here, not inline. */

.app-plan-tier { display: inline-flex; gap: 6px; align-items: baseline; }
.app-plan-name { color: var(--vx-text); font-weight: 600; }

.app-plan-coverage { margin: 4px 0 6px; color: var(--vx-text); line-height: 1.5; }
.app-plan-dim { color: var(--vx-text-muted); }
.app-plan-link { display: inline-block; margin-bottom: 14px; color: var(--vx-mint); font-size: 14px; }
.app-plan-link:focus-visible,
.app-plan-chip:focus-visible { outline: 3px solid var(--vx-blue-ln); outline-offset: 2px; border-radius: var(--vx-radius-sm); }

.app-plan-h3 {
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vx-text-muted);
}

.app-plan-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.app-plan-chip {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--vx-mint-ln);
  border-radius: 999px;
  background: var(--vx-mint-sf);
  color: var(--vx-text);
  font-size: 13px;
  text-decoration: none;
}
.app-plan-chip:hover { border-color: var(--vx-mint); }

.app-plan-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.app-plan-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius-sm);
  background: var(--vx-surface-1);
  font-size: 14px;
}
.app-plan-row-name { color: var(--vx-text); }
.app-plan-row-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--vx-line-2);
  color: var(--vx-text-muted);
}
.app-plan-row[data-state="included"] .app-plan-row-badge { border-color: var(--vx-sev-safe-ln); background: var(--vx-sev-safe-sf); color: var(--vx-sev-safe); }
.app-plan-row[data-state="locked"] .app-plan-row-name { color: var(--vx-text-muted); }
.app-plan-row[data-state="paused"] .app-plan-row-badge,
.app-plan-row[data-state="paused_you"] .app-plan-row-badge { border-color: var(--vx-sev-elevated-ln); background: var(--vx-sev-elevated-sf); color: var(--vx-sev-elevated); }

.app-plan-tastes { margin: 12px 0 0; padding: 0; list-style: none; color: var(--vx-text); font-size: 14px; }
.app-plan-tastes li { padding: 8px 10px; border-radius: var(--vx-radius-sm); background: var(--vx-blue-sf); border: 1px solid var(--vx-blue-ln); }
.app-plan-tastes li + li { margin-top: 6px; }
.app-plan-tastes[hidden] { display: none; }

.app-plan-cta { margin-top: 14px; display: inline-block; }
.app-plan-cta[hidden] { display: none; }

/* Quick-action tiles that carry an inline SVG (stroke = currentColor). */
.app-quick-ic-svg { display: inline-flex; color: var(--vx-mint); }
.app-quick-ic-svg svg { width: 22px; height: 22px; }

@media (max-width: 480px) {
  .app-plan-row { flex-direction: column; align-items: flex-start; }
}

/* Billing state (trial / payment problem / ending). Calm, never red: nothing
   is lost yet, and the line says exactly what happens next. */
.app-plan-billing { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--vx-radius-sm); font-size: 14px; color: var(--vx-text); background: var(--vx-blue-sf); border: 1px solid var(--vx-blue-ln); }
.app-plan-billing[data-tone="attention"] { background: var(--vx-sev-elevated-sf); border-color: var(--vx-sev-elevated-ln); }
.app-plan-billing a { color: inherit; font-weight: 600; text-decoration: underline; margin-inline-start: 6px; }
.app-plan-billing[hidden] { display: none; }