/* ==========================================================================
   app.css — main entry loaded by importmap('app')
   NOTE: paths are RELATIVE to this file (assets/app.css)
   ========================================================================== */

/* 1) Design tokens / variables first */
@import "../vendor/bootstrap/dist/css/bootstrap.min-cf4cd0b7e86ca2d4039dfed2b7d527d5.css";
@import url("variables-3ff183310f32690e90d230f953557642.css");

/* 2) Base + layout */
@import url("base-dde9083a59c04802c9edec502df09f6d.css");
@import url("layout-d562327bbe234913f4321b0bb205e026.css");

/* 3) Components */
@import url("component/buttons-948a0a2d7de60440e8ee478735925529.css");
@import url("component/cards-9816d80fd0f27215e085f307ae7c7ac2.css");
@import url("component/form-784bc1b0c3e55eeb5616fff6d7e54fb6.css");
@import url("component/overlays-1be2b90fab941f62e7b93b23c55464a0.css");

/* 4) Pages */
@import url("pages/upload-04f3d7715edd02a7222cc59e21ebb460.css");
@import url("pages/show-397571515872583b87e0dc9b1fa6af77.css");
@import url("pages/edit-bf2e02ec24d49d3324dab1390f4cd379.css");

/* ==========================================================================
   GLOBAL RESPONSIVE SAFETY NETS
   These ensure critical behaviors even if a page file misses a rule.
   They only tweak mobile (≤769px) sizing and stacking.
   ========================================================================== */

/* Desktop and up — keep side-by-side layouts */
@media (min-width: 770px) {
  /* Upload page: two action blocks side-by-side */
  .upload-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch;
    justify-items: stretch;
  }
  .upload-actions > * {
    width: 100%;
    min-width: 0;
  }

  /* Show page: before/after side-by-side */
  .image-comparison {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    align-items: start;
  }
  .image-comparison > div { min-width: 0; }
  .image-comparison img { width: 100%; height: auto; display: block; }
}

/* Mobile (phones/tablets ≤769px) — stack vertically + larger UI */
@media (max-width: 769px) {
  /* Make overall spacing a bit tighter so the card fills nicely */
  body { padding: 1rem; }

  /* Upload page: stack the two actions vertically */
  .upload-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    align-items: stretch;
    justify-items: stretch;
  }
  .upload-actions > * {
    width: 100%;
    min-width: 0;
  }

  /* Show page: stack images vertically */
  .image-comparison {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    align-items: start;
  }
  .image-comparison > div { min-width: 0; }
  .image-comparison img { width: 100%; height: auto; display: block; }

  /* Bigger headings, text, buttons for mobile ergonomics */
  .result-card h1,
  .upload-card h1 {
    font-size: clamp(1.6rem, 5.5vw, 2.1rem) !important;
    line-height: 1.2;
  }

  /* Paragraphs, labels, helper text */
  p,
  label,
  .form-floating > label,
  .share-trigger,
  .subtitle,
  .sheet-title {
    font-size: 1.0625rem; /* ~17px */
  }

  /* Inputs */
  .form-control {
    font-size: 1.0625rem;
    padding: 0.9rem 1rem;
  }

  /* Buttons */
  .btn,
  .btn-primary,
  .btn-outline,
  .btn-outline-secondary,
  .btn-gradient,
  .btn-pill {
    font-size: 1.125rem !important; /* ~18px */
    padding: 1rem 1.25rem !important;
    border-radius: 999px; /* nicer big pills on mobile */
  }

  /* Share trigger pill */
  .share-trigger {
    padding: 0.7rem 1rem;
  }

  /* Card padding a touch tighter so content fills screen comfortably */
  .result-card,
  .upload-card,
  .frame .body {
    padding: 1rem !important;
  }
}
/* ==========================================================================
   End of app.css
   ========================================================================== */