/* The interactive demo, as a page of its own.

   It is served from static/, so it carries its own styles rather than going
   through Hugo's SASS pipeline. The tokens below are the theme's, flattened;
   when this moves into the theme they become the variables named beside them.
   =========================================================================== */

@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Regular.ttf");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Bold.ttf");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Black.ttf");
  font-weight: 900;
  font-display: swap;
}

:root {
  --sg-orange: #f85e00; /* $sigasi-orange, $sigasi-accent, the same in both modes */
  --sg-navy: #111d4a; /* $sigasi-black, $sigasi-foreground: the text colour */
  --sg-ink: 17, 29, 74; /* the same colour as an rgb triple, for muted text */
  --sg-page: #ffffff; /* the page behind everything */
  --sg-surface: #ffffff; /* cards, tiles, inputs */
  --sg-white: #ffffff; /* literally white, for text on the orange button */
  --sg-muted-bg: #f5f5f5; /* $sigasi-light-grey, recessed panels */
  --sg-border: #e5e5e5; /* $global-border */
  --sg-radius: 0.5rem; /* $sg-border-radii-medium */
  --sg-radius-lg: 2rem; /* $sg-border-radii-large */
}

/* Dark mode.
   The site follows the browser or OS setting through prefers-color-scheme and
   has no manual toggle, so this page does the same. The values are the theme's
   own, from themes/sigasi_theme/assets/sass/sigasi/dark-mode.scss, which is
   where this block goes when the page moves into the theme.

   The clips were rendered on $sigasi-dark-background, so in dark mode the frame
   around the clip is the same colour as the clip and the two stop fighting. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Renders scrollbars, form controls and the like dark. */
    color-scheme: dark;

    --sg-navy: #f4f6fa; /* $sigasi-dark-foreground */
    --sg-ink: 244, 246, 250;
    --sg-page: #0c1330; /* $sigasi-dark-background */
    --sg-surface: #16203f; /* $sigasi-dark-surface */
    --sg-muted-bg: #0c1330; /* what the theme gives .sg-tour-log */
    --sg-border: rgba(255, 255, 255, 0.14); /* $sigasi-dark-border */
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--sg-page);
  color: var(--sg-navy);
  font-family: "Lato", -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.uk-input {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
  color: var(--sg-navy);
  font-family: inherit;
  font-size: 0.95rem;
}

.uk-button {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px; /* $sg-button-border-radius */
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.uk-button-primary {
  background: var(--sg-orange);
  color: var(--sg-white);
}

.uk-hidden-visually {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* The page itself. */
.sg-tour-dialog {
  max-width: 100rem;
  margin: 0 auto;
}

/* At popup size the page shows what the popup shows, at the width the popup
   has, so the control means the same thing in both places. */
.sg-tour:not(.is-full) .sg-tour-dialog {
  max-width: min(72rem, 94vw);
  padding-top: 2rem;
}

/* ===========================================================================
   The demo. Identical to the popup's own styles, so this file and the theme's
   guided-tour.scss stay one design.
   =========================================================================== */

/* The dialog has to be wider than the 52rem the chat panel used: the flow is
   seven stages across. */
.sg-tour .uk-modal-dialog {
  width: min(72rem, 94vw);
  max-width: none;
}

.sg-tour-dialog {
  padding: 2rem; /* $sg-spacing-lg */
}

.sg-tour-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sg-tour-head .uk-modal-title {
  flex: 1 1 auto;
}

/* The size toggle. It sits left of the close button, with room kept for it, so
   the two never overlap at narrow widths. */
.sg-tour-size {
  flex: 0 0 auto;
  margin-right: 2rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--sg-border);
  border-radius: 999px;
  background: var(--sg-surface);
  color: var(--sg-navy);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.sg-tour-size:hover,
.sg-tour-size:focus-visible {
  border-color: var(--sg-orange);
  color: var(--sg-orange);
}

.sg-tour-mark {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
}

/* --- the flow ------------------------------------------------------------ */

/* Seven stages on one line. It scrolls sideways rather than wrapping, because
   a flow that wraps stops reading as a flow. */
.sg-flow {
  margin: 0 0 1.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.sg-flow-rail {
  display: grid;
  grid-auto-columns: minmax(7.5rem, 1fr);
  grid-auto-flow: column;
  gap: 0.35rem;
  min-width: 46rem;
}

.sg-flow-stage {
  position: relative;
  padding: 0.7rem 0.6rem;
  border: 1px solid var(--sg-border);
  border-top: 3px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-muted-bg);
  color: rgba(var(--sg-ink), 0.5);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* The stages the product works in. The orange top edge is the only thing that
   separates them, so it carries the whole point of the diagram. */
.sg-flow-stage.is-sigasi {
  border-top-color: var(--sg-orange);
  background: var(--sg-surface);
  color: var(--sg-navy);
}

/* The arrow between stages. Drawn on the element rather than as a separate
   grid cell so the columns stay equal. */
.sg-flow-stage + .sg-flow-stage::before {
  position: absolute;
  top: 50%;
  left: -0.35rem;
  width: 0.35rem;
  height: 1px;
  background: var(--sg-border);
  content: "";
}

/* The bracket under the Sigasi span. */
.sg-flow-bracket {
  display: grid;
  grid-auto-columns: minmax(7.5rem, 1fr);
  grid-auto-flow: column;
  gap: 0.35rem;
  min-width: 46rem;
  margin-top: 0.4rem;
}

.sg-flow-bracket-span {
  border-top: 2px solid var(--sg-orange);
  border-right: 2px solid var(--sg-orange);
  border-left: 2px solid var(--sg-orange);
  border-radius: 0 0 0 0;
  padding-top: 0.4rem;
  color: var(--sg-navy);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.sg-flow-note {
  margin: 0.6rem 0 0;
  color: rgba(var(--sg-ink), 0.6);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* --- the groups ---------------------------------------------------------- */

/* The same tiles as the topic buttons the chat panel used, so the popup still
   looks like the one that was built. */
.sg-tour-topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
}

/* The grid cell. It holds the group's own button, and at full size the feature
   list moves in underneath it. */
.sg-tour-group {
  display: flex;
  min-width: 0;
}

.sg-tour-topic {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
  color: var(--sg-navy);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sg-tour-topic:hover,
.sg-tour-topic:focus-visible {
  border-color: var(--sg-orange);
  box-shadow: 0 0.3rem 0.9rem rgba(17, 29, 74, 0.12); /* shadows stay dark in both modes */
}

.sg-tour-topic:focus-visible {
  outline: 2px solid var(--sg-orange);
  outline-offset: 2px;
}

/* The open group. Marked by a filled left edge rather than a different
   background, so the six tiles stay the same weight on the page. */
.sg-tour-topic[aria-expanded="true"] {
  border-color: var(--sg-orange);
  box-shadow: inset 0.25rem 0 0 var(--sg-orange);
}

.sg-tour-topic-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}

.sg-tour-topic-count {
  color: rgba(var(--sg-ink), 0.45);
  font-weight: 400;
}

.sg-tour-topic-hint {
  color: rgba(var(--sg-ink), 0.65);
  font-size: 0.75rem;
  line-height: 1.35;
}

/* --- the open group ------------------------------------------------------ */

/* The list of features on the left, the clip on the right. The overview above
   stays where it is, so moving between features never costs the context. */
.sg-feat {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-muted-bg);
}

.sg-feat[hidden] {
  display: none;
}

.sg-feat-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sg-feat-item {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--sg-radius);
  background: transparent;
  color: var(--sg-navy);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.sg-feat-item:hover,
.sg-feat-item:focus-visible {
  background: var(--sg-surface);
}

.sg-feat-item[aria-current="true"] {
  background: var(--sg-surface);
  border-color: var(--sg-border);
  box-shadow: inset 0.2rem 0 0 var(--sg-orange);
}

.sg-feat-stage {
  margin: 0;
}

/* The clip keeps its 16:9 shape, and the cap stops it running off the bottom of
   a wide window at full size. The clips already sit on this exact field colour,
   so the letterboxing the cap produces is invisible. */
.sg-feat-video {
  display: block;
  width: 100%;
  max-height: 60vh;
  border-radius: var(--sg-radius);
  background: #0c1330; /* $sigasi-dark-background, the field the clips sit on */
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.sg-feat-caption {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.sg-feat-caption strong {
  display: block;
  font-size: 1rem;
}

.sg-feat-nav {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.7rem;
}

.sg-feat-step {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--sg-border);
  border-radius: 999px;
  background: var(--sg-surface);
  color: var(--sg-navy);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.sg-feat-step[disabled] {
  opacity: 0.4;
  cursor: default;
}

.sg-feat-pos {
  color: rgba(var(--sg-ink), 0.55);
  font-size: 0.78rem;
}

/* --- the question box ---------------------------------------------------- */

/* Unchanged from the popup already on the site. Repeated here only because this
   page has no theme to inherit it from. */
.sg-tour-chat {
  margin-top: 1.5rem;
}

.sg-tour-chat h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

/* You type at the top and read the reply underneath, rather than the other way
   round. */
.sg-tour-ask {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sg-tour-ask .uk-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-surface);
  color: var(--sg-navy);
  font-family: inherit;
  font-size: 0.95rem;
}

.sg-tour-log {
  overflow-y: auto;
  height: 8rem;
  padding: 0.5rem;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: var(--sg-muted-bg);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* The panel speaks in navy, the visitor's own words are set back in grey, so
   the two sides are told apart without avatars. */
.sg-tour-line {
  margin: 0 0 0.5rem;
}

.sg-tour-line.is-sal {
  color: var(--sg-navy);
}

.sg-tour-line.is-you {
  color: rgba(var(--sg-ink), 0.65);
  font-style: italic;
}

/* The consent line under the request for an address. Smaller than the reply it
   follows: it is a condition of answering, not part of the answer. */
.sg-tour-consent {
  margin: -0.25rem 0 0.5rem;
  color: rgba(var(--sg-ink), 0.6);
  font-size: 0.78rem;
  line-height: 1.45;
}

.sg-tour-consent a {
  color: var(--sg-orange);
  font-weight: 700;
}

.sg-tour-disclaimer {
  margin: 0.5rem 0 0;
  color: rgba(var(--sg-ink), 0.6);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* --- full size ----------------------------------------------------------- */

/* The dialog fills the window. The class sits on the modal element itself,
   which on the site is also the .uk-modal element, so zeroing the padding here
   removes UIkit's gutter as well as this page's. */
.sg-tour.is-full {
  padding: 0;
}

.sg-tour.is-full .uk-modal-dialog {
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  border-radius: 0;
}

/* The question box is not part of the full view: at full size the demo is the
   clips and nothing else. It comes back at popup size. */
.sg-tour.is-full .sg-tour-chat {
  display: none;
}

/* At full size the six groups become one column down the left and the clip
   takes everything else. The group that is playing opens and lists its features
   underneath itself, so the whole demo is one list you work down rather than a
   grid above a panel. */
.sg-tour.is-full [data-tour] {
  display: grid;
  grid-template-areas: "rail stage";
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* The flow is the overview for the popup, where there is room for it. At full
   size the clip is the point, so the flow stands down and gives it the height. */
.sg-tour.is-full .sg-flow {
  display: none;
}

.sg-tour.is-full .sg-tour-topics {
  grid-area: rail;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  margin: 0;
}

.sg-tour.is-full .sg-feat {
  grid-area: stage;
  grid-template-columns: minmax(0, 1fr);
}

/* The wrapper stops being a row: the button sits on top, the list under it. A
   button sizes to its text, so it is told to fill the rail instead. */
.sg-tour.is-full .sg-tour-group {
  display: block;
}

.sg-tour.is-full .sg-tour-topic {
  width: 100%;
}

.sg-tour.is-full .sg-feat-list {
  gap: 0.3rem;
  margin: 0.35rem 0 0.6rem 0.9rem;
}

/* On the dialog's white the items need an edge of their own; in the panel they
   sat on grey and did not. */
.sg-tour.is-full .sg-feat-item {
  border-color: var(--sg-border);
  background: var(--sg-surface);
}

/* Sized so the flow, the caption and the step row all fit the window with the
   clip. The subtraction is the height of everything above and below it. */
.sg-tour.is-full .sg-feat-video {
  max-height: calc(100vh - 16rem);
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 960px) {
  .sg-feat {
    grid-template-columns: minmax(0, 1fr);
  }
  .sg-feat-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }
  .sg-feat-item {
    flex: 0 0 auto;
  }

  /* Too narrow for a rail beside the clip, so full size keeps the stacked
     layout and only loses the window's edges. */
  .sg-tour.is-full [data-tour] {
    display: block;
  }
  .sg-tour.is-full .sg-tour-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1rem 0;
  }
  .sg-tour.is-full .sg-feat-video {
    max-height: 60vh;
  }
}

@media (max-width: 640px) {
  .sg-tour-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sg-tour-dialog {
    padding: 1.25rem;
  }
  .sg-tour-ask {
    flex-wrap: wrap;
  }
  .sg-tour-size {
    display: none;
  }
}

@media (max-width: 420px) {
  .sg-tour-topics {
    grid-template-columns: 1fr;
  }
}

/* --- as a page ------------------------------------------------------------ */

/* The page opens at full size, where the flow and the question box stand down
   and the clip is what the page is for. The control in the header switches to
   popup size and brings all three back. Nothing here differs from the popup:
   .is-page only exists so the page can be told apart from the modal. */

.sg-tour.is-page .sg-tour-head {
  margin-bottom: 1.25rem;
}

/* Zoho answers with JSON rather than a page, so its answer is parked out of
   sight exactly as it is in the footer sign-up. */
.sg-tour-sink,
.sg-tour-form {
  display: none;
}

@media (max-width: 960px) {
  .sg-tour.is-page [data-tour] {
    display: block;
  }
}

.sg-tour-foot {
  margin: 1.5rem 0 0;
  color: rgba(var(--sg-ink), 0.6);
  font-size: 0.78rem;
}

.sg-tour-foot a {
  color: rgba(var(--sg-ink), 0.6);
}