/* Detail dashboard shell, command brief, and summary cards. */

.is-detail-mode {
  overflow: hidden;
}

.is-detail-mode [data-ioc-header] {
  display: none;
}

.is-detail-mode .dashboard-grid {
  display: none;
}

.data-detail[hidden] {
  display: none;
}

.data-detail {
  display: grid;
  min-height: 0;
  padding-top: 0;
}

.data-detail__surface {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--space-4);
  overflow: hidden;
  background:
    linear-gradient(90deg, var(--alpha-cyan-19187255-07), transparent 42%),
    linear-gradient(180deg, var(--color-panel-strong), var(--alpha-deep-011435-97));
  border: 1px solid var(--color-border-soft);
  box-shadow:
    inset 0 0 0 1px var(--alpha-white-035),
    inset 0 0 2rem var(--alpha-blue-00119255-12);
}

.data-detail__surface::before,
.data-detail__surface::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.data-detail__surface::before {
  background:
    linear-gradient(90deg, var(--alpha-deep-00724-90), transparent 34%, var(--alpha-deep-00724-80)),
    var(--image-map-ioc) center / cover no-repeat;
  opacity: 0.16;
  mix-blend-mode: screen;
}

.data-detail__surface::after {
  background:
    linear-gradient(120deg, transparent 0 34%, var(--alpha-cyan-19187255-055) 34% 35%, transparent 35% 100%),
    radial-gradient(circle at 12% 16%, var(--alpha-cyan-22200255-11), transparent 28%),
    radial-gradient(circle at 86% 12%, var(--alpha-blue-00119255-12), transparent 32%);
}

.data-detail__surface > * {
  position: relative;
  z-index: 1;
}

.data-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
}

.data-detail__title-block {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.data-detail__title-block > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.data-detail__emblem {
  display: grid;
  place-items: center;
  width: 3.05rem;
  height: 3.05rem;
  color: var(--color-yellow);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-danger) 76%, var(--alpha-deep-00724-100)), var(--alpha-deep-00724-95)),
    linear-gradient(180deg, var(--alpha-cyan-19187255-18), transparent);
  border: 1px solid color-mix(in srgb, var(--color-yellow) 28%, var(--color-border-soft));
  box-shadow:
    0 0 1.2rem color-mix(in srgb, var(--color-danger) 24%, transparent),
    inset 0 0 1rem color-mix(in srgb, var(--color-yellow) 10%, transparent);
}

.data-detail__header span {
  color: var(--color-header-text-cyan);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.data-detail__header strong {
  color: var(--color-text);
  font-size: var(--text-title);
  font-weight: 900;
  line-height: 1;
}

.data-detail__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.data-detail__header-actions button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--alpha-blue-21176139-64), var(--alpha-cyan-22200255-10));
  border: 1px solid var(--alpha-cyan-22200255-42);
  cursor: pointer;
}

.data-detail__command {
  --detail-tone: var(--color-blue);
  display: grid;
  grid-template-columns: minmax(22rem, 0.85fr) minmax(0, 1.65fr);
  gap: var(--space-3);
  min-width: 0;
}

.data-detail__brief,
.data-detail__finding,
.data-detail__quality {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--detail-tone) 12%, transparent), transparent 58%),
    linear-gradient(180deg, var(--alpha-navy-033178-98), var(--alpha-deep-011541-78));
  border: 1px solid color-mix(in srgb, var(--detail-tone) 28%, var(--color-border-soft));
  box-shadow: inset 0 0 1rem color-mix(in srgb, var(--detail-tone) 8%, transparent);
}

.data-detail__brief {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-3) var(--space-4);
}

.data-detail__brief-icon {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--detail-tone);
  background: linear-gradient(180deg, color-mix(in srgb, var(--detail-tone) 14%, transparent), var(--alpha-deep-011234-18));
  border: 1px solid color-mix(in srgb, var(--detail-tone) 34%, var(--color-border-soft));
  box-shadow: 0 0 1rem color-mix(in srgb, var(--detail-tone) 18%, transparent);
}

.data-detail__brief span,
.data-detail__finding span,
.data-detail__quality {
  color: var(--color-header-text-cyan);
  font-size: var(--text-2xs);
  font-weight: 900;
  text-transform: uppercase;
}

.data-detail__brief strong {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1.18;
}

.data-detail__brief p,
.data-detail__finding p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1.25;
}

.data-detail__findings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

.data-detail__finding {
  --detail-tone: var(--color-blue);
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 0.2rem solid var(--detail-tone);
}

.data-detail__finding span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text);
  line-height: 1.1;
}

.data-detail__finding strong {
  color: var(--detail-tone);
  font-size: var(--text-lg);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 0.8rem color-mix(in srgb, var(--detail-tone) 30%, transparent);
}

.data-detail__finding small {
  margin-left: var(--space-1);
  color: var(--color-text-soft);
  font-size: var(--text-xs);
}

.data-detail__finding sup,
.data-detail__summary-card sup {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  margin-left: var(--space-1);
  color: var(--alpha-deep-00724-100);
  font-size: var(--text-2xs);
  font-weight: 900;
  line-height: 1;
  vertical-align: super;
  background: var(--color-yellow);
  border-radius: 50%;
  box-shadow: 0 0 0.75rem color-mix(in srgb, var(--color-yellow) 38%, transparent);
}

.data-detail__finding em {
  color: var(--color-text);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 900;
}

.data-detail__quality {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--color-yellow);
}

.data-detail__legend {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

.data-detail__legend span {
  --detail-tone: var(--color-blue);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-2xs);
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(90deg, color-mix(in srgb, var(--detail-tone) 10%, transparent), var(--alpha-deep-011234-18));
  border: 1px solid color-mix(in srgb, var(--detail-tone) 18%, var(--color-border-soft));
}

.data-detail__actions {
  --detail-tone: var(--color-blue);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-3);
  min-width: 0;
}

.data-detail__actions > header {
  display: grid;
  align-content: center;
  gap: var(--space-1);
  min-width: 11.5rem;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, var(--alpha-navy-033178-98), var(--alpha-deep-011541-78));
  border: 1px solid var(--alpha-blue-42165255-24);
  border-left: 0.28rem solid var(--color-yellow);
}

.data-detail__actions > header span,
.data-detail__actions > header strong {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.data-detail__actions > header strong {
  color: var(--color-yellow);
  font-size: var(--text-2xs);
}

.data-detail__action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

.data-detail__action {
  --detail-tone: var(--color-blue);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: var(--space-1);
  min-width: 0;
  min-height: 0;
  padding: var(--space-2);
  background: linear-gradient(180deg, var(--alpha-navy-033178-98), var(--alpha-deep-011541-78));
  border: 1px solid var(--alpha-blue-42165255-24);
  border-left: 0.28rem solid var(--detail-tone);
  box-shadow: inset 0 0 0 1px var(--alpha-white-035);
}

.data-detail__action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.data-detail__action-head > b {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.2rem;
  color: var(--alpha-deep-00724-100);
  font-size: var(--text-2xs);
  font-weight: 900;
  background: var(--detail-tone);
}

.data-detail__action strong {
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 900;
  line-height: 1;
}

.data-detail__action p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: var(--text-2xs);
  font-weight: 900;
  line-height: 1.2;
}

.data-detail__action footer {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.data-detail__action footer span,
.data-detail__action footer em {
  min-width: 0;
  color: var(--color-text);
  font-size: var(--text-2xs);
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
}

.data-detail__action footer em {
  color: var(--color-header-text-cyan);
}

@media (min-width: 1181px) and (max-height: 820px) {
  .data-detail__surface {
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .data-detail__header {
    min-height: 3.1rem;
  }

  .data-detail__emblem {
    width: 2.45rem;
    height: 2.45rem;
  }

  .data-detail__header strong {
    font-size: var(--text-header-title-sm);
  }

  .data-detail__command {
    grid-template-columns: minmax(20rem, 0.78fr) minmax(0, 1.72fr);
    gap: var(--space-2);
  }

  .data-detail__brief {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .data-detail__brief-icon {
    width: 2.15rem;
    height: 2.15rem;
  }

  .data-detail__brief strong {
    font-size: var(--text-sm);
    line-height: 1.12;
  }

  .data-detail__brief p,
  .data-detail__finding p {
    font-size: var(--text-2xs);
    line-height: 1.12;
  }

  .data-detail__findings {
    gap: var(--space-1);
  }

  .data-detail__finding {
    gap: 0.16rem;
    padding: var(--space-1) var(--space-2);
  }

  .data-detail__finding strong {
    font-size: var(--text-md);
  }

  .data-detail__quality {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-2xs);
  }

  .data-detail__legend .data-detail__status {
    min-height: 1.5rem;
  }

  .data-detail__actions {
    grid-template-columns: minmax(8.5rem, 0.17fr) minmax(0, 1fr);
    gap: var(--space-2);
  }

  .data-detail__actions > header {
    min-width: 0;
    padding: var(--space-2);
  }

  .data-detail__action-grid {
    gap: var(--space-1);
  }

  .data-detail__action {
    gap: 0.16rem;
    padding: var(--space-1) var(--space-2);
  }

  .data-detail__action strong {
    font-size: var(--text-sm);
  }

  .data-detail__action p {
    line-height: 1.08;
  }

  .data-detail__action footer span {
    display: none;
  }

  .data-detail__summary-card {
    padding: var(--space-1) var(--space-2);
  }

  .data-detail__summary-icon {
    width: 1.55rem;
    height: 1.55rem;
  }

  .data-detail__summary-card strong {
    font-size: var(--text-xl);
  }

  .data-detail__summary-card span,
  .data-detail__summary-card small,
  .data-detail__summary-card em {
    font-size: var(--text-2xs);
  }

  .data-detail__summary-card em {
    display: none;
  }
}

.data-detail__legend b {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--detail-tone);
  box-shadow: 0 0 0.65rem color-mix(in srgb, var(--detail-tone) 42%, transparent);
}

.data-detail__visuals {
  display: grid;
  grid-template-columns: minmax(15rem, 0.46fr) minmax(0, 1.54fr);
  gap: var(--space-4);
  min-width: 0;
  min-height: 0;
}

.data-detail__summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  min-height: 0;
}

.data-detail__summary-card {
  --detail-tone: var(--color-blue);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  overflow: hidden;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--detail-tone) 18%, transparent), transparent 48%),
    linear-gradient(135deg, color-mix(in srgb, var(--detail-tone) 13%, transparent), transparent),
    linear-gradient(180deg, var(--alpha-navy-033178-98), var(--alpha-deep-011541-78));
  border: 1px solid color-mix(in srgb, var(--detail-tone) 32%, var(--color-border-soft));
  box-shadow: inset 0 0 1rem color-mix(in srgb, var(--detail-tone) 8%, transparent);
}

.data-detail__summary-card::before {
  position: absolute;
  right: -1.8rem;
  bottom: -2rem;
  width: 6rem;
  height: 6rem;
  content: "";
  background: radial-gradient(circle, color-mix(in srgb, var(--detail-tone) 22%, transparent), transparent 68%);
}

.data-detail__summary-card::after {
  position: absolute;
  right: var(--space-3);
  top: var(--space-3);
  width: 4.25rem;
  height: 0.35rem;
  content: "";
  background: linear-gradient(90deg, var(--detail-tone), transparent);
  box-shadow: 0 0 0.8rem color-mix(in srgb, var(--detail-tone) 28%, transparent);
}

.data-detail__summary-icon {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  color: var(--detail-tone);
  background: linear-gradient(180deg, color-mix(in srgb, var(--detail-tone) 13%, transparent), var(--alpha-deep-011234-18));
  border: 1px solid color-mix(in srgb, var(--detail-tone) 34%, var(--color-border-soft));
  box-shadow: inset 0 0 0.9rem color-mix(in srgb, var(--detail-tone) 12%, transparent);
}

.data-detail__summary-card--success {
  --detail-tone: var(--color-mint);
}

.data-detail__summary-card--warning {
  --detail-tone: var(--color-yellow);
}

.data-detail__summary-card--danger {
  --detail-tone: var(--color-danger);
}

.data-detail__summary-card--info {
  --detail-tone: var(--color-blue);
}

.data-detail__summary-card span,
.data-detail__summary-card small,
.data-detail__summary-card em {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 800;
}

.data-detail__summary-card strong {
  position: relative;
  z-index: 1;
  color: var(--detail-tone);
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 0.8rem color-mix(in srgb, var(--detail-tone) 34%, transparent);
}

.data-detail__summary-card em {
  position: relative;
  z-index: 1;
  grid-column: 2 / -1;
  color: var(--color-text);
}

.data-detail__summary-card mark {
  position: relative;
  z-index: 1;
  grid-column: 2 / -1;
  width: fit-content;
  padding: 0.12rem 0.4rem;
  color: var(--alpha-deep-00724-100);
  font-size: var(--text-2xs);
  font-weight: 900;
  text-transform: uppercase;
  background: var(--detail-tone);
  border: 0;
}

/* Visual-first detail layout: charts carry the first read; text becomes compact context. */
.data-detail__surface {
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: var(--space-2);
}

.data-detail__command {
  grid-template-columns: minmax(20rem, 0.64fr) minmax(0, 1.36fr);
  gap: var(--space-2);
}

.data-detail__brief {
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}

.data-detail__brief-icon {
  width: 2.15rem;
  height: 2.15rem;
}

.data-detail__brief strong {
  font-size: var(--text-sm);
  line-height: 1.1;
}

.data-detail__brief p,
.data-detail__finding p,
.data-detail__quality,
.data-detail__legend {
  display: none;
}

.data-detail__findings {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
}

.data-detail__finding {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.12rem var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-top: 0;
  border-left: 0.2rem solid var(--detail-tone);
}

.data-detail__finding span {
  font-size: var(--text-2xs);
}

.data-detail__finding .data-detail__status {
  justify-self: end;
}

.data-detail__finding strong {
  grid-column: 1 / 2;
  font-size: var(--text-md);
}

.data-detail__finding em {
  grid-column: 2 / 3;
  align-self: center;
  font-size: var(--text-2xs);
}

.data-detail__actions {
  grid-template-columns: minmax(8rem, 0.12fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.data-detail__actions > header {
  min-width: 0;
  padding: var(--space-2);
}

.data-detail__action-grid {
  gap: var(--space-1);
}

.data-detail__action {
  grid-template-rows: auto auto auto;
  gap: 0.12rem;
  padding: var(--space-1) var(--space-2);
}

.data-detail__action p,
.data-detail__action footer {
  display: none;
}

.data-detail__action strong {
  font-size: var(--text-sm);
}

.data-detail__visuals {
  grid-template-columns: minmax(10rem, 0.24fr) minmax(0, 1.76fr);
  gap: var(--space-3);
}

.data-detail__summary {
  gap: var(--space-1);
}

.data-detail__summary-card {
  padding: var(--space-1) var(--space-2);
}

.data-detail__summary-icon {
  width: 1.55rem;
  height: 1.55rem;
}

.data-detail__summary-card strong {
  font-size: var(--text-xl);
}

.data-detail__summary-card span,
.data-detail__summary-card small,
.data-detail__summary-card em {
  font-size: var(--text-2xs);
}