/* =====================================================================
   Valorafy — /informe studio, the parts /widget does not have.

   Loads AFTER estudio/studio.css, which carries the shell, header, rail,
   controls and drawer both studios share. Everything here is either the
   stage (three A4 sheets instead of a browser-window mock) or a control
   that only a report needs.

   Nothing in this file reaches the report. The report is a same-origin
   iframe with its own stylesheet; its re-skin is informe-theme.css +
   informe-theme-auto.css, injected into that document by
   informe-studio.js. A rule written here can style the frame, never what
   is inside it — same separation as the widget's shadow root, and for the
   same reason: the studio must not be able to make the product look
   better here than it does when it ships.
   ===================================================================== */

/* ---------------------------------------------------------------- stage */

.stage-note {
  font-size: .72rem; font-weight: 600; color: var(--color-text-muted);
  white-space: nowrap;
}

/* The scroller. min-height:0 is load-bearing and is the same trap
   documented at length in studio.css and CLAUDE.md: a flex child's default
   min-height is `auto`, meaning "at least as tall as your content", and
   overflow:auto does not override it — it only clips once sizing is already
   decided. The content here is three A4 pages, ~3.900 px of it, so without
   this the stage grows to 3.900 px, the page grows with it, and the header
   ends up somewhere off-screen while a screenshot looks fine. */
.sheet-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border-radius: 14px;
  padding: 18px 0 22px;
  background: rgba(3, 6, 24, .5);
  border: 1px solid var(--color-divider);
  scroll-behavior: smooth;
}
.sheet-stage::-webkit-scrollbar { width: 9px; }
.sheet-stage::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16); border-radius: 9px;
}

/* The iframe is laid out at its TRUE width and scaled down, never resized.
   897 px is not a round number picked to look right: reports/template.html
   lays out at 120 CSS dpi and sets body{zoom:1.25} to get back to 96, so A4
   minus its 10 mm margins is 718 CSS px of layout occupying 897 px of
   screen. Give the CONTENT any other width and every line in the report
   wraps somewhere the PDF does not — which is the one thing a preview of a
   fixed-size document may not do.

   The iframe itself is 991 px, not 897 — the extra 94 px is the white page
   margin informe-theme.css's `.vr-sheet` wraps `.page` in (47 px each
   side, the same 10 mm at this space's effective dpi), so the preview
   shows a full framed sheet instead of the content cropped flush to its
   own edge. informe-studio.js's SHEET_WIDTH constant is the one place that
   991 is also written down; keep both in step if either changes.

   The SCALER is sized in layout px and the IFRAME is what transforms, not
   the other way round. A transform does not change an element's layout box,
   so scaling the wrapper would leave the scroller still believing its
   content is at full size at every zoom — the scrollbar would be right at
   100 % and wrong everywhere else. informe-studio.js sets the scaler's
   width/height to the scaled size and --sheet-scale to the factor. */
.sheet-scaler { overflow: hidden; margin: 0 auto; }
#sheet {
  display: block;
  width: 991px;
  border: 0;
  background: transparent;
  transform: scale(var(--sheet-scale, 1));
  transform-origin: top left;
}

/* ------------------------------------------------------------- controls */

/* Six, not the widget's eight — a report carries one accent and a typeface,
   it has no dark mode to preview. */
.presets { grid-template-columns: repeat(6, 1fr); }

/* The closing block's copy variants. A swatch grid would say nothing here
   (they all look alike at 28 px), so these are named rows with the first
   line of their own text under the name — what is actually different
   between them. */
.closers { display: grid; gap: .4rem; }
.closer {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: .55rem .7rem; border-radius: 12px;
  border: 1px solid var(--color-divider);
  background: rgba(255, 255, 255, .03);
  color: var(--color-text-secondary);
  font: inherit; font-size: .78rem;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.closer:hover { border-color: rgba(255, 255, 255, .2); color: #fff; }
.closer b { display: block; font-size: .8rem; font-weight: 700; color: #fff; }
.closer small {
  display: block; margin-top: .15rem;
  font-size: .72rem; font-weight: 500; line-height: 1.4;
  color: var(--color-text-muted);
}
.closer[aria-pressed="true"] {
  background: rgba(0, 153, 51, .14);
  border-color: var(--color-green-primary);
  color: #fff;
}
.closer[aria-pressed="true"] b { color: var(--color-green-bright); }

.drawer-note {
  margin: -.2rem 0 .7rem;
  font-size: .73rem; line-height: 1.45; color: var(--color-text-muted);
}

/* Shown only by the closing style that has a person in it. */
#personFields[hidden] { display: none; }
#personFields { margin-top: .7rem; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  /* The stage stops being a pane and becomes part of the page, so it needs
     a real height instead of "whatever is left of the viewport". */
  .sheet-stage { min-height: 70vh; }
}