/* Compact question-led public views: a shared surface for bounded live read models. */
.public-view {
  min-height: 80svh;
  padding: 48px 0 96px;
  color: #e7f2f0;
  background: radial-gradient(circle at 78% 0, #0d3441 0, #06131c 34%);
}

.public-view .shell {
  width: min(1180px, calc(100% - 40px));
}

.public-view__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 38px;
  color: #6f8992;
  font: 10px/1.2 var(--mono);
  letter-spacing: .03em;
}

.public-view__breadcrumbs a,
.public-view__entity,
.public-view__handoff a,
.public-view__evidence-body a,
.public-view__empty a {
  color: #6fe3e4;
  text-decoration: none;
}

.public-view__breadcrumbs a:hover,
.public-view__breadcrumbs a:focus-visible,
.public-view__entity:hover,
.public-view__entity:focus-visible,
.public-view__handoff a:hover,
.public-view__handoff a:focus-visible,
.public-view__evidence-body a:hover,
.public-view__evidence-body a:focus-visible,
.public-view__empty a:hover,
.public-view__empty a:focus-visible {
  color: #effbf8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.public-view__kicker,
.public-view__section-kicker {
  margin: 0;
  color: #45d8df;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.public-view__hero h1 {
  max-width: 840px;
  margin: 13px 0 17px;
  color: #f0f8f7;
  font: 650 clamp(38px, 5.7vw, 70px)/.98 var(--display);
  letter-spacing: -.05em;
}

.public-view__lede {
  max-width: 640px;
  margin: 0;
  color: #9bb2b8;
  font-size: 17px;
  line-height: 1.5;
}

.public-view__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 23px 0 0;
  color: #b8d0cf;
  font: 10px/1.2 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.public-view__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6fe3c0;
  box-shadow: 0 0 0 3px rgba(111, 227, 192, .12);
}

.public-view__context {
  display: grid;
  grid-template-columns: minmax(185px, .72fr) minmax(0, 1.9fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 28px;
  padding: 15px 18px;
  border: 1px solid #294653;
  border-radius: 5px;
  background: rgba(8, 23, 32, .82);
}

.public-view__context-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.public-view__context-heading h2 {
  margin: 0;
  color: #eaf6f3;
  font: 600 21px/1.05 var(--display);
  letter-spacing: -.035em;
}

.public-view__context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.public-view__context-grid > div {
  min-width: 0;
  padding: 2px 16px;
  border-left: 1px solid #203d49;
}

.public-view__context-grid dt {
  color: #6f8992;
  font: 700 9px/1.2 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.public-view__context-grid dd {
  margin: 7px 0 0;
  color: #e8f4f1;
  font: 700 12px/1.25 var(--mono);
}

.public-view__context-grid dd small {
  display: block;
  margin-top: 5px;
  color: #78929d;
  font: 10px/1.25 var(--mono);
}

.public-view__context-grid time {
  color: #c7dedb;
}

.public-view__panel,
.public-view__empty {
  margin-top: 28px;
  border: 1px solid #294653;
  border-radius: 5px;
  background: linear-gradient(145deg, #0b202c, #081720);
}

.public-view__panel {
  padding: 22px;
}

.public-view__panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 17px;
}

.public-view__panel-heading h2,
.public-view__empty h2 {
  margin: 7px 0 0;
  color: #eaf6f3;
  font: 600 clamp(23px, 3vw, 32px)/1.05 var(--display);
  letter-spacing: -.035em;
}

.public-view__count {
  flex: 0 0 auto;
  color: #78929d;
  font: 10px/1.2 var(--mono);
  text-transform: uppercase;
}

.public-view__table-wrap {
  overflow-x: auto;
  border: 1px solid #223e4b;
  border-radius: 4px;
}

.public-view__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.public-view__table th,
.public-view__table td {
  padding: 13px 14px;
  border-bottom: 1px solid #1d3744;
  text-align: left;
  vertical-align: middle;
}

.public-view__table thead th {
  color: #6f8992;
  background: #0a1a24;
  font: 700 9px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.public-view__table thead th time {
  display: block;
  margin-top: 5px;
  color: #a7bec1;
  font: 500 9px/1.2 var(--mono);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.public-view__table tbody tr:last-child th,
.public-view__table tbody tr:last-child td {
  border-bottom: 0;
}

.public-view__table tbody tr:hover {
  background: rgba(69, 216, 223, .045);
}

.public-view__rank {
  width: 68px;
  color: #45d8df;
  font: 700 11px/1 var(--mono);
}

.public-view__entity {
  display: block;
  font: 600 14px/1.2 var(--display);
}

.public-view__table tbody th small {
  display: block;
  margin-top: 4px;
  color: #607d87;
  font: 9px/1.2 var(--mono);
  letter-spacing: .04em;
}

.public-view__metric,
.public-view__delta {
  color: #e8f4f1;
  font: 700 13px/1 var(--mono);
  white-space: nowrap;
}

.public-view__delta.is-up { color: #6fe3c0; }
.public-view__delta.is-down { color: #f4b866; }
.public-view__delta.is-flat,
.public-view__delta.is-missing { color: #8aa4aa; }

.public-view__handoff {
  width: 142px;
  text-align: right !important;
}

.public-view__handoff a {
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .03em;
  white-space: nowrap;
}

.public-view__evidence {
  margin-top: 14px;
  border-top: 1px solid #203d49;
}

.public-view__evidence summary {
  width: fit-content;
  padding: 13px 0 4px;
  color: #8faab2;
  cursor: pointer;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.public-view__evidence summary:hover,
.public-view__evidence summary:focus-visible {
  color: #e7f2f0;
}

.public-view__evidence-body {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  padding: 8px 0 2px;
  color: #7d98a1;
  font: 10px/1.4 var(--mono);
}

.public-view__evidence-body time {
  color: #c2d5d2;
}

.public-view__empty {
  padding: 28px 24px 32px;
}

.public-view__empty p:last-child {
  max-width: 620px;
  margin: 15px 0 0;
  color: #91a8ad;
  font-size: 14px;
  line-height: 1.55;
}

.public-hazards__world-link {
  margin-left: 14px;
  color: #6fe3e4;
  text-decoration: none;
}

.public-hazards__world-link:hover,
.public-hazards__world-link:focus-visible {
  color: #effbf8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.public-hazards__context-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-hazards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.public-hazards__timeline {
  margin-top: 28px;
  padding-bottom: 18px;
}

.public-hazards__timeline-plot {
  display: grid;
  gap: 13px;
  margin-top: 7px;
  border-top: 1px solid #203d49;
  padding-top: 17px;
}

.public-hazards__timeline-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: end;
  gap: 14px;
}

.public-hazards__timeline-label {
  color: #9ab1b7;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.public-hazards__timeline-label.is-cyan { color: #62e2e7; }
.public-hazards__timeline-label.is-amber { color: #f5c06c; }
.public-hazards__timeline-label.is-violet { color: #c1a7ff; }

.public-hazards__timeline-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  min-height: 50px;
  border-bottom: 1px solid #294653;
}

.public-hazards__timeline-bar {
  display: block;
  min-height: 4px;
  height: var(--bar-height);
  border-radius: 3px 3px 0 0;
  opacity: .95;
}

.public-hazards__timeline-bar.is-cyan { background: linear-gradient(180deg, #63e7ed, #1a9eae); }
.public-hazards__timeline-bar.is-amber { background: linear-gradient(180deg, #ffd487, #b8732e); }
.public-hazards__timeline-bar.is-violet { background: linear-gradient(180deg, #d6c6ff, #7761c2); }
.public-hazards__timeline-bar.is-unavailable { height: 4px; border: 1px dashed #34515d; background: transparent; opacity: .7; }

.public-hazards__timeline-axis {
  display: grid;
  grid-template-columns: 92px repeat(7, minmax(0, 1fr));
  gap: 14px;
  color: #6f8992;
  font: 9px/1.2 var(--mono);
}

.public-hazards__timeline-axis::before { content: ''; }
.public-hazards__timeline-axis span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-hazards__timeline-axis span + span { text-align: right; }

.public-hazards__card {
  min-width: 0;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 17px;
  border: 1px solid #294653;
  border-radius: 5px;
  color: #e7f2f0;
  background: linear-gradient(145deg, #0c2330, #081720);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.public-hazards__card:hover,
.public-hazards__card:focus-visible {
  border-color: #62dfe4;
  background: linear-gradient(145deg, #103342, #0a1c27);
  transform: translateY(-2px);
}

.public-hazards__card:focus-visible {
  outline: 2px solid #8af0ee;
  outline-offset: 3px;
}

.public-hazards__card h2 {
  margin: 7px 0 0;
  color: #eaf6f3;
  font: 600 18px/1.08 var(--display);
  letter-spacing: -.035em;
}

.public-hazards__card strong {
  color: #45d8df;
  font: 700 clamp(28px, 4vw, 42px)/.9 var(--mono);
  letter-spacing: -.06em;
}

.public-hazards__card > p {
  margin: 0;
  color: #86a2a9;
  font: 10px/1.4 var(--mono);
}

.public-hazards__card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #203d49;
  color: #6fe3e4;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.public-hazards__card-action span {
  font-size: 14px;
  line-height: .8;
}

.public-hazards__panel {
  padding-bottom: 16px;
}

.public-hazards__panel > .public-view__empty {
  margin-top: 0;
  border: 0;
  background: transparent;
}

.public-hazards__inline-empty {
  padding: 17px 0 19px;
}

.public-hazards__inline-empty h3 {
  margin: 0;
  color: #d6e8e5;
  font: 600 18px/1.1 var(--display);
}

.public-hazards__inline-empty p {
  margin-bottom: 0;
}

.public-hazards__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #203d49;
}

.public-hazards__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid #1d3744;
}

.public-hazards__list li:last-child { border-bottom: 0; }

.public-hazards__list strong {
  display: block;
  color: #e7f2f0;
  font: 600 14px/1.25 var(--display);
}

.public-hazards__list small {
  display: block;
  margin-top: 4px;
  color: #78929d;
  font: 10px/1.35 var(--mono);
}

.public-hazards__list > li > span {
  flex: 0 0 auto;
  color: #a6bec0;
  font: 10px/1.3 var(--mono);
  text-align: right;
}

.public-hazards__list a {
  color: #6fe3e4;
  text-decoration: none;
}

.public-hazards__list a:hover,
.public-hazards__list a:focus-visible {
  color: #effbf8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.public-hazards__table td small,
.public-hazards__table th small {
  display: block;
  margin-top: 5px;
  color: #78929d;
  font: 10px/1.3 var(--mono);
}

.public-hazards__table .public-view__entity { display: inline; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  .public-view { padding-top: 36px; }
  .public-view__breadcrumbs { margin-bottom: 30px; }
  .public-view__context { grid-template-columns: 1fr; gap: 14px; }
  .public-hazards__context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-hazards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-view__context-grid > div:first-child { border-left: 0; padding-left: 0; }
  .public-view__panel { padding: 17px; }
  .public-view__panel-heading { align-items: start; flex-direction: column; gap: 9px; }
  .public-view__table { min-width: 0; }
  .public-view__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .public-view__table,
  .public-view__table tbody,
  .public-view__table tr,
  .public-view__table th,
  .public-view__table td { display: block; }
  .public-view__table tr { padding: 13px 14px; border-bottom: 1px solid #1d3744; }
  .public-view__table tr:last-child { border-bottom: 0; }
  .public-view__table th,
  .public-view__table td { padding: 3px 0; border-bottom: 0; }
  .public-view__table th::before,
  .public-view__table td::before { display: inline-block; width: 102px; margin-right: 8px; color: #6f8992; content: attr(data-label); font: 700 9px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: baseline; }
  .public-view__table tbody th small { display: inline; margin: 0 0 0 8px; }
  .public-view__rank { width: auto; }
  .public-view__handoff { width: auto; padding-top: 8px !important; text-align: left !important; }
}

@media (max-width: 520px) {
  .public-view .shell { width: calc(100% - 28px); }
  .public-hazards__context-grid,
  .public-hazards__grid { grid-template-columns: 1fr; }
  .public-hazards__timeline-row { grid-template-columns: 78px minmax(0, 1fr); gap: 9px; }
  .public-hazards__timeline-axis { grid-template-columns: 78px repeat(7, minmax(0, 1fr)); gap: 9px; font-size: 8px; }
  .public-hazards__timeline-bars { gap: 4px; }
  .public-hazards__list li { align-items: flex-start; flex-direction: column; gap: 6px; }
  .public-hazards__list > li > span { text-align: left; }
  .public-hazards__world-link { display: block; margin: 10px 0 0; }
  .public-view__hero h1 { font-size: clamp(36px, 11vw, 52px); }
  .public-view__lede { font-size: 15px; }
  .public-view__context { padding: 15px; }
  .public-view__context-grid { grid-template-columns: 1fr; gap: 12px; }
  .public-view__context-grid > div,
  .public-view__context-grid > div:first-child { padding: 0; border-left: 0; }
  .public-view__evidence-body { display: grid; gap: 7px; }
}

.public-view--catalog {
  background:
    radial-gradient(circle at 84% 2%, rgba(27, 117, 139, .28), transparent 34%),
    radial-gradient(circle at 8% 58%, rgba(18, 69, 88, .2), transparent 30%),
    #06131c;
}

.public-view__catalog-group { margin-top: 42px; }
.public-view__catalog-group .public-view__panel-heading { margin-bottom: 15px; }
.public-view__catalog-group .public-view__panel-heading h2 { max-width: 700px; }

.public-view__catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.public-view__catalog-card {
  position: relative;
  display: flex;
  min-height: 206px;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  border: 1px solid #294653;
  border-radius: 5px;
  padding: 18px;
  color: #e7f2f0;
  background: linear-gradient(145deg, rgba(13, 34, 45, .98), rgba(7, 19, 28, .98));
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.public-view__catalog-card::after {
  position: absolute;
  right: -34px;
  bottom: -52px;
  width: 130px;
  height: 130px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .12;
  content: '';
}

.public-view__catalog-card:hover,
.public-view__catalog-card:focus-visible {
  border-color: #5adfe5;
  background: linear-gradient(145deg, rgba(16, 53, 67, .98), rgba(7, 24, 34, .98));
  transform: translateY(-2px);
}

.public-view__catalog-card:focus-visible { outline: 2px solid #63dfe4; outline-offset: 3px; }
.public-view__catalog-mark {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 11%, transparent), 0 0 18px color-mix(in srgb, currentColor 24%, transparent);
}

.public-view__catalog-card.is-cyan { color: #56e5f0; }
.public-view__catalog-card.is-amber { color: #f5c06c; }
.public-view__catalog-card.is-green { color: #72e4bf; }
.public-view__catalog-card.is-blue { color: #84bdf5; }
.public-view__catalog-card.is-violet { color: #c0a8ff; }
.public-view__catalog-card.is-slate { color: #a9c3cb; }
.public-view__catalog-question { margin-top: 5px; color: #88a4ad; font: 10px/1.3 var(--mono); letter-spacing: .04em; }
.public-view__catalog-card strong { color: #edf8f5; font: 600 22px/1.05 var(--display); letter-spacing: -.035em; }
.public-view__catalog-detail { max-width: 30ch; color: #9ab1b7; font-size: 12px; line-height: 1.45; }

.public-view__catalog-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid #203d49;
  color: currentColor;
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.public-view__catalog-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 42px;
  border-top: 1px solid #294653;
  padding-top: 17px;
  color: #829ca4;
  font: 11px/1.5 var(--mono);
}

.public-view__catalog-note p { max-width: 700px; margin: 0; }
.public-view__catalog-note a { flex: 0 0 auto; color: #63dfe4; font-weight: 700; text-decoration: none; white-space: nowrap; }

@media (max-width: 820px) {
  .public-view__catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .public-view__catalog-grid { grid-template-columns: 1fr; }
  .public-view__catalog-note { align-items: flex-start; flex-direction: column; }
}
