/* GEN-DESIGN-009.R5F.1 — semantic evidence/frontier inspection only. */

.field-r5f-inspector {
  width: min(440px, calc(100vw - 112px));
  max-height: min(70vh, 620px);
  overflow: auto;
  user-select: text;
  touch-action: pan-y;
  border-top-color: rgba(124, 169, 207, .54);
  background: rgba(7, 11, 15, .78);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .24);
}

.field-r5f-inspector[data-r5f-tab="frontier"] {
  border-top-color: rgba(213, 173, 98, .62);
}

.field-r5f-inspector__meta span:last-child {
  max-width: 56%;
  text-align: right;
}

.field-r5f-statement {
  color: #c2cbd3 !important;
}

.field-r5f-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 16px 0 15px;
}

.field-r5f-tabs button {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(57, 67, 78, .88);
  border-radius: 3px;
  background: rgba(12, 17, 22, .76);
  color: #8995a1;
  cursor: pointer;
  font: 600 9px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .09em;
  text-align: left;
}

.field-r5f-tabs button[aria-selected="true"] {
  border-color: rgba(124, 169, 207, .64);
  color: var(--g-text);
  background: rgba(27, 42, 54, .56);
}

.field-r5f-inspector[data-r5f-tab="frontier"] .field-r5f-tabs button[aria-selected="true"] {
  border-color: rgba(213, 173, 98, .68);
  background: rgba(57, 45, 24, .28);
}

.field-r5f-detail {
  padding-top: 2px;
  border-top: 1px solid rgba(37, 44, 52, .72);
}

.field-r5f-detail dl {
  display: grid;
  grid-template-columns: minmax(88px, .34fr) 1fr;
  gap: 8px 14px;
  margin: 13px 0 0;
}

.field-r5f-detail dt {
  color: #788591;
  font: 600 8px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .11em;
}

.field-r5f-detail dd {
  margin: 0;
  color: #aeb8c1;
  font-size: 11px;
  line-height: 1.48;
}

.field-r5f-note {
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: 1px dashed rgba(57, 67, 78, .74);
  color: #7f8c98 !important;
  font-size: 11px !important;
}

.field-stage[data-r5f-state="evidence-frontier"] .field-viewport-status__eyebrow::after {
  content: " / R5F";
  color: #667787;
}

@media (max-width: 760px) {
  .field-r5f-inspector {
    top: 54px;
    left: 17px;
    right: 58px;
    width: auto;
    max-height: 46vh;
    padding: 14px 15px;
  }

  .field-r5f-inspector h2 {
    font-size: 19px;
  }

  .field-r5f-inspector__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .field-r5f-inspector__meta span:last-child {
    max-width: none;
    text-align: left;
  }

  .field-r5f-tabs {
    grid-template-columns: 1fr;
  }

  .field-r5f-detail dl {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .field-r5f-detail dd + dt {
    margin-top: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field-r5f-inspector,
  .field-r5f-tabs button {
    transition: none;
  }
}