/* Public catalog palette: a single restrained navy/slate system from page to footer. */
body[data-guide] .app-page-shell {
  --apps-page: #0d1725;
  --apps-surface: #152438;
  --apps-surface-raised: #1a2b3f;
  --apps-surface-hover: #20354b;
  --apps-text: #f1f5f9;
  --apps-muted: #a9b8c9;
  --apps-border: rgba(148, 163, 184, 0.24);
  --apps-border-active: rgba(125, 211, 252, 0.4);
  position: relative;
  z-index: 1;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--apps-page);
}

@media (min-width: 981px) {
  body[data-guide] .guide-layout[data-step-id^="apps."] .guide-sidebar {
    margin-right: -14px;
    margin-left: -14px;
    padding: 10px 14px;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(26, 43, 63, 0.97), rgba(13, 23, 37, 0.95));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 14px 30px rgba(2, 6, 23, 0.32);
    backdrop-filter: blur(14px) saturate(120%);
  }
}

body[data-guide] .app-page-shell .home-apps-section {
  background:
    radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.07), transparent 36rem),
    var(--apps-page);
}

body[data-guide] .app-page-shell .home-app-row,
body[data-guide] .app-page-shell .home-app-store-showcase {
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--apps-border);
  border-radius: 18px;
  background: var(--apps-surface);
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.2);
}

body[data-guide] .app-page-shell .home-app-row-title h3,
body[data-guide] .app-page-shell .home-app-store-showcase h3 {
  color: var(--apps-text);
}

body[data-guide] .app-page-shell .home-app-store-showcase h3 {
  margin-left: 0;
  color: #c9e8f7;
}

body[data-guide] .app-page-shell .home-installed-apps {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

body[data-guide] .app-page-shell .home-installed-app-card {
  border-color: var(--apps-border);
  background: var(--apps-surface-raised);
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.16);
}

body[data-guide] .app-page-shell .home-installed-app-card:hover,
body[data-guide] .app-page-shell .home-installed-app-card:focus-visible {
  border-color: var(--apps-border-active);
  background: var(--apps-surface-hover);
}

body[data-guide] .app-page-shell .home-installed-app-copy strong {
  color: var(--apps-text);
}

body[data-guide] .app-page-shell .home-installed-app-copy > span {
  color: var(--apps-muted);
}

body[data-guide] .app-page-shell .home-app-tile {
  border-color: var(--apps-border);
  background: #18283b;
}

body[data-guide] .app-page-shell .home-app-tile:hover,
body[data-guide] .app-page-shell .home-app-tile:focus-visible {
  border-color: var(--apps-border-active);
  background: var(--apps-surface-hover);
}

body[data-guide] .app-page-shell .home-app-tile.is-static {
  cursor: default;
}

body[data-guide] .app-page-shell .home-app-tile.is-static:hover {
  background: #18283b;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  transform: none;
}

body[data-guide] .app-page-shell .home-app-tile small {
  color: var(--apps-muted);
}

body[data-guide] .app-page-shell > footer {
  border-top: 1px solid var(--apps-border);
  background: var(--apps-page);
}

body[data-guide] .app-page-shell > footer .text-gray-600 {
  color: #bac7d5;
}

body[data-guide] .app-page-shell > footer .text-gray-700 {
  color: #9eafc1;
}

body[data-guide] .app-page-shell > footer .text-gray-800 {
  color: #7f93a8;
}

/* The catalog keeps its own palette, so light mode must override the catalog
   variables and the few surfaces that use fixed dark colors. */
body[data-guide][data-theme="light"] .app-page-shell {
  --apps-page: #f3f7fc;
  --apps-surface: #ffffff;
  --apps-surface-raised: #f8fbff;
  --apps-surface-hover: #edf7fd;
  --apps-text: #17233a;
  --apps-muted: #5e6d82;
  --apps-border: #d6e2ef;
  --apps-border-active: #72c7ee;
  color: var(--apps-text);
  background: var(--apps-page);
}

body[data-guide][data-theme="light"] .app-page-shell .home-apps-section {
  background:
    radial-gradient(circle at 50% 0, rgba(14, 165, 233, 0.1), transparent 36rem),
    var(--apps-page);
}

body[data-guide][data-theme="light"] .app-page-shell .home-app-row,
body[data-guide][data-theme="light"] .app-page-shell .home-app-store-showcase {
  border-color: var(--apps-border);
  background: var(--apps-surface);
  box-shadow: 0 16px 42px rgba(40, 65, 98, 0.09);
}

body[data-guide][data-theme="light"] .app-page-shell .home-app-store-showcase h3 {
  color: #17688f;
}

body[data-guide][data-theme="light"] .app-page-shell .home-installed-app-card {
  border-color: #e0e9f3;
  background: var(--apps-surface-raised);
  box-shadow: 0 7px 18px rgba(40, 65, 98, 0.07);
}

body[data-guide][data-theme="light"] .app-page-shell .home-installed-app-card:hover,
body[data-guide][data-theme="light"] .app-page-shell .home-installed-app-card:focus-visible {
  border-color: var(--apps-border-active);
  background: var(--apps-surface-hover);
  box-shadow: 0 10px 24px rgba(33, 100, 139, 0.1);
}

body[data-guide][data-theme="light"] .app-page-shell .home-app-tile,
body[data-guide][data-theme="light"] .app-page-shell .home-app-tile.is-static:hover {
  border-color: #e0e9f3;
  background: var(--apps-surface-raised);
  box-shadow: 0 7px 18px rgba(40, 65, 98, 0.07);
}

body[data-guide][data-theme="light"] .app-page-shell .home-app-tile:hover,
body[data-guide][data-theme="light"] .app-page-shell .home-app-tile:focus-visible {
  border-color: var(--apps-border-active);
  background: var(--apps-surface-hover);
}

body[data-guide][data-theme="light"] .app-page-shell .home-app-guide-row .home-app-icon {
  background: #edf3f9;
}

body[data-guide][data-theme="light"] .app-page-shell > footer {
  border-top-color: #d6e2ef;
  background: #eef4fa;
}

body[data-guide][data-theme="light"] .app-page-shell > footer .text-gray-600,
body[data-guide][data-theme="light"] .app-page-shell > footer .text-gray-700,
body[data-guide][data-theme="light"] .app-page-shell > footer .text-gray-800 {
  color: #475569;
}

@media (max-width: 620px) {
  body[data-guide] .app-page-shell .home-app-row,
  body[data-guide] .app-page-shell .home-app-store-showcase {
    padding: 16px;
    border-radius: 14px;
  }
}