/* Shared product palette and appearance control. Loaded after each page stylesheet. */
:root {
  color-scheme: light;
  --ink: #1c2a22;
  --muted: #5e7065;
  --line: #d8e4dc;
  --canvas: #f5f8f5;
  --surface: #fff;
  --surface-raised: rgba(255, 255, 255, .91);
  --surface-subtle: #f8fbf9;
  --field: #fff;
  --field-line: #bacfc0;
  --accent: #176b49;
  --accent-dark: #0e5136;
  --accent-soft: #e5f4eb;
  --savings: #176b49;
  --button-bg: #176b49;
  --button-hover: #0e5136;
  --neutral-soft: #edf2ee;
  --danger: #a33434;
  --danger-soft: #faeaea;
  --warning: #8a6715;
  --glow-top: rgba(226, 242, 233, .72);
  --glow-bottom: rgba(218, 237, 227, .5);
  --shadow: rgba(35, 63, 50, .08);
  --focus: rgba(23, 107, 73, .28);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ebf1fa;
  --muted: #acbbce;
  --line: #34445b;
  --canvas: #0e1726;
  --surface: #1a293d;
  --surface-raised: rgba(26, 41, 61, .94);
  --surface-subtle: #1e3047;
  --field: #142238;
  --field-line: #50647e;
  --accent: #91beff;
  --accent-dark: #c3dcff;
  --accent-soft: #253c5a;
  --savings: #76dba7;
  --button-bg: #316ab8;
  --button-hover: #3d7bcc;
  --neutral-soft: #2a3b52;
  --danger: #d9b9bd;
  --danger-soft: #423640;
  --warning: #e6c37d;
  --glow-top: rgba(49, 97, 166, .22);
  --glow-bottom: rgba(33, 72, 133, .2);
  --shadow: rgba(0, 0, 0, .24);
  --focus: rgba(145, 190, 255, .5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ink: #ebf1fa;
    --muted: #acbbce;
    --line: #34445b;
    --canvas: #0e1726;
    --surface: #1a293d;
    --surface-raised: rgba(26, 41, 61, .94);
    --surface-subtle: #1e3047;
    --field: #142238;
    --field-line: #50647e;
    --accent: #91beff;
    --accent-dark: #c3dcff;
    --accent-soft: #253c5a;
    --savings: #76dba7;
    --button-bg: #316ab8;
    --button-hover: #3d7bcc;
    --neutral-soft: #2a3b52;
    --danger: #d9b9bd;
    --danger-soft: #423640;
    --warning: #e6c37d;
    --glow-top: rgba(49, 97, 166, .22);
    --glow-bottom: rgba(33, 72, 133, .2);
    --shadow: rgba(0, 0, 0, .24);
    --focus: rgba(145, 190, 255, .5);
  }
}

body.login-page,
body.portal-page,
body.session-action-page {
  background:
    radial-gradient(circle at 8% 5%, var(--glow-top), transparent 35%),
    radial-gradient(circle at 92% 95%, var(--glow-bottom), transparent 30%),
    var(--canvas);
}

.theme-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 2px 9px;
  color: var(--muted);
  font-size: .79rem;
  font-weight: 650;
  white-space: nowrap;
}

.theme-choice {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--ink);
  background: transparent;
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}

.theme-choice:hover { color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.theme-choice[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--field-line); }
.theme-choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.login-card-footer { display: flex; justify-content: center; margin-top: 24px; }
.hero-actions { display: flex; align-items: flex-end; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.portal-actions { display: flex; align-items: flex-end; flex-direction: column; gap: 10px; }
.portal-action-buttons { display: flex; align-items: center; gap: 10px; }
.portal-action-buttons > :is(a, form),
.portal-action-buttons .logout-button { white-space: nowrap; }
.portal-action-buttons > form { display: flex; }

/* Consistent surfaces and restrained shadows across portal, account and cockpit. */
.login-card,
.session-action-card,
.account-section,
.section-nav {
  border-color: var(--line);
  background: var(--surface-raised);
  box-shadow: 0 16px 42px var(--shadow);
}

/* The catalog needs cards, not a large empty panel when only one app exists. */
.apps-section,
.packages-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Subscriptions are already grouped by their individual cards; avoid a card inside a card. */
.account-section:not(.account-billing-section) {
  margin-top: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.account-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 42px 0 18px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.account-divider::before,
.account-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.account-divider span { white-space: nowrap; }

.packages-section { margin-top: 42px; }
.packages-section .section-heading { margin-bottom: 18px; }
.portal-header { margin-bottom: 34px; }

/* Keep the customer heading aligned with the application card edge and remove the
   oversized directional mark from the portal header. The small monogram is
   retained on login and confirmation pages where it provides context. */
.portal-header .portal-brand {
  gap: 0;
  padding-left: 0;
}

.portal-header .portal-brand .brand-mark {
  display: none;
}

.app-card,
.package-card,
.account-subscription-card,
.metric,
.panel,
.user-access,
.offer-apps {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 7px 22px var(--shadow);
}

.app-card:hover { border-color: var(--field-line); box-shadow: 0 12px 28px var(--shadow); }
.portal-notice { border-color: var(--line); background: var(--surface-raised); }
.portal-notice.success,
.notice.success,
.billing-ready { border-color: var(--line); color: var(--accent); background: var(--accent-soft); }
.portal-notice.error,
.form-error,
.notice.error,
.badge.invalid { color: var(--danger); background: var(--danger-soft); }
.availability.unavailable,
.badge:not(.ready):not(.published):not(.invalid) { color: var(--muted); background: var(--neutral-soft); }
:root[data-theme="dark"] .availability span { background: var(--accent); }
:root[data-theme="dark"] .availability.unavailable span { background: var(--muted); }
.section-nav a { color: var(--ink); }
.user-access summary,
.offer-form,
.billing-waiting,
.offer-apps .check-row,
.app-card { background: var(--surface-subtle); }
.user-access summary:hover,
.offer-apps .check-row:hover { background: var(--accent-soft); }
.app-access-list,
.app-access-row + .app-access-row { border-color: var(--line); }
.temporary-chip { color: var(--accent); }
.grant-dialog { background: var(--surface); box-shadow: 0 24px 80px var(--shadow); }
.dialog-close { background: var(--neutral-soft); }

.field input,
.user-form input,
.user-actions input,
.password-change input,
.grant-dialog input,
.offer-form input:not([type=checkbox]):not([type=hidden]),
.offer-form select {
  border-color: var(--field-line);
  color: var(--ink);
  background: var(--field);
}

.field input::placeholder,
.user-form input::placeholder,
.offer-form input::placeholder { color: var(--muted); opacity: .8; }
.offer-apps .check-row { border-color: var(--line); }
.billing-waiting { border-color: var(--field-line); }
.price-summary s { color: var(--muted); }
.subscription-status.ending { color: var(--warning); }
.subscription-end-link { color: var(--muted); text-decoration-color: var(--field-line); }
.subscription-end-link:hover { color: var(--danger); }
.subscription-resume-button { border-color: var(--field-line); color: var(--accent); background: var(--surface); }
.subscription-resume-button:hover { background: var(--accent-soft); }

.open-app,
.login-submit,
.button:not(.secondary):not(.danger) { background: var(--button-bg); color: #fff; }
.open-app:hover,
.login-submit:hover,
.button:not(.secondary):not(.danger):hover { background: var(--button-hover); }
.logout-button,
.account-button,
.account-secondary-button,
.device-revoke-all-link,
.button.secondary,
.button.danger { border-color: var(--field-line); color: var(--accent); background: var(--surface); }
.device-revoke-all-link { border-color: var(--danger); color: var(--danger); }
.button.danger { color: var(--danger); }
.logout-button:hover,
.account-button:hover,
.account-secondary-button:hover,
.button.secondary:hover { background: var(--accent-soft); }
.device-revoke-all-link:hover { color: #fff; background: var(--danger); }
.danger-button { background: #a63c2c; }

:is(.logout-button, .account-button, .open-app, .subscription-end-link, .subscription-resume-button, .account-secondary-button, .danger-button, .login-submit, .field input, .button, .user-access summary):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  .catalog-shell .app-grid { grid-template-columns: repeat(2, minmax(0, 390px)); max-width: 798px; }
}

@media (max-width: 920px) {
  .catalog-shell .app-grid { grid-template-columns: 1fr; max-width: 390px; }
}

@media (max-width: 700px) {
  .hero-actions { width: 100%; justify-content: space-between; }
  .hero-actions .button { width: auto; }
  .section-nav { flex-wrap: wrap; overflow: visible; }
}

@media (max-width: 620px) {
  .portal-header { flex-wrap: wrap; }
  .portal-actions { width: 100%; align-items: flex-end; }
  .portal-action-buttons { width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 8px; }
  .portal-action-buttons > :is(a, form),
  .portal-action-buttons .logout-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* The brand is a scalable icon, including on app-host action pages. */
:is(.brand-mark, .login-card-mark) .application-icon { display: block; width: 100%; height: 100%; flex: none; }