/* ==========================================================================
   f-eat-here.css — CAT-01 only. Tokens only: no colours, no radii, no fonts
   declared here that are not already in tokens.css.
   ========================================================================== */

.eh-head { padding: var(--s-6) var(--gutter) var(--s-4); }
.eh-head h1 {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  font-weight: var(--w-regular);
}
.eh-head p { margin-top: var(--s-3); color: var(--ink-muted); max-width: var(--measure); }

.eh-block { padding: var(--s-5) var(--gutter); border-top: 1px solid var(--hairline); }
.eh-block > * + * { margin-top: var(--s-4); }
.eh-foot { padding: var(--s-5) var(--gutter) var(--s-8); }

/* ---- the 60-day date strip ---------------------------------------------- */

.eh-strip {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding: var(--s-3) var(--gutter);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.eh-strip::-webkit-scrollbar { display: none; }

.eh-date {
  flex: 0 0 auto;
  min-width: 62px;
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline);
  background: transparent;
  text-align: center;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.eh-date b { font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.eh-date small { font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); }
.eh-date[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.eh-date[aria-pressed="true"] small { color: var(--paper); }
.eh-date[disabled] { opacity: 0.38; cursor: not-allowed; }

/* ---- time pills ---------------------------------------------------------- */

.eh-times { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.eh-pill {
  min-height: var(--tap);
  min-width: 72px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline);
  background: transparent;
  font-variant-numeric: tabular-nums;
}
.eh-pill[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.eh-pill[data-state="committed"] { opacity: 0.42; }
.eh-pill small { display: block; font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; }

/* ---- cards --------------------------------------------------------------- */

.eh-card { border: 1px solid var(--hairline); padding: var(--s-4); }
.eh-card + .eh-card { margin-top: var(--s-4); }
.eh-card[data-gone="true"] { opacity: 0.5; }
.eh-card[aria-pressed="true"] { border-color: var(--ink); }
.eh-card-fig { margin-bottom: var(--s-3); }
.eh-card-line { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }

/* ---- meters, totals, timers --------------------------------------------- */

.eh-count {
  font-family: var(--font-display);
  font-size: var(--t-sub);
  font-variant-numeric: tabular-nums;
}
.eh-frame { border: 1px solid var(--ink); padding: var(--s-4); }
.eh-frame > * + * { margin-top: var(--s-3); }
.eh-alarm { border: 1px solid var(--ink-alarm); padding: var(--s-4); }
.eh-alarm .eh-count { color: var(--ink-alarm); }

.eh-ledger { font-variant-numeric: tabular-nums; }
.eh-ledger-row { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); }
.eh-ledger-rule { border-top: 1px solid var(--hairline); margin-block: var(--s-2); }

/* ---- stage tracker ------------------------------------------------------- */

.eh-stages { border-left: 1px solid var(--hairline); padding-left: var(--s-4); margin-left: var(--s-1); }
.eh-stage { position: relative; padding-bottom: var(--s-5); }
.eh-stage::before {
  content: '';
  position: absolute;
  left: calc(var(--s-4) * -1 - 4px);
  top: 6px; width: 7px; height: 7px;
  background: var(--hairline);
}
.eh-stage[data-done="true"]::before { background: var(--accent); }
.eh-stage[data-current="true"]::before { background: var(--ink); }

/* ---- checkbox and radio lists ------------------------------------------- */

.eh-check { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); min-height: var(--tap); }
.eh-check input { margin-top: 4px; width: 20px; height: 20px; flex: 0 0 auto; }
.eh-check-body { flex: 1; min-width: 0; }
.eh-sev { display: flex; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }

/* ---- signature pad ------------------------------------------------------- */

.eh-sig { width: 100%; height: 140px; border: 1px solid var(--hairline); background: var(--paper); touch-action: none; display: block; }

/* ---- generic grid of two ------------------------------------------------- */

.eh-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.eh-scroll { overflow-x: auto; }