/* ==========================================================================
   LYR Workspace — RESPONSIVE LAYER
   --------------------------------------------------------------------------
   Loaded LAST on every page (after style.css / ui-system.css / page css).

   Two problems this solves:

   1. WIDE MONITORS. The suite was tuned at ~1366-1920px. Beyond that, hard
      max-width caps (1320 / 1680 / 1400px) left big dead margins, and every
      font / row / gutter stayed the same pixel size, so the UI looked tiny
      and stranded in the middle of a very wide screen.

   2. SMALL SCREENS. Fixed-count grids, 100vh on mobile browsers, tiny touch
      targets and iOS input zoom.

   How scaling works
   -----------------
   `--fs` is one master scale factor, stepped by viewport width (and capped
   by viewport height so an ultrawide-but-short screen doesn't get
   oversized). Every hard-coded `font-size: Npx` in the CSS has been
   rewritten to `calc(Npx * var(--fs, 1))`, and the shared density tokens
   below (rows, controls, gaps, sidebar, header) are multiplied by it too.
   So the whole UI grows together, proportionally, and the content area is
   uncapped so it fills whatever width the sidebar leaves.

   Tune it in ONE place: the --fs steps in section 0.
   ========================================================================== */


/* ==========================================================================
   0. MASTER SCALE (--fs)
   ========================================================================== */
:root { --fs: 1; }

@media (min-width: 1600px) { :root { --fs: 1.06; } }
@media (min-width: 1920px) { :root { --fs: 1.15; } }
@media (min-width: 2400px) { :root { --fs: 1.30; } }
@media (min-width: 2880px) { :root { --fs: 1.50; } }
@media (min-width: 3440px) { :root { --fs: 1.65; } }
@media (min-width: 3840px) { :root { --fs: 1.85; } }

/* Height guards: a wide-but-short window (e.g. an ultrawide at 1440p, or a
   browser with lots of toolbars) must not scale so far that too few rows
   fit vertically. Each rule only ever LOWERS the scale (it's gated to the
   widths where the width step would otherwise exceed the cap), and the
   smaller-height rules come later so they win. */
@media (min-width: 3440px) and (max-height: 1400px) { :root { --fs: 1.50; } }
@media (min-width: 2880px) and (max-height: 1200px) { :root { --fs: 1.30; } }
@media (min-width: 2400px) and (max-height: 1000px) { :root { --fs: 1.15; } }
@media (min-width: 1920px) and (max-height: 820px)  { :root { --fs: 1.06; } }
@media (min-width: 1600px) and (max-height: 700px)  { :root { --fs: 1; } }

@media print { :root { --fs: 1; } }

/* Density tokens follow the scale. Gated to >=1600px (where --fs can be
   above 1) so the existing <=900px icon-rail rule for --nav-w is untouched. */
@media (min-width: 1600px) {
  :root {
    --nav-w:        calc(178px * var(--fs));
    --nav-w-icon:   calc(56px  * var(--fs));
    --header-h:     calc(36px  * var(--fs));

    --ui-row-h:     calc(27px * var(--fs));
    --ui-row-h-lg:  calc(40px * var(--fs));
    --ui-head-h:    calc(25px * var(--fs));
    --ui-bar-h:     calc(42px * var(--fs));
    --ui-ctl-h:     calc(34px * var(--fs));
    --ui-input-h:   calc(34px * var(--fs));

    --ui-font:       calc(13.5px * var(--fs));
    --ui-font-sm:    calc(12.5px * var(--fs));
    --ui-font-head:  calc(11.5px * var(--fs));
    --ui-font-title: calc(14.5px * var(--fs));

    --ui-cell-x:    calc(8px  * var(--fs));
    --ui-cell-y:    calc(2px  * var(--fs));
    --ui-gap:       calc(12px * var(--fs));
    --ui-gap-sm:    calc(8px  * var(--fs));
    --ui-gap-lg:    calc(16px * var(--fs));
    --ui-pad:       calc(14px * var(--fs));

    --space-1: calc(4px  * var(--fs));
    --space-2: calc(8px  * var(--fs));
    --space-3: calc(12px * var(--fs));
    --space-4: calc(16px * var(--fs));
    --space-5: calc(24px * var(--fs));
  }
}


/* ==========================================================================
   1. UNCAP THE PAGE CONTAINERS
   Every shell below was capped (1320 / 1400 / 1680px) and centred, which is
   exactly what left dead bands on either side of a wide monitor. They now
   fill the space beside the sidebar.
   ========================================================================== */
.home-wrap.home-neu,
.home-wrap.home-neu:has(> .app-side) {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
}
.wsnav-bar-inner,
.home-topbar-inner,
.home-dash,
.po-shell,
.po-shell.po-compact-canvas,
.wrap,
.auth-shell.auth-shell-wide {
  max-width: none !important;
}
.home-dash { margin: 0 !important; }

/* Fixed header strip: was centred at 1320px on top of a full-width canvas,
   so its chips stopped lining up with the content below on wide screens. */
.po-strip {
  max-width: none !important;
  margin: 0 !important;
}

/* Panels that are meant to stay a bounded reading width now scale with the
   UI instead of staying at their laptop pixel width. */
.po-progress-full { max-width: calc(1080px * var(--fs, 1)); }
.po-done-full     { max-width: calc(1200px * var(--fs, 1)); }
.po-modal-panel   { max-width: calc(720px  * var(--fs, 1)); }
.auth-shell       { max-width: calc(720px  * var(--fs, 1)); }
.rr-wrap          { max-width: min(100%, calc(1400px * var(--fs, 1))); }
.rr-modal         { max-width: min(calc(980px * var(--fs, 1)), calc(100vw - 24px)); }
.summary-modal-panel {
  max-width: min(calc(1400px * var(--fs, 1)), calc(100vw - 32px));
}


/* ==========================================================================
   2. FLUID GRIDS
   Fixed column counts (repeat(4,…)) become auto-fit so they use however
   much room there is: more columns on a big monitor, fewer on a phone.
   ========================================================================== */
.po-progress-stats {
  grid-template-columns: repeat(auto-fit, minmax(calc(150px * var(--fs, 1)), 1fr));
}
.review-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(calc(130px * var(--fs, 1)), 1fr));
}
.home-dash-row-overview {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(300px * var(--fs, 1))), 1fr));
}
.home-dash-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(calc(78px * var(--fs, 1)), 1fr));
}

/* Main tool page: content column + output rail. The rail scales with the
   UI so it doesn't look like a thin sliver next to a huge main column. */
@media (min-width: 981px) {
  .po-columns {
    grid-template-columns: minmax(0, 1fr) calc(340px * var(--fs, 1));
  }
}
.admin-grid { min-width: 0; }
@media (min-width: 1100px) {
  .admin-grid {
    grid-template-columns: minmax(calc(400px * var(--fs, 1)), calc(520px * var(--fs, 1))) minmax(0, 1fr);
  }
}

/* Grid/flex children must be allowed to shrink or a long cell forces the
   whole page wider than the window. */
.po-columns > *,
.admin-grid > *,
.home-dash-row-today > *,
.home-dash-row-snapshot > *,
.home-dash-row-overview > *,
.layout > *,
.stack > * { min-width: 0; }

/* Dashboard on big screens: instead of one very wide column of rows, lay the
   Snapshot and Today sections side by side, and let "By the numbers" span
   the full width underneath. */
@media (min-width: 2000px) {
  .home-dash-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4, 16px) calc(var(--space-4, 16px) * 1.5);
    align-items: start;
  }
  .home-dash-sections > .home-dash-section:has(.home-dash-row-overview) {
    grid-column: 1 / -1;
  }
}

/* Old-style two-column tool layout: extra room goes to the cards. */
@media (min-width: 2400px) {
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* Table cells: label column and inline controls scale with the UI. */
table:not(.po-grid) tbody td:first-child { max-width: calc(420px * var(--fs, 1)); }
table:not(.po-grid) td input[type=text],
table:not(.po-grid) td input[type=number],
table:not(.po-grid) td select {
  height: calc(20px * var(--fs, 1)) !important;
}
table:not(.po-grid) td input[type=number],
table:not(.po-grid) td select {
  width: calc(68px * var(--fs, 1)) !important;
}
table:not(.po-grid) td button {
  height: calc(20px * var(--fs, 1)) !important;
}
table:not(.po-grid) input[type=checkbox] {
  width: calc(13px * var(--fs, 1));
  height: calc(13px * var(--fs, 1));
}


/* ==========================================================================
   3. VIEWPORT-HEIGHT FIXES (mobile browsers)
   100vh includes the collapsing URL bar on phones/tablets, which pushes the
   bottom of the canvas / modals off-screen. dvh tracks the real visible area.
   ========================================================================== */
@supports (height: 100dvh) {
  .po-canvas { min-height: calc(100vh - var(--header-h) - 8px) !important; min-height: calc(100dvh - var(--header-h) - 8px) !important; }
  .summary-modal-panel {
    height: calc(100vh - 48px); height: calc(100dvh - 48px);
    max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  }
}


/* ==========================================================================
   4. SMALL SCREENS + TOUCH
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas { max-width: 100%; }

/* Notches / rounded corners when the page is drawn edge to edge. */
@supports (padding: max(0px)) {
  .home-wrap.home-neu:has(> .app-side) {
    padding-right: max(4px, env(safe-area-inset-right)) !important;
  }
  .app-side { padding-left: max(0px, env(safe-area-inset-left)); }
}

/* Touch devices: finger-sized targets, and 16px inputs so iOS Safari
   doesn't zoom the page when a field is focused. Table-cell controls keep
   their compact look but get a bigger hit area. */
@media (pointer: coarse) {
  button,
  .btn,
  select,
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .po-strip-chip,
  .app-side-item {
    min-height: 40px;
  }
  input:not([type=checkbox]):not([type=radio]),
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }
  table:not(.po-grid) td input[type=text],
  table:not(.po-grid) td input[type=number],
  table:not(.po-grid) td select,
  table:not(.po-grid) td button {
    height: 32px !important;
    min-height: 32px !important;
  }
  table:not(.po-grid) tbody td { height: 38px; }
  table:not(.po-grid) input[type=checkbox] { width: 20px; height: 20px; }
}

/* Tablet and down: stack the multi-column layouts a bit earlier than the
   old 860-980px breakpoints so nothing gets squeezed. */
@media (max-width: 1100px) {
  .po-columns,
  .admin-grid,
  .home-dash-row-today,
  .home-dash-row-snapshot { grid-template-columns: minmax(0, 1fr); }
}

/* Phones. */
@media (max-width: 640px) {
  .po-strip { gap: 6px; padding: 0 10px; }
  .home-dash { padding-left: 10px; padding-right: 10px; }
  .field-row,
  .tk-grid,
  .tk-modal-grid,
  .tk-details { grid-template-columns: minmax(0, 1fr); }
  .summary-modal-panel {
    max-width: 100vw;
    border-radius: 0;
  }
  .rr-wrap { padding-left: 12px; padding-right: 12px; }
}

/* Very short landscape phones: give content the vertical room back. */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --header-h: 32px; }
  .po-canvas { min-height: 0 !important; }
}