/* ================================================================
   ATLAS SHARED CSS — Canonical styles for ALL prototype files
   ================================================================
   This file defines EVERY reusable style that was previously
   duplicated (and diverged) across 92+ individual files.

   Include AFTER platform-system.css:
     <link rel="stylesheet" href="shared/platform-system.css">
     <link rel="stylesheet" href="shared/atlas-shared.css">

   Files still define :root tokens + file-specific content styles.
   Everything below is SHARED and should NOT be in individual files.
   ================================================================ */

/* ─── RESET ─── */
html { scroll-behavior: smooth; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── BODY ─── */
body {
  background: var(--pageBg, #1a1a1a);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  color: var(--bodyText, #ccc);
  -webkit-font-smoothing: antialiased;
}

/* ─── PAGE HEADER — CANONICAL ─── */
.page-header { text-align: center; padding: var(--sp-xxxxl) var(--sp-xxl) var(--sp-xxl); }
.page-header .back-link {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  color: var(--coolGray); font-size: var(--text-sm); font-weight: 600;
  text-decoration: none; margin-bottom: var(--sp-xxl); transition: color .15s;
}
.page-header .back-link:hover { color: var(--white); }
.page-title {
  font-size: var(--text-xxxl); font-weight: 800;
  color: var(--white); margin-bottom: var(--sp-sm);
}
.page-subtitle {
  color: var(--coolGray); font-size: var(--text-md);
  max-width: 640px; margin: 0 auto; line-height: 1.6;
}

/* ─── ATLAS MARK ─── */
.atlas-mark { display: inline-flex; align-items: flex-start; }
.am-a { display: inline-flex; flex-direction: column; align-items: center; color: var(--white); font-weight: 800; line-height: 1; }
.am-dots { display: flex; gap: 1.8px; margin-top: -1px; }
.am-dots i { width: 2.5px; height: 2.5px; border-radius: 9999px; background: var(--terracotta); display: block; }
.am-rest { color: var(--white); font-weight: 800; line-height: 1; }

/* ─── FLOW STEPS ─── */
.flow-steps {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-xs); padding: 0 var(--sp-xxl) var(--sp-xxl); flex-wrap: wrap;
}
.flow-step {
  display: flex; align-items: center; gap: var(--sp-sm);
  color: var(--coolGray); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; transition: color 0.2s;
}
.flow-step:hover { color: var(--white); }
.flow-step .step-num {
  width: 28px; height: 28px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700;
  background: var(--charcoal); color: var(--coolGray);
}
.flow-step.active .step-num { background: var(--deepBlue); color: var(--white); }
/* NOTE: Individual files override above with --terracotta (contractor) or --success (admin) via inline <style> */
.flow-step.active { color: var(--white); }
.flow-step a { color: inherit; text-decoration: none; }
.flow-step a:hover { color: inherit; }
.flow-arrow { width: 32px; text-align: center; color: var(--midGray); font-size: var(--text-md); }

/* ─── SECTION LABELS & DIVIDERS ─── */
.section-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--coolGray);
  margin: var(--sp-xxxxl) 0 var(--sp-xl);
  border-bottom: var(--borderThin) solid var(--charcoal);
  padding-bottom: var(--sp-sm); text-align: center;
}
.section-divider { max-width: 1800px; margin: 0 auto; padding: 0 var(--sp-xxxl); }
.section-divider hr { border: none; border-top: var(--borderThin) solid var(--slate); margin-bottom: var(--sp-xxxl); }

/* ─── BACK TO TOP FAB ─── */
.back-to-top {
  position: fixed; bottom: var(--sp-xxl); right: var(--sp-xxl);
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 200ms ease; z-index: 100;
  font-size: 18px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover {
  background: rgba(255,255,255,0.18); color: var(--white);
  transform: translateY(-2px); text-decoration: none;
}

/* ─── LINKS ─── */
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── PHONE (per-file override via :root vars) ─── */
.phone {
  width: 390px; height: 844px;
  border-radius: var(--phoneRadius, 40px);
  border: var(--phoneBorder, none);
  background: var(--phoneBg, var(--lightPrimary));
  overflow: hidden; display: flex; flex-direction: column;
  position: relative;
  box-shadow: var(--phoneShadow, 0 4px 24px rgba(0,0,0,0.3), 0 12px 48px rgba(0,0,0,0.2));
}
.phone.auto-h { height: auto; min-height: 844px; }

/* ─── PHONE GRID ─── */
/* Note: .phone-row, .phone-wrap, .phone-label are defined in platform-system.css */
.phone-note { max-width: 390px; font-size: var(--text-xs); color: var(--coolGray); text-align: center; line-height: 1.5; }
.phone-note .hl { color: var(--info); font-weight: 600; }
.phone-note em { color: var(--midGray); font-style: italic; }

/* ─── STATUS BAR ─── */
.status-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-sm) var(--sp-xl) var(--sp-xs);
  font-size: var(--text-xs); font-weight: 600; color: var(--statusBarText, #000); flex-shrink: 0;
}
.status-bar.light { color: var(--white); }
.status-icons { display: flex; gap: var(--sp-xs); align-items: center; font-size: var(--text-md); }

/* ─── SCREEN CONTENT ─── */
.screen { flex: 1; overflow-y: auto; background: var(--lightPrimary); }
.screen::-webkit-scrollbar { display: none; }
.screen-white { background: var(--white); }

/* ─── ICON CIRCLES ─── */
.ic { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); flex-shrink: 0; }
.ic.sm { width: var(--ic-sm, 32px); height: var(--ic-sm, 32px); font-size: var(--text-sm, 12px); }
.ic.ic-sm { width: var(--ic-sm, 32px); height: var(--ic-sm, 32px); font-size: var(--text-sm, 12px); }
.ic.md { width: var(--ic-md, 44px); height: var(--ic-md, 44px); font-size: var(--text-xl, 20px); }
.ic.lg { width: var(--ic-lg, 56px); height: var(--ic-lg, 56px); font-size: var(--text-xxl, 24px); }
.ic.hero { width: var(--ic-hero, 90px); height: var(--ic-hero, 90px); font-size: var(--text-hero, 32px); }
/* Style A — Deep Blue Outline */
.ic-A { background: transparent; border: var(--borderThick) solid var(--deepBlue); color: var(--deepBlue); }
/* Style B — Terracotta Fill */
.ic-B { background: var(--terracotta); color: var(--white); }
/* Style C — Deep Blue Fill */
.ic-C { background: var(--deepBlue); color: var(--white); }
/* Style D — Terracotta Outline */
.ic-D { background: transparent; border: var(--borderThick) solid var(--terracotta); color: var(--terracotta); }
/* Style E — White + DeepBlue */
.ic-E { background: var(--white); border: var(--borderThick) solid var(--deepBlue); color: var(--deepBlue); }
/* Style F — White + Terracotta */
.ic-F { background: var(--white); border: var(--borderThick) solid var(--terracotta); color: var(--terracotta); }
/* Style G — White Outline (dark bg) */
.ic-G { background: transparent; border: var(--borderThick) solid var(--white); color: var(--white); }
/* Style H — Success Fill */
.ic-H { background: var(--success); color: var(--white); }
/* Style I — Light Blue Tint */
.ic-I { background: rgba(66,153,225,0.12); color: var(--deepBlue); }
/* Style J — Warning Tint */
.ic-J { background: var(--lightWarning); color: var(--warning); }
/* Style K — Info Tint */
.ic-K { background: var(--lightInfo); color: var(--info); }
/* Style L — Error Tint */
.ic-L { background: var(--lightError); color: var(--error); }

/* ─── SHARED CARD ─── */
.card {
  background: var(--white); border-radius: var(--radius-lg);
  border: var(--borderThin) solid var(--slate);
  margin: 0 var(--sp-lg) var(--sp-sm); padding: var(--sp-lg);
}
.card-flat { border: none; border-radius: 0; margin: 0; padding: var(--sp-lg); }
.card-row { display: flex; align-items: center; gap: var(--sp-md); }
.card-body { flex: 1; min-width: 0; }
.card-title { font-size: var(--text-md); font-weight: 600; color: var(--charcoal); }
.card-sub { font-size: var(--text-xs); color: var(--midGray); margin-top: 2px; }

/* ─── BADGES ─── */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  padding: 2px var(--sp-sm); border-radius: var(--radius-pill);
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge.success { background: var(--lightSuccess); color: var(--success); }
.badge.error { background: var(--lightError); color: var(--error); }
.badge.warning { background: var(--lightWarning); color: var(--warning); }
.badge.info { background: var(--lightInfo); color: var(--info); }

/* ─── TIP CARDS (4 semantic variants) ─── */
.tip-card {
  display: flex; gap: var(--sp-md); padding: var(--sp-lg);
  border-radius: var(--radius-lg); margin: var(--sp-sm) var(--sp-lg);
  border-left: var(--borderAccent) solid;
}
.tip-card p { font-size: var(--text-xs); color: var(--midGray); line-height: 1.5; }
.tip-card strong { color: var(--charcoal); }
/* A — Gold/Terracotta (default brand tip) */
.tip-card.tip-a { background: var(--lightGold, rgba(234,224,213,0.5)); border-left-color: var(--terracotta); }
/* B — Info */
.tip-card.tip-b { background: var(--lightInfo, rgba(66,153,225,0.08)); border-left-color: var(--info); }
/* C — Success */
.tip-card.tip-c { background: var(--lightSuccess, rgba(72,187,120,0.08)); border-left-color: var(--success); }
/* D — Warning */
.tip-card.tip-d { background: var(--lightWarning, rgba(237,137,54,0.08)); border-left-color: var(--warning); }