/* P2 v2 — shared phone-screen baseline.
   Loaded by every iframe in /ui-screens/p2-v2/.
   Aligns with Vercel Geist + portfolio tokens.css.
   Inner files are CONTENT-ONLY. Outer page owns the .iphone15pro frame. */

:root {
  /* Vercel Geist neutral scale */
  --gray-50:  #fafafa;
  --gray-100: #f4f4f5;
  --gray-150: #ececef;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
  --gray-950: #09090b;

  /* Surface + ink */
  --bg:           #ffffff;
  --bg-2:         #fafafa;
  --bg-3:         #f4f4f5;
  --text:         #18181b;
  --text-2:       #52525b;
  --text-3:       #71717a;
  --text-4:       #a1a1aa;
  --border:       #e4e4e7;
  --border-soft:  #ececef;
  --border-strong:#d4d4d8;

  /* Project semantic — single source of truth, mirrors p2-scroll-v2 */
  --warm: #c2410c;          /* anchor changes / pivot moments */
  --trip: #6b8e4e;          /* trip / Care Architecture */
  --home: #8a6ab0;          /* Brain / Identity write */
  --live: #16a34a;          /* live status */
  --warn: #c2410c;          /* attention */
  --crit: #b91c1c;          /* critical (used sparingly) */

  /* Typography */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Easing — the four we use */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ───── Reset + base ───── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  font-variant-numeric: tabular-nums;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ───── noframe mode (loaded via ?noframe=1 inside iPhone15 Pro frame) ─────
   Per PORTFOLIO_GLOBAL_RULES §3: outer page owns the canonical frame.
   Inner file is content-only when noframed. */
body.noframe {
  background: transparent;
  overflow: hidden;
}
body.noframe .status-bar { display: none; }
body.noframe .home-indicator { display: none; }
body.noframe .app-bar {
  padding-top: 52px;
}
body.noframe .screen {
  padding-top: 14px;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: rgba(194, 65, 12, 0.18); }

/* ───── Phone chrome (test-mode only) ─────
   Status bar 14:24 + signal/battery shown in standalone preview.
   Hidden in noframe mode (the outer iPhone15 Pro SVG provides chrome). */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px 6px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.status-bar__icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.home-indicator {
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.32);
}

/* ───── App-level chrome ───── */
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
}
.app-bar__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.app-bar__sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-3);
}
.app-bar__action {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ───── Screen content scaffold ───── */
.screen {
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.screen__eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.screen__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--text);
  text-wrap: balance;
}

.screen__sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ───── Card ───── */
.card {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 16px;
}
.card--accent {
  border-color: rgba(194,65,12,0.30);
  background: rgba(194,65,12,0.035);
}
.card--soft {
  background: var(--bg-2);
  border-color: var(--border-soft);
}
.card--brain {
  border-color: rgba(138,106,176,0.30);
  background: rgba(138,106,176,0.035);
}
.card--trip {
  border-color: rgba(107,142,78,0.32);
  background: rgba(107,142,78,0.04);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.card__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.card__body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}

/* ───── Live dot + pulse ───── */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  display: inline-block;
}
.dot--warn { background: var(--warn); }
.dot--info { background: var(--text-4); }
.dot--brain { background: var(--home); }
.dot--trip { background: var(--trip); }

.dot--pulse {
  position: relative;
}
.dot--pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.32;
  animation: dot-pulse 2s var(--ease-out-quart) infinite;
}
@keyframes dot-pulse {
  0%   { transform: scale(0.85); opacity: 0.42; }
  60%  { transform: scale(2.2);  opacity: 0; }
  100% { transform: scale(2.2);  opacity: 0; }
}

/* ───── Mono labels + codes ───── */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
}
.mono-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  background: var(--bg);
}
.chip--accent { border-color: rgba(194,65,12,0.3); color: var(--warm); background: rgba(194,65,12,0.05); }
.chip--brain  { border-color: rgba(138,106,176,0.3); color: var(--home); background: rgba(138,106,176,0.05); }
.chip--trip   { border-color: rgba(107,142,78,0.34); color: var(--trip); background: rgba(107,142,78,0.06); }
.chip--live   { border-color: rgba(22,163,74,0.3);  color: var(--live); background: rgba(22,163,74,0.05); }

/* ───── Buttons ───── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;       /* Emil rule: 44px touch target */
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  transition: transform 120ms var(--ease-out-quart), background-color 150ms ease;
}
.btn:active {
  transform: scale(0.97);
}
.btn--primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn--accent {
  background: var(--warm);
  color: #fff;
  border-color: var(--warm);
}
.btn--block { width: 100%; }
.btn--row { flex: 1; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--gray-100); }
  .btn--primary:hover { background: var(--gray-800); }
  .btn--accent:hover  { background: #a0350a; }
}

/* ───── List rows ───── */
.row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.row:last-child { border-bottom: none; }
.row--double { grid-template-columns: 1fr auto; }
.row--triple { grid-template-columns: auto 1fr auto; }

/* ───── Reveal animation (entry stagger) ───── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: fade-up 220ms var(--ease-out-quint) both;
}
.reveal[data-d="1"] { animation-delay: 35ms; }
.reveal[data-d="2"] { animation-delay: 70ms; }
.reveal[data-d="3"] { animation-delay: 105ms; }
.reveal[data-d="4"] { animation-delay: 140ms; }
.reveal[data-d="5"] { animation-delay: 175ms; }
.reveal[data-d="6"] { animation-delay: 210ms; }
.reveal[data-d="7"] { animation-delay: 245ms; }
.reveal[data-d="8"] { animation-delay: 280ms; }

/* ───── prefers-reduced-motion ───── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal[data-d] {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .dot--pulse::after { animation: none; opacity: 0; }
  .btn { transition: none; }
}

/* ───── Auto-detect noframe ─────
   Each iframe should include a tiny inline <script> that adds .noframe
   to <body> when ?noframe=1. CSS provides the visual fallback. */