/* P2 page frames: the design-system boards, on the console's existing tokens. */
.ui-finding {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--ink);
}
.ui-finding-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--space-3) / 2);
  color: var(--muted);
  font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family);
}
.ui-finding-crumb {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.ui-finding-crumb:hover { color: var(--ink); text-decoration: underline; }
.ui-finding-sep { color: var(--faint); }
.ui-finding-here { color: var(--ink); font-weight: var(--type-body-strong-weight); }
.ui-finding-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.ui-finding-h {
  min-width: 0;
  max-width: 820px;
  margin: 0;
  color: var(--ink);
  font: var(--type-finding-weight) var(--type-finding-size)/var(--type-finding-leading) var(--type-finding-family);
  letter-spacing: var(--type-finding-tracking);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.ui-finding-sub { margin: 0; color: var(--muted); font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family); }
.ui-finding-act.v2-btn,
.ui-action .v2-btn {
  height: var(--size-control);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  font: var(--type-body-strong-weight) var(--type-body-size)/1 var(--type-body-family);
}

.ui-metrics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.ui-metric-tabs { display: contents; }
.ui-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--space-3) / 2);
  min-width: 0;
  padding: calc(var(--space-7) / 2) var(--space-4);
  border: 0;
  border-left: 1px solid var(--line-soft);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  overflow-wrap: anywhere;
}
.ui-metric-tabs > .ui-metric:first-child,
.ui-metrics-sum > .ui-metric:first-child { border-left: 0; }
button.ui-metric { cursor: pointer; }
button.ui-metric:hover { background: var(--hover); }
.ui-metric-on { box-shadow: inset 0 -2px 0 var(--ink); }
.ui-metric-still { cursor: default; }
.ui-metric-label { color: var(--muted); font-weight: var(--type-body-strong-weight); }
.ui-metric-on .ui-metric-label { color: var(--ink); }
.ui-metric-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.ui-metric-value {
  color: var(--ink);
  font: var(--type-stat-weight) var(--type-stat-size)/var(--type-stat-leading) var(--type-stat-family);
  letter-spacing: var(--type-stat-tracking);
  font-variant-numeric: tabular-nums;
}
.ui-metric-sub { color: var(--faint); font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--type-meta-family); }

.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--space-5) / 2);
  box-sizing: border-box;
  padding: var(--space-7);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.ui-empty-ic {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--link) 10%, var(--surface));
  color: var(--link);
}
.ui-empty-ic svg,
.ui-action-ic svg {
  width: var(--space-5);
  height: var(--space-5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-empty-t {
  margin: 0;
  font: var(--type-page-title-weight) var(--type-page-title-size)/var(--type-page-title-leading) var(--type-page-title-family);
  letter-spacing: var(--type-page-title-tracking);
}
.ui-empty-s { margin: 0; max-width: calc(var(--space-10) * 10.5); color: var(--muted); }
.ui-empty-known { margin: 0; padding-left: var(--space-4); color: var(--body); }
.ui-empty-known li + li { margin-top: var(--space-1); }
/* A door wider than its box wraps its own label inside it; one line keeps the pill's height. */
.ui-empty-door.v2-btn {
  height: auto;
  min-height: var(--size-pill);
  max-width: 100%;
  padding: var(--space-1) calc(var(--space-5) / 2);
  border-radius: var(--radius-md);
  font: var(--type-body-strong-weight) var(--type-meta-size)/1.25 var(--type-meta-family);
  white-space: normal;
  text-align: left;
}
.ui-empty .ui-timeline { width: 100%; }
/* Two doors (H4b-2's `also`): the secondary first, then the door; they wrap on a phone rather than overflow. */
.ui-empty-doors { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ui-empty-card {
  /* The States boards' card (AnswersStates) keeps the frame and its lift: the board's .card is --shadow-lift exactly. */
  gap: var(--space-3);
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.ui-empty-card .ui-empty-t {
  font: var(--type-card-title-weight) var(--type-card-title-size)/var(--type-card-title-leading) var(--type-card-title-family);
  letter-spacing: var(--type-card-title-tracking);
}
.ui-empty-card .ui-empty-s { font-size: var(--type-body-size); color: var(--body); }

.ui-action {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--muted);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.ui-action-neg { border-color: var(--neg); background: var(--neg-soft); color: var(--neg); }
.ui-action-warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.ui-action-surface { background: var(--surface); }
.ui-action-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.ui-action-words { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-action-t {
  margin: 0;
  color: var(--ink);
  font: var(--type-page-title-weight) var(--type-page-title-size)/var(--type-page-title-leading) var(--type-page-title-family);
  letter-spacing: var(--type-page-title-tracking);
}
.ui-action-s { margin: 0; color: var(--body); }
.ui-action-x {
  position: relative;
  flex: 0 0 var(--size-control);
  width: var(--size-control);
  height: var(--size-control);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  font: var(--type-body-weight) var(--type-figure-size)/1 var(--type-body-family);
  cursor: pointer;
}
.ui-action-x:hover { background: var(--hover); color: var(--ink); }
.ui-action-x .v2-tip { left: auto; right: 0; }

.ui-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--ink);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family);
}
.ui-progress-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) max-content; gap: var(--space-3); align-items: center; }
.ui-progress-row:not(:has(.ui-progress-name)) { grid-template-columns: minmax(0, 1fr) max-content; }
.ui-progress-name { overflow-wrap: anywhere; }
.ui-progress-bar { position: relative; display: block; height: 6px; border-radius: var(--radius-full); background: var(--track); }
.ui-progress-fill { position: absolute; left: 0; top: 0; height: 6px; border-radius: var(--radius-full); background: var(--heat); }
.ui-progress-done { background: var(--pos); }
.ui-progress-count {
  min-width: calc(var(--space-5) * 3);
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
  font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.ui-timeline { min-width: 0; color: var(--ink); font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--type-body-family); }
.ui-timeline-line { padding-top: var(--space-1); }
.ui-timeline-track { position: relative; height: calc(var(--space-8) + var(--space-1) / 2); margin: 0 calc(var(--space-7) / 4) var(--space-3); }
.ui-timeline-track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; border-top: 1.5px solid var(--line); }
.ui-timeline-track::after { content: ""; position: absolute; left: 0; top: 6px; width: 2px; height: 11px; background: var(--ink); }
.ui-timeline-mark,
.ui-timeline-ring { box-sizing: border-box; width: 14px; height: 14px; border: 1.5px dashed var(--muted); border-radius: var(--radius-full); background: var(--surface); }
.ui-timeline-mark { position: absolute; top: var(--space-1); margin-left: -7px; }
.ui-timeline-arrived { border-style: solid; border-color: var(--ink); background: var(--ink); }
.ui-timeline-today,
.ui-timeline-end {
  position: absolute;
  top: var(--space-5);
  font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ui-timeline-today { left: 0; color: var(--ink); }
.ui-timeline-end { right: 0; color: var(--faint); }
.ui-timeline-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.ui-timeline-rows li { display: grid; grid-template-columns: 14px max-content minmax(0, 1fr); align-items: baseline; gap: var(--space-2); }
.ui-timeline-ring { align-self: start; margin-top: calc(var(--space-1) / 2); }
.ui-timeline-day { color: var(--muted); white-space: nowrap; font: var(--type-meta-weight) var(--type-meta-size)/var(--type-meta-leading) var(--font-mono); }
.ui-timeline-what { overflow-wrap: anywhere; }
.ui-timeline-list .ui-timeline-rows { gap: var(--space-3); }

.ui-finding-crumb:focus-visible,
.ui-finding-act:focus-visible,
.ui-metric:focus-visible,
.ui-empty-door:focus-visible,
.ui-action .v2-btn:focus-visible,
.ui-action-x:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }

@media (max-width: 640px) {
  .ui-finding-row { flex-wrap: wrap; }
  .ui-action { flex-wrap: wrap; gap: var(--space-3); }
  .ui-action-words { flex-basis: calc(100% - 36px - var(--space-3)); }
  .ui-action-x { margin-left: auto; }
}
@media (max-width: 390px) {
  .ui-metrics { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-metric { border-left: 0; border-bottom: 1px solid var(--line-soft); padding: var(--space-3); }
  .ui-metric-tabs > .ui-metric:nth-child(even),
  .ui-metrics-sum > .ui-metric:nth-child(even) { border-left: 1px solid var(--line-soft); }
  .ui-empty { padding: var(--space-5); }
  .ui-progress-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content; gap: var(--space-2); }
}

/* Consequence (H4c-1; ui-consequence.js, folder 7299a8fd4): what an act will change, before the press. One block on
   warn-soft with a warn icon; each item a warn title and one sentence, a hairline in the warn tint between them. */
.ui-consequence {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--warn) 25%, var(--warn-soft));
  border-radius: var(--radius-lg);
  background: var(--warn-soft);
}
.ui-consequence-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--warn); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.ui-consequence-items { display: flex; flex-direction: column; min-width: 0; }
.ui-consequence-item + .ui-consequence-item {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--warn) 25%, var(--warn-soft));
}
.ui-consequence-title { color: var(--warn); font-weight: 600; font-size: var(--type-body-size); }
.ui-consequence-sentence { margin-top: 2px; color: var(--body); font-size: var(--type-small-size); line-height: 1.45; }