@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Jost:wght@400;500;600;700&display=swap");

/* ========== 1) RESET & BASELINE ========== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--page-bg); color: var(--text-primary);
  font-family: "Jost","Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}

/* Mobile zoom for better prototype viewing */
@media (max-width: 768px) {
  html {
    zoom: 0.9;
    -moz-transform: scale(0.9);
    -moz-transform-origin: center center;
    -webkit-transform: scale(0.91);
    -webkit-transform-origin: center center;
    transform: scale(0.9);
    transform-origin: center center;
  }
}

/* Links default to inheriting text color; components style them explicitly */
a { color: inherit; text-decoration: none; }

/* ========== 2) DESIGN TOKENS (LIGHT) ========== */
html[data-theme="light"] {
  --page-bg: #F6F8FB;
  --surface: #FFFFFF;
  --surface-elev: #FFFFFF;
  --surface-muted: #F3F4F6;
  --border: #E5E7EB;

  --text-primary: #0B0E11;
  --text-secondary: #6B7280;

  --primary: #1CAAAA;
  --primary-700: #159999;
  --accent: #F0AE3A;
  --danger: #F04E35;
}

/* ========== 2b) DESIGN TOKENS (DARK) ========== */
html[data-theme="dark"] {
  --page-bg: #0B0E11;
  --surface: #181E23;
  --surface-elev: #1A1F24;
  --surface-muted: #20252B;
  --border: #38404A;

  --text-primary: #E5E7EB;
  --text-secondary: #9CA3AF;

  --primary: #1CAAAA;
  --primary-700: #159999;
  --accent: #F0AE3A;
  --danger: #F04E35;
}

/* ========== 3) SCALE TOKENS ========== */
:root{
  /* spacing */
  --space-0: 0px;  --space-4: 4px;  --space-8: 8px;  --space-12: 12px;
  --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px;

  /* radii */
  --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-round: 999px; --r-phone: 28px;

  /* shadow */
  --shadow-card: 0 1px 2px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.06);
  --shadow-deep: 0 24px 80px rgba(0,0,0,.35);

  /* type scale */
  --fs-12: .75rem; --fs-14: .875rem; --fs-16: 1rem; --fs-18: 1.125rem;
  --fs-20: 1.175rem; --fs-22: 1.225rem; --fs-24: 1.275rem; --fs-28: 1.35rem; --fs-32: 1.5rem; --fs-40: 2.0rem;
}

/* ========== 4) PHONE FRAME & SAFE–AREA CONTAINER ========== */
.phone {
  width: 375px; height: 812px; border-radius: var(--r-phone);
  background: var(--surface); box-shadow: var(--shadow-deep);
  position: relative; overflow: hidden; border: 1px solid transparent;
}
html[data-theme="dark"] .phone { border: 2.5px solid rgba(255,255,255,0.3); }
html[data-theme="light"] .phone { border: 2.5px solid rgba(0,0,0,0.2); }


.screen {
  position: absolute; inset: 0; display: grid;
  grid-template-rows: auto 1fr auto; /* header / body / footer */
  background: var(--surface);
}

.screen__body {
  overflow: auto;
  --container-pad: clamp(var(--space-16), 4vw, var(--space-24));
  padding: calc(var(--container-pad) + env(safe-area-inset-top)) var(--container-pad) calc(var(--container-pad) + env(safe-area-inset-bottom));
  background: var(--surface);
}
/* Hide scrollbars (content remains scrollable) */
.screen__body { scrollbar-width: none; -ms-overflow-style: none; }
.screen__body::-webkit-scrollbar { width: 0; height: 0; }

/* Prototype top controls (sticky inside screen) */
.proto-bar {
  position: sticky; top: calc(-1 * var(--space-12)); z-index: 10;
  display: flex; gap: var(--space-8); align-items: center; justify-content: space-between;
  padding: var(--space-12);
  background: color-mix(in srgb, var(--surface), transparent 10%);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
/* Normalize proto bar icon sizes */
.proto-bar a svg, .proto-bar button svg { width:18px; height:18px; }
/* Ensure img icons in proto bar are normalized too */
.proto-bar a img, .proto-bar button img { width:18px; height:18px; display:block; }
/* Ensure emoji icons in nav are consistent */
.proto-bar a > span[aria-hidden="true"],
.proto-bar button > span[aria-hidden="true"] {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}
/* Theme toggle shows only one icon based on current theme */
.proto-bar button svg { display:none; }
/* Light mode shows moon (second icon), dark mode shows sun (first icon) */
html[data-theme="light"] .proto-bar button > span:nth-of-type(2) svg { display:block; }
html[data-theme="dark"] .proto-bar button > span:nth-of-type(1) svg { display:block; }

/* ========== 5) TYPOGRAPHY CONTRACT ========== */
.h1{ font-size: var(--fs-40); line-height:1.15; font-weight:700; }
.h2{ font-size: var(--fs-28); line-height:1.2;  font-weight:700; }
.h3{ font-size: var(--fs-22); line-height:1.25; font-weight:600; }
.h4{ font-size: var(--fs-20); line-height:1.3;  font-weight:600; }
.p,.text{ font-size: var(--fs-16); color: var(--text-secondary); }
.small{ font-size: var(--fs-14); }
/* Default heading sizes for classless markup */
.screen__body h1{ font-size: var(--fs-28); line-height:1.2; font-weight:700; color:var(--text-primary); }
.screen__body h2{ font-size: var(--fs-22); line-height:1.25; font-weight:700; color:var(--text-primary); }
.screen__body h3{ font-size: var(--fs-20); line-height:1.3; font-weight:600; color:var(--text-primary); }
.screen__body h4{ font-size: var(--fs-16); line-height:1.3; font-weight:600; color:var(--text-primary); }
.xs{ font-size: var(--fs-12); }

/* Remove default heading/paragraph margins to avoid unintended vertical gaps */
h1,h2,h3,h4,h5,h6{ margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding-left: 20px; }

/* Arabic: headings never letter-space */
:where([dir="rtl"]) .h1,
:where([dir="rtl"]) .h2,
:where([dir="rtl"]) .h3,
:where([dir="rtl"]) .h4 { letter-spacing: 0; }

/* ========== 6) RHYTHM UTILITIES ========== */
.stack{ display:flex; flex-direction:column; gap: var(--stack-gap, var(--space-16)); }
.cluster{ display:flex; align-items:center; gap: var(--cluster-gap, var(--space-12)); flex-wrap:nowrap; }
.section{ padding-block: var(--space-20); }
.card{ background: var(--surface-elev); border:1px solid var(--border); border-radius: var(--r-12); padding: var(--space-16); box-shadow: var(--shadow-card); }
.dropzone{ background: var(--surface-muted); border:1.5px dashed var(--border); border-radius: var(--r-12); min-height:120px; display:grid; place-items:center; text-align:center; }
.dropzone{ min-height:96px; }
.icon-circle{ width:40px; height:40px; border-radius:50%; background: var(--primary); display:grid; place-items:center; color:#fff; }
.icon-circle svg{ width:18px; height:18px; fill: currentColor; }
/* Standardize icon images from /assets/icons across screens */
img[src*="assets/icons/"]{ width:24px; height:24px; object-fit:contain; display:inline-block; }
/* In dark mode, flip monochrome SVGs to light for contrast */
html[data-theme="dark"] img[src*="assets/icons/"]{ filter: invert(1) brightness(1.2); }

/* Visually hidden, accessible text */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ========== Splash (01) ========== */
.splash{ position: relative; height: 100%; display:grid; place-items:center; overflow:hidden; }
.splash::before{ content:""; position:absolute; inset:-20%; background: radial-gradient(60% 60% at 30% 20%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 60%), radial-gradient(50% 50% at 80% 70%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 60%); filter: blur(18px); animation: splashPulse 6s ease-in-out infinite; }
.splash::after{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--surface-muted) 40%, transparent) 0 2px, transparent 2px 8px); opacity:.15; mix-blend-mode: overlay; animation: shimmer 8s linear infinite; }
.splash__logo{ width: 160px; height:auto; animation: popIn .9s cubic-bezier(.2,.7,.2,1) forwards, floatY 4s ease-in-out infinite .9s; filter: drop-shadow(0 8px 26px rgba(0,0,0,.15)); }

@keyframes popIn{ 0%{ transform: translateY(12px) scale(.92); opacity: 0; } 60%{ transform: translateY(-2px) scale(1.02); opacity: 1; } 100%{ transform: translateY(0) scale(1); opacity: 1; } }
@keyframes floatY{ 0%{ transform: translateY(0); } 50%{ transform: translateY(-6px);} 100%{ transform: translateY(0);} }
@keyframes shimmer{ 0%{ background-position: 0 0;} 100%{ background-position: 640px 0;} }
@keyframes splashPulse{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.05);} }

/* ========== 7) FORM CONTROLS ========== */
.input, select, textarea {
  width:100%; min-height:44px; padding:0 var(--space-12);
  color: var(--text-primary); background: var(--surface);
  border:1.5px solid var(--border); border-radius: var(--r-12);
}
html[data-theme="dark"] .input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background: var(--surface-elev); }
.input::placeholder { color: var(--text-secondary); }

/* Native date picker icon colors */
input[type="date"].input { color-scheme: light; }
html[data-theme="dark"] input[type="date"].input { color-scheme: dark; }
/* WebKit calendar indicator: invert in dark mode so it renders light */
input[type="date"].input::-webkit-calendar-picker-indicator { opacity: .85; filter: none; }
html[data-theme="dark"] input[type="date"].input::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.2); }

/* Focus ring (AA-friendly) */
:where(.btn, .input, select, textarea, a, button):focus-visible {
  outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 60%, transparent);
}

/* Input with trailing icon (e.g., date picker) */
.input-wrap{ position: relative; }
.input.has-icon{ padding-inline-end: 40px; }
.input-wrap .input-icon{ position:absolute; inset-inline-end: 12px; top:50%; transform: translateY(-50%); width:20px; height:20px; display:block; pointer-events:auto; opacity:.9; }
/* Hide/disable native date indicator when a custom icon is used */
input[type="date"].input.has-icon{
  -webkit-appearance: none; appearance: none; background-image: none;
}
input[type="date"].input.has-icon::-webkit-calendar-picker-indicator{ opacity:0; pointer-events:none; display:none; }

/* ========== 8) BUTTONS ========== */
.btn{ --btn-h:44px; display:inline-grid; place-items:center; height: var(--btn-h); padding: 0 var(--space-16);
  font-weight:600; border-radius: var(--r-12); border: 1.5px solid transparent; cursor:pointer; text-decoration:none; user-select:none; }
.btn[disabled]{ opacity:.6; pointer-events:none; }
.btn.primary{ background: var(--primary); color:#fff; }
.btn.primary:hover{ background: var(--primary-700); }
.btn.outline{ background: transparent; color: var(--primary); border-color: var(--primary); }
.btn.outline:hover{ background: var(--primary); color:#fff; }
.btn.block{ width:100%; }
.btn.sm{ --btn-h:36px; border-radius: var(--r-8); font-size: var(--fs-12); }

/* Badges */
.badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius: var(--r-round); font-size: var(--fs-12); line-height:1; white-space: nowrap; flex:0 0 auto; }
.badge.warn{ background:#FFF4CC; color:#6B4E00; }
html[data-theme="dark"] .badge.warn{ background:#5A4A1A; color:#FFE7A1; }
/* Success (e.g., Confirmed) */
.badge.success{ background:#E8F5E9; color:#1B5E20; }
html[data-theme="dark"] .badge.success{ background:#1B2A20; color:#A5D6A7; }

/* Lists / rows */
.row{ display:flex; align-items:center; gap: var(--space-12); }
.row > *{ min-width:0; }

/* Auto-layout rows: icon + text inline for 18+ screens and reusable elsewhere */
.auto-row{ display:flex; align-items:flex-start; gap: var(--space-12); }
.auto-row > *{ min-width:0; }
.auto-icon{
  width:24px; height:24px; flex:0 0 24px;
  display:grid; place-items:center; line-height:1;
}
.auto-icon img, .auto-icon svg{ width:20px; height:20px; display:block; }

/* Bottom navigation */
.bottom-nav{ position: sticky; bottom:0; background: var(--surface-elev); border-top:1px solid var(--border); display:grid; grid-template-columns: repeat(4, 1fr); height:56px; }
.bottom-nav a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--space-4); color: var(--text-secondary); text-decoration:none; }
.bottom-nav svg{ width:22px; height:22px; display:block; }
.bottom-nav a.active{ color: var(--primary); }

/* Helpers */
.center{ display:grid; place-items:center; }
.muted{ color: var(--text-secondary); }
.gap-12{ gap: var(--space-12); }
.gap-16{ gap: var(--space-16); }
.pad-16{ padding: var(--space-16); }
.pad-20{ padding: var(--space-20); }
.pad-section{ padding-block: var(--space-20); }

/* ========== 9) Compatibility layer for current classless screens ========== */
/* Treat top-level body > div > div as phone frame */
body > div > div { width:375px; height:812px; border-radius: var(--r-phone); background: var(--surface); box-shadow: var(--shadow-deep); position: relative; overflow:hidden; }
/* Inside that, sticky proto bar is any div carrying data-prev/next */
div[data-prev][data-next] { position: sticky; top:0; z-index:10; display:flex; gap:var(--space-12); align-items:center; justify-content:space-between; padding: var(--space-12); background: color-mix(in srgb, var(--surface), transparent 10%); border-bottom: 1px solid var(--border); backdrop-filter: blur(6px); }
div[data-prev][data-next] > a, div[data-prev][data-next] > button { --btn-h:44px; display:inline-flex; align-items:center; justify-content:center; gap: var(--space-8); height: var(--btn-h); padding:0 var(--space-16); font-weight:600; border-radius: var(--r-12); border:1.5px solid var(--border); background: var(--surface); color: var(--text-secondary); text-decoration:none; }
div[data-prev][data-next] svg { width:18px; height:18px; }