/* Boss HQ demo: guided-tour layer. Uses demo.css tokens, so light and dark both follow the theme. */
.kt-ic {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.kt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border: 1px solid var(--hair);
  background: var(--card);
  color: var(--text);
  border-radius: 4px;
  padding: 8px 16px;
  font: 600 14px var(--f);
  text-decoration: none;
  cursor: pointer;
}
.kt-btn:hover {
  border-color: var(--text);
}
.kt-btn.kt-pri {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-t);
}
.kt-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.kt-ib {
  background: transparent;
  border: 0;
  color: var(--muted);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kt-ib:hover {
  color: var(--text);
  background: var(--sunk);
}

/* spotlight */
.kt-dim {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 16, 0.55);
  z-index: 200;
  pointer-events: none;
}
.kt-spot {
  position: fixed;
  z-index: 201;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(10, 14, 16, 0.55);
  transition:
    left 0.25s ease,
    top 0.25s ease,
    width 0.25s ease,
    height 0.25s ease;
}
.kt-ring {
  position: absolute;
  inset: -3px;
  border-radius: 10px;
  border: 2px solid var(--accent);
  animation: ktpulse 1.8s ease-out infinite;
}
@keyframes ktpulse {
  0% {
    box-shadow: 0 0 0 0 var(--info-bg);
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 12px transparent;
    opacity: 0.5;
  }
}

/* popover */
.kt-pop {
  position: fixed;
  z-index: 210;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--hair);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px 16px 0;
  font-family: var(--f);
  /* F22L: the card fits the viewport at every width; a tall step scrolls inside it and Back and Next stay at its foot */
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.kt-pop .kt-nav {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--card);
  padding: 8px 0 16px;
}
.kt-pop[hidden],
.kt-lay[hidden],
.kt-spot[hidden],
.kt-dim[hidden] {
  display: none;
}
.kt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kt-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kt-pop h3 {
  font-size: 17px;
  margin: 2px 0 6px;
}
.kt-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}
.kt-act {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px 0 0;
  padding: 9px 11px;
  background: var(--info-bg);
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
}
.kt-pop.kt-done .kt-act {
  background: var(--ok-bg);
  color: var(--ok);
}
.kt-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

/* welcome */
.kt-lay {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: rgba(10, 14, 16, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.kt-card {
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  padding: 28px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow);
  font-family: var(--f);
}
.kt-card h2 {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 10px;
}
.kt-card p {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 8px;
}
.kt-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* CTA: the slim strip at the top of the page carries it (demo.css .strip-cta); the welcome overlay and the last step card carry it too */
.kt-fin {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.kt-fin .kt-btn {
  flex: 1;
}
.kt-wcta {
  display: none;
  font-size: 15px;
  line-height: 1.6;
  margin: 22px 0 0;
}
/* the card's own p rule (.kt-card p) outranks the line above, so the space above "Want one built..." needs the same weight */
.kt-card p.kt-wcta {
  margin: 26px 0 0;
}
.kt-lnk {
  display: inline-block;
  font-size: 15px;
  min-height: 44px;
  line-height: 20px;
  padding: 12px 4px;
  border: 0;
  background: none;
  color: var(--link);
  text-decoration: underline;
}
.kt-wcta .kt-lnk {
  display: block;
  padding: 8px 0 0;
  min-height: 44px;
  font-weight: 600;
}
.kt-sheet-hide {
  display: none;
}
.kt-chip {
  display: none;
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 240;
  max-width: calc(100vw - 24px);
  padding: 1px 10px;
  border-radius: 999px;
  background: #2f3b42;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* bottom sheet at 860px and below (the phone shell to 768 and the tab-strip widths to 860, demo.css): the page gets room underneath so the anchor can scroll above the sheet */
@media (max-width: 860px) {
  /* above the tab bar, clear of the top bar and the strip */
  .kt-chip {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  .kt-wcta {
    display: block;
  }
}

/* on a wide screen the toasts ride bottom left while the tour runs, so a toast never covers the spotlit button (step 4's two Mark done buttons sit bottom right) */
@media (min-width: 861px) {
  html.kt-on .toasts {
    right: auto;
    left: 16px;
    /* F22L: the tour chip stands at the bottom center (bottom 8px, about 18px tall) whenever a panel steps the card aside, so while the tour runs the toast sits 36px up and its edge never meets the chip's */
    bottom: 36px;
  }
}
/* the bottom sheet widths (860 and below): toasts ride above the sheet, so a toast and its Undo never cover Back, Next or the step's own words; while the sheet is stepped aside they ride above the chip instead */
@media (max-width: 860px) {
  html.kt-on .toasts {
    bottom: calc(var(--kt-sheet, 0px) + 22px);
  }
  html.kt-on.kt-aside .toasts {
    /* wins over the dialog's own offset (demo-app.js toastAvoid), which would leave the toast on the chip */
    bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Ask Boss fills a phone and its composer sits where the chip would, so the chip waits until Ask closes */
  html.kt-on.kt-aside body:has(.ab-wrap.on) .kt-chip {
    display: none !important;
  }
}

@media (max-width: 860px) {
  .kt-pop.kt-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-width: none;
    border-radius: 14px 14px 0 0;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    max-height: 70vh;
    overflow-y: auto;
    padding-bottom: 0;
  }
  /* on a short phone the words scroll inside the sheet, and Back and Next stay in view at its foot */
  .kt-pop.kt-sheet .kt-nav {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--card);
    margin-top: 6px;
    padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .kt-pop.kt-sheet .kt-fin {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  /* a dialog open on a phone: the sheet steps aside the moment it opens (not on the next 200 ms tick), so a tap lands on the dialog, and it returns when the dialog closes */
  body.has-ov .kt-pop.kt-sheet {
    visibility: hidden;
    pointer-events: none;
  }
  /* the chip shows only while the sheet is stepped aside, and leaves the instant the dialog closes */
  html.kt-on body.has-ov .kt-chip:not([hidden]) {
    display: block;
  }
  .kt-body,
  .kt-act,
  .kt-card p {
    font-size: 15px;
  }
  .kt-btn {
    min-height: 44px;
    font-size: 15px;
    flex: 1;
  }
  .kt-ib {
    width: 44px;
    height: 44px;
  }
  .kt-count {
    font-size: 13px;
  }
  .kt-card {
    padding: 22px;
  }
  .kt-on #wrap {
    padding-bottom: calc(var(--kt-sheet, 0px) + 24px);
  }
}
/* a panel is open (Ask Boss, the bell, search, any sheet or dialog): the card and ring step aside at every width and a small chip keeps the tour visible */
html.kt-aside .kt-pop,
html.kt-aside .kt-spot,
html.kt-aside .kt-dim {
  visibility: hidden;
  pointer-events: none;
}
html.kt-on.kt-aside .kt-chip:not([hidden]) {
  display: block;
}
/* step 3 below the desktop layout (860px and below): the line table keeps only the item, Drawn and Remaining, so the figures the step cites sit on screen with no sideways hunt. The Item column keeps its natural width here; only a phone (480px and below, where the page leaves about 330px) pins it and tightens padding and figures (F22R2) */
@media (max-width: 860px) {
  html.kt-on[data-kt-step='3'] .bd-tbl {
    min-width: 0;
  }
  html.kt-on[data-kt-step='3'] .bd-tbl tr > :nth-child(2),
  html.kt-on[data-kt-step='3'] .bd-tbl tr > :nth-child(3),
  html.kt-on[data-kt-step='3'] .bd-tbl tr > :nth-child(6),
  html.kt-on[data-kt-step='3'] .bd-tbl tr > :nth-child(8) {
    display: none;
  }
}
@media (max-width: 480px) {
  html.kt-on[data-kt-step='3'] .bd-tbl th:first-child,
  html.kt-on[data-kt-step='3'] .bd-tbl td:first-child {
    width: 74px;
    min-width: 74px;
    max-width: 74px;
  }
  /* four columns in 330px: tighter padding and figures */
  html.kt-on[data-kt-step='3'] .bd-tbl th,
  html.kt-on[data-kt-step='3'] .bd-tbl td {
    padding-left: 3px;
    padding-right: 3px;
  }
  html.kt-on[data-kt-step='3'] .bd-tbl td.num {
    font-size: 11px;
    letter-spacing: -0.04em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kt-spot {
    transition: none;
  }
  .kt-ring {
    animation: none;
  }
}