/* environload — the rules only one view uses.
 *
 * Split out of app.css, which had grown past a thousand lines by absorbing
 * every page's tail. The seam is reach, not subject matter: a selector here
 * matches on exactly one screen, so nothing else can break when it changes.
 * Shared tokens, the reset, the shell and the common components stay in
 * app.css. Loaded second, after app.css.
 */

/* ---------- the strata panel: this page's signature ----------
   A variable's resolution shown as a cross-section. Layers stack bottom-up in
   precedence order, the winning layer is lit and the ones it buried are struck
   through. This is the thing a .env file can never tell you. */

.strata {
  margin: 0 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}

/* ---------- the variable list ----------
   A grid rather than a table, so an expanded cross-section spans the whole row
   instead of being trapped inside one column's width. One row per variable,
   editable where it sits: the value and the control that changes it are the
   same cell. */

.varlist-head,
.varrow-line {
  display: grid;
  /* The action column is wide enough for the longest set a row can carry —
     set empty, unset, suppress — because wrapping one button onto a second line
     makes that row taller than the ones around it and the list stops scanning. */
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) 100px 52px 218px;
  gap: 12px;
  align-items: center;
  padding: 6px 16px;
}
/* A page showing one layer has no provenance to report: every row came from the
   scope being edited, so "from" and "changed" would repeat the same answer all
   the way down. */
.varlist-plain .varlist-head,
.varlist-plain .varrow-line {
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) 218px;
}
.varlist-head {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 16px;
}
.varrow {
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.varrow:last-child {
  border-bottom: 0;
}
.varrow-line:hover {
  background: var(--surface-2);
}
.vr-key {
  font-weight: 600;
  overflow-wrap: anywhere;
  /* The caret hangs in its own gutter so that a key with something to explain
     lines up with the keys that have nothing. */
  position: relative;
  padding-left: 15px;
}
/* The cross-section hangs off a checkbox rather than <details>, because the row
   carries inputs and buttons now: inside a <summary> every click on one of them
   would toggle the disclosure instead of doing what it says. */
.vr-caret {
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--text-faint);
  font-size: 10px;
  cursor: pointer;
  transition: transform 120ms ease;
}
.vr-caret:hover {
  color: var(--text);
}
/* Clipped, not display:none — a hidden input cannot be focused, and the
   disclosure has to stay reachable from the keyboard. */
.why-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.why-toggle:focus-visible ~ .varrow-line .vr-caret {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.varrow > .strata {
  display: none;
}
.why-toggle:checked ~ .strata {
  display: block;
}
.why-toggle:checked ~ .varrow-line .vr-caret {
  transform: rotate(90deg);
}
.vr-value {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vr-from {
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
}
.vr-age {
  font-size: 11.5px;
}
/* Editing in the row it describes. The input takes whatever the fixed columns
   leave, and the controls around it size to their labels. */
.vr-edit {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
}
.vr-edit input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 8px;
  font-size: 12.5px;
}
.vr-edit .vr-newkey {
  flex: 0 1 220px;
}
.vr-edit button {
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.vr-edit .check label {
  font-size: 11.5px;
}
.vr-actions {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}
.vr-actions button,
.vr-actions .btn {
  padding: 2px 7px;
  font-size: 11.5px;
  white-space: nowrap;
}
/* An override is a link, not a write: it opens the form for a key this scope
   does not set yet, so it reads as quietly as the buttons beside it. */
.vr-actions .ghost-link {
  background: transparent;
  border-color: transparent;
  color: var(--text-faint);
}
.vr-actions .ghost-link:hover {
  color: var(--text);
  background: var(--surface-3);
}
/* The row that adds a key is not a variable, so it sits under the list rather
   than in it, but it is laid out the same way. */
.varlist-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
}
.varlist-foot .help {
  margin: 9px 0 0;
  font-size: 12px;
}
/* A foot that adds something other than a plain key says which, and the note
   under that heading belongs to it rather than to the foot as a whole. */
.varlist-foot h3 {
  margin: 0 0 4px;
  font-size: 13px;
}
.varlist-foot h3 + .help {
  margin: 0;
}
.stratum {
  display: grid;
  /* the note column is fixed so a longer label ("api/prod v5 · in effect")
     cannot squeeze the value column down to one character per line */
  grid-template-columns: 128px minmax(0, 1fr) 168px;
  gap: 12px;
  align-items: baseline;
  padding: 6px 12px;
  border-left: 3px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.stratum:last-child {
  border-bottom: 0;
}
.stratum.buried {
  color: var(--text-faint);
  background: transparent;
}
.stratum.buried .stratum-value {
  text-decoration: line-through;
  text-decoration-color: var(--text-faint);
  opacity: 0.75;
}
.stratum.winner {
  background: var(--surface-2);
  color: var(--text);
}
.stratum.winner.scope-environment {
  border-left-color: var(--scope-environment);
}
.stratum.winner.scope-service {
  border-left-color: var(--scope-service);
}
.stratum.winner.scope-global {
  border-left-color: var(--scope-global);
}
.stratum-value {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
}
.stratum-note {
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
  overflow-wrap: anywhere;
}
.stratum.winner .stratum-note {
  color: var(--scope-environment);
}

/* ---------- hosts ---------- */

/* The version a drifted host is expected to be on, under the one it reports. */
.drift-target {
  color: var(--warn);
}
/* Check-in state stacks: whether it matches, then whether it reported at all. */
.host-status div {
  margin-top: 4px;
}

/* ---------- import preview ---------- */

/* The "what happens" column: a sentence about the row, with any qualifications
   under it. Prose in a dense table steps down from the keys beside it. */
.import-note {
  font-size: 12px;
}
.import-note .dim {
  font-size: 11px;
}

/* ---------- diff ---------- */

/* The lines sit straight on the panel rather than in a .panel-body, because the
   colour down the left edge of each one has to run its full width. So the list
   pads itself, and the note under it pads itself to match the panel's text. */
.diff-list {
  padding: 10px 0;
}
.diff-list + .help {
  margin: 0;
  padding: 0 16px 14px;
}

.diff-line {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  padding: 3px 14px;
  border-left: 3px solid transparent;
}
.diff-add {
  border-left-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 7%, transparent);
}
.diff-del {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, transparent);
}
.diff-mod {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 7%, transparent);
}
.diff-mark {
  color: var(--text-faint);
  text-align: center;
}

/* ---------- token reveal ---------- */

.token-once {
  font-family: var(--mono);
  background: var(--bg);
  border: 1px dashed var(--accent-dim);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  word-break: break-all;
  margin: 10px 0;
  user-select: all;
}
/* What to do with the token, tucked under the token itself rather than floating
   a paragraph's gap away from it. */
.token-once + .help {
  margin-top: 0;
}

/* ---------- login ---------- */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.login-card h1 {
  margin: 0 0 3px;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.login-card .sub {
  margin: 0 0 20px;
  color: var(--text-faint);
  font-size: 12px;
}
/* The card holds one button and one decision. */
.login-card button {
  width: 100%;
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .stratum {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  /* Below this width the fixed columns cost more than the alignment buys: the
     value input would be narrower than the key beside it. Each row becomes a
     stack, in the order it is read. */
  .varlist-head {
    display: none;
  }
  .varrow-line,
  .varlist-plain .varrow-line {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: stretch;
  }
  .vr-actions {
    justify-content: flex-start;
  }
}

/* The reveal control is a form because revealing writes to the audit log, but it
   has to sit inline next to the masked value like the button it replaced. */
form.reveal {
  display: inline;
}

/* ---------- compare ---------- */

table.cmp { width: 100%; border-collapse: collapse; font-size: 13px; }
table.cmp th, table.cmp td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.cmp th { color: var(--text-dim); font-weight: 500; }
.cmp-key { font-weight: 600; white-space: nowrap; }
tr.cmp-missing { background: rgb(255 122 122 / 0.07); }
tr.cmp-differs { background: rgb(242 196 107 / 0.07); }
.cmp-eq { display: inline-block; min-width: 16px; text-align: center; font-size: 11px; border-radius: 3px; background: var(--surface-3); color: var(--text); }
.cmp-h { margin: 16px 12px 6px; font-size: 13px; color: var(--text-dim); }
.cmp-list { margin: 0 12px 8px; padding-left: 18px; font-size: 13px; line-height: 1.8; }
.cmp-group { margin-left: 12px; }

/* Commands meant to be pasted: kept verbatim, wrapped only when too wide. */
.steps pre {
  margin: 6px 0 14px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}