/* ============================================================
   SIGA — tokens.css
   Spacing, radius, elevation, motion and layout structure.
   Companion to colors_and_type.css; extracted from assets/siga.css.
   Load order: colors_and_type.css → tokens.css → your component CSS.
   ============================================================ */

:root {
  /* --- spacing · 4px base, no half steps --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* the workhorse: card padding, grid gap */
  --space-5: 20px;
  --space-6: 24px;   /* page gutter */
  --space-8: 32px;
  --space-12: 48px;

  /* section rhythm for long-form / marketing surfaces on the same palette */
  --section-y-desktop: 84px;
  --section-y-tablet: 60px;
  --section-y-phone: 42px;

  /* --- radius --- */
  --radius-sm: 8px;    /* buttons, inputs, nav items, pills-with-corners */
  --radius-md: 12px;   /* cards, meal blocks, steppers, segmented control */
  --radius-lg: 18px;   /* modals only */
  --radius-pill: 9999px;
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);

  /* --- elevation ---
     Flat by default. A border does the separating work; shadow is reserved
     for things that genuinely float above the page. */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 18px 46px rgba(15, 23, 42, 0.10);
  --focus-ring: 0 0 0 4px rgba(14, 165, 233, 0.22);
  --shadow-pop: var(--elev-raised);
  --shadow-modal: 0 28px 70px -14px color-mix(in oklab, var(--ink-abs) 34%, transparent);

  /* --- motion ---
     Two durations only. State feedback is fast enough to feel mechanical;
     anything that moves geometry uses the base duration. */
  --motion-fast: 120ms;   /* colour, border, background */
  --motion-base: 200ms;   /* transform, switch travel */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* --- layout ---
     The app page has NO max width: on a wide monitor the work area is used in
     full. Measure is controlled in the content — prose at 68ch, side panels
     capped below — rather than by cropping the page. */
  --rail: 244px;        /* navigation rail; collapses to 80px ≤900px, horizontal strip ≤680px */
  --rail-collapsed: 80px;
  --topbar-h: 57px;     /* sticky topbar, matches the brand block height */
  --container-max: 1280px;   /* editorial / report surfaces only */
  --page-gutter: 24px;       /* 18px ≤900px · 14px ≤680px · 32px ≥1600px · 44px ≥2200px */
  --aside-max: 460px;        /* side-column cap ≥1760px, 520px ≥2200px */
  --container-gutter-desktop: 36px;
  --container-gutter-tablet: 24px;
  --container-gutter-phone: 16px;
}

:root[data-theme='dark'] {
  --elev-raised: 0 18px 46px rgba(1, 5, 12, 0.60);
  --focus-ring:  0 0 0 4px rgba(56, 189, 248, 0.30);
  --shadow-modal: 0 28px 70px -14px color-mix(in oklab, var(--ink-abs) 72%, transparent);
}

/* The iPad in landscape (1024px) keeps the full labelled rail — it fits and it
   reads better. Only below 900px does the rail collapse, and not to mute
   pictograms: 80px with a short label under each icon. */
@media (max-width: 900px) {
  :root { --rail: var(--rail-collapsed); --page-gutter: 18px; }
}
@media (max-width: 680px) {
  :root { --page-gutter: 14px; }
}
@media (min-width: 1600px) {
  :root { --page-gutter: 32px; }
}
@media (min-width: 2200px) {
  :root { --page-gutter: 44px; --aside-max: 520px; }
}

/* --- explicit grid rows ---
   Card groups that mix widths use a declared row, never one auto-fill grid:
   auto-fill invents an extra column on wide screens and strands the spanning
   child away from the card it belongs next to. */
.rows    { display: flex; flex-direction: column; gap: var(--space-4); }
.row2    { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.row3    { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.row4    { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.row-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); }
.row-1-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4); }
.row-3-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4); }

@media (max-width: 1180px) {
  .row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-2-1, .row-1-2, .row-3-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .row2, .row3, .row4 { grid-template-columns: minmax(0, 1fr); }
}

/* On a very wide monitor the side column stops growing so the extra width goes
   to the work column — the table, the composer — and not to the margin. */
@media (min-width: 1760px) {
  .row-2-1 { grid-template-columns: minmax(0, 1fr) var(--aside-max); }
  .row-1-2 { grid-template-columns: var(--aside-max) minmax(0, 1fr); }
  .row-3-2 { grid-template-columns: minmax(0, 1fr) calc(var(--aside-max) + 100px); }
}

/* Touch sizing keys off pointer type, not width: the kitchen tablet gets large
   targets in either orientation, and the mouse keeps the density that makes a
   five-center reconciliation workable. */
@media (pointer: coarse) {
  :root { --control-h: 40px; --control-h-sm: 34px; --field-h: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}