/* ============================================================================
 * phone-page.css — PHONEPAGE-20261026 (Donny, 2026-10-26)
 * Phone System as a full, simple page: one centered column, three numbered
 * step cards, generous spacing, white/black + gold like the rest of
 * today's work. The page is pinned LIGHT in both app themes (readability —
 * same call Donny made for Shop Management today).
 * ========================================================================== */

#phoneOverlay.page-mode > .modal-box {
  background: #eef0f3;
  color: #1d2733;
  --panel: #ffffff;
  --panel2: #f6f7f9;
  --line: #dfe3e8;
  --muted: #5d6b78;
  --text: #1d2733;
  color-scheme: light;
}
#phoneOverlay.page-mode > .modal-box > * { max-width: 880px; margin-left: auto; margin-right: auto; width: 100%; }
#phoneOverlay.page-mode .parts-dash-header {
  background: transparent; border-bottom: none; padding: 10px 0 4px;
}
#phoneOverlay.page-mode .parts-dash-header h1 { font-size: calc(24px * var(--font-scale, 1)); color: #14161a; }
/* One exit only: the page's own Done button. The generic injected ✕ is
   hidden in page mode so the page never shows two close controls. */
#phoneOverlay.page-mode .modal-x-close { display: none !important; }
#phoneOverlay.page-mode #phoneClose {
  background: #14161a; color: #fff; border-color: #14161a; min-height: 42px; padding: 8px 20px; font-weight: 700;
}

/* Step headers */
.phone-step-head {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 10px;
}
.phone-step-head:first-child { margin-top: 14px; }
.phone-step-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: #c9a53f; color: #14161a; font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(20, 22, 26, .25);
}
.phone-step-titles { display: flex; flex-direction: column; gap: 1px; }
.phone-step-title { font-size: calc(18px * var(--font-scale, 1)); font-weight: 800; color: #14161a; }
.phone-step-sub { font-size: calc(13px * var(--font-scale, 1)); color: #5d6b78; }

/* Step cards: the existing blocks, re-skinned plain */
#phoneOverlay .phone-step-card {
  background: #ffffff !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  /* Only the bottom margin is forced: left/right must stay free so the
     page-mode centering rule (margin auto on direct children of the box)
     can center the Step-1 status card like everything else. */
  margin-bottom: 8px !important;
}
#phoneOverlay .rc-status-card.phone-step-card { padding: 18px !important; }
#phoneOverlay .phone-quiet-card { background: #f6f7f9 !important; }
.phone-quiet-title { font-weight: 800; color: #14161a; margin-bottom: 10px; font-size: calc(15px * var(--font-scale, 1)); }

/* Big, obvious primary actions */
#phoneOverlay.page-mode .btn { min-height: 42px; }
#phoneOverlay.page-mode .btn-primary { background: #1f6fd6; border-color: #1f6fd6; color: #fff; font-weight: 700; }
#phoneOverlay.page-mode #rc_connectBtn { font-weight: 700; }

/* Roomier mapping rows */
#phoneOverlay .phone-step-card select,
#phoneOverlay .phone-step-card input[type="text"] { min-height: 40px; }

@media (max-width: 820px) {
  #phoneOverlay.page-mode > .modal-box { padding: 14px 14px 40px; }
  .phone-step-head { margin-top: 20px; }
  #phoneOverlay .phone-step-card { padding: 14px !important; }
}