/* ============================================================================
   DEMO MODE — banner and navigator
   ----------------------------------------------------------------------------
   Both of these sit on top of screens the studio is reviewing for DESIGN, so
   they are deliberately quiet: the same warm palette as everything else, no
   scarlet, no stripes, no pulsing. Unmissable if you look, invisible if you
   are looking at something else.

   Every rule here is scoped to .demo-banner or .demonav, neither of which is
   ever rendered without ?demo=1. Loading this stylesheet in real mode paints
   nothing.
   ========================================================================== */

/* ---- The banner --------------------------------------------------------- */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: #565F68;
  color: #EAE3DB;
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(242, 237, 232, 0.14);
}

.demo-banner__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #C9A227;
  flex: 0 0 auto;
}

.demo-banner__text { flex: 1 1 auto; min-width: 0; }

.demo-banner__exit {
  color: #EAE3DB;
  text-decoration: underline;
  text-underline-offset: 3px;
  flex: 0 0 auto;
  font-size: 13px;
}
.demo-banner__exit:hover { color: #FFF; }

@media (max-width: 767px) {
  .demo-banner {
    font-size: 12px;
    letter-spacing: 0.9px;
    padding: 9px 14px;
    gap: 9px;
  }
  /* The instruction matters more than the escape hatch on a phone. */
  .demo-banner__exit { font-size: 12px; }
}

/* ---- The navigator ------------------------------------------------------ */
.demonav {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9001;
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-height: calc(100vh - 40px);
}

.demonav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  min-height: 44px;
  background: #0D0D0D;
  color: #EAE3DB;
  border: 1px solid #0D0D0D;
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
}
.demonav__toggle:hover { background: #262626; }
.demonav__toggle:focus-visible { outline: 2px solid #C9A227; outline-offset: 2px; }

.demonav__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #C9A227;
}

.demonav__body {
  width: 290px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 20px;
  background: #FBF8F5;
  border: 1px solid rgba(149, 126, 104, 0.32);
  border-radius: 0;
  box-shadow: none;
}
.demonav__body[hidden] { display: none; }

.demonav__title {
  font-family: 'Storica', Georgia, serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #0D0D0D;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(149, 126, 104, 0.22);
}

.demonav__group { margin-bottom: 18px; }

.demonav__grouplabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: #655c54;
  margin: 0 0 8px;
}

.demonav__link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 0;
  font-size: 15px;
  line-height: 1.25;
  color: #3E3831;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
}
.demonav__link:hover { color: #0D0D0D; text-decoration: underline; text-underline-offset: 3px; }
.demonav__link:focus-visible { outline: 2px solid #565F68; outline-offset: 2px; }

.demonav__link--exit { color: #9B4B3F; }

/* ---- The Full Service scenarios ----------------------------------------- */
.demonav__group--scenarios {
  padding: 14px;
  margin: 0 -2px 20px;
  background: #F2EDE8;
  border: 1px solid rgba(149, 126, 104, 0.22);
}

.demonav__scenario {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  margin-bottom: 4px;
  background: #FBF8F5;
  border: 1px solid rgba(149, 126, 104, 0.28);
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
}
.demonav__scenario:hover { border-color: #565F68; }
.demonav__scenario:focus-visible { outline: 2px solid #565F68; outline-offset: 1px; }

.demonav__scenariolabel {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0D0D0D;
  line-height: 1.25;
}

.demonav__scenarionote {
  display: block;
  font-size: 13px;
  color: #655c54;
  line-height: 1.3;
  margin-top: 2px;
}

.demonav__note,
.demonav__foot {
  font-size: 13px;
  line-height: 1.4;
  color: #655c54;
  margin: 10px 0 0;
}

.demonav__foot {
  padding-top: 12px;
  border-top: 1px solid rgba(149, 126, 104, 0.22);
}

.demonav__foot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: #F2EDE8;
  padding: 1px 4px;
}

/* ---- Demo markers inside real screens ----------------------------------- */
/* Used where a screen needs to say "this record is fictional" inline. */
.demo-tag {
  display: inline-block;
  padding: 2px 7px;
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #6B5B3E;
  background: rgba(201, 162, 39, 0.16);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 0;
}

@media (max-width: 767px) {
  .demonav { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
  .demonav__body { width: auto; max-height: 60vh; }
  .demonav__toggle { align-self: flex-end; }
}

@media print {
  .demo-banner, .demonav { display: none !important; }
}

/* ---- The portal switcher ------------------------------------------------
   Lives inside the portal rather than only in the navigator, so the studio
   can move between portal types while looking at one. Demo-only: the suite
   renders it from SuiteDemo.switcher(), which returns '' when isOn() is
   false. */
.demo-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
  background: #F2EDE8;
  border: 1px solid rgba(149, 126, 104, 0.22);
  font-family: 'Darker Grotesque', system-ui, sans-serif;
}

.demo-switch__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: #655c54;
  margin-right: 4px;
}

.demo-switch__opt {
  display: inline-block;
  padding: 7px 12px;
  min-height: 34px;
  font-size: 14px;
  line-height: 20px;
  color: #3E3831;
  background: #FBF8F5;
  border: 1px solid rgba(149, 126, 104, 0.28);
  border-radius: 0;
  text-decoration: none;
}
.demo-switch__opt:hover { border-color: #565F68; color: #0D0D0D; }
.demo-switch__opt:focus-visible { outline: 2px solid #565F68; outline-offset: 1px; }

.demo-switch__opt--on {
  background: #565F68;
  border-color: #565F68;
  color: #EAE3DB;
}

@media (max-width: 767px) {
  .demo-switch { gap: 6px; padding: 10px; }
  .demo-switch__opt { font-size: 13px; padding: 7px 10px; }
}

/* ── THE NAVIGATOR MUST NOT SIT ON A FORM'S SAVE BUTTON ────────────────────
   Both the demo navigator and a Sheet's footer are fixed to the bottom-right
   corner, so with a drawer open the pill covered the Save button — the button
   read "SA" with a black tab over the rest. Found by opening the Add To-Do
   drawer in Chrome at 1440px; no assertion catches two fixed rectangles
   overlapping, which is exactly why the browser pass exists.

   The navigator moves rather than hides: a reviewer who opens a form should
   still be able to see where they are in the demo. It goes to the LEFT edge,
   which a drawer never occupies.

   Set by Sheet.open on <html>, removed on close, so neither component has to
   know the other exists. */
html[data-sheet-open] .demonav {
  right: auto;
  left: 16px;
}
html[data-sheet-open] .demo-banner { z-index: 1; }

@media (max-width: 720px) {
  /* On a phone the drawer is full-width, so there is no free edge. The
     navigator steps out of the way entirely until the form is closed. */
  html[data-sheet-open] .demonav { display: none; }
}