/* HENG-132 demo mode. The only new styles; everything else is the site's shipped CSS. */

/* Enter demo mode: a presenter-only control in the header's end group, before the company
   switcher. Quiet outline, so it sits beside the switcher without competing with Share. */
.demo-enter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--line-hairline);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.demo-enter:hover { background: var(--state-hover-fill); }
.demo-enter:focus-visible { box-shadow: var(--focus-ring); }
.demo-enter svg { flex: none; }

/* Enter demo mode is an icon only, styled as the theme toggle beside it so it reads as one more quiet
   control. Its label is the tooltip and the accessible name. */
.demo-enter--icon {
  min-width: 31px;
  min-height: 31px;
  padding: 6px;
  border: none;
}

/* The Demo badge: in the brand group in place of Beta, and unlike Beta it is never hidden, at any
   width. The danger palette so it cannot be mistaken for the Beta or environment pills. */
.demo-badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 9px 1px 10px;
  border: 1px solid var(--meaning-danger-border);
  border-radius: 999px;
  background: var(--meaning-danger-bg);
  color: var(--meaning-danger);
}

/* Leave demo mode: below the demo company list in the switcher dialog, under a rule. */
.company-switcher__demo-exit {
  margin: 0;
  padding: 0 14px 14px;
}
.company-switcher__dialog .company-switcher__demo-exit form { margin: 0; padding: 0; }
.company-switcher__demo-exit button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-top: 1px solid var(--line-hairline);
  border-radius: 0 0 8px 8px;
  background: transparent;
  color: var(--ink-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.company-switcher__demo-exit button:hover { background: var(--state-hover-fill); }
.company-switcher__dialog .company-switcher-list:has(+ .company-switcher__demo-exit) form { padding-bottom: 8px; }

/* Phone: the badge stays, so tighten it; Enter demo mode lives in the phone menu instead. */
@media (max-width: 860px) {
  .demo-enter { display: none; }
  .demo-badge { font-size: 9.5px; padding: 1px 7px 0 8px; }
}
.phone-menu__section--demo {
  margin: 0 0 4px;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--filter-dialog-row-rule);
}
.phone-menu__section--demo form { margin: 0; }
.phone-menu__section--demo + .phone-menu__section--company { margin-top: 0; border-top: none; }
.phone-menu__section--demo .phone-menu__row { font-weight: 600; }

/* Entering or leaving (public/common/demo-mode.js): the spinner stands in the clicked control's icon
   until the page reloads. Its colours follow the theme, so it shows on the header and in the dialogs. */
.demo-enter.is-pending,
.company-switcher__demo-exit button.is-pending,
.phone-menu__section--demo .phone-menu__row.is-pending { cursor: progress; }
.demo-enter .spinner,
.company-switcher__demo-exit .spinner,
.phone-menu__section--demo .spinner {
  flex: none;
  border-color: var(--line-hairline);
  border-top-color: var(--ink-primary);
}