/* Private context operating system: Edition lenses, album queue, and exact packet inspector. */

.context-workspace {
  margin-inline: auto;
  max-inline-size: 110rem;
  min-block-size: 100dvh;
  padding: var(--ok-space-4) clamp(var(--ok-space-3), 2vw, var(--ok-space-6)) var(--ok-space-12);
}

.context-topbar {
  align-items: end;
  border-block-end: var(--ok-rule) solid var(--color-rule-strong);
  display: grid;
  gap: var(--ok-space-6);
  grid-template-columns: minmax(0, 1fr) minmax(24rem, auto);
  padding-block-end: var(--ok-space-4);
}

.context-topbar h1 {
  font-size: var(--text-title);
  letter-spacing: var(--tracking-display);
  line-height: var(--line-heading);
  margin: var(--ok-space-2) 0 0;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.context-inline-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.context-inline-nav a,
.context-filter-list a {
  border: var(--ok-rule) solid var(--color-rule);
  font-size: var(--text-metadata);
  letter-spacing: var(--tracking-label);
  margin-block-start: calc(var(--ok-rule) * -1);
  margin-inline-start: calc(var(--ok-rule) * -1);
  padding: var(--ok-space-2);
  text-decoration: none;
  text-transform: uppercase;
}

.context-modebar {
  align-items: center;
  border-block-end: var(--ok-rule) solid var(--color-rule-strong);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-metadata);
  gap: var(--ok-space-2);
  min-block-size: var(--ok-space-12);
  padding-block: var(--ok-space-2);
  text-transform: uppercase;
}

.context-modebar strong:not(.curation-status) {
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-label);
  margin-inline-start: var(--ok-space-3);
}

.context-modebar strong:first-child {
  margin-inline-start: 0;
}

.context-modebar a {
  margin-inline-start: auto;
}

.context-edition-register > header,
.context-pane > header {
  align-items: end;
  border-block-end: var(--ok-rule) solid var(--color-rule-strong);
  display: flex;
  justify-content: space-between;
  padding: var(--ok-space-4);
}

.context-edition-register > header h2,
.context-pane > header h2 {
  font-size: var(--text-lead);
  margin: 0;
  text-transform: uppercase;
}

.context-edition-row {
  align-items: center;
  border-block-end: var(--ok-rule) solid var(--color-rule);
  display: grid;
  gap: var(--ok-space-5);
  grid-template-columns: minmax(18rem, 1fr) minmax(22rem, 1.25fr) minmax(15rem, 0.6fr);
  padding: var(--ok-space-4);
}

.context-edition-row__identity span,
.context-edition-row__identity p,
.context-edition-row__gate span {
  color: var(--color-text-muted);
  display: block;
  font-size: var(--text-metadata);
  margin: 0;
  text-transform: uppercase;
}

.context-edition-row h2 {
  font-size: var(--text-lead);
  margin: var(--ok-space-1) 0;
  text-transform: uppercase;
}

.context-subject-strip {
  display: grid;
  gap: var(--ok-space-1);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.context-subject-strip .curation-status {
  text-align: center;
}

.context-edition-row__gate {
  align-items: start;
  display: grid;
  gap: var(--ok-space-2);
  justify-items: start;
}

.context-three-pane {
  border-block-end: var(--ok-rule) solid var(--color-rule-strong);
  display: grid;
  grid-template-columns: minmax(17rem, 0.7fr) minmax(28rem, 1.45fr) minmax(20rem, 0.85fr);
  min-block-size: calc(100dvh - 11rem);
}

.context-three-pane--mapping {
  grid-template-columns: minmax(15rem, 0.55fr) minmax(28rem, 1.35fr) minmax(22rem, 0.9fr);
}

.context-three-pane--packet {
  grid-template-columns: minmax(18rem, 0.65fr) minmax(25rem, 0.9fr) minmax(30rem, 1.25fr);
}

.context-pane {
  min-inline-size: 0;
  overflow: auto;
}

.context-pane + .context-pane {
  border-inline-start: var(--ok-rule) solid var(--color-rule-strong);
}

.context-pane > header {
  background: var(--color-page);
  inset-block-start: 0;
  position: sticky;
  z-index: 1;
}

.context-lens-list,
.context-count-list,
.context-inspector-list,
.context-album-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.context-lens-list li {
  align-items: center;
  border-block-end: var(--ok-rule) solid var(--color-rule);
  display: grid;
  gap: var(--ok-space-2);
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: var(--ok-space-3);
}

.context-lens-list strong,
.context-lens-list span,
.context-lens-list a {
  display: block;
  font-size: var(--text-metadata);
}

.context-lens-list div > span {
  color: var(--color-text-muted);
}

.context-pane-section,
.context-stack-card,
.context-spend-actions {
  border-block-end: var(--ok-rule) solid var(--color-rule);
  padding: var(--ok-space-4);
}

.context-pane-section h3,
.context-stack-card h3 {
  font-size: var(--text-lead);
  margin: var(--ok-space-2) 0 var(--ok-space-4);
  text-transform: uppercase;
}

.context-stack-card > span,
.context-pane-section > .meta {
  color: var(--color-action);
  font-size: var(--text-metadata);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.context-stack-card--nested {
  border-inline-start: var(--ok-space-1) solid var(--color-confirmed);
  margin-inline-start: var(--ok-space-5);
}

.context-compact-definition {
  margin: 0;
}

.context-compact-definition > div {
  border-block-end: var(--ok-rule) solid var(--color-rule);
  display: grid;
  gap: var(--ok-space-3);
  grid-template-columns: minmax(7rem, 0.55fr) minmax(0, 1fr);
  padding-block: var(--ok-space-2);
}

.context-compact-definition dt {
  color: var(--color-text-muted);
  font-size: var(--text-metadata);
  text-transform: uppercase;
}

.context-compact-definition dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.context-count-list li,
.context-inspector-list li {
  border-block-end: var(--ok-rule) solid var(--color-rule);
  display: flex;
  gap: var(--ok-space-3);
  justify-content: space-between;
  padding-block: var(--ok-space-2);
}

.context-inspector-list li {
  align-items: start;
  flex-direction: column;
}

.context-inspector-list span,
.context-empty,
.context-policy-note {
  color: var(--color-text-muted);
  font-size: var(--text-metadata);
}

.context-filter-list {
  display: grid;
  margin-block-end: var(--ok-space-4);
}

.context-pane--sources > form,
.context-policy-note {
  margin: var(--ok-space-4);
}

.context-album-list li > a {
  align-items: center;
  border-block-end: var(--ok-rule) solid var(--color-rule);
  display: grid;
  gap: var(--ok-space-3);
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  padding: var(--ok-space-3);
  text-decoration: none;
}

.context-album-list li.is-selected > a {
  background: var(--color-surface-focus);
  border-inline-start: var(--ok-space-1) solid var(--color-focus);
}

.context-album-list small {
  color: var(--color-text-muted);
  display: block;
}

.context-album-list em {
  font-style: normal;
}

.context-decision-forms form + form {
  border-block-start: var(--ok-rule) solid var(--color-rule-strong);
  margin-block-start: var(--ok-space-5);
  padding-block-start: var(--ok-space-5);
}

.context-decision-forms textarea {
  min-block-size: 7rem;
}

.context-media-frame {
  aspect-ratio: 1;
  background: var(--color-surface);
  border-block-end: var(--ok-rule) solid var(--color-rule-strong);
}

.context-media-frame img,
.context-media-frame .media-preview-missing {
  block-size: 100%;
  inline-size: 100%;
  object-fit: contain;
}

.context-spend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ok-space-2);
}

.context-packet-details {
  border-block-end: var(--ok-rule) solid var(--color-rule);
  padding: var(--ok-space-4);
}

.context-packet-details summary {
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
}

.context-json,
.context-packet-details pre {
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  line-height: 1.45;
  margin: 0;
  min-block-size: calc(100dvh - 15rem);
  overflow: auto;
  padding: var(--ok-space-4);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 70rem) {
  .context-topbar,
  .context-edition-row {
    grid-template-columns: 1fr;
  }

  .context-three-pane,
  .context-three-pane--mapping,
  .context-three-pane--packet {
    grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1.35fr);
  }

  .context-pane--inspector,
  .context-pane--packet {
    border-block-start: var(--ok-rule) solid var(--color-rule-strong);
    border-inline-start: 0;
    grid-column: 1 / -1;
  }
}

@media (max-width: 48rem) {
  .context-inline-nav {
    grid-template-columns: 1fr;
  }

  .context-modebar {
    align-items: start;
    flex-direction: column;
  }

  .context-modebar strong:not(.curation-status) {
    margin-block-start: var(--ok-space-2);
    margin-inline-start: 0;
  }

  .context-modebar a {
    margin-inline-start: 0;
  }

  .context-three-pane,
  .context-three-pane--mapping,
  .context-three-pane--packet {
    display: block;
    min-block-size: auto;
  }

  .context-pane + .context-pane {
    border-block-start: var(--ok-rule) solid var(--color-rule-strong);
    border-inline-start: 0;
  }

  .context-pane > header {
    position: static;
  }

  .context-subject-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}