/* Landing-page replicas (/welcome): loaded only inside each replica's shadow
   root, after the app's own stylesheets. A replica is the app's markup (lifted
   from index.html by app/landing_shells.py) filled by the app's own renderers,
   laid out at a width chosen for its frame and scaled to fill the frame exactly
   (welcome_replicas.js, Sizing).

   Structure (static/js/welcome_replicas.js):
     :host (.replica-host)  --replica-w / --replica-scale / --replica-h set by JS
       .replica-viewport    clips the unscaled layout box
         .replica-sizer     the scaled box, so layout follows the visible size
           .app-root[data-theme]   stands in for <body> (see 02-base.css) */

:host {
  display: block;
  position: relative;
  color-scheme: normal;
}

.replica-viewport {
  overflow: hidden;
  border-radius: inherit;
}

.replica-sizer {
  width: 100%;   /* the scaled replica fills the frame exactly */
  height: var(--replica-h, auto);
  overflow: hidden;
}

.app-root {
  /* Named container: the pins below follow the replica's layout width. */
  container: replica / inline-size;
  width: var(--replica-w, 1280px);
  padding: 20px;
  transform: scale(var(--replica-scale, 1));
  transform-origin: 0 0;
  /* The app page scrolls; a replica is a fixed picture of it. */
  pointer-events: none;
}

/* A preview is a picture: it cannot be scrolled, so the app's scroll areas never
   draw a scrollbar (the sizing widens the layout so nothing is lost instead). */
.app-root, .app-root * { scrollbar-width: none; }
.app-root ::-webkit-scrollbar { display: none; }
/* Where a scroll area's content continues (a wide table in the narrow layout),
   its edge fades out instead of stopping hard (welcome_replicas.js _markCropped). */
.app-root .replica-fade-x { mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.app-root .replica-fade-y { mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
.app-root .replica-fade-x.replica-fade-y {
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent),
              linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
  mask-composite: intersect;
}

/* Dialogs (data-unwrap) are shown whole and fill the replica: the app caps them
   to the screen's height and its own width, which in a preview only leaves a
   scrollbar and a strip of page beside the dialog. The frame hugs the dialog's
   width instead (09-landing.css .replica-frame--hug). */
.app-root .modal-panel-lg,
.app-root #import-modal-content,
.app-root .import-modal-scroll { max-height: none; overflow: visible; }
.app-root .modal-panel-lg,
.app-root #import-modal-content { width: auto; max-width: none; margin: 0; }

/* data-tight: a page-level replica (the dashboard). Its shells carry the page's
   own px-6 gutters; the tab row and table sit in a gutter-padded wrapper in
   index.html that is not lifted, so they get the same inline margin here. */
.app-root.replica-tight { padding: 0 0 24px; }
.app-root.replica-tight > #nav-row,
.app-root.replica-tight > #table-card { margin-inline: 1.5rem; }

/* The app's width breakpoints answer the visitor's screen, not the replica's
   width. Where a replica is wider than the screen it is shown on (a desktop
   layout on a tablet), these twins give it the layout the app has at that
   width. Keep in step with the variants the lifted markup and the renderers
   use, and with the #main-content rule in 07-csp-utilities.css. */
@container replica (min-width: 768px) {
  .app-root .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-root .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-root .md\:col-span-4  { grid-column: span 4 / span 4; }
}
@container replica (min-width: 900px) {
  #main-content { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #card-total-value { grid-row: span 1 / span 1; }
}
@container replica (min-width: 1024px) {
  .app-root .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-root .lg\:col-span-2  { grid-column: span 2 / span 2; }
}
@container replica (min-width: 1280px) {
  .app-root .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* data-keep: a replica showing some of the summary cards lays them out in as
   many columns as it keeps, one row high. Compounded with the id so it
   outranks the app's own #main-content column rule. */
#main-content.replica-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#main-content.replica-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#main-content.replica-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#main-content[class*="replica-cols-"] > #card-total-value { grid-row: auto; }