/* ============================================================
   Leadership Level Diagnostic — HubSpot custom module
   Self-contained. No @huntclub/ui bundle, no Tailwind, no React.

   Everything is scoped under .hc-lld so the module cannot leak
   styles into the HubSpot page, and the reset block stops the
   page theme from leaking in.

   Tokens below are the resolved values of the HuntClubUI
   "editorial light" theme. If the design system changes, update
   the :root block here — nothing else references raw colors.
   ============================================================ */

.hc-lld {
  /* ---- color (editorial · light) ---- */
  --color-background:         #f9f7f3;
  --color-foreground:         #0c0c0b;
  --color-card:               #ffffff;
  --color-card-foreground:    #0c0c0b;
  --color-popover:            #ffffff;
  --color-popover-foreground: #0c0c0b;
  --color-primary:            #1e5c3a;
  --color-primary-foreground: #f9f7f3;
  --color-muted:              #f4f1eb;
  --color-muted-foreground:   #3d3d3a;
  --color-border:             #e6e3dc;
  --color-brand-translucent:  rgba(47, 145, 88, 0.18);
  --color-brand-dark:         #0e3320;
  --color-warning-dark:       #604618;

  /* ---- shape / motion ---- */
  --radius-surface: 14px;
  --radius-pill:    100px;
  --shadow-lift:    0 8px 20px rgba(0, 0, 0, 0.06);
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- type families ----
     NOTE: the design system's mono role is JetBrains Mono. This
     surface deliberately swaps it for Inter — see README. */
  --font-body:  "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-mono:  "Inter", "Helvetica Neue", Arial, sans-serif;

  container-type: inline-size;
  container-name: lld;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;

  /* The Hunt Club theme sets `html { text-align: center }`, which inherits
     into everything that does not declare its own alignment. Stop it here,
     at the module root, so the whole subtree starts left-aligned. The few
     places that are deliberately centred or right-aligned declare it
     directly on the element, which always beats an inherited value. */
  text-align: left;
}

/* ---- scoped reset: block the HubSpot theme from bleeding in ---- */
.hc-lld *,
.hc-lld *::before,
.hc-lld *::after { box-sizing: border-box; }

.hc-lld h1, .hc-lld h2, .hc-lld h3, .hc-lld p, .hc-lld figure {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.hc-lld button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.hc-lld input {
  font: inherit;
  color: inherit;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.hc-lld svg { display: block; max-width: 100%; }
.hc-lld strong { font-weight: 600; }
.hc-lld em { font-style: italic; }

.hc-lld a { color: var(--color-primary); text-decoration: none; }
.hc-lld a:hover { color: var(--color-brand-dark); }

/* ============================================================
   Type roles — the HuntClubUI `type-*` ladder, scoped.
   Only the roles this surface actually uses are included.
   ============================================================ */

.hc-lld .type-eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-muted-foreground);
}
.hc-lld .type-intro {
  font-family: var(--font-body); font-size: 17px; font-weight: 300;
  line-height: 28px; color: var(--color-muted-foreground);
}
.hc-lld .type-body {
  font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.65;
}
.hc-lld .type-label {
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 20px;
}
.hc-lld .type-caption {
  font-family: var(--font-body); font-size: 11px; font-weight: 400;
  line-height: 16px; color: var(--color-muted-foreground);
}

.hc-lld .type-serif-headline {
  font-family: var(--font-serif); font-size: clamp(36px, 4vw, 64px);
  font-weight: 400; letter-spacing: -.03em; line-height: 1.1;
}
.hc-lld .type-serif-subhead {
  font-family: var(--font-serif); font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 400; letter-spacing: -.03em; line-height: 1.1;
}
.hc-lld .type-serif-lead {
  font-family: var(--font-serif); font-size: 21px; font-weight: 400; line-height: 32px;
}
.hc-lld .type-serif-body {
  font-family: var(--font-serif); font-size: 16px; font-weight: 400; line-height: 26px;
}
.hc-lld .type-serif-footnote {
  font-family: var(--font-serif); font-size: 14px; font-weight: 400;
  font-style: italic; line-height: 22px; color: var(--color-muted-foreground);
}

.hc-lld .type-mono-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}
.hc-lld .type-mono-meta {
  font-family: var(--font-mono); font-size: 13px; font-weight: 400;
  color: var(--color-muted-foreground);
}
.hc-lld .type-mono-caption {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  line-height: 16px; color: var(--color-muted-foreground);
}
.hc-lld .type-mono-metric {
  font-family: var(--font-mono); font-size: 28px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.hc-lld .type-mono-stat {
  font-family: var(--font-mono); font-size: 22px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Structure
   ============================================================ */

.lld-wrap { max-width: 1120px; margin: 0 auto; }

.lld-head {
  border-bottom: 1px solid var(--color-border);
  padding: 32px 24px 36px;
}
.lld-head-row {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 24px;
}
.lld-rule { display: flex; align-items: center; gap: 10px; }
.lld-rule-tick { width: 40px; height: 2px; background: var(--color-primary); }
.lld-rule-line { flex: 1; height: 1px; background: var(--color-border); }

.lld-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-card);
  color: var(--color-card-foreground);
}

.lld-2col {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 36px; padding: 28px;
}

.lld-howto-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px; padding: 14px 0; border-top: 1px solid var(--color-border);
}
.lld-howto-row:first-child { border-top: 0; }

.lld-cat-grid {
  margin-top: 16px; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px;
}
.lld-cat { display: flex; gap: 10px; align-items: baseline; }

/* ---- sticky rail ----
   The Hunt Club theme's site header is itself `position: sticky; top: 0`,
   so the rail must sit below it rather than at the viewport top. The theme
   publishes its own header height as --header-offset on :root (72px mobile,
   64/74/85px across the desktop breakpoints) and uses it for exactly this.
   The 0px fallback keeps preview.html, and any non-theme host, unchanged. */
.lld-sticky {
  position: sticky; top: var(--header-offset, 0px); z-index: 30; margin-top: 28px;
  background: var(--color-card); border-bottom: 1px solid var(--color-border);
}
.lld-progress-track { height: 3px; background: var(--color-border); }
.lld-progress-fill {
  height: 3px; background: var(--color-primary);
  transition: width .5s var(--ease-out);
}
.lld-rail-row {
  max-width: 1120px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 16px;
}
.lld-rail {
  flex: 1; min-width: 0; display: flex; gap: 8px;
  overflow-x: auto; padding: 4px 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.lld-rail::-webkit-scrollbar { display: none; }

.hc-lld .lld-pill {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  cursor: pointer; padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: transparent;
  color: var(--color-muted-foreground); opacity: .65; transition: all .2s;
}
.hc-lld .lld-pill:hover { opacity: .85; }
.hc-lld .lld-pill[data-state="started"] { color: var(--color-foreground); opacity: 1; }
.hc-lld .lld-pill[data-state="done"] {
  background: var(--color-brand-translucent); color: var(--color-primary); opacity: 1;
}
.hc-lld .lld-pill[data-state="active"] {
  background: var(--color-primary); color: var(--color-primary-foreground); opacity: 1;
}
.hc-lld .lld-pill .type-mono-meta,
.hc-lld .lld-pill .type-label { color: inherit; }
.hc-lld .lld-pill-name {
  max-width: 150px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.lld-rail-side {
  display: flex; align-items: center; gap: 16px;
  padding-left: 16px; border-left: 1px solid var(--color-border); flex-shrink: 0;
}

/* ---- buttons (hand-rolled to match HuntClubUI.Button) ---- */
.hc-lld .lld-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 20px;
  padding: 8px 18px; border-radius: var(--radius-pill); flex-shrink: 0;
  border: 1px solid transparent;
  background: var(--color-primary); color: var(--color-primary-foreground);
  transition: background .2s var(--ease-out), color .2s var(--ease-out), opacity .2s;
}
.hc-lld .lld-btn:hover { background: var(--color-brand-dark); }
.hc-lld .lld-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hc-lld .lld-btn[disabled] { opacity: .4; cursor: not-allowed; }
.hc-lld .lld-btn[disabled]:hover { background: var(--color-primary); }

.hc-lld .lld-btn--outline {
  background: transparent; color: var(--color-foreground);
  border-color: var(--color-border);
}
.hc-lld .lld-btn--outline:hover { background: var(--color-muted); color: var(--color-foreground); }

.hc-lld .lld-btn--ghost { background: transparent; color: var(--color-muted-foreground); }
.hc-lld .lld-btn--ghost:hover { background: var(--color-muted); color: var(--color-foreground); }

.hc-lld .lld-btn--sm { padding: 6px 14px; font-size: 12px; }

.hc-lld .lld-linkbtn {
  cursor: pointer; color: var(--color-muted-foreground); transition: color .2s;
}
.hc-lld .lld-linkbtn:hover { color: var(--color-primary); }
.hc-lld .lld-linkbtn[disabled] { opacity: .25; cursor: default; }
.hc-lld .lld-linkbtn[disabled]:hover { color: var(--color-muted-foreground); }

/* ---- text inputs (hand-rolled to match HuntClubUI.Input) ---- */
.hc-lld .lld-input {
  width: 100%; padding: 9px 14px;
  font-family: var(--font-body); font-size: 14px; line-height: 20px;
  color: var(--color-foreground); background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.hc-lld .lld-input::placeholder { color: var(--color-muted-foreground); opacity: .7; }
.hc-lld .lld-input:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-brand-translucent);
}

/* ---- question rows + likert scale ---- */
.lld-qrow { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
.lld-qname { font-size: 26px; }

.lld-scale { margin-top: 32px; position: relative; }
.lld-scale-track {
  position: absolute; left: 0; right: 0; top: 9px;
  height: 2px; background: var(--color-border);
}
.lld-scale-fill {
  position: absolute; left: 0; top: 9px; height: 2px;
  background: var(--color-primary); transition: width .2s var(--ease-out);
}
.hc-lld .lld-ticks { position: relative; display: flex; }

.hc-lld .lld-tick {
  position: relative; flex: 1; display: flex; flex-direction: column;
  align-items: center; cursor: pointer;
  color: var(--color-muted-foreground); transition: color .2s;
}
.hc-lld .lld-tick:hover { color: var(--color-primary); }
.hc-lld .lld-tick[data-filled="1"] { color: var(--color-primary); }
.hc-lld .lld-tick[data-pos="first"] { align-items: flex-start; }
.hc-lld .lld-tick[data-pos="last"] { align-items: flex-end; }
.hc-lld .lld-tick[data-pos="second"] { transform: translateX(-25%); }
.hc-lld .lld-tick[data-pos="fourth"] { transform: translateX(25%); }

.hc-lld .lld-dot {
  border-radius: 999px; box-sizing: border-box;
  width: 12px; height: 12px; margin: 4px;
  background: var(--color-card); border: 2px solid currentColor;
  transition: all .2s var(--ease-out);
}
.hc-lld .lld-dot[data-state="filled"] {
  background: currentColor; border-color: currentColor;
}
.hc-lld .lld-dot[data-state="selected"] {
  width: 20px; height: 20px; margin: 0;
  background: currentColor; border-color: currentColor;
  box-shadow: 0 0 0 4px var(--color-brand-translucent);
}

.hc-lld .lld-tick-n { color: inherit; margin-top: 10px; }
.hc-lld .lld-tick-label {
  color: inherit; text-transform: uppercase;
  letter-spacing: .1em; text-align: center;
}

/* ---- hover tooltips on ticks 1 / 3 / 5 (CSS only) ---- */
.hc-lld .lld-tip {
  position: absolute; bottom: calc(100% + 16px); z-index: 40;
  width: 280px; max-width: 70vw; text-align: left;
  background: var(--color-popover); color: var(--color-popover-foreground);
  border: 1px solid var(--color-border); border-radius: var(--radius-surface);
  box-shadow: var(--shadow-lift); padding: 14px 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s var(--ease-out);
}
.hc-lld .lld-tick[data-pos="first"] .lld-tip { left: -8px; }
.hc-lld .lld-tick[data-pos="last"]  .lld-tip { right: -8px; }
.hc-lld .lld-tick[data-pos="middle"] .lld-tip { left: 50%; transform: translateX(-50%); }
.hc-lld .lld-tick:hover .lld-tip,
.hc-lld .lld-tick:focus-visible .lld-tip { opacity: 1; visibility: visible; }
.hc-lld .lld-tip-label { display: block; color: var(--color-primary); }
.hc-lld .lld-tip-text { display: block; margin-top: 8px; font-style: normal; text-wrap: pretty; }

.lld-scale-hint { margin-top: 22px; }

/* ---- step header / footer ---- */
.lld-step-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--color-foreground);
}
.lld-questions { margin-top: 56px; display: grid; gap: 52px; }
.lld-step-foot {
  margin-top: 56px; padding: 22px 0 64px;
  border-top: 1px solid var(--color-foreground);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}

/* ---- results ---- */
.lld-results { max-width: 1120px; margin: 0 auto; padding: 28px 24px 80px; }
.lld-results-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.hc-lld .lld-viewtabs {
  flex-shrink: 0; display: inline-flex; padding: 4px; gap: 4px;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.hc-lld .lld-viewtab {
  padding: 7px 18px; cursor: pointer; border-radius: var(--radius-pill); flex-shrink: 0; white-space: nowrap;
  background: transparent; color: var(--color-muted-foreground); transition: all .2s;
}
.hc-lld .lld-viewtab .type-label { color: inherit; }
.hc-lld .lld-viewtab[aria-selected="true"] {
  background: var(--color-primary); color: var(--color-primary-foreground);
}

.lld-panel {
  border: 1px solid var(--color-border); border-radius: var(--radius-surface);
  background: var(--color-card); padding: 28px;
}
.lld-radar-grid {
  margin-top: 32px; display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px; align-items: start;
}
.lld-legend {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--color-border); display: flex; gap: 24px;
}
.lld-legend-item { display: flex; align-items: center; gap: 8px; }

.lld-rank-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--color-border);
}
.lld-rank-row:first-child { border-top: 0; }

.lld-comp-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border);
}
.lld-comp-dim {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px;
  gap: 20px; align-items: center;
}
.lld-bar {
  position: relative; height: 8px; border-radius: 999px; background: var(--color-muted);
}
.lld-bar[data-empty="1"] {
  height: 6px; background: transparent; border-top: 1px solid var(--color-border);
}
.lld-bar-mark { position: absolute; top: 1px; bottom: 1px; width: 1px; background: var(--color-border); }
.lld-bar[data-empty="1"] .lld-bar-mark { background: transparent; }
.lld-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px; background: var(--color-primary); transition: width .2s;
}
.lld-bar-marker {
  position: absolute; top: 50%; width: 14px; height: 14px;
  margin-left: -7px; margin-top: -7px; border-radius: 999px;
  background: var(--color-card); border: 2px solid var(--color-primary);
}
.lld-bar-empty {
  position: absolute; left: 0; right: 0; top: -6px; text-align: center;
  background: var(--color-background); padding: 0 8px;
  text-transform: uppercase; letter-spacing: .1em;
}
.lld-bar-ends { margin-top: 8px; display: flex; justify-content: space-between; }
.lld-bar-ends span { text-transform: uppercase; letter-spacing: .1em; }

.lld-cta {
  margin-top: 64px; border: 1px solid var(--color-border);
  border-radius: var(--radius-surface); overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
.lld-cta-left {
  background: var(--color-brand-translucent); padding: 32px;
  border-right: 1px solid var(--color-border);
}
.lld-cta-right { background: var(--color-card); padding: 32px; }

/* ============================================================
   Responsive — container queries, with media-query fallback for
   older Safari/Firefox (HubSpot pages still see those).
   ============================================================ */

@container lld (max-width: 768px) {
  .lld-hide-md { display: none !important; }
  .lld-2col, .lld-radar-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .lld-cta { grid-template-columns: minmax(0, 1fr) !important; }
  .lld-cta-left { border-right: 0 !important; border-bottom: 1px solid var(--color-border) !important; }
}
@container lld (max-width: 640px) {
  .lld-hide-sm { display: none !important; }
  .lld-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lld-qrow { grid-template-columns: minmax(0, 1fr) !important; }
  .hc-lld .lld-tick-label { display: none !important; }
}
@container lld (max-width: 460px) {
  .lld-cat-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 768px) {
    .hc-lld .lld-hide-md { display: none !important; }
    .hc-lld .lld-2col, .hc-lld .lld-radar-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
    .hc-lld .lld-cta { grid-template-columns: minmax(0, 1fr) !important; }
    .hc-lld .lld-cta-left { border-right: 0 !important; border-bottom: 1px solid var(--color-border) !important; }
  }
  @media (max-width: 640px) {
    .hc-lld .lld-hide-sm { display: none !important; }
    .hc-lld .lld-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .hc-lld .lld-qrow { grid-template-columns: minmax(0, 1fr) !important; }
    .hc-lld .lld-tick-label { display: none !important; }
  }
  @media (max-width: 460px) {
    .hc-lld .lld-cat-grid { grid-template-columns: minmax(0, 1fr) !important; }
  }
}

@media print {
  .hc-lld .lld-noprint { display: none !important; }
  .hc-lld .lld-sticky { position: static !important; }
}