/* ============================================================
   ASHBOURNE — Responsive system
   Three surfaces, one language: PHONE, TABLET (iPad), WEB.
   The rule is not "shrink the desktop". Each surface keeps the
   structure — hard borders, empty space, one loud orange — and
   spends a different ORNAMENT BUDGET on it.

   · PHONE   ≤ 833px  one column · one ornament per screen · bottom rail
   · TABLET  834–1193px  two columns · half the ornaments · side rail
   · WEB     ≥ 1194px  mosaic grid · full ornament set · top rail
   ============================================================ */
:root {
  /* —— Breakpoints (also readable from JS via getComputedStyle) —— */
  --bp-phone: 480px;         /* @kind spacing */
  --bp-phone-max: 833px;     /* @kind spacing */
  --bp-tablet: 834px;        /* iPad portrait @kind spacing */
  --bp-tablet-wide: 1194px;  /* iPad landscape @kind spacing */
  --bp-desktop: 1440px;      /* @kind spacing */

  /* —— Reference frames the templates are drawn at —— */
  --frame-phone-w: 390px;    /* @kind spacing */
  --frame-phone-h: 844px;    /* @kind spacing */
  --frame-tablet-w: 1024px;  /* @kind spacing */
  --frame-tablet-h: 768px;   /* @kind spacing */

  /* —— Per-surface structure —— */
  --grid-cols: 12;           /* @kind other */
  --grid-gap: 14px;          /* @kind spacing */
  --rail-h: 64px;            /* nav rail height @kind spacing */
  --touch-min: 44px;         /* never smaller, ever @kind spacing */
}

/* PHONE: one column, tighter grid, shorter rail. */
@media (max-width: 833px) {
  :root {
    --grid-cols: 4; /* @kind other */
    --grid-gap: 10px; /* @kind spacing */
    --rail-h: 56px; /* @kind spacing */
  }
}
/* TABLET: half-width mosaic. */
@media (min-width: 834px) and (max-width: 1193px) {
  :root {
    --grid-cols: 8; /* @kind other */
    --grid-gap: 12px; /* @kind spacing */
    --rail-h: 60px; /* @kind spacing */
  }
}

/* Touch surfaces: every control steps up past the 44px floor. This is a
   token override, so Button/Input/Select grow together and keep aligning. */
@media (pointer: coarse) {
  :root {
    --control-h-sm: 44px; /* @kind spacing */
    --control-h-md: 52px; /* @kind spacing */
    --control-h-lg: 60px; /* @kind spacing */
  }
}

/* ---------- Surface visibility ----------
   Name the surface you mean, not the pixel count. */
.ash-phone-only { display: none !important; }
.ash-tablet-only { display: none !important; }
@media (max-width: 833px) {
  .ash-phone-only { display: revert !important; }
  .ash-from-tablet, .ash-web-only { display: none !important; }
}
@media (min-width: 834px) and (max-width: 1193px) {
  .ash-tablet-only { display: revert !important; }
  .ash-web-only { display: none !important; }
}

/* ---------- Auto-reflowing column set ----------
   Set --ash-col-min and the row breaks itself. Use this instead of
   writing per-breakpoint column counts: it survives being dropped in
   a sidebar, a modal, or a phone frame without new media queries. */
.ash-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ash-col-min, 240px), 1fr));
  gap: var(--grid-gap);
}
/* Divided variant: hairlines between cells instead of gaps. */
.ash-cols-ruled {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ash-col-min, 240px), 1fr));
  gap: 0;
}
.ash-cols-ruled > * { border-right: 1px solid var(--border-faint); border-bottom: 1px solid var(--border-faint); min-width: 0; }

/* ---------- Hit targets ----------
   Any tap target that looks smaller than it is. Keeps the visual mark
   small while the touch area meets the floor. */
.ash-touch { position: relative; }
.ash-touch::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: max(100%, var(--touch-min));
  height: max(100%, var(--touch-min));
  transform: translate(-50%, -50%);
}

/* ---------- Ornament budget ----------
   Decoration is rationed by surface, not by taste. Mark every
   non-load-bearing graphic and the system spends it correctly. */
.ash-ornament { }                                  /* web: shown */
@media (max-width: 1193px) { .ash-ornament-web { display: none !important; } }
@media (max-width: 833px) {
  .ash-ornament { display: none !important; }      /* phone: one only */
  .ash-ornament-keep { display: revert !important; }
  /* Textures thin out — grain stays (it is the surface), grids go quiet. */
  .ash-blueprint, .ash-blueprint-lg { background-size: 16px 16px; opacity: 0.9; }
  .ash-ticks::before, .ash-ticks::after { display: none; }
}

/* ---------- Safe areas (phone frames, installed web apps) ---------- */
.ash-safe-t { padding-top: env(safe-area-inset-top, 0px); }
.ash-safe-b { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---------- Display leading on small screens ----------
   Newake gets one notch looser below tablet so stacked display lines
   do not collide when they wrap. */
@media (max-width: 833px) {
  :root { --leading-display: 0.92; /* @kind other */ }
}