/* ============================================================================
   GovTheme by Doghouse - marketing-chrome.css
   Layout mechanics for the shared pages. Almost nothing here paints;
   what it does is make room. The customiser drawer pushes the page 320px aside
   at wide widths and drops a scrim over it below that, its launcher tab sits
   half off the left edge and every full-bleed container has to keep clear of
   it.

   Everything that paints the chrome is the brand's. The masthead, the footer,
   the install dialog, the drawer's own appearance and the preview shell are in
   css/brand.css §4-§8 - one set of rules for index.html's static chrome and
   for the copies js/govtheme.js injects.

   Two things here are exceptions worth stating. The masthead fold below is the
   shared pages' variant of a brand rule and has to be a separate sheet, since
   index.html must not take it. And .gt-seg / .gt-palette / .gt-mini-select are
   the customiser drawer's own controls, on --gt-* tokens: preview.html hosts
   the drawer and loads no sheet of ours but this one and css/brand.css, which
   reads no --gt-* token, so they cannot move to the demo's or the showcase's
   stylesheet.

   Do not add component CSS here - it belongs in the kit.
   ========================================================================== */

/* ═══════════════ MASTHEAD FOLD (shared pages only) ═══════════════
   The folded brand masthead hides its CTA, because index.html carries the same
   button further down the page. No other page does, so here the button follows
   the nav into the open panel rather than leaving the page with no install
   entry point above the fold. Keyed to the masthead's own width, like the fold
   itself in css/brand.css §9. */
@container mast (max-width: 1280px) {
  .hp-header > .hp-wrap > .hp-header__inner > .hp-btn { display: inline-flex; order: 4; width: 100%; }
  .hp-header > .hp-wrap > .hp-header__inner > .hp-navtoggle[aria-expanded='false'] ~ .hp-btn { display: none; }
}

/* ── Customiser control primitives ──
   Segmented control, palette swatches and the mini select, sized for the
   drawer: nowrap on the segment labels, so "Comfortable" cannot break in a
   320px panel, and 26px swatches.

   These are on tokens. The drawer js/govtheme.js builds is the only markup
   that uses them, and css/brand.css §7 restyles them inside .hp-panel
   only. */
.gt-seg { display: inline-flex; background: var(--gt-surface-sunken); border-radius: var(--gt-radius-sm); padding: 3px; gap: 2px; }
.gt-seg button {
  all: unset; box-sizing: border-box; cursor: pointer; min-height: 30px; padding: 0 11px;
  border-radius: calc(var(--gt-radius-sm) - 2px);
  font-size: var(--gt-text-xs); font-weight: var(--gt-w-semibold); color: var(--gt-ink-2);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background-color .14s, color .14s, box-shadow .14s;
}
.gt-seg button:hover { color: var(--gt-ink); }
.gt-seg button[aria-pressed="true"] { background: var(--gt-surface); color: var(--gt-primary); box-shadow: var(--gt-shadow-sm); }
.gt-seg button:focus-visible { box-shadow: var(--gt-focus-ring); }

.gt-palette { display: inline-flex; gap: 7px; }
.gt-palette button {
  all: unset; box-sizing: border-box; cursor: pointer; width: 26px; height: 26px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12); position: relative; transition: transform .12s;
}
.gt-palette button:hover { transform: scale(1.08); }
.gt-palette button[aria-pressed="true"]::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--gt-primary); }
.gt-palette button:focus-visible { box-shadow: var(--gt-focus-ring); }

.gt-mini-select {
  appearance: none; min-height: 32px; padding: 0 30px 0 12px; border-radius: var(--gt-radius-sm);
  border: var(--gt-border-width) solid var(--gt-border-2); background: var(--gt-surface); color: var(--gt-ink);
  font-family: var(--gt-font-body); font-size: var(--gt-text-xs); font-weight: var(--gt-w-semibold); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7488' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.gt-mini-select:focus-visible { box-shadow: var(--gt-focus-ring); }

/* ═══════════════ ONE WIDER CONTAINER ═══════════════
   The design system's card (css/showcase.css) and the live preview's frame
   share one wider column (--hp-maxw-shell, css/brand.css §4), with
   70px at the side: the 46px launcher tab and 24px clear of it. The
   masthead keeps its own narrower column. */
.gt-app,
.hp-preview {
  width: 100%; max-width: calc(var(--hp-maxw-shell) + 140px); margin-inline: auto; padding-inline: 70px;
}
/* On a phone the tab is a cog in the bottom corner (css/brand.css §9) and
   nothing has to clear it: the card runs edge to edge. */
@media (max-width: 720px) {
  .gt-app { padding-inline: 0; }
  .hp-preview { padding-inline: 12px; }
}

/* ═══════════════ CUSTOMISER DRAWER: PUSH AND OVERLAY ═══════════════ */
/* Scrim — below 1240px only */
.gt-panel__scrim { position: fixed; inset: 0; background: rgba(8,10,18,.5); z-index: 159; opacity: 0; pointer-events: none; transition: opacity .25s; }
/* Make room for the panel only when there's plenty of width (≥1240px leaves
   ≥920px of content, clear of every inner breakpoint). Below that, overlay
   with the scrim so content is never squeezed (avoids horizontal overflow).
   <body> takes the push on every page, the masthead with it. */
body { transition: padding-left .32s cubic-bezier(.4,0,.2,1); }
/* When the panel is hidden, shift centered CONTENT clear of the launcher tab —
   leaving full-bleed bar/footer backgrounds reaching the viewport edge (no strip).
   The design system's card and the preview's frame are cleared from outside
   instead (above), so nothing inside them is shifted. */
@media (min-width: 721px) {
  body.gt-panel-collapsed :is(
    .gt-utility__inner, .gt-site-alert__inner, .gt-site-header__bar, .gt-nav,
    .gt-hero__inner, .gt-wrap, .gt-ack__inner, .gt-site-footer__main,
    .gt-site-footer__bottom-inner
  ) { padding-left: 76px; }
}
@media (min-width: 1240px) {
  body.gt-panel-open { padding-left: 320px; }
  /* The kit's page banner bleeds with width:100vw / margin-inline:calc(50% - 50vw),
     which is measured against the viewport, not the pushed body: beside the
     drawer it overshoots the right edge and the page scrolls sideways. main
     already spans the content column, so the banner needs no bleed here. */
  body.gt-panel-open .gt-banner { width: auto; margin-inline: 0; }
}
@media (max-width: 1239px) {
  body.gt-panel-open .gt-panel__scrim { opacity: 1; pointer-events: auto; }
}

/* ═══════════════ PREVIEW SHELL: MASTHEAD AND FRAME ═══════════════
   preview.html is the masthead and, under it, the width toggles and the frame
   in the shared container (css/brand.css §8). The wrapper is two screens
   under the masthead (--hp-masthead-h), so scrolling the page beside the frame
   runs a long way before the footer. The frame is the site's viewport, so its
   fixed parts (back-to-top, the mobile drawer's foot) sit in the half that
   starts below the fold. dvh where supported: on a phone 100vh is the
   viewport with the browser's bars retracted. */
.hp-preview {
  height: calc(2 * (100vh - var(--hp-masthead-h))); height: calc(2 * (100dvh - var(--hp-masthead-h)));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-block: 20px 24px;
}
.hp-preview__window { flex: 1 1 auto; min-height: 0; }
@media (max-width: 720px) {
  .hp-preview { padding-block: 12px; }
  .hp-panel__group--widths { display: none; }
  .hp-preview__window { width: 100% !important; }
}