/**
 * Page chrome for demo/states.html. Not part of the package.
 *
 * Everything here is prefixed demo- so it can never be mistaken for kit CSS,
 * and tastecheck.config.json allows that prefix rather than approving the
 * class names one at a time.
 *
 * It reads panelware's own tokens rather than declaring values, so the demo
 * page follows the theme along with the components on it. A demo that hard
 * coded a white page would show the dark kit on the wrong ground and hide
 * exactly the mistakes it exists to surface.
 */

/* One content width, shared by the rules and the prose.
   The rules used to span the full window while the prose was capped at 46ch
   and the specimens at 30rem, so half of every section was empty and the
   copy broke mid-clause to fill a column nothing else respected. A measure
   is a constraint on the text; it is not a reason to announce the space it
   is not using. */
:root { --demo-measure: 64rem; }

/* NOTHING on body but the background. Every inset lives on a child, and that
   is a bug fix rather than a preference.

   Radix's scroll lock is react-remove-scroll, and when a dialog or a select
   opens it injects this, verbatim:

     body[data-scroll-locked] {
       overflow: hidden !important;  overscroll-behavior: contain;
       position: relative !important;
       padding-left: 0px;  padding-top: 0px;  padding-right: 0px;
       margin-left: 0;  margin-top: 0;  margin-right: 0px !important;
     }

   It is replacing the page's own insets with values it has computed to hold
   the layout still where a classic scrollbar has just been taken away. On the
   overlay scrollbars macOS and iOS use there is no scrollbar to compensate
   for, so every one of those computes to zero and the page simply loses them.

   Three paddings and two margins, not just the right one. A first pass here
   moved only the horizontal gutter and the page still jumped upward by the
   32px top padding, which is what the second screenshot showed. padding-bottom
   and margin-bottom are the only two the rule does not touch, and relying on
   that is not worth the ten characters it saves. */
body {
  margin: 0;
  padding: 0;
  background-color: var(--pw-color-base-100);
  color: var(--pw-color-base-content);
  font-family: var(--pw-font-ui);
  font-size: var(--pw-text-ui);
  line-height: var(--pw-leading-body);
}

.demo-header,
.demo-main {
  /* Plain measure, no calc. The kit's box-sizing reset is scoped to its own
     classes rather than applied to *, so these demo elements are content-box
     and the gutter already sits outside the max-width. Adding the gutter to
     it here made the measure 1072 instead of 1024, which is a layout change
     smuggled in under a bug fix. */
  max-width: var(--demo-measure);
  margin-inline: auto;
  padding-inline: var(--pw-space-xl);
}

.demo-header {
  margin-bottom: var(--pw-space-2xl);
  padding-top: var(--pw-space-2xl);
}
.demo-main { padding-bottom: 6rem; }

.demo-title {
  margin: 0;
  font-size: var(--pw-text-display);
  line-height: var(--pw-leading-tight);
  letter-spacing: var(--pw-tracking-display);
  font-weight: 600;
}

/* Says what the page is, in the one place someone landing on it will look.
   Twice now this page has been read as a broken build rather than as a
   deliberately inert one, which is a labelling failure and not a user error:
   controls that look pressable and are not have to say so. */
.demo-badge-static {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--pw-space-sm);
  padding: 0 var(--pw-space-sm);
  border-radius: var(--pw-radius-control);
  background-color: var(--pw-color-base-300);
  color: var(--pw-color-base-content);
  box-shadow: var(--pw-shadow-sunken);
  font-size: var(--pw-text-micro);
  font-weight: 400;
  letter-spacing: 0;
}

.demo-link { color: inherit; }

.demo-heading {
  margin: 0 0 var(--pw-space-2xs);
  font-size: var(--pw-text-subhead);
  line-height: var(--pw-leading-ui);
  font-weight: 600;
}

.demo-note {
  margin: 0 0 var(--pw-space-lg);
  /* 56ch measures 67 actual characters at this face and size, which is the
     number that matters. ch is the width of a zero, not of an average
     character, so the cap and the measure are never the same figure: 46ch
     was reading at 45 characters and breaking clauses badly, and 68ch
     overshot to 82. Calibrated rather than assumed. */
  max-width: 56ch;
  color: var(--pw-color-base-content);
  opacity: 0.75;
  font-size: var(--pw-text-micro);
}

.demo-section {
  padding-top: var(--pw-space-xl);
  /* A section break groups, it does not bound a control, so this is
     --pw-color-divider and not --pw-bevel-boundary. It was --pw-bevel-frame,
     an interior shading tone that reads against the light page by
     coincidence and measured 1.11:1 against the dark one. */
  border-top: var(--pw-border) solid var(--pw-color-divider);
}
.demo-section + .demo-section { margin-top: var(--pw-space-2xl); }

.demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-lg);
  min-width: 0;
}

/* The min-width belongs on the items, not only on the row. A flex item's
   min-width is auto, which means it refuses to shrink below its content, so
   the token table's 603px pushed the whole document to 1037px wide inside a
   320px viewport. The row already had min-width: 0, which is the same fix
   applied to the wrong element: the row was never the thing refusing to
   shrink. With this, .demo-table-wrap's own max-width and overflow-x can do
   what they were written to do. */
.demo-row > * { min-width: 0; }

/* The tab strip and its panel, with no gap between them. The stack's 16px
   gap sat between the two and made the fuse impossible, so the section that
   exists to demonstrate the fuse was the one place it could not happen. */
.demo-tabs {
  display: flex;
  flex-direction: column;
  width: min(30rem, 100%);
}

/* Radix wraps the slider thumb in its own absolutely positioned span and
   moves that. This stands in for it, so the static page renders the same DOM
   the component does rather than a simpler one that happens to look right. */
.demo-thumb-pos {
  position: absolute;
  transform: translateX(-50%);
}

.demo-icons { gap: var(--pw-space-lg); }

.demo-icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pw-space-2xs);
  min-width: 4rem;
}

.demo-icon-name {
  font-size: var(--pw-text-micro);
  opacity: 0.75;
}

/* Radix positions a vertical thumb by writing an offset onto its own
   wrapper, the same as it does horizontally. This stands in for it. */
.demo-thumb-pos-v {
  position: absolute;
  transform: translateY(-50%);
}

.demo-field {
  display: flex;
  align-items: center;
  gap: var(--pw-space-md);
}

.demo-field-label {
  flex: 0 0 4.5rem;
  font-size: var(--pw-text-micro);
  opacity: 0.75;
}

.demo-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-lg);
  width: min(30rem, 100%);
}

/* The dialog is fixed and centred in the kit, which would put it over
   everything else on a page whose whole job is showing everything else at
   once. Held in flow here, and only here. */
.demo-dialog-stage {
  position: relative;
  /* The stage has to be sized by the row, not by its contents. Left to size
     itself it takes the panel's specified 28rem, the panel's max-width
     resolves against that, and the pair agree on a width wider than the
     screen. A flex item also defaults to min-width: auto, so it refuses to
     shrink below that agreement and pushes the page sideways at 320. */
  width: 100%;
  min-width: 0;
  /* Capped, or the scrim runs the full page width and roughly half of the
     largest block on the page is flat grey carrying nothing. The cap is an
     absolute length rather than a percentage so the panel's own max-width
     has something non-circular to resolve against. */
  max-width: calc(var(--pw-dialog-w) + (var(--pw-space-xl) * 2));
  /* Padding, not a margin on the panel. The panel's own max-width already
     reserves a gutter against its containing block, so a margin on top of it
     added to a width that was already full and pushed the page sideways at
     320 and 375. */
  padding: var(--pw-space-xl);
}
.demo-dialog-stage .pw-overlay { position: absolute; }
.demo-dialog-stage .pw-panel {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  animation: none;
  max-height: none;
}

/* Flattens the treatment without touching a component, which is the point. */
.demo-flat {
  --pw-bevel-depth: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pw-space-lg);
}