/* =====================================================================
   HRKLIX Design System — Shell layer (topbar + sidebar chrome)
   Implements the .topbar / .sidebar sections of
   HRKLIX_Design_System_Approval_v3.html on top of AdminLTE 2's markup.
   ---------------------------------------------------------------------
   Companion script: hrklix-shell.js — injects the crumbs and adds the
   brand mark / sidebar foot. The sidebar search box is relocated by
   hrklix-nav.js instead, to the top of the icon rail (see hrklix-nav.css).
   This sheet only styles; if the script never runs the page still renders
   exactly as it did before (all new classes are simply absent).
   ---------------------------------------------------------------------
   Loaded AFTER hrklix-theme.css and AFTER site.rtl.css.
   ===================================================================== */

/* ---------- 1. Topbar geometry ----------
   The mock's topbar is 72px; theme section 2 set 64px. Raise it here and
   re-align everything that was hard-coded to the old height. `doLayout()`
   in _Layout.cshtml measures outerHeight() at runtime, so the content area
   follows automatically. */
.main-header,
.main-header .logo,
.main-header .navbar {
  min-height: 72px !important;
}
.main-header .navbar .nav > li > a,
.main-header .sidebar-toggle {
  line-height: 72px !important;
}
.main-header .navbar {
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
}
.main-header .navbar-custom-menu {
  margin-inline-start: auto !important;
  float: none !important;
}
.main-header .navbar-custom-menu > .nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  float: none !important;
}
.main-header .navbar-custom-menu > .nav > li {
  float: none !important;
  display: flex !important;
  align-items: center !important;
}

/* ---------- 2. Breadcrumbs + page title (mock: .crumbs) ----------
   Injected by hrklix-shell.js from the active #SidebarMenu item. */
.hx-crumbs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 14px;
  min-width: 0;
  line-height: 1.25;
}
.hx-crumbs .hx-eyebrow {
  font-size: 11.5px;
  color: var(--hx-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx-crumbs .hx-eyebrow .hx-sep { opacity: .5; }
.hx-crumbs .hx-page-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--hx-ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 3. Icon chips (mock: .icon-chip) ---------- */
.hx-icon-chip {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--hx-line);
  background: var(--hx-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--hx-ink-2);
  position: relative;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  padding: 0;
  flex: 0 0 auto;
}
.hx-icon-chip:hover {
  border-color: var(--hx-sky);
  color: var(--hx-sky-deep);
  background: rgba(73, 179, 228, .06);
}
.hx-icon-chip .icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.hx-icon-chip .hx-dot {
  position: absolute;
  top: 7px;
  inset-inline-start: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hx-orange);
  border: 2px solid #fff;
}
/* Placeholder styling for a non-functional chip -- kept in case a future
   disabled action chip needs it, though nothing currently renders one
   (the dark-mode chip that used to be here was removed, see hrklix-shell.js). */
.hx-icon-chip[aria-disabled="true"] {
  cursor: default;
  opacity: .75;
}
.hx-icon-chip[aria-disabled="true"]:hover {
  border-color: var(--hx-line);
  color: var(--hx-ink-2);
  background: var(--hx-surface);
}

/* ---------- 4. Profile chip (mock: .profile-chip) ----------
   Refines theme section 2's user-menu rules to the two-line meta layout. */
.main-header .navbar-custom-menu .user-menu > a {
  gap: 9px !important;
  padding: 5px 12px 5px 6px !important;
  height: 44px !important;
  line-height: 1.2 !important;
}
.main-header .navbar-custom-menu .user-menu > a > .user-image {
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  box-shadow: 0 0 0 2px var(--hx-line-soft);
}
.main-header .navbar-custom-menu .user-menu > a > .hidden-xs {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--hx-ink);
}
.main-header .navbar-custom-menu .user-menu .hx-user-role {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--hx-muted);
}

/* ---------- 5. Sidebar brand mark (mock: .brand-mark) ---------- */
.main-header .logo {
  gap: 12px !important;
  padding: 0 14px !important;
  text-decoration: none !important;
}
.hx-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--hx-sky), #7ED0F0);
  color: var(--hx-navy-2);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -.5px;
  box-shadow: 0 8px 18px -6px rgba(73, 179, 228, .65);
}
/* When the sidebar is collapsed AdminLTE shows only .logo-mini — keep the
   mark visible there too, and hide the wordmark. */
.sidebar-collapse .main-header .logo .hx-brand-mark {
  margin: 0 auto;
}

/* ---------- 6. Sidebar nav group titles (mock: .nav-title) ----------
   AdminLTE renders Serenity navigation section headers as li.header. */
.sidebar-menu > li.header {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  color: #7C8CB4 !important;
  background: transparent !important;
  text-transform: uppercase;
  padding: 16px 20px 8px !important;
  border: none !important;
}

/* ---------- 7. Sidebar footer user chip (mock: .sidebar-foot) ---------- */
.hx-sidebar-foot {
  margin-top: 10px;
  padding: 14px 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hx-sf-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  flex: 0 0 auto;
  overflow: hidden;
}
.hx-sf-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.hx-sf-text { min-width: 0; }
.hx-sf-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx-sf-role { font-size: 11px; color: #93A4CC; }
/* Collapsed sidebar (body.sidebar-collapse) — AdminLTE narrows the rail to
   50px, so drop the text and centre the avatar. */
.sidebar-collapse .hx-sidebar-foot { justify-content: center; padding-inline: 0; }
.sidebar-collapse .hx-sidebar-foot .hx-sf-text { display: none; }

/* ---------- 8. Toast (mock: .toast) ----------
   Q.notifySuccess/notifyError route through toastr, so restyling the
   toastr container upgrades every existing notification in the app.
   hrklix-shell.js sets positionClass to toast-bottom-center to match. */
/* The container is only a positioning wrapper -- it must never intercept a
   click. toastr sizes it from whichever position classes it carries, and a
   full-width one covers the page; leaving it clickable froze the whole UI
   after any notification. The toasts themselves stay interactive. */
#toast-container { pointer-events: none; }
#toast-container > div { pointer-events: auto; }

#toast-container > div {
  background-image: none !important;
  opacity: 1 !important;
  box-shadow: var(--hx-shadow-pop) !important;
  border-radius: 12px !important;
  padding: 13px 20px !important;
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  width: auto !important;
  max-width: min(520px, 92vw) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: none !important;
}
#toast-container > div:hover { box-shadow: var(--hx-shadow-pop) !important; }
#toast-container > .toast-success,
#toast-container > .toast-info {
  background-color: var(--hx-navy) !important;
  color: #fff !important;
}
#toast-container > .toast-warning {
  background-color: var(--hx-orange-deep) !important;
  color: #fff !important;
}
#toast-container > .toast-error {
  background-color: var(--hx-red) !important;
  color: #fff !important;
}
#toast-container .toast-message { flex: 1 1 auto; }
#toast-container .toast-title { font-weight: 800; }
#toast-container .toast-close-button {
  color: rgba(255, 255, 255, .8) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  font-weight: 700;
}
/* the mock's green check disc, prepended by hrklix-shell.js */
.hx-toast-tick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hx-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: 0 0 auto;
}
.hx-toast-tick .icon {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#toast-container > .toast-error .hx-toast-tick,
#toast-container > .toast-warning .hx-toast-tick { display: none; }

/* ---------- 9. Responsive ---------- */
@media (max-width: 767px) {
  .hx-crumbs .hx-eyebrow { display: none; }
  .hx-crumbs .hx-page-title { font-size: 17px; }
  .main-header .navbar-custom-menu .user-menu > a > .hidden-xs { display: none !important; }
}

/* ---------- 10. Gear panel (AdminLTE control-sidebar) ----------
   Direct links to the settings screens, added in _Layout.cshtml. */
.control-sidebar-dark { background: var(--hx-navy-2) !important; }
.control-sidebar .control-sidebar-heading {
  color: #9FB0D6 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.control-sidebar .form-control {
  height: 40px !important;
  border-radius: var(--hx-radius-sm) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  font-size: 13px !important;
}
.hx-cs-links { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.10); }
.hx-cs-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 12px;
  color: #C7D3EE !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}
.hx-cs-link:hover { background: rgba(255,255,255,.08); color: #fff !important; }
.hx-cs-link .icon {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--hx-sky);
}

/* ---------- 11. Notification bell dropdown ---------- */
.hx-notif-wrap { position: relative; }
.hx-notif-badge {
  position: absolute;
  /* overflow the chip's corner rather than sitting on top of the bell */
  top: -6px;
  inset-inline-end: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--hx-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border: 2px solid #fff;
  box-sizing: content-box;
  pointer-events: none;
}
.hx-notif-badge[hidden] { display: none !important; }

.hx-notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: min(360px, 92vw);
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-md);
  box-shadow: var(--hx-shadow-pop);
  z-index: 1200;
  display: none;
  overflow: hidden;
}
.hx-notif-panel.show { display: block; }

.hx-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hx-line-soft);
}
.hx-notif-title {
  font-family: var(--hx-font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--hx-ink);
}
.hx-notif-markall {
  background: none;
  border: none;
  color: var(--hx-sky-deep);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--hx-radius-sm);
  font-family: inherit;
}
.hx-notif-markall:hover { background: var(--hx-surface-soft); }

.hx-notif-list { max-height: 380px; overflow-y: auto; }
.hx-notif-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--hx-muted);
  font-size: 13px;
}
.hx-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hx-line-soft);
  text-align: start;
  cursor: pointer;
  font-family: inherit;
}
.hx-notif-item:hover { background: var(--hx-surface-soft); }
.hx-notif-item.is-unread { background: rgba(73, 179, 228, .05); }
.hx-notif-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: transparent;
  flex: 0 0 auto;
  margin-top: 6px;
}
.hx-notif-item.is-unread .hx-notif-dot { background: var(--hx-sky); }
.hx-notif-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.hx-notif-msg {
  font-size: 13px;
  color: var(--hx-ink-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hx-notif-item.is-unread .hx-notif-msg { color: var(--hx-ink); font-weight: 600; }
.hx-notif-time { font-size: 11px; color: var(--hx-muted); }
.hx-notif-all {
  display: block;
  padding: 12px 16px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hx-sky-deep) !important;
  text-decoration: none !important;
  background: var(--hx-surface-soft);
}
.hx-notif-all:hover { background: var(--hx-line-soft); }


/* The gear panel paints its selects white-on-navy, but a native <option>
   list is drawn by the OS on a white popup -- inheriting color:#fff made
   every unhovered language invisible. The closed control keeps white text;
   only the popup rows are re-coloured. */
.control-sidebar .form-control option {
  color: var(--hx-navy, #12285C);
  background: #fff;
}

/* Company logo (Configuration -> Company). Sized to the same 40px box as the
   built-in mark so the header keeps its rhythm whatever image is uploaded,
   and letterboxed rather than cropped -- company logos are rarely square. */
.hx-brand-logo {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 11px;
}
.sidebar-collapse .main-header .logo .hx-brand-logo { margin: 0 auto; }

/* ---------- Section tabs (Dashboard / Analytics) ----------
   These two screens left the navigation menu: each is a single page, so a
   menu entry could only ever open an empty module panel. They are two views
   of one section now, switched by this strip, which both pages render from
   Views/Shared/_HxSectionTabs.cshtml. */
.hx-section-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--hx-surface-soft, #F2F6FB);
  border: 1px solid var(--hx-line, #E3EAF3);
}
.hx-section-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hx-text-2, #5A6B85);
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.hx-section-tab:hover { color: var(--hx-navy, #12285C); background: rgba(255, 255, 255, .7); }
.hx-section-tab.is-active {
  background: var(--hx-surface, #fff);
  color: var(--hx-navy, #12285C);
  box-shadow: 0 1px 3px rgba(16, 33, 71, .10);
}
.hx-section-tab-ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-section-tab.is-active .hx-section-tab-ic { stroke: var(--hx-sky, #49B3E4); }

/* Same slot on both screens: its own row at the top of the content area,
   aligned with the page's leading edge. It used to sit inside the dashboard
   hero, which pushed it to the right there and left it on the left on the
   analytics screen -- the control appeared to jump as you switched. */
.hx-dash > .hx-section-tabs { margin: 16px 26px 2px; }
.content-wrapper .hx-section-tabs { margin: 4px 0 14px; }

/* Both tabbed screens drop AdminLTE's 50px fixed-header reserve, so the strip
   lands at the same height on each. (.content-wrapper sits below the header
   rather than under it, so the reserve was dead space either way.) */
body.hx-tabbed-page.fixed .content-wrapper,
/* ------------------------------------------------------------------ *
 * the empty band at the top of every screen
 * ------------------------------------------------------------------ *
 * AdminLTE reserves 50px on .content-wrapper because its header is a FIXED
 * overlay that would otherwise sit on top of the page. The HRKLIX shell made
 * that header position: sticky and left it in flow -- measured, the wrapper
 * already begins at y=73, immediately under it -- so the 50px reserves room
 * for nothing and every screen opened with a 65px band of empty white above
 * its first line.
 *
 * Two page types had already been patched one at a time for this; it is the
 * same bug everywhere, so it is fixed once, here. The content keeps a small
 * breath of its own rather than butting against the topbar.
 */
.content-wrapper { padding-top: 0 !important; }
.content-wrapper > section.content { padding-top: 10px; }

body.hx-tabbed-page .content-wrapper { padding-top: 0 !important; }
body.hx-tabbed-page .content-wrapper > .content { padding-top: 8px; }

/* The settings panel only grows to fit its content, but AdminLTE's
   .control-sidebar-bg sits behind it at full height in the stock charcoal
   (#222d32) -- which showed as a black block under the panel. Give the
   panel the full height and paint the backdrop the same navy. */
.control-sidebar,
.control-sidebar.control-sidebar-open {
  height: 100% !important;
  bottom: 0 !important;
  overflow-y: auto;
}
.control-sidebar-bg,
.control-sidebar-bg.control-sidebar-open {
  background: var(--hx-navy-2) !important;
}

/* ---------- User menu (AdminLTE .user-footer) ----------
   Rebuilt as a vertical list by hrklix-shell.js. AdminLTE's own layout put
   these in floated .pull-left / .pull-right pairs, so five entries came out
   staggered at three different widths with two of them missing icons. */
.user-menu .dropdown-menu { padding: 0 !important; border-radius: 16px !important; overflow: hidden; min-width: 260px !important; }
.user-menu .dropdown-menu > .user-header {
  background: var(--hx-navy) !important;
  padding: 20px 16px 16px !important;
  border: 0 !important;
  height: auto !important;
}
.user-menu .dropdown-menu > .user-header img {
  width: 74px !important; height: 74px !important;
  border: 3px solid rgba(255,255,255,.22) !important;
}
.user-menu .dropdown-menu > .user-header p { margin-top: 10px !important; font-size: 13.5px; font-weight: 700; }

.hx-user-menu.user-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px !important;
  background: var(--hx-surface) !important;
  border-top: 1px solid var(--hx-line) !important;
}
.hx-user-menu.user-footer::before,
.hx-user-menu.user-footer::after { content: none !important; display: none !important; }

.hx-user-menu.user-footer > a.btn,
.hx-user-menu.user-footer > a {
  display: flex !important;
  align-items: center;
  gap: 11px;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--hx-text-1, #3E4A66) !important;
  text-align: start !important;
  transition: background-color .15s ease, color .15s ease;
}
.hx-user-menu.user-footer > a:hover {
  background: var(--hx-surface-soft) !important;
  color: var(--hx-navy) !important;
}
.hx-user-menu .hx-um-ic {
  flex: 0 0 auto;
  color: var(--hx-text-3, #8494AD);
  stroke: currentColor;
  fill: none;
}
.hx-user-menu > a:hover .hx-um-ic { color: var(--hx-sky); }

/* sign out reads as the terminal action */
.hx-user-menu > a.hx-um-signout { margin-top: 4px !important; border-top: 1px solid var(--hx-line) !important; border-radius: 0 0 10px 10px !important; padding-top: 12px !important; color: #C93B3B !important; }
.hx-user-menu > a.hx-um-signout:hover { background: rgba(224,78,78,.08) !important; color: #B62F2F !important; }
.hx-user-menu > a.hx-um-signout .hx-um-ic { color: #D66; }


/* The topbar owns the page title; a page's own masthead heading is hidden by
   hideDuplicatePageTitle() so the name is not printed twice. Kept as a class
   rather than inline styles so it is visible when inspecting the page. */
.hx-dup-title { display: none !important; }

/* =====================================================================
   The strip on the home page that offers the wizard
   ---------------------------------------------------------------------
   Not scoped under .ob-root, and deliberately not in
   hrklix-onboarding.css: the strip is drawn on the home page, which loads
   the shell and the dashboard stylesheets but not the wizard's. The shell
   is loaded by _LayoutHead on every page, so this is the one place the
   rules are certain to be there when the strip is.

   It is a strip, not a card and not a modal. A modal would make the first
   thing a new customer ever sees an obstacle, and a card would put it in
   competition with the widgets it sits above.
   ===================================================================== */
.hx-setup-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: var(--hx-radius-md, 8px);
  background: var(--hx-surface-soft, #f4f7fb);
  border-inline-start: 3px solid var(--hx-sky, #3d8bd6);
  font-family: var(--hx-font-ui, inherit);
}

.hx-setup-text {
  flex: 1 1 420px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--hx-ink-2, #4a5568);
}

.hx-setup-text strong {
  display: block;
  font-size: 14px;
  color: var(--hx-navy, #16325c);
  margin-bottom: 3px;
}

.hx-setup-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: var(--hx-radius-sm, 5px);
  background: var(--hx-navy, #16325c);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .16s ease;
}

.hx-setup-btn:hover,
.hx-setup-btn:focus {
  background: var(--hx-navy-2, #1e4374);
  color: #fff;
  text-decoration: none;
}

/* The dismiss control on the setup strip. Quiet until approached: it sits
   beside the primary action and must never compete with it, but it has to be
   findable by anyone who has decided they do not want the reminder. */
/* Steps visited, beside the action rather than above the text: it is a fact
   about the button next to it, and putting it in the sentence would make the
   sentence a dashboard. */
.hx-setup-progress {
  flex: 0 0 auto;
  min-width: 128px;
  text-align: end;
}

.hx-setup-progress-figure {
  font-family: var(--hx-font-data, inherit);
  font-size: 20px;
  font-weight: 800;
  color: var(--hx-navy, #16325c);
  line-height: 1;
}

.hx-setup-progress-figure span {
  font-size: 13px;
  font-weight: 600;
  color: var(--hx-muted, #98a2b3);
}

.hx-setup-progress-track {
  height: 4px;
  border-radius: 2px;
  background: var(--hx-line, #e4e7ec);
  margin: 8px 0 5px;
  overflow: hidden;
}

.hx-setup-progress-fill {
  height: 100%;
  background: var(--hx-sky, #3d8bd6);
  transition: width .3s ease;
}

.hx-setup-progress-label {
  font-size: 10.5px;
  color: var(--hx-muted, #98a2b3);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.hx-setup-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hx-setup-close {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--hx-muted, #98a2b3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

.hx-setup-close:hover {
  background: rgba(0, 0, 0, .06);
  color: var(--hx-ink, #1d2939);
}

.hx-setup-close:focus-visible {
  outline: none;
  box-shadow: var(--hx-focus, 0 0 0 3px rgba(61, 139, 214, .35));
}

@media (prefers-reduced-motion: reduce) {
  .hx-setup-close,
  .hx-setup-btn,
  .hx-setup-progress-fill { transition: none; }
}