.operations-page {
  background: #f3f6f8;
}

.operations-page .top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.operations-main {
  padding-top: 30px;
  padding-bottom: 72px;
}

.operations-hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
  padding: 34px 0 42px;
}

.operations-intro h1 {
  max-width: 680px;
  margin: 8px 0 18px;
  color: #071a2b;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: .98;
  letter-spacing: 0;
}

.operations-intro .plain {
  max-width: 650px;
  margin: 0;
  font-size: 1rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.product-boundaries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #cfd8e0;
  color: #4d5d6d;
  font-size: .76rem;
  font-weight: 750;
  list-style: none;
}

.product-boundaries li::before {
  margin-right: 8px;
  color: #2d6f9f;
  content: "\2022";
}

.record-panel {
  overflow: hidden;
  border: 1px solid #173b58;
  border-radius: 8px;
  background: #0d263b;
  box-shadow: 0 18px 42px rgba(7, 26, 43, .16);
  color: #fff;
}

.record-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  color: #b9c9d6;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.record-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d5eade;
}

.record-state::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #56bf82;
  box-shadow: 0 0 0 4px rgba(86, 191, 130, .13);
  content: "";
}

.record-label {
  margin: 24px 24px 5px;
  color: #8fb0c9;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.record-panel h2 {
  margin: 0 24px 22px;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: 0;
}

.record-call {
  display: grid;
  gap: 6px;
  padding: 20px 24px;
  border-block: 1px solid rgba(255, 255, 255, .15);
  background: #102f49;
}

.record-call span,
.current-record dt {
  color: #8fb0c9;
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.record-call strong {
  font-size: 1rem;
  line-height: 1.4;
}

.current-record {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
}

.current-record div {
  min-width: 0;
  padding: 16px 24px;
  border-right: 1px solid rgba(255, 255, 255, .13);
}

.current-record div:last-child {
  border-right: 0;
}

.current-record dd {
  margin: 5px 0 0;
  color: #fff;
  font-size: .8rem;
  font-weight: 760;
  line-height: 1.4;
}

.record-link {
  display: block;
  padding: 13px 24px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  color: #fff;
  font-size: .76rem;
  font-weight: 850;
  text-decoration: none;
}

.record-link:hover,
.record-link:focus-visible {
  background: rgba(255, 255, 255, .08);
}

.workflow-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #c7d2db;
  border-radius: 8px;
  background: #fff;
}

.workflow-strip a {
  display: grid;
  gap: 2px;
  min-height: 92px;
  padding: 15px 17px;
  border-right: 1px solid #d8e0e7;
  color: #172433;
  text-decoration: none;
}

.workflow-strip a:last-child {
  border-right: 0;
}

.workflow-strip a:hover,
.workflow-strip a:focus-visible {
  background: #edf4f8;
  outline: none;
}

.workflow-strip span {
  color: #2d6f9f;
  font-size: .64rem;
  font-weight: 900;
}

.workflow-strip strong {
  font-size: .9rem;
}

.workflow-strip small {
  color: #667686;
  font-size: .72rem;
}

.operations-section {
  padding: 46px 0;
  border-bottom: 1px solid #cad4dc;
}

.live-work {
  padding-top: 34px;
}

.refresh-record {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #aebdca;
  border-radius: 6px;
  background: #fff;
  color: #17364f;
  font: 800 .76rem/1 Inter, "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

.refresh-record:hover,
.refresh-record:focus-visible {
  border-color: #2d6f9f;
  background: #edf4f8;
  outline: none;
}

.refresh-record:disabled {
  opacity: .6;
  cursor: wait;
}

.work-console {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  overflow: hidden;
  border: 1px solid #b9c7d2;
  border-radius: 8px;
  background: #fff;
}

.work-queue,
.evidence-board {
  min-width: 0;
}

.work-queue {
  border-right: 1px solid #cbd6de;
}

.console-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 50px;
  padding: 13px 17px;
  border-bottom: 1px solid #d5dee5;
  background: #edf2f6;
}

.console-heading span {
  color: #536474;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.console-heading strong {
  color: #17364f;
  font-size: .75rem;
}

.queue-loading,
.queue-empty {
  margin: 0;
  padding: 24px;
  color: #667686;
  font-size: .82rem;
}

.queue-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 88px;
  padding: 15px 17px;
  border-bottom: 1px solid #dce3e9;
}

.queue-item:last-child {
  border-bottom: 0;
}

.queue-item:hover {
  background: #fafcfd;
}

.queue-state {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 4px 7px;
  border: 1px solid #b8c9d6;
  border-radius: 4px;
  color: #285f87;
  font-size: .63rem;
  font-weight: 900;
  text-transform: uppercase;
}

.queue-item[data-tone="attention"] .queue-state {
  border-color: #d7b185;
  background: #fff7eb;
  color: #8a5318;
}

.queue-item[data-tone="blocked"] .queue-state {
  border-color: #d8a9a9;
  background: #fff2f2;
  color: #953d3d;
}

.queue-copy strong,
.queue-copy small {
  display: block;
}

.queue-copy strong {
  color: #172433;
  font-size: .88rem;
}

.queue-copy small {
  margin-top: 4px;
  color: #607180;
  font-size: .74rem;
  line-height: 1.42;
}

.queue-item > a {
  color: #245d8d;
  font-size: .74rem;
  font-weight: 850;
  white-space: nowrap;
  text-underline-offset: 3px;
}

.evidence-board {
  padding-bottom: 17px;
  background: #f8fafb;
}

.source-meter {
  height: 8px;
  margin: 20px 17px 0;
  overflow: hidden;
  border-radius: 4px;
  background: #dfe7ed;
}

.source-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: #2d719f;
  transition: width 180ms ease;
}

.evidence-board > p {
  margin: 11px 17px 16px;
  color: #607180;
  font-size: .76rem;
  line-height: 1.45;
}

.source-list {
  display: grid;
  gap: 1px;
  margin: 0 17px 16px;
  background: #d6dfe6;
}

.source-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px;
  background: #fff;
  color: #4d5f6f;
  font-size: .72rem;
}

.source-item strong {
  color: #17364f;
  font-size: .65rem;
  text-transform: capitalize;
}

.source-item strong[data-state="stale"],
.source-item strong[data-state="unavailable"] {
  color: #a04444;
}

.source-item strong[data-state="manual"] {
  color: #8a5a20;
}

.evidence-board > a {
  margin-left: 17px;
  color: #245d8d;
  font-size: .74rem;
  font-weight: 850;
  text-underline-offset: 3px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 20px;
}

.section-heading h2 {
  margin: 5px 0 0;
  color: #172433;
  font-size: 1.8rem;
  letter-spacing: 0;
}

.section-heading > p {
  max-width: 460px;
  margin: 0;
  color: #667686;
  font-size: .82rem;
  text-align: right;
}

.route-table {
  border-top: 1px solid #aebdca;
}

.route-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) minmax(160px, auto);
  gap: 22px;
  align-items: center;
  padding: 18px 6px;
  border-bottom: 1px solid #d5dee5;
}

.route-row:hover {
  background: rgba(255, 255, 255, .58);
}

.route-stage {
  color: #2d6f9f;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.route-row strong {
  display: block;
  color: #172433;
  font-size: 1rem;
}

.route-row p {
  margin: 4px 0 0;
  color: #596978;
  font-size: .82rem;
  line-height: 1.45;
}

.route-row > a,
.route-links a {
  color: #245d8d;
  font-size: .78rem;
  font-weight: 850;
  text-underline-offset: 3px;
}

.route-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.role-grid a {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 150px;
  padding: 18px;
  border: 1px solid #c8d3dc;
  border-radius: 6px;
  background: #fff;
  color: #172433;
  text-decoration: none;
}

.role-grid a:hover,
.role-grid a:focus-visible {
  border-color: #6f94b1;
  background: #edf4f8;
  outline: none;
}

.role-grid span,
.record-links > a > span {
  color: #2d6f9f;
  font-size: .65rem;
  font-weight: 900;
  text-transform: uppercase;
}

.role-grid strong {
  margin-top: 6px;
  font-size: .94rem;
}

.role-grid small {
  color: #667686;
  font-size: .74rem;
  line-height: 1.4;
}

.record-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #c8d3dc;
  border-radius: 6px;
  background: #c8d3dc;
}

.record-links a {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 142px;
  padding: 18px;
  background: #fff;
  color: #172433;
  text-decoration: none;
}

.record-links a:hover,
.record-links a:focus-visible {
  background: #edf4f8;
  outline: none;
}

.record-links strong {
  font-size: .9rem;
}

.record-links small {
  color: #667686;
  font-size: .74rem;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .operations-hero {
    grid-template-columns: 1fr;
  }

  .workflow-strip {
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    overflow-x: auto;
  }

  .role-grid,
  .record-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-console {
    grid-template-columns: 1fr;
  }

  .work-queue {
    border-right: 0;
    border-bottom: 1px solid #cbd6de;
  }
}

@media (max-width: 680px) {
  .operations-main {
    padding-top: 14px;
  }

  .operations-hero {
    gap: 26px;
    padding: 22px 0 30px;
  }

  .operations-intro h1 {
    font-size: 2.35rem;
  }

  .record-panel {
    border-radius: 6px;
  }

  .current-record,
  .role-grid,
  .record-links {
    grid-template-columns: 1fr;
  }

  .queue-item {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
  }

  .queue-item > a {
    grid-column: 2;
  }

  .current-record div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
  }

  .section-heading {
    display: block;
  }

  .section-heading > p {
    margin-top: 8px;
    text-align: left;
  }

  .route-row {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
  }

  .route-row > a,
  .route-links {
    grid-column: 2;
    justify-content: flex-start;
  }
}