/* striide-shared.css — universal base styles for all app pages */

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

/* ── DESIGN TOKENS ───────────────────────────────────── */
:root {
  --indigo: #3D2F8F;
  --indigo-mid: #5546B8;
  --indigo-light: #7A6DD0;
  --periwinkle: #8FA8E8;
  --peri-light: #C2D2F5;
  --peri-pale: #EBF0FC;
  --grey-warm: #F4F3F7;
  --grey-mid: #9A96AA;
  --grey-dark: #4A4760;
  --dark: #1A1830;
  --dark-deep: #120F24;
  --indigo-deep: #2B2560;
  --border: rgba(61,47,143,0.12);
  --shadow-sm: 0 2px 12px rgba(61,47,143,0.07);
  --shadow: 0 8px 32px rgba(61,47,143,0.12);
  --shadow-lg: 0 24px 64px rgba(61,47,143,0.22);
  --green: #22C55E;
  --green-dark: #2A6B4A;
  --green-pale: #DFF0E8;
  --red: #DC2626;
  --red-mid: #CC3333;
  --red-light: #FCA5A5;
  --red-pale: #FFE8E8;
  --amber: #C2410C;
  --amber-light: #FED7AA;
  --amber-pale: #FFF7ED;
}

/* ── HEADER + LOGO ───────────────────────────────────── */
.header {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  height: 65px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-text { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.4rem; letter-spacing: -1px; }
.logo-text .i { color: var(--indigo); }
.logo-text .p { color: var(--periwinkle); }

/* ── SHARED HEADER ACTIONS ───────────────────────────────── */
.header-signout:hover { background: var(--red-pale); border-color: var(--red-light); color: var(--red-mid); }

/* ── SHARED TAG WIDGETS ──────────────────────────────────── */
/* .tag-nopref is the "— No preference" pill used in onboarding flows
   AND in profile-edit sections. Kept here (not in striide-flows.css) so
   profile pages, which don't load flows.css, still render it correctly. */
.tag-nopref { border: 1.5px solid var(--border); border-radius: 100px; padding: .42rem .95rem; font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .18s; background: white; color: var(--grey-dark); user-select: none; }
.tag-nopref:hover { border-color: var(--indigo-light); color: var(--indigo); }
.tag-nopref.selected { background: var(--indigo); color: white; border-color: var(--indigo); }

/* ── SHARED CONNECTION STATES ────────────────────────────── */
.conn-accepted { background: var(--green-pale); color: var(--green-dark); }
.btn-accept { background: var(--green-dark); color: white; border: none; padding: .4rem 1rem; border-radius: 100px; font-size: .78rem; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }

/* ── SHARED ALGO NOTE ──────────────────────────────────────
   Small explanatory pill — used for two things:
   - Onboarding flows: backstage hints about how a field feeds the
     match score. Hidden in production via the IS_DEV gate in each
     flow file's <script>.
   - Profile pages: short user-facing notes (e.g. "Referral tracking
     coming soon"). These render in production. */
.algo-note { background: var(--peri-pale); border: 1px solid rgba(61,47,143,.15); border-radius: 10px; padding: .6rem .9rem; margin: .4rem 0; font-size: .72rem; color: var(--indigo-light); line-height: 1.5; }

/* ── MOBILE OPTIMIZATIONS ────────────────────────────────── */
/* Universal mobile fixes applied across every page that loads this file.
   Page-specific layout tweaks belong in each page's own <style> block. */
@media (max-width: 600px) {
  /* iOS auto-zoom fix: Safari on iPhone zooms into any input with a
     font-size below 16px on focus, which is jarring during onboarding
     and forms. Force 16px site-wide on text-entry inputs. */
  input[type="text"], input[type="email"], input[type="number"], input[type="date"],
  input[type="tel"], input[type="password"], input[type="search"], input[type="url"],
  input:not([type]), textarea, select {
    font-size: 16px !important;
  }

  /* Tap-target safety: small inline action buttons (file row icons,
     upgrade edit/delete, revoke, tag chips) sit well below the 44pt iOS
     guideline. Bumping min-height/width to 40px catches the common
     offenders without blowing up dense row layouts. */
  .btn-file-sm, .btn-upgrade-edit, .btn-upgrade-del, .btn-revoke,
  .tag-nopref, .btn-accept, .tag,
  /* Sprint 2 additions — small icon buttons that previously fell
     through this safety net: */
  .area-remove, .modal-close, .btn-prop-del, .btn-ci-del, .btn-file-del,
  .btn-kebab, .btn-notes-toggle, .btn-upgrade-files, .toggle-pw,
  .profile-toggle-btn, .btn-header-action, .btn-remove-photo,
  .share-banner-status .btn-share-banner {
    min-height: 40px;
    min-width: 40px;
  }
}