/*
 * APPVLR responsive scaling foundation.
 *
 * Loaded after the existing application and requirements styles. The legacy
 * stylesheet remains the visual source of truth; this file owns only sizing,
 * reflow, scroll ownership, and component-width behaviour.
 *
 * Responsive contract:
 *   - viewport queries choose the macro workstation mode;
 *   - container queries recompose controls inside the space they actually get;
 *   - technical surfaces reflow instead of being uniformly scaled;
 *   - drawing surfaces may pan, but the document must not gain sideways scroll.
 */

:root {
  --responsive-frame-inset: clamp(0.5rem, 1.25vw, 1.1875rem);
  --responsive-page-gutter: clamp(0.5rem, 0.9vw, 1rem);
  --responsive-touch-target: 2.75rem;
  --responsive-content-max: 96rem;
  --responsive-pane-compact: 34rem;
  --app-frame-inset: var(--responsive-frame-inset);
  --page-gutter: var(--responsive-page-gutter);
  --workspace-gutter: calc(var(--page-gutter) + var(--pill-content-inset));
}

html,
body {
  min-inline-size: 0;
  max-inline-size: 100%;
}

body {
  min-block-size: 100dvh;
}

#appShell {
  width: calc(100% - var(--app-frame-inset) - var(--app-frame-inset));
  min-height: calc(100dvh - var(--app-frame-inset) - var(--app-frame-inset));
  margin: var(--app-frame-inset);
}

#appShell .sidebar {
  top: calc(var(--app-frame-inset) + env(safe-area-inset-top, 0px));
  right: calc(var(--app-frame-inset) + env(safe-area-inset-right, 0px));
  left: calc(var(--app-frame-inset) + env(safe-area-inset-left, 0px));
}

@supports not (height: 100dvh) {
  body {
    min-block-size: 100vh;
  }

  #appShell {
    min-height: calc(100vh - var(--app-frame-inset) - var(--app-frame-inset));
  }
}

/* Every nested flex/grid item in the workstation must be allowed to shrink.
   Without this chain, one filename, toolbar, or panel can widen the whole app. */
:where(
  #appShell,
  .app-shell,
  .workspace,
  .screen,
  .topbar,
  .review-layout,
  .drawing-board,
  .drawing-panes,
  .drawing-pane,
  .review-sheet-frame,
  .sheet-viewport,
  .findings-panel,
  .findings-list-panel,
  .finding-column,
  .stamp-layout,
  .stamp-canvas,
  .stamp-controls,
  .save-layout,
  .save-preview,
  .requirements-confirmation-card,
  .requirements-confirmation-panel,
  .requirement-drawing-view,
  .requirement-drawing-preview,
  .landing-page,
  #landingMainContent,
  .pg-shell,
  .pg-dashboard,
  .pg-grid,
  .pg-row,
  .pg-panel,
  .team-page,
  .team-workload-grid,
  .job-form
) {
  min-inline-size: 0;
  min-block-size: 0;
}

:where(
  .review-layout,
  .drawing-board,
  .drawing-panes,
  .drawing-pane,
  .findings-panel,
  .stamp-layout,
  .save-layout,
  .requirements-confirmation-card,
  .pg-dashboard,
  .pg-grid,
  .pg-row,
  .team-workload-grid,
  .job-form
) > * {
  min-inline-size: 0;
}

/* The authenticated app uses one physical frame at every size, but the frame
   now breathes between phone and desktop instead of staying locked to 5 mm. */
@media (min-width: 1181px) {
  .workspace[data-has~="review-screen"]:not(#has-pad),
  .workspace[data-has~="stamp-screen"]:not(#has-pad),
  .workspace[data-has~="save-screen"]:not(#has-pad) {
    height: calc(
      100dvh
      - var(--app-frame-inset)
      - var(--app-frame-inset)
      - var(--workflow-offset)
      - var(--bottom-action-space)
    );
  }
}

/* Component-width ownership. A pane can be narrow on a wide monitor because a
   second pane and the findings rail share the viewport; browser width alone
   cannot describe that condition. */
#reviewScreen .drawing-pane,
#reviewScreen .drawing-pane:not(:has(.empty-sheet-state)),
#reviewScreen .drawing-pane:has(.empty-sheet-state),
#pageMatchScreen .drawing-pane {
  container-name: drawing-pane;
  container-type: inline-size;
  overflow: clip;
}

/* Keep each blue/purple pane tint inside its own drawing card. Narrow panes
   give the header controls their own horizontal scroll owner, so paint is
   contained without making page and rotate controls unreachable. */
#reviewScreen .drawing-pane > header,
#pageMatchScreen .drawing-pane > header {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

#reviewScreen .drawing-pane > header > .pane-header-controls,
#pageMatchScreen .drawing-pane > header > .pane-header-controls {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

#reviewScreen .review-layout {
  container-name: review-workspace;
  container-type: inline-size;
}

.pg-shell {
  width: min(
    var(--responsive-content-max),
    calc(100% - var(--responsive-page-gutter) - var(--responsive-page-gutter))
  );
  margin-inline: auto;
}

.pg-dashboard {
  container-name: pg-dashboard;
  container-type: inline-size;
}

.pg-panel {
  container-name: pg-panel;
  container-type: inline-size;
}

.pg-stats{
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.pg-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.pg-panel-wide {
  grid-column: 1 / -1;
}

.team-page .job-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.team-page .job-form-wide,
.team-page .job-form > button[type="submit"] {
  grid-column: 1 / -1;
}

.team-page .team-workload-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

@container pg-dashboard (max-width: 54rem) {
  .pg-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-controls,
  .team-hero-actions{
    flex-wrap: wrap;
  }

  .pg-controls > :is(input, select, .pg-filter),
  .team-hero-actions > *{
    min-inline-size: min(100%, 14rem);
    flex: 1 1 14rem;
  }
}

@container pg-dashboard (max-width: 38rem) {
  .pg-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: 100%;
    overflow: hidden;
  }

  .pg-tab {
    min-inline-size: 0;
    width: auto;
    min-block-size: var(--responsive-touch-target);
  }

  .settings-section-header,
  .pg-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}

@container drawing-pane (max-width: 34rem) {
  #reviewScreen .drawing-pane > header,
  #pageMatchScreen .drawing-pane > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(1.4rem, auto) var(--responsive-touch-target);
    align-items: center;
    gap: var(--space-1);
    height: auto;
    min-height: calc(var(--responsive-touch-target) + 1.4rem + var(--space-1) + 0.8rem);
    max-height: none;
    overflow: hidden;
    padding: 0.4rem;
  }

  #reviewScreen .drawing-pane > header > span:first-child,
  #pageMatchScreen .drawing-pane > header > span:first-child {
    display: none;
  }

  #reviewScreen .drawing-pane > header > strong,
  #pageMatchScreen .drawing-pane > header > strong {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #reviewScreen .drawing-pane > header > .pane-header-controls,
  #pageMatchScreen .drawing-pane > header > .pane-header-controls {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: var(--space-1);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  #reviewScreen .drawing-pane > header > .pane-header-controls::-webkit-scrollbar,
  #pageMatchScreen .drawing-pane > header > .pane-header-controls::-webkit-scrollbar {
    display: none;
  }
}

/* Below the minimum useful width for two technical sheets, preserve a readable
   single column instead of squeezing both drawings into thumbnail-sized panes. */
@media (min-width: 641px) and (max-width: 44rem) {
  #reviewScreen .drawing-panes,
  #pageMatchScreen .drawing-panes {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
}

/* Tablets and landscape phones use the same fixed application chrome as the
   phone layout, so all direct children must remain shrink-safe in this band. */
@media (min-width: 641px) and (max-width: 860px) {
  #appShell,
  #appShell .sidebar,
  #appShell .workspace,
  #appShell .screen {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .topbar,
  .review-header,
  .canvas-toolbar {
    flex-wrap: nowrap;
  }
}

/* Touch density follows the input device rather than a guessed phone model. */
@media (pointer: coarse) {
  :root {
    --control-h: var(--responsive-touch-target);
    --control-icon: 1.125rem;
  }

  :where(
    .sheet-page-button,
    .rotate-sheet-button,
    .review-zoom-button,
    .expand-sheet-button,
    .findings-tab,
    .side-panel-tab,
    .severity-tab,
    .comment-tab,
    .pairing-manager-button,
    .panel-text-button,
    .requirements-confirmation-close,
    .pg-tab,
    .pg-filter-button
  ) {
    min-inline-size: var(--responsive-touch-target);
    min-block-size: var(--responsive-touch-target);
  }
}

/* The requirement workbench responds to its dialog width. This keeps it
   correct inside browser zoom and split-screen windows without another list
   of named-device breakpoints. */
@container requirements-workbench (max-width: 64rem) {
  #requirementsConfirmationDialog .requirements-confirmation-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(18rem, 52dvh) auto;
    overflow: auto;
  }

  #requirementsConfirmationDialog .requirement-drawing-view {
    grid-column: 1;
    grid-row: 2;
    min-height: 18rem;
  }

  #requirementsConfirmationDialog .requirements-confirmation-panel {
    grid-column: 1;
    grid-row: 3;
    max-height: none;
    overflow: visible;
  }
}

/* Long names and evidence are data, not layout instructions. */
:where(
  #mineName,
  #theirsName,
  #pageMatchRaecoName,
  #pageMatchManufactureName,
  .finding-card,
  .finding-card strong,
  .requirement-item-copy,
  .requirement-item-signals,
  .requirement-drawing-evidence,
  .notification-item,
  .job-file-name,
  .pg-row strong,
  .pg-row span,
  .pg-invite-result span
) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* Requirements confirmation uses its dialog width as the layout input. */
#requirementsConfirmationDialog.requirements-confirmation {
  container-name: requirements-workbench;
  container-type: inline-size;
}

/* The regular Review rail is intentionally narrower than the requirements
   override. The drawings remain the dominant surface at normal desktop widths. */
.review-layout {
  --side-control-width: 17rem;
}

.review-layout:has(.findings-panel[data-review-mode="requirements"]) {
  --side-control-width: 23rem;
}

.findings-panel::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* A normal desktop PDF always owns the full card width. The loaded page ratio
   supplies the height. A short viewport may make the page vertically scroll,
   but it must never shrink only the frame width, crop the drawing, stretch it,
   or add internal gutters. Keep this last in the responsive bundle so a later
   viewport rule cannot restore the old height-constrained letterbox. */
@media (min-width: 1181px) {
  /* The base layout uses a viewport-height Review row. A full-width landscape
     page can be taller than that row on a short monitor. Let Review grow in the
     normal document flow instead of clipping the PDF or narrowing only its
     frame. This changes Review only; Stamp, Export, and Requirements keep their
     existing height contracts. */
  .workspace[data-has~="review-screen"]:not(#has-pad) {
    height: auto;
    min-height: calc(
      100dvh
      - var(--app-frame-inset)
      - var(--app-frame-inset)
      - var(--workflow-offset)
      - var(--bottom-action-space)
    );
    overflow: visible;
    grid-template-rows: auto auto;
    align-content: start;
  }

  #reviewScreen.is-active,
  #reviewScreen > .review-scale-stage,
  #reviewScreen .review-layout {
    height: auto;
    overflow: visible;
  }

  #reviewScreen > .review-scale-stage {
    grid-template-rows: auto auto;
  }

  #reviewScreen .review-layout,
  #reviewScreen .drawing-board {
    grid-template-rows: auto;
  }

  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) {
    height: auto;
    align-self: start;
    align-items: start;
    grid-auto-rows: auto;
  }

  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .drawing-pane {
    height: auto;
    align-self: start;
    grid-template-rows: auto auto;
  }

  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame,
  #reviewScreen .drawing-panes:not([data-review-mode="requirements"]) .review-sheet-frame.sheet-frame {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    align-self: start;
    justify-self: stretch;
    aspect-ratio: var(--sheet-aspect, 1.3889);
  }
}

/* At 861-1080px the workflow remains one row. Match the brand mark and Menu
   endpoint heights so the compact header has one baseline. */
@media (min-width: 861px) and (max-width: 1080px) {
  .brand-block .brand-logo {
    width: 44px;
    height: 44px;
  }

  .sidebar-action-menu > summary {
    min-width: 44px;
    width: max-content;
    min-height: 44px;
    height: 44px;
  }
}

/* The account link remains text, with a full compact touch target. */
@media (max-width: 640px) {
  #factTeamRow > a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Segmented filters must remain a complete control at compact shell widths.
   Visible overflow keeps the button label reachable when its text metrics are
   wider than the grid track. */
.pg-filter {
  min-inline-size: 0;
  overflow: visible;
}

.pg-filter-button {
  min-inline-size: 0;
  white-space: nowrap;
}

@container pg-panel (max-width: 30rem) {
  .pg-filter {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    width: max-content;
    max-width: 100%;
  }

  .pg-filter-button {
    padding-inline: 0.25rem;
    font-size: 0.58rem;
  }
}

/* The details tab has the longest label. It may use two lines inside the
   compact three-tab rail, but its button must not report clipped content. */
.findings-tab-details {
  white-space: normal;
  line-height: 1.1;
}

/* The navigation and load actions stay usable when text zoom doubles the
   root font size. These are fixed touch-safe dimensions, so the header does
   not let enlarged rem metrics make the brand overlap Undo or clip step names.
   The page content remains zoomable; only compact chrome uses stable pixels. */
@media (max-width: 40rem) {
  #loadScreen .file-button,
  #loadScreen .file-clear-button {
    box-sizing: border-box;
    width: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    gap: 6px;
    padding-inline: 8px;
    font-size: clamp(13px, 3.5vw, 16px);
  }

  #loadScreen .drop-zone,
  #loadScreen .file-action-stack,
  #loadScreen .file-action-stack > .file-button,
  #loadScreen .file-action-stack > .file-clear-button {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  #loadScreen .drop-zone {
    grid-template-columns: minmax(0, 1fr);
  }

  #loadScreen .file-action-stack > .file-button,
  #loadScreen .file-action-stack > .file-clear-button {
    box-sizing: border-box;
    padding-inline: 8px;
  }

  #loadScreen .file-button span:last-child,
  #loadScreen .file-clear-button span:last-child {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Add breathing room to the selected Sheet Manager work card itself. The
   dialog dimensions stay unchanged and the inner grid remains shrink-safe. */
#pairingOverview .pairing-overview-strip.is-detail > .pairing-chip.is-expanded {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: clamp(0.5rem, 1vw, 0.75rem);
}

/*
 * Ultrawide and 4K (Jon 2026-10-12): above 1920px wide the app no longer stretches.
 * It stays at most 1920px wide, and no wider than 1.6 times the window height (the 1440x900 proportion), centred on the same page background, so the
 * panel, stage and header keep the proportions they have on a normal screen.
 * At or below 1920px wide nothing here applies.
 */
@media (min-width: 1921px) {
  :root {
    --wide-content-max: min(1920px, 160vh);
  }

  #appShell {
    width: min(calc(100% - var(--app-frame-inset) - var(--app-frame-inset)), var(--wide-content-max));
    margin-inline: auto;
  }

  #appShell .sidebar {
    left: max(calc(var(--app-frame-inset) + env(safe-area-inset-left, 0px)), calc((100% - var(--wide-content-max)) / 2));
    right: max(calc(var(--app-frame-inset) + env(safe-area-inset-right, 0px)), calc((100% - var(--wide-content-max)) / 2));
  }

  /* The floating panels live in a fixed host that fills the viewport; keep it the
     same width as the shell so the side panel sits inside the capped app. */
  html[data-layout-v2="float"] #layoutV2FloatHost {
    inset: 0 max(0px, calc((100% - var(--wide-content-max) - var(--app-frame-inset) - var(--app-frame-inset)) / 2)) !important;
  }

  /* Drawers, the help launcher, Settings and the signed-out bar sit at the edge
     of the same column instead of the screen edge. */
  body > .support-launcher-dock {
    right: calc(max(var(--space-4), env(safe-area-inset-right, 0px)) + max(0px, calc((100% - var(--wide-content-max) - var(--app-frame-inset) - var(--app-frame-inset)) / 2)));
  }

  .support-drawer {
    inset: 0 max(0px, calc((100% - var(--wide-content-max) - var(--app-frame-inset) - var(--app-frame-inset)) / 2)) 0 auto;
  }

  .settings-panel {
    inset: 0 max(0px, calc((100% - var(--wide-content-max) - var(--app-frame-inset) - var(--app-frame-inset)) / 2));
    width: auto;
  }

  .landing-nav {
    left: max(calc(var(--pillbar-inset) + env(safe-area-inset-left, 0px)), calc((100% - var(--wide-content-max)) / 2));
    right: max(calc(var(--pillbar-inset) + env(safe-area-inset-right, 0px)), calc((100% - var(--wide-content-max)) / 2));
  }

  /* The team page has no app shell: cap its bar, content and legal links too. */
  body.team-page #workflowPanel.sidebar {
    left: max(calc(var(--app-frame-inset) + env(safe-area-inset-left, 0px)), calc((100% - var(--wide-content-max)) / 2));
    right: max(calc(var(--app-frame-inset) + env(safe-area-inset-right, 0px)), calc((100% - var(--wide-content-max)) / 2));
  }

  body.team-page main.pg-shell,
  body.team-page .page-legal-links {
    width: min(100% - var(--app-frame-inset) - var(--app-frame-inset), var(--wide-content-max));
    margin-inline: auto;
  }
}