/* components.css
 * CORE-02 checkpoint 2B-i. The shared component styles for Harmelo and AHR.
 *
 * ---------------------------------------------------------------------------
 * NOTHING LINKS THIS FILE YET.
 *
 * 2B-i builds the vocabulary and proves it. 2C adopts it, one panel at a time, on the three
 * verified opening screens. scripts/test-components.js asserts that no page in either tree
 * references this file or components.js, because a component system that silently starts
 * rendering on surfaces nobody re-verified is not a checkpoint, it is an accident.
 *
 * ---------------------------------------------------------------------------
 * EVERY VALUE COMES FROM tokens.css.
 *
 * There is not one literal colour, radius or spacing step below. If a value is needed and no
 * token carries it, the answer is a token, not a hex. That rule is what makes a later theme
 * change a change to one file instead of an audit of every component.
 *
 * ---------------------------------------------------------------------------
 * COLOUR IS NEVER THE ONLY SIGNAL.
 *
 * Every state block carries a text label, and the severity dot carries a shape as well as a
 * hue. The accessibility contract requires status to survive being read by somebody who cannot
 * distinguish the colours, and a stylesheet is where that either holds or quietly does not.
 */

/* ===========================================================================
 * STATE BLOCK
 *
 * One component for all seven states. They differ in tone and copy, not in structure, so a
 * reader learns the shape once and a new state cannot arrive looking like a different feature.
 * ======================================================================== */
.hm-state {
  display: flex;
  gap: var(--hm-space-3);
  align-items: flex-start;
  padding: var(--hm-space-5);
  border: var(--hm-border-width) solid var(--hm-line);
  border-radius: var(--hm-radius-lg);
  background: var(--hm-surface-2);
  font-family: var(--hm-font-body);
  font-size: var(--hm-text-base);
  line-height: var(--hm-leading-normal);
  color: var(--hm-ink);
}

.hm-state__icon {
  flex: 0 0 auto;
  width: var(--hm-space-5);
  height: var(--hm-space-5);
  border-radius: var(--hm-radius-pill);
  border: var(--hm-border-width-strong) solid currentColor;
  margin-top: 2px;
}

.hm-state__body { flex: 1 1 auto; min-width: 0; }

.hm-state__label {
  font-weight: var(--hm-weight-semibold);
  font-size: var(--hm-text-sm);
  letter-spacing: var(--hm-tracking-label);
  text-transform: uppercase;
  font-family: var(--hm-font-mono);
  margin-bottom: var(--hm-space-1);
}

.hm-state__title {
  font-weight: var(--hm-weight-semibold);
  font-size: var(--hm-text-md);
  color: var(--hm-ink);
  margin-bottom: var(--hm-space-1);
}

.hm-state__detail { color: var(--hm-ink-soft); }

.hm-state__count {
  display: inline-block;
  margin-top: var(--hm-space-2);
  padding: var(--hm-space-1) var(--hm-space-3);
  border-radius: var(--hm-radius-pill);
  background: var(--hm-neutral-surface);
  border: var(--hm-border-width) solid var(--hm-neutral-border);
  color: var(--hm-neutral-text);
  font-family: var(--hm-font-mono);
  font-size: var(--hm-text-xs);
}

.hm-state__action { margin-top: var(--hm-space-4); }

/* Tone per state. The label text carries the meaning; these only reinforce it. */
.hm-state--ready { color: var(--hm-ok-text); border-color: var(--hm-ok-border); background: var(--hm-ok-surface); }
.hm-state--empty { color: var(--hm-neutral-text); }
.hm-state--evidence_missing { color: var(--hm-info-text); border-color: var(--hm-info-border); background: var(--hm-info-surface); }
.hm-state--locked { color: var(--hm-neutral-text); border-color: var(--hm-neutral-border); background: var(--hm-neutral-surface); }
.hm-state--unauthorized { color: var(--hm-neutral-text); }
.hm-state--loading_failed { color: var(--hm-warn-text); border-color: var(--hm-warn-border); background: var(--hm-warn-surface); }
.hm-state--backend_error { color: var(--hm-danger-text); border-color: var(--hm-danger-border); background: var(--hm-danger-surface); }

/* Loading is not a state the server sends; the client owns it while a request is open. It
 * holds the region's height so the page does not jump, and shows no number, because a zero
 * that turns into a four is a lie told briefly. */
.hm-state--loading { color: var(--hm-neutral-text); }
.hm-state--loading .hm-state__icon { border-style: dashed; }

/* ===========================================================================
 * ACTION CARD
 * ======================================================================== */
.hm-action {
  border: var(--hm-border-width) solid var(--hm-line);
  border-radius: var(--hm-radius-lg);
  background: var(--hm-surface-1);
  box-shadow: var(--hm-shadow-sm);
  padding: var(--hm-gutter, var(--hm-space-4));
  margin-bottom: var(--hm-space-3);
  font-family: var(--hm-font-body);
  color: var(--hm-ink);
}

.hm-action__head {
  display: flex;
  align-items: baseline;
  gap: var(--hm-space-3);
  flex-wrap: wrap;
}

.hm-action__title {
  font-weight: var(--hm-weight-semibold);
  font-size: var(--hm-text-md);
  flex: 1 1 auto;
  min-width: 0;
}

.hm-action__identifier {
  font-family: var(--hm-font-mono);
  font-size: var(--hm-text-xs);
  letter-spacing: var(--hm-tracking-identifier);
  color: var(--hm-ink-mute);
}

.hm-action__meta {
  margin-top: var(--hm-space-2);
  font-size: var(--hm-text-sm);
  color: var(--hm-ink-soft);
  display: flex;
  gap: var(--hm-space-4);
  flex-wrap: wrap;
}

.hm-action__reasons { margin-top: var(--hm-space-3); }

.hm-action__locked {
  margin-top: var(--hm-space-3);
  padding-top: var(--hm-space-3);
  border-top: var(--hm-border-width) solid var(--hm-line);
  font-size: var(--hm-text-sm);
  color: var(--hm-ink-mute);
}

.hm-action__actions {
  margin-top: var(--hm-space-4);
  display: flex;
  gap: var(--hm-space-2);
  flex-wrap: wrap;
}

/* ===========================================================================
 * SEVERITY BADGE
 *
 * Shape AND colour AND text. Three signals for one meaning, because any one of them can be
 * unavailable to a given reader.
 * ======================================================================== */
.hm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--hm-space-2);
  padding: var(--hm-space-1) var(--hm-space-3);
  border-radius: var(--hm-radius-pill);
  border: var(--hm-border-width) solid currentColor;
  font-family: var(--hm-font-mono);
  font-size: var(--hm-text-xs);
  letter-spacing: var(--hm-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.hm-badge__dot {
  width: var(--hm-space-2);
  height: var(--hm-space-2);
  background: currentColor;
}

.hm-badge--safety { color: var(--hm-safety-text); background: var(--hm-safety-surface); }
.hm-badge--safety .hm-badge__dot { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.hm-badge--urgent { color: var(--hm-danger-text); background: var(--hm-danger-surface); }
.hm-badge--urgent .hm-badge__dot { border-radius: 0; }

.hm-badge--soon { color: var(--hm-warn-text); background: var(--hm-warn-surface); }
.hm-badge--soon .hm-badge__dot { border-radius: var(--hm-radius-pill); }

.hm-badge--watch { color: var(--hm-info-text); background: var(--hm-info-surface); }
.hm-badge--watch .hm-badge__dot { border-radius: var(--hm-radius-pill); opacity: .55; }

.hm-badge--neutral { color: var(--hm-neutral-text); background: var(--hm-neutral-surface); }
.hm-badge--neutral .hm-badge__dot { border-radius: var(--hm-radius-pill); opacity: .4; }

/* ===========================================================================
 * REASON ROW
 * ======================================================================== */
.hm-reason {
  display: flex;
  gap: var(--hm-space-3);
  align-items: flex-start;
  padding: var(--hm-space-3) 0;
  border-top: var(--hm-border-width) solid var(--hm-line);
  font-size: var(--hm-text-sm);
}

.hm-reason:first-child { border-top: 0; }
.hm-reason__body { flex: 1 1 auto; min-width: 0; }
.hm-reason__text { color: var(--hm-ink); }

.hm-reason__source {
  margin-top: var(--hm-space-1);
  font-family: var(--hm-font-mono);
  font-size: var(--hm-text-xs);
  color: var(--hm-ink-mute);
}

.hm-reason__limit {
  margin-top: var(--hm-space-1);
  color: var(--hm-ink-mute);
  font-style: italic;
}

.hm-reason--resolved .hm-reason__text { color: var(--hm-ink-mute); text-decoration: line-through; }

/* ===========================================================================
 * EVIDENCE DRAWER
 * ======================================================================== */
.hm-drawer {
  border: var(--hm-border-width) solid var(--hm-line);
  border-radius: var(--hm-radius-md);
  background: var(--hm-surface-2);
  margin-top: var(--hm-space-3);
}

.hm-drawer__toggle {
  display: flex;
  align-items: center;
  gap: var(--hm-space-2);
  width: 100%;
  min-height: var(--hm-target-min);
  padding: var(--hm-space-2) var(--hm-space-3);
  background: none;
  border: 0;
  border-radius: var(--hm-radius-md);
  font-family: var(--hm-font-body);
  font-size: var(--hm-text-sm);
  color: var(--hm-accent-text);
  cursor: pointer;
  text-align: left;
}

.hm-drawer__toggle:focus-visible { outline: none; box-shadow: var(--hm-focus-ring); }
.hm-drawer__panel { padding: 0 var(--hm-space-3) var(--hm-space-3); }
.hm-drawer__panel[hidden] { display: none; }

.hm-evidence {
  padding: var(--hm-space-3) 0;
  border-top: var(--hm-border-width) solid var(--hm-line);
  font-size: var(--hm-text-sm);
}

.hm-evidence__class {
  font-family: var(--hm-font-mono);
  font-size: var(--hm-text-xs);
  letter-spacing: var(--hm-tracking-label);
  text-transform: uppercase;
  color: var(--hm-ink-mute);
}

.hm-evidence__meta { margin-top: var(--hm-space-1); color: var(--hm-ink-soft); }

/* ===========================================================================
 * IDENTITY AND RETIRED CHAIN
 * ======================================================================== */
.hm-identity {
  display: flex;
  flex-direction: column;
  gap: var(--hm-space-1);
  padding: var(--hm-space-3);
  border: var(--hm-border-width) solid var(--hm-line);
  border-radius: var(--hm-radius-md);
  background: var(--hm-surface-1);
}

.hm-identity__label { font-weight: var(--hm-weight-medium); color: var(--hm-ink); }

.hm-identity__id {
  font-family: var(--hm-font-mono);
  font-size: var(--hm-text-xs);
  letter-spacing: var(--hm-tracking-identifier);
  color: var(--hm-ink-mute);
}

.hm-identity--retired { background: var(--hm-surface-3); }

.hm-chain { list-style: none; margin: var(--hm-space-3) 0 0; padding: 0; }

.hm-chain__item {
  position: relative;
  padding: 0 0 var(--hm-space-4) var(--hm-space-5);
  border-left: var(--hm-border-width-strong) solid var(--hm-line-strong);
  font-size: var(--hm-text-sm);
}

.hm-chain__item:last-child { border-left-color: transparent; padding-bottom: 0; }

.hm-chain__dot {
  position: absolute;
  left: calc(var(--hm-space-1) * -1 - 1px);
  top: 4px;
  width: var(--hm-space-2);
  height: var(--hm-space-2);
  border-radius: var(--hm-radius-pill);
  background: var(--hm-neutral-text);
}

.hm-chain__item--current .hm-chain__dot { background: var(--hm-accent); }

/* An absence of evidence and a record we never held are different facts, and the second one
 * must not be phrased as the first. Styled quietly so it reads as a note, not a warning. */
.hm-chain__note { color: var(--hm-ink-mute); font-style: italic; }

/* ===========================================================================
 * RANKED TABLE, AND ITS LIST FORM
 * ======================================================================== */
.hm-table { width: 100%; border-collapse: collapse; font-size: var(--hm-text-sm); }

.hm-table th {
  text-align: left;
  font-family: var(--hm-font-mono);
  font-size: var(--hm-text-xs);
  letter-spacing: var(--hm-tracking-label);
  text-transform: uppercase;
  color: var(--hm-ink-mute);
  font-weight: var(--hm-weight-medium);
  padding: var(--hm-space-2) var(--hm-space-3);
  border-bottom: var(--hm-border-width) solid var(--hm-line-strong);
}

.hm-table td {
  padding: var(--hm-space-3);
  border-bottom: var(--hm-border-width) solid var(--hm-line);
  color: var(--hm-ink);
}

.hm-table tbody tr:hover { background: var(--hm-surface-2); }

.hm-table__list { display: none; }

/* Below tablet the table becomes a list. Not a shrunken table: the columns that carry the
 * decision are promoted and the rest go into the row body, because a horizontally scrolling
 * table hides the primary action behind a gesture nobody discovers. */
/* BREAKPOINT: 767px, and site/mobile.css uses the SAME value.
   They did not always. This file switched the shared tables to stacked cards at 767 while
   mobile.css applied its overflow defences at 760, so between 761 and 767 a table rendered
   as cards with the long-string and flex-shrink protections already switched off. Nothing
   ever observed that band because no capture or check ran at any width between 391 and 1439.
   Aligned at 767 because this is the boundary that changes STRUCTURE rather than typography.
   Founder ruling R-2. Both boundaries are now asserted at 760, 761, 767 and 768. */
@media (max-width: 767px) {
  .hm-table__grid { display: none; }
  .hm-table__list { display: block; }

  .hm-table__row {
    border: var(--hm-border-width) solid var(--hm-line);
    border-radius: var(--hm-radius-md);
    background: var(--hm-surface-1);
    padding: var(--hm-space-3);
    margin-bottom: var(--hm-space-3);
  }

  .hm-table__rowhead {
    display: flex;
    justify-content: space-between;
    gap: var(--hm-space-3);
    align-items: baseline;
    font-weight: var(--hm-weight-semibold);
  }

  .hm-table__cell { display: flex; justify-content: space-between; gap: var(--hm-space-3); padding-top: var(--hm-space-2); }
  .hm-table__cellkey { color: var(--hm-ink-mute); font-size: var(--hm-text-xs); }
}

/* ===========================================================================
 * BUTTONS
 * ======================================================================== */
.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hm-target-min);
  padding: var(--hm-space-2) var(--hm-space-4);
  border-radius: var(--hm-radius-md);
  border: var(--hm-border-width) solid var(--hm-accent-border);
  background: var(--hm-surface-1);
  color: var(--hm-accent-text);
  font-family: var(--hm-font-body);
  font-size: var(--hm-text-sm);
  font-weight: var(--hm-weight-medium);
  cursor: pointer;
  transition: background var(--hm-motion-fast) ease;
}

.hm-btn:focus-visible { outline: none; box-shadow: var(--hm-focus-ring); }
.hm-btn:hover { background: var(--hm-accent-surface); }

.hm-btn--primary { background: var(--hm-accent); border-color: var(--hm-accent); color: var(--hm-ink-on-accent); }
.hm-btn--primary:hover { background: var(--hm-accent-text); }

/* ===========================================================================
 * SCREEN READER ONLY
 *
 * Not display:none, which removes it from the accessibility tree along with everything else.
 * ======================================================================== */
.hm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   SKIP LINK. CORE-02 navigation and responsive verification.

   Every console put a sticky header and a full navigation list before its content, and no
   page carried a way past them. This is the one shared rule for all of them: off-screen
   until focused, fully visible the moment a keyboard user tabs to it.

   It is NOT display:none and NOT visibility:hidden. Both remove the element from the tab
   order, which would make the link unreachable by the only people it exists for. Moving it
   off-screen keeps it focusable, which is the entire mechanism. */
.hm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--hm-space-3, 12px) var(--hm-space-4, 16px);
  background: var(--hm-surface-1, #fff);
  color: var(--hm-text, #0E1522);
  border: var(--hm-border-width, 1px) solid var(--hm-line, #D6CFC0);
  border-radius: var(--hm-radius-md, 8px);
  font-weight: var(--hm-weight-semibold, 600);
  text-decoration: none;
}
.hm-skip:focus {
  left: var(--hm-space-3, 12px);
  top: var(--hm-space-3, 12px);
}