/* CPGM Project presenter: styles for the component layer (components.js).
   One block per component, named like the helper (UI.rows -> .ui-rows).

   House rule: no bordered or filled cards and no pill tags. A group opens with
   a 1.5px dark top rule, rows are split by 1px hairlines, and emphasis comes
   from type weight and text colour. Documented in COMPONENTS.md. */

.slide {
  --pop: #fc3f2b;
  --red-text: #d42e1c;
  --f-display: "Archivo", "Inter", system-ui, sans-serif;
  --rule: 1.5px solid var(--gray-900);
  --hair: 1px solid var(--border);
  --ui-k: 11px;
}

/* ---------- Label ---------- */
.ui-label {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 clamp(6px, 0.6cqw, 10px);
  font-size: var(--ui-k); font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.ui-label__count { font-variant-numeric: tabular-nums; color: var(--red-text); }

/* ---------- Lead ---------- */
.ui-lead { display: grid; gap: 2px; }
.ui-lead__k { font-weight: 600; color: var(--gray-900); }
.ui-lead__d { font-weight: 400; color: var(--gray-600); font-size: 0.86em; line-height: 1.4; }
.ui-lead--inline { display: inline; }
.ui-lead--inline .ui-lead__d { font-size: 1em; }
.ui-lead--inline .ui-lead__d::before { content: "\00a0\00a0"; }

/* ---------- Meta ---------- */
.ui-meta {
  list-style: none; margin: clamp(8px, 0.8cqw, 12px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 2px 0;
  font-size: clamp(12px, 0.9cqw, 14px); font-weight: 500; line-height: 1.5; color: var(--gray-600);
}
.ui-meta li + li::before { content: "·"; margin: 0 0.5em; color: #a3a3a3; }

/* ---------- Status ---------- */
.ui-status {
  --tone: #a3a3a3;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--gray-900);
}
.ui-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.ui-status[data-tone="have"],
.ui-status[data-tone="pass"]    { --tone: #12a150; }
.ui-status[data-tone="partial"],
.ui-status[data-tone="warn"]    { --tone: #e0a100; }
.ui-status[data-tone="missing"],
.ui-status[data-tone="fail"],
.ui-status[data-tone="next"]    { --tone: var(--pop); }
.ui-status[data-tone="later"]   { --tone: transparent; }
.ui-status[data-tone="later"]::before { box-shadow: inset 0 0 0 1.5px #8a8a8a; }
.ui-status[data-tone="missing"] { color: #b3200f; }

/* ---------- Rows ---------- */
.ui-rows { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--rule); }
.ui-rows > li {
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 0 clamp(8px, 1cqw, 16px); align-items: baseline;
  padding: clamp(8px, 0.95cqw, 16px) 0; border-bottom: var(--hair);
}
.ui-rows__n { font-family: var(--f-display); font-size: clamp(11px, 0.9cqw, 14px); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--red-text); }
.ui-rows__body { min-width: 0; }
.ui-rows__lead { margin: 0; font-size: clamp(13px, 1.1cqw, 18px); line-height: 1.35; letter-spacing: -0.01em; }
.ui-rows__ref { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8em; font-weight: 400; color: var(--blue-700); letter-spacing: 0; }
.ui-rows__text { margin: 3px 0 0; font-size: clamp(12px, 0.92cqw, 15px); line-height: 1.45; color: var(--gray-600); text-wrap: pretty; }
.ui-rows__aside {
  font-size: var(--ui-k); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
.ui-rows--split { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows), auto); grid-auto-flow: column; column-gap: clamp(20px, 2.4cqw, 40px); }
.ui-rows--compact > li { padding: clamp(7px, 0.7cqw, 11px) 0; }
.ui-rows--compact .ui-rows__lead { font-size: clamp(12px, 0.98cqw, 15.5px); }
.ui-rows--compact .ui-rows__text { font-size: clamp(12px, 0.86cqw, 14px); }

/* ---------- Columns ---------- */
.ui-cols {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(20px, 2.6cqw, 48px);
}
.ui-col {
  display: flex; flex-direction: column; gap: clamp(5px, 0.5cqw, 9px); min-width: 0;
  padding-top: clamp(12px, 1.2cqw, 20px); border-top: var(--rule);
}
.ui-col[data-group] { border-top-color: var(--g); }
.ui-col.is-accent { border-top-color: var(--pop); }
.ui-col__kicker {
  font-size: var(--ui-k); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ui-col[data-group] .ui-col__kicker { color: var(--g-text); letter-spacing: 0.02em; text-transform: none; font-size: clamp(12px, 0.95cqw, 15px); }
.ui-col.is-accent .ui-col__kicker { color: var(--red-text); }
.ui-col__title { margin: 0; font-family: var(--f-display); font-size: clamp(17px, 1.6cqw, 28px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--gray-900); text-wrap: balance; }
.ui-col__text { margin: 0; font-size: clamp(13px, 1.02cqw, 16px); line-height: 1.5; color: var(--gray-600); text-wrap: pretty; }
.ui-col > .ui-rows { margin-top: clamp(10px, 1cqw, 18px); }
.ui-col > .ui-meta { margin-top: 2px; }
/* Big: step sequences read by their large number. */
.ui-cols--big .ui-col__kicker {
  font-family: var(--f-display); font-size: clamp(28px, 3.2cqw, 56px); font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; text-transform: none; color: var(--gray-900);
}
.ui-cols--big .ui-col.is-accent .ui-col__kicker { color: var(--red-text); }

/* ---------- Facts ---------- */
.ui-facts { margin: 0; display: grid; border-top: var(--rule); --k: 7.5em; }
.ui-facts > div { display: grid; grid-template-columns: var(--k) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: clamp(9px, 1cqw, 18px) 0; border-bottom: var(--hair); }
.ui-facts dt { font-size: var(--ui-k); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ui-facts dd { margin: 0; font-size: clamp(13px, 1.05cqw, 17px); font-weight: 600; line-height: 1.35; color: var(--gray-900); }
.ui-facts--stack > div { grid-template-columns: 1fr; gap: 4px; }
.ui-facts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 2cqw, 36px); }
.ui-facts--fill { display: flex; flex-direction: column; }
.ui-facts--fill > div { flex: 1 1 auto; align-content: center; }

/* ---------- Note ---------- */
.ui-note { margin: clamp(8px, 0.8cqw, 12px) 0 0; max-width: 90ch; font-size: clamp(12px, 0.95cqw, 15px); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }

/* ---------- Source ---------- */
.ui-source { flex: none; width: clamp(220px, 21cqw, 300px); text-align: left; }
.ui-source__h {
  margin: 0 0 8px; padding-bottom: 7px; border-bottom: var(--hair);
  font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.ui-source__list { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; font-size: 12px; line-height: 1.4; }
.ui-source__list dt { font-weight: 600; color: var(--gray-900); }
.ui-source__list dd { margin: 0; color: #5c5c5c; }
.ui-source__list .ui-source__line { grid-column: 1 / -1; }

/* ---------- Head ---------- */
.ui-head { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(16px, 2cqw, 32px); }
.ui-head__main { min-width: 0; }
.ui-head .body { margin-top: clamp(6px, 0.6cqw, 10px); max-width: 70ch; }
.ui-head__aside { display: grid; justify-items: end; gap: clamp(8px, 0.8cqw, 12px); flex: none; }
.ui-head__path { color: var(--g-text, var(--text-muted)); font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */
@container (max-width: 900px) {
  .ui-cols { grid-template-columns: repeat(min(var(--n, 3), 3), minmax(0, 1fr)); }
}
@container (max-width: 820px) {
  .ui-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-rows--split { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
@container (max-width: 520px) {
  .ui-cols, .ui-facts--grid { grid-template-columns: 1fr; }
  .ui-rows > li { grid-template-columns: 2em minmax(0, 1fr); }
  .ui-rows__aside { grid-column: 2; margin-top: 4px; }
}
@media (max-width: 767px) {
  .ui-head { flex-direction: column; }
  .ui-source { width: 100%; }
  .ui-head__aside { justify-items: start; }
  .ui-cols { grid-template-columns: 1fr; }
  .ui-rows--split { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}