/* ============================================
   MORE HUB
   Reached from Home's Quick Actions grid. Category
   headers reuse settings.css's .settings-group /
   .settings-group-label (same label style
   Security/App Settings use) — items themselves are
   an icon+label tile grid (.more-tile-grid /
   .more-tile below), not settings-row list rows.
   ============================================ */

.more-page {
  padding: var(--page-padding-y) var(--page-padding-x) var(--space-2xl);
}

/* ─── HEADER ─────────────────────────────── */

.more-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.more-header__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
}

.more-header__title {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--font-semi);
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin: 0;
}

.more-header__subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 2px 0 0;
}

/* ─── CATEGORY SPACING ───────────────────── */
/* .settings-group already carries its own margin-bottom
   (see settings.css) — nothing to add here beyond making
   sure the last group doesn't leave a double gap before
   the page's own bottom padding. */

.more-page .settings-group:last-child {
  margin-bottom: 0;
}

/* ─── TILE GRID ──────────────────────────── */
/* One per category — icon on a soft square, label below,
   no card border around the tile itself (that's what made
   the old settings-row list feel heavy). Same icon-container
   treatment as dashboard.css's .quick-action-icon so the
   Home grid and this page read as the same visual language. */

.more-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md) var(--space-xs);
}

.more-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.more-tile-icon {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.more-tile:hover .more-tile-icon {
  background: var(--bg-hover);
  border-color: var(--border-active);
}

.more-tile-icon svg {
  width: 19px;
  height: 19px;
}

.more-tile-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.25;
}

.more-tile.hidden {
  display: none;
}

/* Small status dot on the icon corner — currently only used for
   Verify Identity's KYC state (see kycBadgeVariant() in more.js).
   Border matches the card background so it "cuts out" of the icon
   square instead of looking pasted on. */
.more-tile-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-card);
}

.more-tile-badge--success { background: var(--success); }
.more-tile-badge--pending { background: var(--pending); }
.more-tile-badge--danger  { background: var(--danger); }