/* ── demo-responsive.css ──────────────────────────────────
   Shared responsive overrides and standard theme for all demo pages.
   Targets 320px minimum width.
   Breakpoints: 768px (tablet), 640px (large phone), 480px (small phone)
   ──────────────────────────────────────────────────────── */

/* ── Standard theme (matches x-alert reference) ─────── */
:root {
  color-scheme: light dark;
  --page-bg: #f8fafc;
  --page-fg: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --input-bg: #ffffff;
  --input-fg: #0f172a;
  --surface-bg: #ffffff;
  --surface-border: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #0f172a;
    --page-fg: #f8fafc;
    --muted: #94a3b8;
    --border: #1e293b;
    --input-bg: #1e293b;
    --input-fg: #f8fafc;
    --surface-bg: #1e293b;
    --surface-border: #334155;
  }
}

/* When inside an x-theme wrapper, re-derive demo variables from theme tokens */
x-theme {
  --page-bg: var(--x-color-bg);
  --page-fg: var(--x-color-text);
  --muted: var(--x-color-text-muted);
  --border: var(--x-color-border);
  --input-bg: var(--x-color-surface);
  --input-fg: var(--x-color-text);
  --surface-bg: var(--x-color-surface);
  --surface-border: var(--x-color-border);
}

html, body {
  min-height: 100%;
  margin: 0;
  background: var(--page-bg);
  color: var(--page-fg);
}

/* ── Dogfooded demo typography ────────────────────────
   x-typography is purely presentational (no UA margins),
   so give the page title and overline eyebrow heading the
   same vertical rhythm the old <h1> / <h2> elements had
   by default. */
x-typography[variant="h1"] {
  display: block;
  margin: 0 0 24px;
}

x-typography[variant="overline"] {
  display: block;
  margin: 32px 0 10px;
}

/* ── Dogfooded demo control rows ──────────────────────
   x-form-field is block-level (owns label + input + hint)
   while x-select / x-switch / x-button are inline-block.
   Force a consistent single-line layout for the .row
   pattern (the pilot's x-alert layout, used the same way
   across modal/drawer/toaster/etc.). Other container
   classes (.panel, .controls, .control-group) are used
   inconsistently across demos — some want stacked, some
   want inline — so we leave them to per-file CSS. */
.row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.row x-form-field,
.ctrl-row x-form-field {
  display: inline-block;
}

/* When x-form-field is wrapped in an external <label> (the pattern
   used for inline-row control layouts across the gallery), force it
   to inline-block so the wrapping <label> can flow its text and the
   field on a single line. x-form-field defaults to block, which would
   otherwise push the label text onto its own line. */
label > x-form-field {
  display: inline-block;
}

/* x-switch is 24px tall — taller than the native checkbox it replaced.
   In flex labels (the common "<x-switch> Autoplay" demo control pattern)
   align-items:center aligns the geometric centers of the flex items, so
   the surrounding text and the switch end up on the same line — but only
   if the label is actually a flex container with a definite min-height
   matching the switch and a tight text line-height. Force all three on
   any label that has an x-switch child. The selector specificity (one
   class + one pseudo-class is enough to win against per-file ".controls
   label" rules. */
label:has(> x-switch),
.controls label:has(> x-switch),
.row label:has(> x-switch),
.panel label:has(> x-switch) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  line-height: 1;
}

/* Grid-stacked control layouts: x-select replaced a native <select>
   that was width:100% and ~32px tall via the demos' inline CSS.
   Recreate that footprint so the dogfooded select fills its grid cell
   at the same compact size. Note: only .grid is targeted for the
   width:100%, because .controls / .panel are used inconsistently
   across demos — some layouts want the select to fill its cell,
   others want it to sit inline at intrinsic width. The compact size
   override is safe everywhere. */
.grid x-select {
  width: 100%;
  min-width: 0;
}

.grid x-select,
.panel x-select,
.controls x-select,
.control-group x-select,
.field x-select {
  --x-select-height-md: 2rem;
  --x-select-font-size-md: 0.8125rem;
}

/* x-form-field defaults (14px label, 16px input, 8px/12px padding,
   --x-color-surface background) don't match the typical demo scale
   or the sibling x-select backgrounds. Recalibrate so dogfooded
   form fields fit the 13px label + 14px input + 6px/10px padding
   rhythm, and use --input-bg (the demo's theme-aware variable) for
   the input background so it matches x-select under x-theme. */
.grid x-form-field,
.panel x-form-field,
.controls x-form-field,
.control-group x-form-field,
.field x-form-field,
.row x-form-field,
.ctrl-row x-form-field {
  --x-form-field-label-font-size: 0.8125rem;
  --x-form-field-input-padding: 6px 10px;
  --x-form-field-input-bg: var(--input-bg);
}

/* [part=input] hardcodes "font-size: 1rem" — no CSS variable exposed,
   so override via ::part() to match the typical 14px demo input. */
.grid x-form-field::part(input),
.panel x-form-field::part(input),
.controls x-form-field::part(input),
.control-group x-form-field::part(input),
.field x-form-field::part(input),
.row x-form-field::part(input),
.ctrl-row x-form-field::part(input) {
  font-size: 0.875rem;
}

/* ── Tablet & below (768px) ──────────────────────────── */
@media (max-width: 768px) {
  .page {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Two-column layouts → single column */
  .layout {
    grid-template-columns: 1fr !important;
  }

  /* Fluid grids: cap minmax to viewport */
  .demo-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
  }

  .placement-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
}

/* ── Large phone (640px) ─────────────────────────────── */
@media (max-width: 640px) {
  body {
    padding: 16px !important;
    margin: 0 !important;
  }

  .page {
    padding: 20px 12px 40px;
  }

  /* Cards and sections: tighter padding */
  .section-card,
  .section,
  .card,
  .panel {
    padding: 14px;
  }

  /* Grids → single column */
  .grid {
    grid-template-columns: 1fr !important;
  }

  .demo-grid {
    grid-template-columns: 1fr !important;
  }

  /* Control groups: stack vertically */
  .controls {
    flex-direction: column;
    align-items: stretch;
  }

  .control-group {
    width: 100%;
  }

  .field {
    width: 100%;
  }

  /* Keep rows wrapping but tighter */
  .row {
    gap: 8px;
  }

  /* Headings: fluid sizing */
  h1 {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
  }

  /* Log/event blocks: allow wrapping */
  .log,
  .event-log,
  pre {
    word-break: break-all;
    font-size: 0.75rem;
  }

  .log-entry {
    font-size: 0.75rem;
  }

  /* Fullpage demos: reduce padding */
  .fullpage-demo {
    padding: 16px;
  }
}

/* ── Small phone (480px, down to 320px) ──────────────── */
@media (max-width: 480px) {
  body {
    padding: 10px !important;
  }

  .page {
    padding: 16px 8px 32px;
  }

  .section-card,
  .section,
  .card,
  .panel {
    padding: 10px;
  }

  .controls {
    gap: 8px;
  }

  .control-group {
    gap: 4px;
  }

  /* Smaller labels and chips */
  .eyebrow {
    font-size: 0.625rem;
    padding: 2px 6px;
  }

  .placement-grid {
    gap: 20px;
    padding: 12px 4px;
  }

  .fullpage-demo {
    padding: 8px;
  }

  .hero {
    padding: 16px;
  }
}

/* ── Table horizontal scroll ─────────────────────────── */
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Fixed-column grids: horizontal scroll on mobile */
@media (max-width: 640px) {
  .table-grid,
  .grid-row,
  .truncate-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Two-column side-by-side grids → single column */
  .mini-grid.two,
  .mini-grid.three {
    grid-template-columns: 1fr !important;
  }
}