/* State 44 components: plain HTML + CSS on tokens.css. Class prefix: s44- */

.s44-eyebrow {
  font: 500 12px/1.42 var(--font-mono); letter-spacing: -0.8px; text-transform: uppercase;
  color: var(--lichen); margin: 0;
}

/* ---------- Button ---------- */
.s44-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
  border-radius: var(--radius-sm); border: 1px solid var(--carbon);
  font: 500 14px/1 var(--font-mono); letter-spacing: -0.94px; text-decoration: none; cursor: pointer;
  background: var(--carbon); color: var(--on-carbon);
}
.s44-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.s44-btn:hover { opacity: .88; }
.s44-btn--ghost:hover { background: var(--ink); color: var(--vellum); opacity: 1; }
.s44-btns { display: flex; gap: var(--space-8); flex-wrap: wrap; }

/* ---------- Tag ---------- */
.s44-tag {
  display: inline-flex; align-items: center; gap: var(--space-4); height: 24px; padding: 0 8px;
  border: 1px solid var(--khaki); border-radius: var(--radius-sm); background: var(--bone);
  font: 500 12px/1 var(--font-mono); letter-spacing: -0.8px; text-transform: uppercase;
  color: var(--olive-char); white-space: nowrap;
}
.s44-tag--plain { background: transparent; color: var(--lichen); }
.s44-tag__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--olive-char); }
.s44-tag--land .s44-tag__dot { background: var(--cat-land); }
.s44-tag--energy .s44-tag__dot { background: var(--cat-energy); }
.s44-tag--community .s44-tag__dot { background: var(--cat-community); }
.s44-tag--infrastructure .s44-tag__dot { background: var(--cat-infrastructure); }
.s44-tag--comment { background: var(--highlighter); border-color: var(--highlighter); color: var(--on-highlighter); }
.s44-tag--alert { background: transparent; border-color: var(--alert); color: var(--alert); }
.s44-tags { display: flex; gap: var(--space-8); flex-wrap: wrap; }

/* ---------- Accent bars (decoration) ---------- */
.s44-bars { display: flex; flex-direction: column; gap: 6px; }
.s44-bars span { display: block; height: 2px; background: var(--ink); }
.s44-bars span.hl { height: 4px; background: var(--highlighter); }

/* ---------- CodedRow ---------- */
.s44-rows { list-style: none; margin: 0; padding: 0; }
.s44-row {
  display: grid; grid-template-columns: 104px 1fr 12px; align-items: center; gap: var(--space-16);
  padding: var(--space-12) 0; border-top: 1px solid var(--ash); color: var(--ink); text-decoration: none;
  font: 400 14px/1.36 var(--font-mono); letter-spacing: -0.94px;
}
.s44-rows li:last-child .s44-row { border-bottom: 1px solid var(--ash); }
.s44-row:hover .s44-row__title { text-decoration: underline; }
.s44-row__code { color: var(--lichen); font-size: 12px; letter-spacing: -0.8px; }
.s44-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s44-row svg { width: 12px; height: 12px; stroke: var(--ink); fill: none; stroke-width: 1.6; }

/* ---------- ProjectCard ---------- */
.s44-card {
  background: var(--paper); border: 1px solid var(--ash); border-radius: var(--radius-md);
  padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); color: var(--ink);
}
.s44-card__title { font: 400 32px/1 var(--font-serif); letter-spacing: -1.6px; margin: 0; }
.s44-card__desc { font: 400 14px/1.36 var(--font-mono); letter-spacing: -0.94px; color: var(--lichen); margin: 0; }
.s44-card__figure { display: flex; align-items: baseline; gap: var(--space-8); padding: var(--space-16) 0 0; }
.s44-figure { font: 300 64px/1 var(--font-serif); letter-spacing: -3.2px; }
.s44-unit { font: 400 14px/1.36 var(--font-mono); letter-spacing: -0.94px; color: var(--lichen); }
.s44-card__source { font: 400 12px/1.42 var(--font-mono); letter-spacing: -0.8px; color: var(--lichen); margin: 0; }
.s44-card__source a { color: var(--ink); }
.s44-card .s44-rows { margin-top: auto; }
.s44-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-24); }

/* ---------- StatPanel ---------- */
.s44-panel {
  background: var(--carbon); color: var(--on-carbon); border-radius: var(--radius-md);
  padding: var(--space-64) var(--space-32); display: grid; gap: var(--space-32);
}
.s44-panel .s44-eyebrow { color: var(--on-carbon-muted); }
.s44-panel__title { font: 300 48px/1.13 var(--font-serif); letter-spacing: -2.4px; margin: 0; }
.s44-panel__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-24); }
.s44-stat { border-top: 1px solid var(--olive-char); padding-top: var(--space-16); display: grid; gap: var(--space-8); }
.s44-stat__num { font: 300 64px/1 var(--font-serif); letter-spacing: -3.2px; }
.s44-stat__label { font: 400 14px/1.36 var(--font-mono); letter-spacing: -0.94px; color: var(--on-carbon-muted); margin: 0; }

:where(.s44-btn, .s44-row, .s44-card a):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.s44-panel :where(a, button):focus-visible { outline-color: var(--on-carbon); }