/* ============================================================================
   HEARTH — hearth-components.css
   Reusable component classes built from the tokens. Used by the design-system
   preview cards AND the UI kits. Scope everything under .hearth.
   Requires: colors_and_type.css (which imports hearth-tokens.css).
   ============================================================================ */

/* ---- Buttons ------------------------------------------------------------- */
.hearth .btn {
  font-family: var(--sans-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.hearth .btn:active { transform: translateY(0.5px); }
.hearth .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hearth .btn .ic { width: 16px; height: 16px; }

.hearth .btn-primary { background: var(--accent-solid-bg); color: var(--fg-on-accent); }
.hearth .btn-primary:hover { background: var(--accent-active); }

.hearth .btn-secondary { background: var(--bg2); color: var(--fg1); border-color: var(--hearth-border-strong); }
.hearth .btn-secondary:hover { background: var(--bg-sunken); }

.hearth .btn-ghost { background: transparent; color: var(--accent-text); }
.hearth .btn-ghost:hover { background: var(--accent-subtle-bg); }

.hearth .btn-quiet { background: transparent; color: var(--fg2); }
.hearth .btn-quiet:hover { background: var(--bg-sunken); color: var(--fg1); }

.hearth .btn-danger { background: var(--sev-critical-bg); color: var(--sev-critical-fg); border-color: transparent; }
.hearth .btn-danger:hover { background: color-mix(in srgb, var(--sev-critical-bg) 80%, var(--sev-critical-fg)); }

.hearth .btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.hearth .btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--text-base); }
.hearth .btn-icon { padding: var(--space-2); }

/* ---- Badges / chips ------------------------------------------------------ */
.hearth .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-family: var(--sans-ui);
  line-height: 1.5;
}
.hearth .badge .dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: currentColor; flex: none; }

/* severity — never color-alone: dot + label always paired */
.hearth .sev-critical { color: var(--sev-critical-fg); background: var(--sev-critical-bg); }
.hearth .sev-high     { color: var(--sev-high-fg);     background: var(--sev-high-bg); }
.hearth .sev-medium   { color: var(--sev-medium-fg);   background: var(--sev-medium-bg); }
.hearth .sev-low      { color: var(--sev-low-fg);      background: var(--sev-low-bg); }
.hearth .sev-info     { color: var(--sev-info-fg);     background: var(--sev-info-bg); }
.hearth .st-healthy   { color: var(--status-healthy-fg);  background: var(--status-healthy-bg); }
.hearth .st-degraded  { color: var(--status-degraded-fg); background: var(--status-degraded-bg); }
.hearth .st-down      { color: var(--status-down-fg);     background: var(--status-down-bg); }

/* neutral / accent tag */
.hearth .tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--bg-sunken);
  color: var(--fg2);
  border: 1px solid var(--hearth-border);
  font-family: var(--mono-logs);
}
.hearth .tag-accent { background: var(--accent-subtle-bg); color: var(--accent-text); border-color: var(--accent-border); }

/* ---- Cards / surfaces ---------------------------------------------------- */
.hearth .card {
  background: var(--bg2);
  border: 1px solid var(--hearth-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.hearth .card-flat { box-shadow: none; }
.hearth .panel {
  background: var(--bg2);
  border: 1px solid var(--hearth-border);
  border-radius: var(--radius-lg);
}
.hearth .well {
  background: var(--bg-sunken);
  border: 1px solid var(--hearth-border-subtle);
  border-radius: var(--radius-md);
}

/* ---- Inputs -------------------------------------------------------------- */
.hearth .input, .hearth .select, .hearth .textarea {
  font-family: var(--sans-ui);
  font-size: var(--text-sm);
  color: var(--fg1);
  background: var(--bg-raised);
  border: 1px solid var(--hearth-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.hearth .input::placeholder { color: var(--fg4); }
.hearth .input:focus, .hearth .select:focus, .hearth .textarea:focus {
  outline: none; border-color: var(--accent-border); box-shadow: var(--focus-ring);
}
.hearth .field-label {
  display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--fg2); margin-bottom: var(--space-2);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}

/* search field with leading icon */
.hearth .search { position: relative; display: flex; align-items: center; }
.hearth .search .ic { position: absolute; left: var(--space-3); width: 16px; height: 16px; color: var(--fg3); pointer-events: none; }
.hearth .search .input { padding-left: calc(var(--space-3) * 2 + 16px); }

/* ---- Toggle / segmented control ------------------------------------------ */
.hearth .segmented {
  display: inline-flex;
  background: var(--bg-sunken);
  border: 1px solid var(--hearth-border);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}
.hearth .segmented button {
  border: 0; background: transparent; color: var(--fg3);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.hearth .segmented button[aria-pressed="true"], .hearth .segmented button.active {
  background: var(--bg-raised); color: var(--fg1); box-shadow: var(--shadow-sm);
}

/* ---- Metric scorecard ---------------------------------------------------- */
.hearth .metric {
  font-family: var(--serif-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--fg1);
}
.hearth .metric small {
  font-family: var(--sans-ui); font-size: var(--text-sm);
  font-weight: var(--weight-regular); color: var(--fg3);
}
.hearth .delta-up   { color: var(--status-healthy-fg); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.hearth .delta-down { color: var(--sev-critical-fg);   font-size: var(--text-sm); font-weight: var(--weight-medium); }

/* ---- Divider / hairline -------------------------------------------------- */
.hearth .hr { height: 1px; background: var(--hearth-border-subtle); border: 0; width: 100%; }
.hearth .vr { width: 1px; align-self: stretch; background: var(--hearth-border); }

/* ---- Avatar -------------------------------------------------------------- */
.hearth .avatar {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-subtle-bg); color: var(--accent-text);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  font-family: var(--sans-ui); flex: none;
}

/* ---- Brand lockup -------------------------------------------------------- */
.hearth .brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.hearth .brand .mote {
  width: 14px; height: 14px; border-radius: var(--radius-full);
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-subtle-bg);
  flex: none;
}
.hearth .brand b {
  font-family: var(--font-wordmark); font-weight: var(--weight-bold);
  letter-spacing: 0.06em; font-size: var(--text-lg);
}

/* ---- Handwritten annotation (Architects Daughter) — sparing margin notes -- */
.hearth .annot {
  font-family: var(--font-hand); color: var(--accent-text);
  font-size: var(--text-base); line-height: 1.2; font-weight: 400;
}

/* ---- Utility ------------------------------------------------------------- */
.hearth .row { display: flex; gap: var(--space-3); align-items: center; }
.hearth .col { display: flex; flex-direction: column; }
.hearth .wrap { flex-wrap: wrap; }
.hearth .grow { flex: 1; }
.hearth .icon { width: 18px; height: 18px; stroke-width: 1.75; }

/* ---- Helix Counter wordmark (brand Phase A) --------------------------------
   The mark's identity is its two clay accents, not its letterforms: a dotless
   i carrying a precision dot (the "i-Mote"), and a reticle replacing the o in
   Counter (the "o-Target"). Both are decorative and aria-hidden; the container
   carries the accessible name so a screen reader reads "Helix Counter" once.
   Type is Plus Jakarta Sans 700 — the Hearth canon. The brand board specified
   Inter, which check.sh guard #3 bans and which is not vendored.

   Deliberately GLOBAL, not `.hearth`-scoped, unlike every other rule above:
   this file's convention (line 4) is "scope everything under .hearth", but
   two of the eight shipping kits — concord/ and verichain/ — never wrap their
   markup in a `.hearth` container and don't even link hearth-components.css
   today (verified 2026-07-26: grep for class="hearth across every kit's
   index.html finds it in portal/worldline/beacon/chronicle/notary/console
   only — deliberately NOT spelling out the two-level ui_kits glob here as a
   literal pattern: doing so once put the closing comment-delimiter's two
   characters back to back in the middle of this sentence, which ends a CSS
   comment wherever it appears, no escaping possible. That silently dropped
   the whole .hx-wordmark rule below in every browser — a 2026-07-26 Task 5
   session hit exactly that bug while verifying this file and fixed it by
   rewording this comment; keep prose here, never that literal pattern).
   Concord
   and Verichain are exactly where Task 5 wires the wordmark in first (the
   mobile app + the MFA surfaces), so scoping these rules under `.hearth`
   would make the wordmark silently render unstyled the moment it lands
   there. Keep `.hx-*` global until/unless those kits adopt the `.hearth`
   wrapper. */
.hx-wordmark{
  display:inline-flex; align-items:baseline; white-space:nowrap;
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight:700; letter-spacing:-.02em; color:var(--hearth-text);
}
.hx-wordmark--lg{ font-size:clamp(40px,7vw,76px); }

/* i-Mote — the dot is positioned, so the glyph must be the DOTLESS i (U+0131). */
.hx-imote{ position:relative; display:inline-block; line-height:1; }
.hx-imote .hx-dot{
  position:absolute; left:50%; bottom:.9em; transform:translateX(-50%);
  width:.16em; height:.16em; border-radius:50%; background:var(--clay-500);
}

/* o-Target — a reticle sized to the surrounding type, so it scales with it. */
.hx-otarget{
  display:inline-block; position:relative; top:.06em;
  width:.72em; height:.72em; margin:0 .01em;
}
.hx-otarget svg{ width:100%; height:100%; display:block; }
.hx-otarget svg *{ stroke:var(--clay-500); }