/* High-fidelity refinement for active orders and the order archive. */
#appView #section-extract .activation-live {
  min-height: 31rem;
}

#appView #section-extract .activation-live .order-grid {
  gap: .75rem;
}

#appView #section-extract .activation-live .order-card {
  max-width: 100%;
  border-color: rgba(116, 151, 194, .54);
  border-radius: .9rem;
  box-shadow: 0 10px 28px rgba(0, 16, 38, .16);
}

#appView #section-extract .activation-live .order-card:hover {
  border-color: rgba(141, 180, 231, .78);
  box-shadow: 0 14px 34px rgba(0, 16, 38, .2);
}

#appView #section-extract .order-focus {
  gap: .75rem;
  padding: .68rem .82rem;
}

#appView #section-extract .order-focus-copy {
  gap: .6rem;
}

#appView #section-extract .order-focus-copy > div strong {
  font-size: .82rem;
}

#appView #section-extract .order-focus-copy > div span,
#appView #section-extract .order-focus-timer span {
  font-size: .65rem;
}

#appView #section-extract .order-focus-timer strong {
  font-size: 1rem;
}

#appView #section-extract .order-card-main {
  grid-template-columns: minmax(0, 1.55fr) minmax(12rem, .85fr);
  gap: .7rem;
  padding: .78rem;
}

#appView #section-extract .order-number-panel {
  gap: .55rem;
  padding: .75rem;
  border-radius: .75rem;
}

#appView #section-extract .order-country-mark {
  width: 2rem;
  height: 2rem;
  border-radius: .58rem;
  font-size: .65rem;
}

#appView #section-extract .order-number-heading {
  gap: .55rem;
}

#appView #section-extract .activation-live .order-phone {
  font-size: clamp(1.22rem, 1.75vw, 1.55rem);
  letter-spacing: -.035em;
}

#appView #section-extract .activation-live .order-number-panel .order-phone {
  color: var(--order-navy);
}

#appView #section-extract .order-inline-copy {
  min-width: 3.75rem;
  min-height: 2.45rem;
  border-radius: .62rem;
  padding-inline: .62rem;
}

#appView #section-extract .order-code-box,
#appView #section-extract .order-code-placeholder {
  min-height: 2.7rem;
  border-radius: .66rem;
}

#appView #section-extract .order-code-box {
  gap: .5rem;
  padding: .32rem .38rem .32rem .68rem;
}

#appView #section-extract .order-code-box > strong {
  font-size: 1.12rem;
}

#appView #section-extract .order-metadata {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: .72rem;
}

#appView #section-extract .order-metadata > div {
  gap: .12rem;
  padding: .52rem .62rem;
}

#appView #section-extract .order-metadata > div:nth-child(3) {
  border-left: 0;
}

#appView #section-extract .order-metadata > div:nth-child(n+3) {
  border-top: 1px solid var(--order-line);
}

#appView #section-extract .order-metadata dt {
  font-size: .62rem;
}

#appView #section-extract .order-metadata dd {
  font-size: .7rem;
}

#appView #section-extract .activation-live .order-state-note {
  padding: .58rem .68rem;
  font-size: .69rem;
}

#appView #section-extract .activation-live .order-actions {
  grid-column: 1 / -1;
}

#appView #section-extract .activation-live .order-actions .button {
  min-height: 2.5rem;
  border-radius: .65rem;
  font-size: .72rem;
}

/* Precision ledger: clear rows, subtle depth and a calmer information rhythm. */
#appView #section-records .record-archive {
  border-color: #dce4ef;
  box-shadow: 0 18px 44px rgba(18, 39, 72, .07);
}

#appView #section-records .record-table-head {
  margin: 0 .35rem;
  padding-inline: .85rem;
  border: 0;
  border-bottom: 1px solid #dfe6ef;
  border-radius: 0;
  background: transparent;
  letter-spacing: .035em;
}

#appView #section-records #recordList {
  display: grid;
  gap: .55rem;
  overflow: visible;
  padding: .55rem;
  border: 1px solid #dde5ef;
  border-radius: .9rem;
  background: #f5f8fc;
}

#appView #section-records .record-row {
  position: relative;
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-radius: .78rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(18, 39, 72, .035);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#appView #section-records .record-row::before {
  position: absolute;
  inset: 50% auto auto .3rem;
  width: .34rem;
  height: .34rem;
  border-radius: 999px;
  background: #97a8bd;
  transform: translateY(-50%);
  content: "";
}

#appView #section-records .record-row.waiting::before { background: #d98a17; }
#appView #section-records .record-row.received::before { background: #188957; }
#appView #section-records .record-row.cancelled::before,
#appView #section-records .record-row.error::before { background: #c84048; }

#appView #section-records .record-row:hover {
  border-color: #bdcce0;
  background: #fff;
  box-shadow: 0 9px 22px rgba(18, 39, 72, .08);
  transform: translateY(-1px);
}

#appView #section-records .record-row-summary {
  min-height: 5.2rem;
  padding: .72rem .82rem;
}

#appView #section-records .record-row-summary:hover {
  background: #fbfdff;
}

#appView #section-records .record-detail[open] > .record-row-summary {
  background: #f7faff;
}

#appView #section-records .record-primary {
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .62rem;
}

#appView #section-records .record-country-mark {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid #d8e2ef;
  border-radius: .58rem;
  background: #f1f6fc;
  color: #365579;
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 800;
}

#appView #section-records .record-phone {
  font-size: .86rem;
}

#appView #section-records .record-primary .muted {
  color: #8491a4;
}

#appView #section-records .record-status-cell .status {
  padding: .24rem .58rem;
  border: 0;
  box-shadow: inset 0 0 0 1px currentColor;
}

#appView #section-records .record-open {
  min-width: 5.7rem;
  min-height: 2.4rem;
  justify-content: center;
  padding-inline: .7rem;
  border: 1px solid #d5dfec;
  border-radius: .62rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 39, 72, .04);
}

#appView #section-records .record-detail[open] .record-open {
  border-color: #abc2e2;
  background: #edf5ff;
}

#appView #section-records .record-detail-body,
#appView #section-records .record-detail[open] .record-detail-body {
  margin: 0 .55rem .55rem;
  padding: .72rem;
  border: 1px solid #dfe6ef;
  border-radius: .68rem;
  background: #f4f7fb;
}

@media (max-width: 52rem) {
  #appView #section-extract .order-card-main {
    grid-template-columns: minmax(0, 1fr);
  }
  #appView #section-extract .activation-live .order-actions {
    grid-column: auto;
  }
}

@media (max-width: 40rem) {
  #appView #section-extract .activation-live {
    min-height: 27rem;
  }
  #appView #section-extract .order-focus {
    align-items: flex-start;
  }
  #appView #section-extract .order-focus-copy > div span {
    max-width: 15rem;
  }
  #appView #section-extract .order-card-main,
  #appView #section-extract .order-number-panel {
    padding: .7rem;
  }
  #appView #section-extract .activation-live .order-phone {
    font-size: 1.18rem;
  }
  #appView #section-records #recordList {
    padding: .42rem;
  }
  #appView #section-records .record-row-summary {
    min-height: 0;
    padding: .75rem;
  }
  #appView #section-records .record-open {
    min-width: 2.5rem;
    padding: 0;
    border-radius: .58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #appView #section-extract .activation-live .order-card,
  #appView #section-records .record-row {
    transition: none;
  }
  #appView #section-records .record-row:hover {
    transform: none;
  }
}