/* HelpHound's own layout on top of the MaggotClaw kit. Only kit variables, no colours typed by hand.
   Phone first: one column, 16 px side gutter, 16 px inputs. */

html, body { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }

.hh-top { justify-content: space-between; padding: 0 var(--space-4); border-bottom: 1px solid var(--color-border); }
.hh-brand { font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); font-size: var(--font-h3-size);
  color: var(--color-text); text-decoration: none; letter-spacing: -.01em; }
.hh-brand:hover { color: var(--color-text); }

.hh-main { flex: 1; width: 100%; max-width: var(--layout-form-max); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8);
  box-sizing: border-box; outline: none; }
.hh-main:focus, .hh-main:focus-visible { outline: none; box-shadow: none; }
.hh-foot { display: flex; justify-content: center; gap: var(--space-5); padding: var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-caption-size); }

input, select, textarea { font-size: 16px; }

.hh-lead { color: var(--color-text-muted); }
.hh-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.hh-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hh-goal { justify-content: flex-start; width: 100%; min-height: 56px; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg); text-align: left; font-size: var(--font-body-lg-size); white-space: normal; }
.hh-goal[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-subtle); color: var(--color-text); }
.hh-sub { margin: var(--space-2) 0 var(--space-3) var(--space-4); }
.hh-sub button { min-height: 44px; }
.hh-sub button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-subtle); }
.hh-else { margin-top: var(--space-6); }
.hh-else label { display: block; margin-bottom: var(--space-2); }
.hh-else input { width: 100%; box-sizing: border-box; }
.hh-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hh-actions .primary { flex: 1 1 auto; }

.hh-group { margin-top: var(--space-7); }
.hh-group h2 { display: flex; align-items: baseline; gap: var(--space-3); margin-top: 0; }
.hh-count { font-family: var(--font-family-sans); font-size: var(--font-label-size); color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.hh-help { color: var(--color-text-muted); font-size: var(--font-label-size); margin-top: calc(-1 * var(--space-2)); }
.hh-card { display: block; width: 100%; box-sizing: border-box; margin-bottom: var(--space-3); padding: var(--space-5);
  text-align: left; border-radius: var(--radius-lg); white-space: normal; flex-direction: column; align-items: stretch; }
.hh-card h3 { margin: 0 0 var(--space-1); }
.hh-card .hh-meta { color: var(--color-text-muted); font-size: var(--font-label-size); margin: 0 0 var(--space-2); }
.hh-card .hh-amount { font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2); }
.hh-reasons { margin: 0; padding-left: var(--space-5); font-size: var(--font-label-size); color: var(--color-text); }
.hh-reasons li { margin: var(--space-1) 0; }
.hh-reasons li.hh-tocheck { color: var(--color-text-muted); }

.hh-note { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: var(--color-surface); margin: var(--space-5) 0; }
.hh-warn { border-color: var(--color-warning); background: var(--color-warning-bg); color: var(--color-text); }
.hh-ok { border-color: var(--color-success); background: var(--color-success-bg); }
.hh-danger { border-color: var(--color-danger); background: var(--color-danger-bg); }

.hh-facts { display: grid; grid-template-columns: 1fr; gap: var(--space-2) var(--space-5); margin: var(--space-5) 0; }
.hh-facts dt { color: var(--color-text-muted); font-size: var(--font-label-size); font-weight: var(--font-weight-medium); }
.hh-facts dd { margin: 0 0 var(--space-3); }
.hh-check { list-style: none; padding: 0; margin: 0; }
.hh-check li { margin: var(--space-2) 0; }
.hh-check label { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--font-body-size); font-weight: var(--font-weight-regular); cursor: pointer; }
.hh-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; }

.hh-answers { list-style: none; padding: 0; margin: 0; }
.hh-answers li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.hh-answers .hh-q { color: var(--color-text-muted); font-size: var(--font-label-size); }
.hh-answers .hh-src { color: var(--color-text-subtle); font-size: var(--font-caption-size); }

.hh-link { display: flex; gap: var(--space-2); margin: var(--space-3) 0; }
.hh-link input { flex: 1; min-width: 0; font-family: var(--font-family-mono); font-size: 14px; }
.hh-back { margin-bottom: var(--space-4); }
.linkish { border: 0; background: none; padding: 0; min-height: 0; color: var(--color-accent); text-decoration: underline;
  text-underline-offset: .2em; font: inherit; cursor: pointer; }
.linkish:hover { background: none; color: var(--color-accent-hover); }
.hh-busy { color: var(--color-text-muted); }

@media (min-width: 640px) {
  .hh-main { padding-left: var(--space-6); padding-right: var(--space-6); }
  .hh-facts { grid-template-columns: max-content 1fr; }
  .hh-facts dd { margin: 0; }
}

/* SurveyJS questions wear the kit's colours (its variables sit on :where(.sd-theme-root), so this wins). */
.hh-survey .sd-theme-root, .hh-survey .sd-root-modern {
  --sjs2-color-bg-basic-primary: var(--color-surface);
  --sjs2-color-bg-basic-primary-dim: var(--color-bg);
  --sjs2-color-bg-basic-secondary: var(--color-surface-2);
  --sjs2-color-bg-basic-secondary-dim: var(--color-surface-2);
  --sjs2-color-bg-basic-tertiary: var(--color-surface-2);
  --sjs2-color-bg-basic-primary-disabled: var(--color-surface-2);
  --sjs2-color-fg-basic-primary: var(--color-text);
  --sjs2-color-fg-basic-secondary: var(--color-text-muted);
  --sjs2-color-fg-basic-tertiary: var(--color-text-subtle);
  --sjs2-color-fg-neutral-primary-muted: var(--color-text-muted);
  --sjs2-color-border-basic-secondary: var(--color-border);
  --sjs2-color-component-input-default-line: var(--color-border-strong);
  --sjs2-color-bg-brand-primary: var(--color-highlight);
  --sjs2-color-bg-brand-primary-dim: var(--color-highlight-hover);
  --sjs2-color-bg-brand-secondary: var(--color-accent-subtle);
  --sjs2-color-bg-brand-tertiary: var(--color-accent-subtle);
  --sjs2-color-bg-brand-tertiary-dim: var(--color-accent-subtle);
  --sjs2-color-fg-brand-primary: var(--color-accent);
  --sjs2-color-fg-brand-on-primary: var(--color-on-highlight);
  --sjs2-color-bg-neutral-primary: var(--color-surface-2);
  --sjs2-color-bg-neutral-secondary: var(--color-surface-2);
  --sjs2-color-bg-neutral-tertiary: var(--color-surface-2);
  --sjs2-color-bg-neutral-tertiary-dim: var(--color-surface-2);
  --sjs2-color-fg-alert-primary: var(--color-danger);
  --sjs2-color-bg-alert-primary: var(--color-danger);
  --sjs2-color-bg-alert-secondary: var(--color-danger-bg);
  --sjs2-palette-gray-000: var(--color-surface);
  --sjs2-palette-gray-100: var(--color-surface-2);
  --sjs2-palette-gray-150: var(--color-surface-2);
  --sjs2-typography-font-family-text: var(--font-family-sans);
  --sjs2-color-utility-shadow-trigger-default: transparent;
  --sjs2-color-utility-shadow-trigger-hovered: transparent;
  --sjs2-color-utility-shadow-trigger-disabled: transparent;
  background: transparent;
}
/* the kit's colours use light-dark(), so the survey must follow the page's colour scheme, not its own */
.hh-survey .sd-theme-root, .hh-survey .sd-theme-root * { color-scheme: inherit !important; }
.hh-survey .sd-root-modern, .hh-survey .sd-container-modern { background: transparent; height: auto; }
.hh-survey .sd-root-modern::before { background: transparent; }
.hh-survey .sv-scroll__scroller, .hh-survey .sd-root-modern { overflow: visible; }
.hh-survey .sd-progress { background: var(--color-bg); }
.hh-survey .sd-navigation__next-btn, .hh-survey .sd-navigation__complete-btn {
  background: var(--color-highlight); color: var(--color-on-highlight); border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold); }
.hh-survey .sd-navigation__next-btn:hover, .hh-survey .sd-navigation__complete-btn:hover { background: var(--color-highlight-hover); }
.hh-survey .sd-navigation__next-btn *, .hh-survey .sd-navigation__complete-btn * { color: inherit; }
.hh-survey .sd-body.sd-body--static { padding: 0; max-width: none; }
.hh-survey .sd-title, .hh-survey .sd-question__title { font-family: var(--font-family-display); }