/* Studio plumbing: the preview bar. PREVIEW ONLY, our offer about our artifact; it never
   borrows the site's design, so every rule is scoped to #studio-bar and resets what a
   design's own CSS might set on p, a, nav, button. Fixed to the bottom so the hero is the
   first thing seen. At purchase: delete this file, its <link>, the bar on every page, buy.html.
   Two looks share this file: the strip (sites assembled before 2026-10-15's dock, unchanged) and
   the dock below (row 94 (c)); a bar's class picks its look, so kit-sync can carry one file to all. */

:root { --bar-h: 3.75rem; }
body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }

#studio-bar, #studio-bar * { box-sizing: border-box; margin: 0; text-transform: none; letter-spacing: normal; text-shadow: none; float: none; }
#studio-bar:not(.studio-bar--dock) {
  position: fixed; inset: auto 0 0 0; z-index: 2147483000; width: 100%; max-width: none;
  display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem 1rem;
  min-height: var(--bar-h);
  padding: .5rem max(1rem, env(safe-area-inset-right, 0px)) calc(.5rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  background: #15171c; color: #f4f4f5; border: 0; border-radius: 0;
  font: 500 .875rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 -1px 0 rgba(255,255,255,.08);
}
#studio-bar:not(.studio-bar--dock) p { flex: 1 1 auto; min-width: 0; max-width: none; padding: 0; font: inherit; color: inherit; }
#studio-bar:not(.studio-bar--dock) a { color: inherit; text-decoration: none; font: inherit; background: none; border: 0; box-shadow: none; }
#studio-bar:not(.studio-bar--dock) .studio-bar__buy {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 2.75rem; padding: 0 1.1rem;
  border-radius: 999px; background: #fff; color: #15171c; font-weight: 650; white-space: nowrap;
}
#studio-bar:not(.studio-bar--dock) a:focus-visible, #studio-bar:not(.studio-bar--dock) button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#studio-bar:not(.studio-bar--dock) .studio-designs { display: flex; flex: none; width: auto; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; overflow: hidden; background: none; position: static; }
#studio-bar:not(.studio-bar--dock) .studio-designs a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .6rem; border-radius: 0; font-variant-numeric: tabular-nums; }
#studio-bar:not(.studio-bar--dock) .studio-designs a + a { border-left: 1px solid rgba(255,255,255,.35); }
#studio-bar:not(.studio-bar--dock) .studio-designs a[aria-current="page"] { background: #fff; color: #15171c; }
#studio-bar:not(.studio-bar--dock) .studio-bar__label { flex: none; opacity: .7; }
#studio-bar:not(.studio-bar--dock) .studio-bar__toggle { flex: none; display: inline-flex; align-items: center; width: auto; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; box-shadow: none; }
#studio-bar:not(.studio-bar--dock)[data-min] { inset: auto 0 0 auto; width: auto; min-height: 0; padding: .25rem; border-top-left-radius: 1rem; }
#studio-bar:not(.studio-bar--dock)[data-min] > :not(.studio-bar__toggle) { display: none; }

@media (max-width: 40rem) {
  :root { --bar-h: 6.5rem; }
  #studio-bar:not(.studio-bar--dock) { flex-wrap: wrap; column-gap: .5rem; }
  #studio-bar:not(.studio-bar--dock) .studio-bar__buy { padding: 0 .9rem; }
  #studio-bar:not(.studio-bar--dock) .studio-bar__toggle { padding: 0 .75rem; }
  #studio-bar:not(.studio-bar--dock) p { flex-basis: 100%; }
  #studio-bar:not(.studio-bar--dock) .studio-bar__label { display: none; }
  #studio-bar:not(.studio-bar--dock) .studio-bar__buy { margin-left: auto; }
}

/* The dock (owner-decisions row 94 (c), Nic 2026-10-15: "I would like to ensure our multi-site
   panel at the bottom is different from pixel Kitty so it doesn't look the same"). A floating
   card in Sylentt's own colours (sylentt.com's paper, ink and terracotta), never a full-width dark
   strip; the words, links and plan are the strip's, unchanged (row 89). */
:root:has(#studio-bar.studio-bar--dock) { --bar-h: 5.25rem; }
#studio-bar.studio-bar--dock {
  position: fixed; left: 50%; right: auto; top: auto; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 2147483000; width: min(56rem, calc(100% - 1.5rem)); max-width: none;
  display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem .75rem;
  padding: .5rem .5rem .5rem 1.1rem;
  background: #F9F8F6; color: #1E2E3D;
  border: 1px solid #D3C8B5; border-left: .3rem solid #C84B31; border-radius: .75rem;
  font: 500 .875rem/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 .75rem 2rem -.5rem rgba(30,46,61,.38), 0 .125rem .375rem rgba(30,46,61,.12);
}
#studio-bar.studio-bar--dock p { flex: 1 1 auto; min-width: 0; max-width: none; padding: 0; font: inherit; color: inherit; }
#studio-bar.studio-bar--dock a { color: inherit; text-decoration: none; font: inherit; background: none; border: 0; box-shadow: none; }
#studio-bar.studio-bar--dock .studio-bar__label { flex: none; color: #6B635A; font-size: .8125rem; }
#studio-bar.studio-bar--dock .studio-designs { display: flex; flex: none; gap: .25rem; width: auto; padding: 0; border: 0; background: none; position: static; }
#studio-bar.studio-bar--dock .studio-designs a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .5rem;
  border: 1px solid #D3C8B5; border-radius: .5rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
#studio-bar.studio-bar--dock .studio-designs a:hover { border-color: #1E2E3D; }
#studio-bar.studio-bar--dock .studio-designs a[aria-current="page"] { background: #1E2E3D; border-color: #1E2E3D; color: #F9F8F6; }
#studio-bar.studio-bar--dock .studio-bar__buy {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 2.75rem; padding: 0 1.1rem;
  border-radius: .5rem; background: #C84B31; color: #fff; font-weight: 650; white-space: nowrap;
}
#studio-bar.studio-bar--dock .studio-bar__buy:hover { background: #A93D27; }
#studio-bar.studio-bar--dock .studio-bar__toggle {
  flex: none; display: inline-flex; align-items: center; width: auto; min-height: 2.75rem; padding: 0 .8rem;
  border: 1px solid #6B635A; border-radius: .5rem; background: transparent; color: #3A332B; font: inherit; cursor: pointer; box-shadow: none;
}
#studio-bar.studio-bar--dock a:focus-visible, #studio-bar.studio-bar--dock button:focus-visible { outline: 2px solid #C84B31; outline-offset: 2px; }
#studio-bar.studio-bar--dock[data-min] { left: auto; right: calc(.75rem + env(safe-area-inset-right, 0px)); transform: none; width: auto; padding: .25rem .25rem .25rem .5rem; }
#studio-bar.studio-bar--dock[data-min] > :not(.studio-bar__toggle) { display: none; }

@media (max-width: 40rem) {
  :root:has(#studio-bar.studio-bar--dock) { --bar-h: 7.75rem; }
  #studio-bar.studio-bar--dock { flex-wrap: wrap; width: calc(100% - 1rem); bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); padding: .5rem .5rem .5rem .9rem; column-gap: .375rem; }
  /* two rows: the words and Hide, then the designs and Keep This Site */
  #studio-bar.studio-bar--dock p { flex: 1 1 calc(100% - 4.5rem); }
  #studio-bar.studio-bar--dock .studio-bar__label { display: none; }
  #studio-bar.studio-bar--dock .studio-bar__toggle { order: 1; padding: 0 .5rem; }
  #studio-bar.studio-bar--dock .studio-designs { order: 2; }
  #studio-bar.studio-bar--dock .studio-bar__buy { order: 3; margin-left: auto; padding: 0 .9rem; }
}