﻿.operations-body {
  min-width: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% -10%, rgba(42, 116, 121, .16), transparent 34rem),
    radial-gradient(circle at 102% 46%, rgba(170, 119, 56, .08), transparent 28rem),
    #071015;
  color: var(--ink);
}

.operations-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 100% 64px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.operations-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(280px, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: 0 clamp(1.1rem, 2.4vw, 2.4rem);
  background: rgba(5, 13, 17, .9);
  border-bottom: 1px solid rgba(238, 234, 225, .1);
  backdrop-filter: blur(22px) saturate(120%);
}

.operations-nav nav { display: flex; align-items: center; gap: .25rem; }
.operations-nav nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 .95rem;
  color: var(--muted-ink);
  border-bottom: 1px solid transparent;
  font-size: .86rem;
  transition: color 180ms ease, border-color 180ms ease;
}
.operations-nav nav a:hover,
.operations-nav nav a.is-active { color: var(--ink); border-bottom-color: var(--evidence); }

.session-control { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; }
.session-control > span { color: var(--muted-ink); font-size: .8rem; }
.session-control .quiet-button { min-height: 40px; padding: .55rem .9rem; border-radius: 9px; font-size: .8rem; }

.operations-shell {
  width: min(1680px, calc(100% - clamp(2rem, 5vw, 5.5rem)));
  margin: 0 auto;
  padding: clamp(1.6rem, 3vw, 2.8rem) 0 4rem;
}

.operations-command {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(440px, 1.2fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 6rem);
  min-height: 168px;
  padding: 1.25rem clamp(1rem, 2vw, 1.7rem) 1.65rem clamp(1.35rem, 2.6vw, 2.35rem);
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(16, 32, 39, .96), rgba(9, 20, 26, .88) 58%, rgba(19, 25, 28, .92)),
    #0c181f;
  border: 1px solid rgba(238, 234, 225, .13);
  border-radius: 18px 18px 4px 4px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .18);
}

.operations-command::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--evidence), rgba(181, 164, 125, .1) 70%, var(--uncertainty));
  box-shadow: 0 0 26px rgba(181, 164, 125, .32);
}
.operations-command::after {
  content: "";
  position: absolute;
  right: -5rem;
  top: -8rem;
  width: 24rem;
  height: 24rem;
  border: 1px solid rgba(181, 164, 125, .09);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(181,164,125,.018), 0 0 0 8rem rgba(181,164,125,.012);
  pointer-events: none;
}

.workspace-heading { position: relative; z-index: 1; }
.workspace-context {
  display: block;
  margin-bottom: .6rem;
  color: var(--evidence);
  font: 600 .68rem/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.workspace-heading h1 {
  margin: 0 0 .35rem;
  font-family: var(--display-serif-cjk);
  font-size: clamp(2.25rem, 3.6vw, 3.65rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: 1;
}
.workspace-heading > p { max-width: 32rem; margin: 0; color: var(--muted-ink); font-size: .95rem; }

.case-open-form { position: relative; z-index: 1; display: grid; gap: .55rem; }
.case-open-form > label { color: var(--ink); font-size: .76rem; font-weight: 650; letter-spacing: .02em; }
.case-open-form > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9.5rem, auto) auto; gap: .6rem; }
.case-open-form input,
.case-open-form select,
.queue-tools input,
.queue-tools select {
  width: 100%;
  min-height: 44px;
  padding: 0 .9rem;
  color: var(--ink);
  background: rgba(3, 11, 15, .7);
  border: 1px solid rgba(238, 234, 225, .17);
  border-radius: 8px;
}
.case-open-form input,
.case-open-form select { min-height: 48px; }
.case-open-form input { font-family: var(--mono); }
.case-open-form .primary-button { min-height: 48px; border-radius: 8px; padding-inline: 1.2rem; }
.case-open-form input:focus,
.queue-tools input:focus,
.queue-tools select:focus { border-color: var(--evidence); box-shadow: 0 0 0 3px rgba(181, 164, 125, .1); outline: 0; }
.case-open-form > p { min-height: 1.1rem; margin: 0; color: var(--conflict); font-size: .76rem; }

.status-rail {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 1.35fr) repeat(4, minmax(150px, 1fr));
  overflow: hidden;
  background: rgba(8, 18, 24, .88);
  border: 1px solid rgba(238, 234, 225, .12);
  border-top: 0;
  border-radius: 0 0 18px 18px;
}
.status-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(181,164,125,.045), transparent 31%, transparent 72%, rgba(231,180,95,.025));
}
.status-tally {
  position: relative;
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  align-items: end;
  column-gap: .5rem;
  padding: .95rem 1.2rem .9rem;
  border-right: 1px solid rgba(238, 234, 225, .09);
}
.status-tally:last-child { border-right: 0; }
.status-tally::after { content: ""; position: absolute; top: 0; left: 1.2rem; width: 22px; height: 1px; background: var(--faint-ink); }
.status-tally--primary::after { width: 58px; background: var(--evidence); box-shadow: 0 0 16px rgba(181,164,125,.35); }
.status-tally span { grid-column: 1 / -1; align-self: start; color: var(--muted-ink); font-size: .72rem; }
.status-tally strong { font: 500 2rem/1 var(--mono); color: var(--ink-strong); }
.status-tally--primary strong { font-size: 2.65rem; color: var(--evidence); }
.status-tally small { padding-bottom: .16rem; color: var(--faint-ink); font-size: .68rem; line-height: 1.35; }

.operations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-top: 1.15rem;
}

.queue-workspace {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 28, 35, .96), rgba(8, 18, 24, .98));
  border: 1px solid rgba(238, 234, 225, .13);
  border-radius: 14px 4px 14px 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.2);
}
.panel-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 1.35rem 1.1rem;
  border-bottom: 1px solid rgba(238, 234, 225, .1);
}
.panel-header h2 { margin: 0 0 .25rem; color: var(--ink-strong); font-size: 1.12rem; font-weight: 630; letter-spacing: -.025em; }
.panel-header p { margin: 0; color: var(--faint-ink); font-size: .78rem; }
.queue-tools { display: flex; gap: .5rem; }
.queue-tools input { width: 200px; }
.queue-tools select { width: 154px; }
.icon-button {
  width: 44px;
  min-height: 44px;
  border: 1px solid rgba(238,234,225,.17);
  border-radius: 8px;
  background: rgba(20, 36, 44, .72);
  color: var(--muted-ink);
  font-size: 1.05rem;
}
.icon-button:hover { border-color: var(--evidence); color: var(--evidence); background: rgba(181,164,125,.06); }

.queue-scroll { overflow-x: auto; }
.queue-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.queue-table th {
  padding: .75rem .85rem;
  color: var(--faint-ink);
  background: rgba(4, 12, 16, .38);
  font: 600 .66rem/1.3 var(--mono);
  letter-spacing: .04em;
  text-align: left;
}
.queue-table td {
  position: relative;
  height: 88px;
  padding: .92rem .85rem;
  border-top: 1px solid rgba(238,234,225,.09);
  color: var(--muted-ink);
  font-size: .79rem;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.queue-table tbody tr { transition: background-color 180ms ease, box-shadow 180ms ease; }
.queue-table tbody tr:hover { background: linear-gradient(90deg, rgba(181,164,125,.065), rgba(181,164,125,.018)); box-shadow: inset 3px 0 0 var(--evidence); }
.queue-row > td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--faint-ink);
}
.queue-row--awaiting_human_disposition > td:first-child::before,
.queue-row--evidence_requested > td:first-child::before { background: var(--uncertainty); }
.queue-row--execution_blocked > td:first-child::before { background: var(--conflict); }
.queue-row--quality_gate_passed > td:first-child::before,
.queue-row--closed > td:first-child::before { background: var(--success); }
.queue-table th:nth-child(1) { width: 20%; }
.queue-table th:nth-child(2) { width: 18%; }
.queue-table th:nth-child(3) { width: 14%; }
.queue-table th:nth-child(4) { width: 7%; }
.queue-table th:nth-child(5) { width: 10%; }
.queue-table th:nth-child(6) { width: 10%; }
.queue-table th:nth-child(7) { width: 12%; }
.queue-table th:nth-child(8) { width: 9%; }

.case-identity,
.scope-block,
.pending-counts { display: grid; gap: .25rem; }
.case-id { font: 600 .8rem/1.3 var(--mono); color: var(--ink-strong); letter-spacing: .015em; }
.case-identity small,
.scope-block small,
.pending-counts small { color: var(--faint-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-block strong { color: #c7d3d2; font-weight: 570; }
.demo-tag { width: fit-content; padding: .12rem .38rem; border-left: 2px solid var(--uncertainty); color: var(--uncertainty); background: rgba(231,180,95,.045); font-size: .62rem; }
.pending-counts strong { font: 500 1.15rem/1 var(--mono); color: var(--ink); }

.case-status,
.sync-status { display: inline-flex; align-items: center; gap: .42rem; width: fit-content; color: #b4c2c2; font-size: .7rem; }
.case-status::before,
.sync-status::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--faint-ink); }
.state-awaiting_human_disposition::before { background: var(--uncertainty); box-shadow: 0 0 0 3px rgba(231,180,95,.1); }
.state-evidence_requested::before { background: var(--uncertainty); }
.state-execution_blocked::before { background: var(--conflict); }
.state-quality_gate_passed::before,
.state-closed::before,
.sync-synced::before,
.sync-success::before,
.sync-completed::before { background: var(--success); }
.sync-failed::before { background: var(--conflict); }
.row-action { min-height: 44px; display: inline-flex; align-items: center; color: var(--evidence); font-size: .76rem; font-weight: 650; transition: gap 180ms ease, color 180ms ease; }
.row-action:hover { color: var(--ink); gap: .25rem; }

.queue-message { padding: 2.5rem 1.35rem; color: var(--muted-ink); border-top: 1px solid rgba(238,234,225,.09); }
.queue-message strong { display: block; margin-bottom: .35rem; color: var(--ink); }
.queue-message p { margin: 0; }

.operations-access-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(420px, 1.45fr) auto;
  align-items: center;
  gap: 1.4rem;
  margin-top: .85rem;
  padding: 1rem 1.2rem;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(21, 27, 28, .88), rgba(8, 18, 24, .9) 44%, rgba(8, 18, 24, .72));
  border-block: 1px solid rgba(238, 234, 225, .11);
}
.operations-access-band::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(var(--uncertainty), rgba(181, 164, 125, .4), transparent 88%);
}
.access-summary {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
}
.authority-indicator { width: 10px; height: 40px; border: 1px solid var(--uncertainty); border-radius: 999px; box-shadow: inset 0 -14px 0 rgba(231,180,95,.22), 0 0 20px rgba(231,180,95,.1); }
.access-summary p { margin: 0; }
.access-summary > div > p:first-child { color: var(--uncertainty); font: 600 .62rem/1.3 var(--mono); letter-spacing: .1em; }
.access-summary h2 { margin: .2rem 0 .28rem; color: var(--ink-strong); font-size: .98rem; font-weight: 630; letter-spacing: -.02em; }
#queue-access-note { max-width: 42rem; color: var(--faint-ink); font-size: .74rem; line-height: 1.5; }
.access-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.access-ledger div { min-width: 0; padding: .15rem 1rem; border-left: 1px solid rgba(238,234,225,.1); }
.access-ledger dt { color: var(--faint-ink); font-size: .67rem; }
.access-ledger dd { margin: .27rem 0 0; color: #c7d3d2; font: 500 .72rem/1.3 var(--mono); overflow-wrap: anywhere; }
.access-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; gap: .45rem; color: var(--evidence); font-size: .76rem; font-weight: 620; white-space: nowrap; }
.access-link:hover { color: var(--ink-strong); }

@media (prefers-reduced-motion: reduce) {
  .operations-body *, .operations-body *::before, .operations-body *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Archive noir: the operations surface reads as a case room, not a control room. */
.operations-body {
  background:
    radial-gradient(circle at 76% 8%, rgba(181, 164, 125, .07), transparent 32rem),
    radial-gradient(circle at 12% 88%, rgba(125, 63, 73, .05), transparent 34rem),
    #090a0a;
}

.operations-body::before {
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(235, 228, 215, .018) 9% 9.08%, transparent 9.08% 100%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.025), transparent 44rem);
  background-size: 100% 100%, auto;
  mask-image: none;
}

.operations-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .15;
  mix-blend-mode: soft-light;
  background-image:
    repeating-radial-gradient(circle at 18% 22%, rgba(255,255,255,.12) 0 .35px, transparent .45px 2.6px),
    repeating-linear-gradient(96deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
  background-size: 7px 7px, 100% 5px;
}

.operations-nav {
  min-height: 72px;
  background: rgba(9, 10, 10, .92);
  border-bottom-color: rgba(235, 228, 215, .09);
  backdrop-filter: blur(18px);
}

.operations-nav nav a { color: #8f8a82; }
.operations-nav nav a:hover,
.operations-nav nav a.is-active { color: var(--cinema-ivory); border-bottom-color: var(--cinema-gold); }
.session-control .quiet-button { border-radius: 6px; background: rgba(235, 228, 215, .025); }

.operations-shell {
  width: min(1560px, calc(100% - clamp(2rem, 6vw, 7rem)));
  padding-top: clamp(2.25rem, 4.5vw, 4.6rem);
}

.operations-command {
  grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr);
  align-items: center;
  min-height: 236px;
  padding: clamp(2.2rem, 4vw, 4.2rem);
  border-color: rgba(235, 228, 215, .13);
  border-radius: 9px 9px 0 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 9, .98) 0%, rgba(13, 13, 12, .94) 43%, rgba(13, 13, 12, .72) 64%, rgba(13, 13, 12, .9) 100%),
    linear-gradient(180deg, transparent 55%, rgba(8, 8, 7, .94)),
    url("../images/evidence-horizon-desktop.webp") center 44% / cover no-repeat;
  box-shadow: 0 34px 110px rgba(0, 0, 0, .3);
}

.operations-command::before {
  inset: 0 auto 0 48%;
  width: clamp(4rem, 9vw, 10rem);
  background: linear-gradient(90deg, transparent, rgba(233, 211, 164, .075), transparent);
  box-shadow: none;
  filter: blur(12px);
}

.operations-command::after {
  right: 16%;
  top: -22%;
  width: 1px;
  height: 150%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(transparent, rgba(235, 228, 215, .14) 35%, rgba(181, 164, 125, .48) 56%, transparent 82%);
  box-shadow: 0 0 54px 18px rgba(181, 164, 125, .055);
  transform: rotate(8deg);
}

.workspace-context {
  margin-bottom: .85rem;
  color: #a99b78;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 540;
  letter-spacing: .035em;
  text-transform: none;
}

.operations-command .workspace-heading::after {
  content: "";
  display: block;
  width: min(13rem, 55%);
  height: 1px;
  margin-top: 1.35rem;
  background: linear-gradient(90deg, rgba(181, 164, 125, .72), transparent);
}

.workspace-heading h1 {
  max-width: 8ch;
  margin-bottom: .65rem;
  color: var(--cinema-ivory);
  font-size: clamp(3.25rem, 5vw, 5.3rem);
  letter-spacing: -.075em;
  line-height: .92;
  text-wrap: balance;
}

.workspace-heading > p { max-width: 27rem; color: #9b968e; font-size: .92rem; line-height: 1.65; }

.case-open-form { align-self: end; padding: 1.1rem 0 .15rem; }
.case-open-form > label { color: #c9c2b7; font-family: var(--display-serif-cjk); font-size: 1rem; font-weight: 400; }
.case-open-form input,
.case-open-form select,
.queue-tools input,
.queue-tools select {
  color: var(--cinema-ivory);
  background: rgba(8, 8, 7, .7);
  border-color: rgba(235, 228, 215, .14);
  border-radius: 6px;
}
.case-open-form input { font-family: var(--mono); }
.case-open-form .primary-button { border-radius: 6px; background: var(--cinema-ivory); color: var(--cinema-ink); }
.case-open-form input:focus,
.case-open-form select:focus,
.queue-tools input:focus,
.queue-tools select:focus { border-color: rgba(181, 164, 125, .75); box-shadow: 0 0 0 3px rgba(181, 164, 125, .08); }

.status-rail {
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(140px, 1fr));
  background: rgba(17, 16, 15, .95);
  border-color: rgba(235, 228, 215, .11);
  border-radius: 0 0 9px 9px;
}
.status-rail::before { background: linear-gradient(90deg, rgba(181, 164, 125, .045), transparent 34%, rgba(125, 63, 73, .025)); }
.status-tally { min-height: 104px; padding: 1.15rem 1.35rem 1rem; border-right-color: rgba(235, 228, 215, .08); }
.status-tally::after { display: none; }
.status-tally span { color: #8d877e; font-family: var(--display-serif-cjk); font-size: .82rem; }
.status-tally strong {
  color: #d8d2c7;
  font-family: var(--display-serif-latin);
  font-size: 2.1rem;
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
}
.status-tally--primary strong { color: var(--cinema-gold); font-size: 2.75rem; }
.status-tally small { color: #6f6a63; font-size: .68rem; }

.operations-grid { margin-top: 1.7rem; }
.queue-workspace {
  border-color: rgba(235, 228, 215, .11);
  border-radius: 9px;
  background: rgba(18, 17, 16, .92);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .22);
}
.queue-workspace::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(181, 164, 125, .025), transparent);
}
.panel-header { position: relative; padding: 1.65rem 1.55rem 1.35rem; border-bottom-color: rgba(235, 228, 215, .1); }
.panel-header h2 { margin-bottom: .4rem; font-family: var(--display-serif-cjk); font-size: 1.65rem; font-weight: 400; letter-spacing: -.045em; }
.panel-header p { color: #777169; font-size: .76rem; }
.icon-button { border-color: rgba(235, 228, 215, .13); border-radius: 6px; background: rgba(235, 228, 215, .025); color: #938d84; }
.icon-button:hover { border-color: rgba(181, 164, 125, .55); color: var(--cinema-gold); background: rgba(181, 164, 125, .05); }

.queue-table th {
  padding: .85rem 1rem;
  color: #766f67;
  background: rgba(8, 8, 7, .28);
  font-family: inherit;
  font-size: .7rem;
  font-weight: 520;
  letter-spacing: .015em;
}
.queue-table td { height: 104px; padding: 1rem; border-top-color: rgba(235, 228, 215, .075); color: #9c968d; }
.queue-table tbody tr:hover { background: linear-gradient(90deg, rgba(181, 164, 125, .065), rgba(181, 164, 125, .012)); box-shadow: inset 2px 0 0 rgba(181, 164, 125, .74); }
.queue-row > td:first-child::before { top: 22px; bottom: 22px; width: 1px; }
.case-id { color: #e1dbd0; font-size: .78rem; font-weight: 550; }
.scope-block strong { color: #c5beb3; font-weight: 520; }
.demo-tag { color: #b8a679; background: rgba(181, 164, 125, .04); border-left-color: rgba(181, 164, 125, .7); }
.pending-counts strong { font-family: var(--display-serif-latin); color: #e0d9ce; font-size: 1.3rem; font-weight: 400; }
.case-status, .sync-status { color: #aaa39a; }
.row-action { color: var(--cinema-gold); font-weight: 560; }
.row-action:hover { color: var(--cinema-ivory); }

.operations-access-band {
  grid-template-columns: minmax(300px, 1.1fr) minmax(420px, 1.45fr) auto;
  margin-top: 1rem;
  padding: 1.25rem 1.35rem;
  background: rgba(12, 12, 11, .65);
  border-block-color: rgba(235, 228, 215, .09);
}
.operations-access-band::before { width: 1px; background: linear-gradient(var(--cinema-gold), transparent 85%); }
.authority-indicator { width: 8px; height: 42px; border-color: rgba(181, 164, 125, .65); border-radius: 2px; box-shadow: inset 0 -15px 0 rgba(181, 164, 125, .16); }
.access-summary > div > p:first-child { color: var(--cinema-gold); font-family: inherit; font-size: .7rem; letter-spacing: .02em; }
.access-summary h2 { font-family: var(--display-serif-cjk); font-size: 1.08rem; font-weight: 400; }
.access-ledger div { border-left-color: rgba(235, 228, 215, .08); }
.access-ledger dd { color: #b9b2a7; }
.access-link { color: var(--cinema-gold); font-weight: 540; }
