/*
  HealThyRam form kit — design system v2.0 (UX round 2, A2; mockup screen k1), 19 Oct 2026.
  SOURCE: design-system/kit/ht-kit.css. design-system/tools/build-tokens.mjs copies it, unchanged, to every plugin listed in
  tokens.json "kitCopies" (assets/css/ht-kit.css, style handle `ht-kit`, after `ht-tokens`). Edit here only.

  Every rule is scoped to a plugin's own containers — nothing here can reach the theme:
    .ht-app (wellness screens) · .qori-app (QORI screens) · .ht-modal-overlay / .qori-modal-overlay · .ht-toasts · .ht-tip · .ht-kit
  Values come from ht-tokens.css only.
*/

/* 1. Type that does not shrink. Martfury sets html { font-size: 10px }, so the rem type tokens rendered at 62.5 % inside the
      plugins (badges 7.5 px, practitioner headings 10–12 px; measured 19 Oct 2026). Inside our containers the rem tokens take
      their designed px values. */
.ht-app, .qori-app, .ht-modal-overlay, .qori-modal-overlay, .ht-toasts, .ht-tip, .ht-kit {
	--text-h1-size: var(--type-h1);
	--text-h2-size: var(--type-h2);
	--text-h3-size: var(--type-h3);
	--text-body-size: var(--type-body);
	--text-small-size: var(--type-small);
	--text-micro-size: var(--type-micro);
}

/* 2. Controls set their own margin. The site's global Additional CSS gives every button / input / select / textarea
      `margin: 12px` (and `outline: none`), which spread the intake options apart. Specificity (0,0,2): beats that element
      rule, loses to any plugin class, so components keep the spacing they ask for. */
html :where(.ht-app, .qori-app, .ht-modal-overlay, .qori-modal-overlay, .ht-kit) :is(button, input, select, textarea) { margin: 0; }
/*    Buttons were spaced only by that accidental 12 px; they get a deliberate 8 px right/bottom gap instead. Specificity
      (0,0,2) again, so any plugin rule that sets a button margin still wins; flex rows that use `gap` reset it (below). */
html body :where(.ht-app, .qori-app, .ht-modal-overlay, .qori-modal-overlay, .ht-kit) :where(.ht-btn, .ht-btn-sm, .qori-btn, .qori-btn-sm) { margin: 0 var(--space-2) var(--space-2) 0; }
:is(.ht-app, .qori-app, .ht-kit) .ht-actionbar :is(.ht-btn, .qori-btn) { margin: 0; }

/* 3. Keyboard focus is always visible (the global rule removes outlines). */
:where(.ht-app, .qori-app, .ht-modal-overlay, .qori-modal-overlay, .ht-kit) :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* 4. Text field — label, hint, error (k1). Markup: <div class="ht-field [is-error]"><label class="ht-field__label">Name
      <em class="ht-req">*</em></label><input class="ht-input"><p class="ht-field__hint">…</p><p class="ht-field__error">…</p></div> */
:is(.ht-app, .qori-app, .ht-kit) .ht-field { display: grid; gap: var(--space-1); margin: 0 0 var(--space-4); }
:is(.ht-app, .qori-app, .ht-kit) .ht-field__label { font-weight: 600; font-size: var(--type-small); color: var(--text-body); }
:is(.ht-app, .qori-app, .ht-kit) .ht-input {
	width: 100%; box-sizing: border-box; min-height: var(--control-height); padding: 0 var(--space-3);
	border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-card);
	font: inherit; font-size: var(--type-body); color: var(--text-body);
}
:is(.ht-app, .qori-app, .ht-kit) textarea.ht-input { min-height: calc(var(--control-height) * 2); padding: var(--space-2) var(--space-3); }
:is(.ht-app, .qori-app, .ht-kit) .ht-input:hover { border-color: var(--ht-green); }
:is(.ht-app, .qori-app, .ht-kit) .ht-field__hint { margin: 0; font-size: var(--type-micro); color: var(--text-muted); }
:is(.ht-app, .qori-app, .ht-kit) .ht-field__error { display: none; margin: 0; font-size: var(--type-micro); color: var(--ht-error-dark); }
:is(.ht-app, .qori-app, .ht-kit) .ht-field.is-error .ht-input { border-color: var(--ht-error-border); }
:is(.ht-app, .qori-app, .ht-kit) .ht-field.is-error .ht-field__error { display: block; }

/* 5. Units toggle (k1; used by the intake from A3). Markup: <span class="ht-units" role="group" aria-label="Height unit">
      <button type="button" aria-pressed="true">ft-in</button><button type="button" aria-pressed="false">cm</button></span> */
:is(.ht-app, .qori-app, .ht-kit) .ht-units { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-control); overflow: hidden; vertical-align: middle; }
:is(.ht-app, .qori-app, .ht-kit) .ht-units button {
	min-height: var(--target-min); min-width: var(--target-min); padding: 0 var(--space-3); border: 0; border-radius: 0;
	background: var(--surface-card); color: var(--text-body); font: inherit; font-size: var(--type-small); font-weight: 600; cursor: pointer;
}
:is(.ht-app, .qori-app, .ht-kit) .ht-units button + button { border-left: 1px solid var(--border-default); }
:is(.ht-app, .qori-app, .ht-kit) .ht-units button[aria-pressed="true"] { background: var(--ht-green); color: var(--text-on-brand); }

/* 6. Buttons — the variants k1 adds to .ht-btn / .ht-btn-primary: outline, danger, busy, disabled-with-reason. */
:is(.ht-app, .qori-app, .ht-kit) .ht-btn--outline { background: var(--surface-card); color: var(--ht-green-dark); border: 1.5px solid var(--ht-green); }
:is(.ht-app, .qori-app, .ht-kit) .ht-btn--danger { background: var(--surface-card); color: var(--ht-error-border); border: 1.5px solid var(--ht-error-border); }
:is(.ht-app, .qori-app, .ht-kit) .ht-btn--danger:hover { background: var(--ht-error-border); color: var(--text-on-brand); }
:is(.ht-app, .qori-app, .ht-kit) .ht-btn.is-busy::before {
	content: ""; display: inline-block; width: 14px; height: 14px; margin-right: var(--space-2); border: 2px solid currentColor;
	border-right-color: transparent; border-radius: 50%; vertical-align: -2px;
}
@media (prefers-reduced-motion: no-preference) { :is(.ht-app, .qori-app, .ht-kit) .ht-btn.is-busy::before { animation: ht-kit-spin .8s linear infinite; } }
@keyframes ht-kit-spin { to { transform: rotate(360deg); } }
:is(.ht-app, .qori-app, .ht-kit) .ht-btn-reason { display: block; margin: var(--space-1) 0 0; font-size: var(--type-micro); color: var(--text-muted); }

/* 7. Messages (k1): saved / needs an answer / did not save. .ht-message stays the base; add a modifier. */
:is(.ht-app, .qori-app, .ht-kit) .ht-message--ok { background: var(--surface-tint-green); border-left-color: var(--ht-green); color: var(--text-body); }
:is(.ht-app, .qori-app, .ht-kit) .ht-message--warn { background: var(--surface-tint-orange); border-left-color: var(--ht-orange); color: var(--text-body); }
:is(.ht-app, .qori-app, .ht-kit) .ht-message--error { background: var(--surface-card); border-left-color: var(--ht-error); color: var(--ht-error-dark); }

/* 8. Sticky action bar (k1): Back · Save & continue. On phones it sits above the theme's bottom menu, never under it
      (the theme's #mf-navigation-mobile is ~57 px + safe area; --ht-actionbar-offset can be set by a screen). */
:is(.ht-app, .qori-app, .ht-kit) .ht-actionbar {
	display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
	padding: var(--space-3) 0; margin: var(--space-4) 0 0; border-top: 1px solid var(--border-default); background: var(--surface-card);
}
@media (max-width: 767px) {
	:is(.ht-app, .qori-app, .ht-kit) .ht-actionbar {
		position: sticky; bottom: calc(var(--ht-actionbar-offset, 64px) + env(safe-area-inset-bottom, 0px)); z-index: 5;
		padding: var(--space-3); box-shadow: var(--shadow-card-hover);
	}
}

/* 9. Choice grid (k1): fixed columns — 2 on phones, auto on wider screens; long labels wrap inside the box.
      Extends the intake's .ht-choices / .ht-choice (wellness 2.7.6) to 44 px targets and 4 px corners. */
:is(.ht-app, .qori-app, .ht-kit) .ht-choice { min-height: var(--target-min); border-radius: var(--radius-control); }
@media (max-width: 599px) {
	:is(.ht-app, .qori-app, .ht-kit) .ht-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	:is(.ht-app, .qori-app, .ht-kit) .ht-choices.ht-choices--one { grid-template-columns: 1fr; }
}

/* 10. 0–5 scale (k1; QORI): 44 px targets, end labels always visible. */
.qori-app .qori-scale-option { min-height: var(--target-min); border-radius: var(--radius-control); }

/* 11. Tooltip card (A12): white card, pointer, 1 px line, soft shadow, 4 px corners, 13 px text; optional bold first line and
       "Learn more" link; a close button when opened from an "i" button (it stays until closed). Script: ht-tip.js. */
.ht-tip {
	position: fixed; z-index: 99998; box-sizing: border-box; max-width: min(300px, calc(100vw - 16px));
	padding: var(--space-2) var(--space-3); background: var(--surface-card); color: var(--text-body);
	border: 1px solid var(--border-default); border-radius: var(--radius-control); box-shadow: var(--shadow-card-hover);
	font-family: var(--font-body); font-size: var(--type-tooltip); font-weight: 400; line-height: 1.45; text-align: left;
	opacity: 0; transform: translateY(2px);
}
.ht-tip--on { opacity: 1; transform: none; }
.ht-tip[hidden] { display: none; }
.ht-tip::before {
	content: ""; position: absolute; top: -6px; left: var(--ht-tip-arrow-x, 50%); width: 10px; height: 10px; margin-left: -6px;
	background: var(--surface-card); border-left: 1px solid var(--border-default); border-top: 1px solid var(--border-default); transform: rotate(45deg);
}
.ht-tip--above::before { top: auto; bottom: -6px; transform: rotate(225deg); }
.ht-tip b { display: block; margin: 0 0 2px; font-weight: 600; }
.ht-tip .ht-tip__more { display: inline-block; margin-top: var(--space-1); color: var(--ht-green-dark); font-weight: 600; text-decoration: underline; }
.ht-tip--sticky { padding-right: calc(var(--space-3) + 28px); }
.ht-tip .ht-tip__close {
	position: absolute; top: 2px; right: 2px; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-control);
	background: transparent; color: var(--text-muted); font: inherit; font-size: var(--type-h3); line-height: 1; cursor: pointer;
}
.ht-tip .ht-tip__close[hidden] { display: none; }
.ht-tip :is(a, button):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
@media (prefers-reduced-motion: no-preference) { .ht-tip { transition: opacity var(--duration-fast), transform var(--duration-fast); } }
@media print { .ht-tip { display: none !important; } }

/* 12. The "i" button (A12): opens the card on tap, click or Enter; shows it on hover and focus. 20 px to see, 44 px to tap. */
:is(.ht-app, .qori-app, .ht-kit, .ht-otp) .ht-i {
	position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 20px; height: 20px; min-height: 0; margin: 0 0 0 var(--space-1); padding: 0; box-sizing: border-box;
	border: 1px solid var(--ht-green); border-radius: var(--radius-control); background: var(--surface-card); color: var(--ht-green-dark);
	font-family: var(--font-display); font-size: var(--type-micro); font-style: italic; font-weight: 700; line-height: 1;
	vertical-align: middle; cursor: pointer; box-shadow: none;
}
:is(.ht-app, .qori-app, .ht-kit, .ht-otp) .ht-i::after { content: ""; position: absolute; inset: -12px; }
:is(.ht-app, .qori-app, .ht-kit, .ht-otp) .ht-i:hover, :is(.ht-app, .qori-app, .ht-kit, .ht-otp) .ht-i[aria-expanded="true"] { background: var(--ht-green); color: var(--text-on-brand); }