/* demo_chrome.css — the banner, the gate, and the locked-control affordance.
   Scoped hard so it cannot bleed into the captured product markup. */

/* ── top banner ───────────────────────────────────────────────────────── */
#cfp-demo-bar {
  position: sticky; top: 0; z-index: 2147483000;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 18px;
  background: linear-gradient(110deg, #0876ff 0%, #4058f6 52%, #9222ea 100%);
  color: #fff;
  font: 600 13.5px/1.45 'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  box-shadow: 0 2px 14px rgba(8, 16, 46, .28);
}
#cfp-demo-bar .cfp-demo-bar__tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.2);
}
#cfp-demo-bar .cfp-demo-bar__txt { flex: 1 1 260px; font-weight: 500; }
#cfp-demo-bar .cfp-demo-bar__txt b { font-weight: 700; }
#cfp-demo-bar .cfp-demo-bar__cta {
  background: #fff; color: #23106b; text-decoration: none;
  padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 13px;
  white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center;
}
#cfp-demo-bar .cfp-demo-bar__cta:hover { background: #f1efff; }
#cfp-demo-bar .cfp-demo-bar__back {
  color: #fff; text-decoration: underline; font-weight: 600; font-size: 12.5px;
  opacity: .9; white-space: nowrap;
}

/* ── the gate ─────────────────────────────────────────────────────────── */
/* Sizing note. `inset: 0` on a fixed element resolves against the LAYOUT
   viewport, which on iOS does not shrink when the keyboard opens -- so the
   card centred itself in a box taller than the screen and half of it sat
   out of view. 100dvh tracks the visual viewport instead.

   Flex + `margin: auto` rather than `place-items: center`, because a grid-
   centred child taller than its scroll container clips at the top with no
   way to reach it. */
#cfp-demo-gate {
  position: fixed; inset: 0; z-index: 2147483600; display: none;
  height: 100%;                 /* fallback for browsers without dvh */
  height: 100dvh;
}
#cfp-demo-gate.is-open {
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px
           max(16px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#cfp-demo-gate .cfp-demo-gate__backdrop {
  position: fixed; inset: 0;    /* fixed, or it stops covering once scrolled */
  background: rgba(4, 8, 22, .86); backdrop-filter: blur(8px);
}
#cfp-demo-gate .cfp-demo-gate__card {
  position: relative; max-width: 460px; width: 100%; margin: auto;
  background: #fff; border-radius: 18px; padding: 28px 30px;
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  font: 400 14.5px/1.62 'Geist','Inter',-apple-system,sans-serif; color: #37405a;
}
/* keyboard up on a small phone leaves very little height */
@media (max-height: 460px) {
  #cfp-demo-gate .cfp-demo-gate__card { padding: 18px 20px; border-radius: 14px; }
  #cfp-demo-gate h2 { font-size: 17px; }
  #cfp-demo-gate p  { margin-bottom: 9px; }
  #cfp-demo-gate .cfp-demo-gate__row { margin-top: 14px; }
}
#cfp-demo-gate h2 {
  margin: 0 0 8px; font-size: 20px; font-weight: 800; color: #0b1535; line-height: 1.25;
}
#cfp-demo-gate .cfp-demo-gate__what {
  margin: 0 0 10px; font-weight: 600; color: #4b3fd6;
}
#cfp-demo-gate .cfp-demo-gate__what:empty { display: none; }
#cfp-demo-gate p { margin: 0 0 14px; }
#cfp-demo-gate .cfp-demo-gate__row {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px;
}
#cfp-demo-gate .cfp-demo-gate__cta {
  background: linear-gradient(110deg, #0876ff 0%, #4058f6 52%, #9222ea 100%);
  color: #fff; text-decoration: none; border-radius: 999px;
  padding: 12px 22px; font-weight: 700; font-size: 14px;
  min-height: 44px; display: inline-flex; align-items: center;
}
#cfp-demo-gate .cfp-demo-gate__close {
  background: #fff; color: #37405a; border: 1px solid #d7dce8; cursor: pointer;
  border-radius: 999px; padding: 12px 20px; font-weight: 600; font-size: 14px;
  min-height: 44px;
}
#cfp-demo-gate .cfp-demo-gate__close:hover { background: #f5f7fb; }

/* ── locked controls read as premium, not broken ──────────────────────── */
[data-demo-locked="true"] { position: relative; }
[data-demo-locked="true"]::after {
  content: "★"; font-size: 9px; line-height: 1;
  position: absolute; top: -4px; right: -4px;
  width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #4058f6, #9222ea); color: #fff;
  box-shadow: 0 1px 4px rgba(64,88,246,.5);
  pointer-events: none;
}

@media (max-width: 640px) {
  #cfp-demo-bar { padding: 9px 12px; gap: 9px; font-size: 12.5px; }
  /* This used to be display:none to save room on a narrow bar, which hid the
     only way back to the landing page on the one device most likely to need
     it. The bar wraps, so give it a row and a real 40px tap target instead. */
  #cfp-demo-bar .cfp-demo-bar__back {
    order: 3; opacity: 1; text-decoration: none;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px; padding: 9px 16px;
    min-height: 40px; display: inline-flex; align-items: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  #cfp-demo-gate .cfp-demo-gate__backdrop { backdrop-filter: none; }
}

/* ── keeping the captures aligned with the live product ────────────────────
   The /demo/ pages are point-in-time captures of the signed-in kit, so a CSS
   fix to the real templates does not reach them until they are re-captured.
   Commit 6055d6a gave the cover letter real margins on a phone; without this
   block a visitor on /demo/cover-letter still gets the old 220px justified
   column.

   demo_chrome.css is <link>ed BEFORE the captured page's own <style>, so an
   equal-specificity rule would lose on document order. The `body` prefix
   takes these to (0,2,1) against the captured (0,2,0) — one notch, no
   !important, and harmless once a fresh capture carries the fix itself. */
@media (max-width: 560px) {
  body .cls-studio .paper-wrap { margin-top: 10px; padding: 10px 4px; }
  body .cls-studio .paper {
    padding: 22px 14px 26px; font-size: 12.5px; line-height: 1.6;
    border-radius: 6px;
  }
  body .cls-studio .paper.t-classic p.body { text-align: left; }
  body .cls-studio .paper p.body  { margin-bottom: 10px; }
  body .cls-studio .paper .p-head { margin-bottom: 16px; }
  body .cls-studio .paper .p-name { font-size: 18px; }
  body .cls-studio .paper .sign   { margin-top: 16px; }
  body .cls-studio .card          { padding: 12px; }
  body .cls-studio .font-opts     { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  body .cls-studio .font-opt      { padding: 6px 4px; }
  body .cls-studio .font-opt .fa  { font-size: 15px; }
  body .cls-studio .font-opt .fn  { font-size: 9.5px; }
  body .cls-studio .accent-sub { padding: 0; }
  /* Solid always owns its own line. Without this the three groups are
     just flex items: as the container widens, Solid and Palettes start
     sharing a line and Custom drops to one of its own -- which happened
     from ~555px up, still inside this media query. */
  body .cls-studio .accent-sub:first-child { flex-basis: 100%; }
  body .cls-studio .accent-sub + .accent-sub {
    border-left: none; border-top: 1px solid var(--border);
    padding-top: 10px; margin-top: 2px;
  }
    /* let Palettes take the slack so its rule spans the row rather than
     stopping halfway, which reads as a stray mark rather than a divider */
  body .cls-studio .accent-sub:nth-child(2) { flex-grow: 1; }  /* grow, do NOT set flex-basis:0 -- that erases the group's
     intrinsic width, so from ~410px up it stopped forcing a wrap
     and Custom was bumped onto a line of its own. */
  body .cls-studio .accent-sub:last-child {
    margin-left: auto; align-items: flex-end; border-top: none;
    /* same top offset as the Palettes group beside it, minus the rule --
       otherwise the wheel floats 11px above the palette swatches */
    padding-top: 10px; margin-top: 2px; padding-left: 12px;
  }
  body .cls-studio .sw, body .cls-studio .pal,
  body .cls-studio .spectrum-swatch { width: 34px; height: 34px; }
  body .cls-studio .sw-row, body .cls-studio .pal-row { gap: 7px; }
}
@media (max-width: 540px) {
  body .rt-studio.rt-editor-toolbar { gap: 5px; padding: 5px 7px; }
  body .rt-studio .rt-editor-btn {
    padding: 0 9px; min-height: 38px; min-width: 38px;
    justify-content: center; gap: 0; border-radius: 8px;
  }
}