/* Integrationer & API:er — the operations console.
   Loaded render-blocking from index.html alongside the other V2 page sheets, so
   this surface can never paint unstyled (see CLAUDE.md, "never paint an
   unstyled surface"). Prefix: .in-

   Colour does semantic work or it is absent. Every state is double-coded with a
   mark (✓ ! ✕ ? –) so it survives greyscale and colour blindness. There are no
   status pills: a word does not become clearer by becoming a lozenge. The only
   badge on the page is the count on the Integrationer tab, which has to be
   findable from the other three. */

/* ── shell ─────────────────────────────────────────────────────────── */

.in-root { display: flex; flex-direction: column; gap: 26px; }

/* .set-page caps at 900px, which is right for a settings form and too narrow
   for a three-column operations table. */
.set-page.in-page { max-width: 100%; }
@media (min-width: 1400px) { .set-page.in-page { max-width: 1040px; } }
@media (min-width: 1900px) { .set-page.in-page { max-width: 1180px; } }

.in-mono { font-family: var(--font-mono); font-variant-ligatures: none; }

/* styles.css resets `input:focus { outline: 0 }` app-wide and only restores a
   ring for buttons, which leaves text fields with no visible focus at all.
   Restored here for this surface, using the same token the button rule uses. */
.in-input:focus-visible,
.in-search:focus-visible,
textarea.in-input:focus-visible {
  outline: 2px solid var(--text); outline-offset: 2px;
}

.in-row-hover { transition: background 110ms cubic-bezier(.2, 0, 0, 1); }
.in-row-hover:hover { background: var(--bg-sunken); }
.in-lift { transition: background 110ms cubic-bezier(.2, 0, 0, 1), border-color 110ms; }
.in-lift:hover { background: var(--bg-sunken); }
@media (prefers-reduced-motion: reduce) {
  .in-row-hover, .in-lift, .in-switch, .in-knob { transition: none; }
}

.in-scroll::-webkit-scrollbar { height: 11px; width: 11px; }
.in-scroll::-webkit-scrollbar-thumb {
  background: var(--hairline-strong); border-radius: 6px; border: 3px solid var(--bg-elevated);
}

/* ── sub-navigation ────────────────────────────────────────────────── */

.in-subnav {
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap; justify-content: space-between;
}
.in-segwrap {
  display: flex; gap: 3px; background: var(--bg-sunken);
  padding: 3px; border-radius: 10px; max-width: 100%; overflow-x: auto;
}
.in-seg {
  display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500;
  padding: 6px 13px; border-radius: 8px; cursor: pointer; border: 0;
  white-space: nowrap; background: transparent; color: var(--text-muted);
  font-family: inherit;
}
.in-seg.is-active {
  font-weight: 600; background: var(--bg-elevated); color: var(--text);
  box-shadow: var(--shadow-xs);
}
.in-seg-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; margin-left: 7px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700;
  background: var(--h-critical); color: var(--bg-elevated);
}
.in-route { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }

/* ── typography and buttons ────────────────────────────────────────── */

.in-h2 {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.in-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-bottom: 6px;
}
.in-section-aside { font-size: 11.5px; color: var(--text-faint); }

.in-btn {
  font-size: 12.5px; font-weight: 500; padding: 8px 15px; border-radius: 9px;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  background: var(--bg-elevated); color: var(--text); border: 1px solid var(--hairline);
}
.in-btn-solid {
  font-weight: 600; background: var(--text); color: var(--bg-elevated);
  border-color: var(--text);
}
.in-btn-quiet {
  font-weight: 500; padding: 8px 12px; border-radius: 8px;
  background: transparent; color: var(--text-muted); border-color: transparent;
}
.in-btn-danger {
  font-weight: 600; padding: 8px 14px;
  background: var(--h-critical); color: var(--bg-elevated); border-color: var(--h-critical);
}
.in-btn-danger-quiet { color: var(--h-critical); }
.in-btn-sm { font-size: 12px; padding: 6px 9px; }
.in-btn-copy { font-size: 12px; padding: 6px 12px; }
.in-btn:disabled { opacity: .5; cursor: not-allowed; }
.in-btn.is-busy { opacity: .6; cursor: progress; }
.in-btn.is-blocked { opacity: .4; cursor: not-allowed; }

.in-back {
  align-self: flex-start; font-size: 12.5px; font-weight: 500;
  color: var(--text-muted); background: transparent; border: 0;
  padding: 2px 0; cursor: pointer; font-family: inherit;
}

.in-chip {
  font-size: 11.5px; font-weight: 500; padding: 5px 10px; border-radius: 7px;
  cursor: pointer; white-space: nowrap; font-family: inherit;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-elevated); color: var(--text-quiet);
}
.in-chip.is-on {
  border-color: var(--text); background: var(--text); color: var(--bg-elevated);
}

.in-input {
  font-size: 13.5px; padding: 9px 12px; border: 1px solid var(--hairline-strong);
  border-radius: 9px; background: var(--bg-elevated); color: var(--text);
  width: 100%; box-sizing: border-box; font-family: inherit;
}
textarea.in-input { line-height: 1.7; resize: vertical; }
.in-input-mono { font-family: var(--font-mono); font-size: 12.5px; }
.in-search {
  font-size: 12.5px; padding: 7px 11px; border: 1px solid var(--hairline-strong);
  border-radius: 8px; background: var(--bg-elevated); color: var(--text);
  width: 186px; box-sizing: border-box; font-family: inherit;
}

/* ── health tally ──────────────────────────────────────────────────── */

.in-tally { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.in-tally-item {
  display: flex; flex-direction: column; align-items: flex-start;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  text-align: left; font-family: inherit;
}
.in-tally-n {
  font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -0.026em; line-height: 1; color: var(--text);
}
.in-tally-item.is-hot .in-tally-n { font-size: 30px; }
.in-tally-item.is-hot.has-any .in-tally-n,
.in-tally-item.is-hot.has-any .in-tally-label { color: var(--h-critical); }
.in-tally-label {
  font-size: 12.5px; color: var(--text-muted); white-space: nowrap;
  padding-top: 7px; display: block; text-align: left;
}
/* The first two partition the inventory; the last two cut across it. Four
   numbers in a row otherwise read as a whole that adds up, and these do not. */
.in-tally-div {
  align-self: stretch; display: flex; align-items: center; gap: 14px;
  color: var(--text-faint); font-size: 11.5px;
}
.in-tally-div::before {
  content: ""; width: 1px; align-self: stretch; background: var(--hairline);
}

/* ── attention layer ───────────────────────────────────────────────── */

.in-attn-list { display: flex; flex-direction: column; gap: 0; padding-top: 4px; }
.in-attn {
  display: flex; gap: 18px; align-items: stretch; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 16px 14px 16px 0;
  cursor: pointer; border-radius: 8px; font-family: inherit; color: var(--text);
}
.in-attn-rule { width: 2px; align-self: stretch; border-radius: 1px; flex: 0 0 auto; }
.in-attn-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; text-align: left; flex: 1; }
.in-attn-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.in-attn-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.006em; }
.in-attn-headline { font-size: 13px; font-weight: 600; }
.in-attn-text { font-size: 13px; line-height: 1.6; color: var(--text-quiet); max-width: 74ch; }
.in-attn-secret { font-size: 12px; color: var(--text-muted); letter-spacing: 0; }
.in-attn-impact { font-size: 12px; color: var(--text-faint); }
.in-attn-cta {
  font-size: 12.5px; font-weight: 500; color: var(--text-muted);
  white-space: nowrap; align-self: center;
}

/* ── inventory ─────────────────────────────────────────────────────── */

.in-group { padding-top: 22px; }
.in-group-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 2px; }
.in-group-title {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.in-group-rule { flex: 1; height: 1px; background: var(--hairline); }

.in-row {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) 168px;
  gap: 20px; align-items: center; width: 100%; text-align: left;
  padding: 15px 14px 15px 0; border: 0; border-top: 1px solid var(--hairline);
  background: transparent; cursor: pointer; font-family: inherit; color: var(--text);
}
.in-row.is-dim { opacity: .72; }
/* A row carries a coloured rule in the margin only when it asks for something. */
.in-row-rule {
  position: absolute; left: -14px; top: 12px; bottom: 12px;
  width: 2px; border-radius: 1px;
}
.in-row-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.in-row-title { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.in-row-name {
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.006em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.in-row.is-dim .in-row-name { color: var(--text-muted); }
.in-row-critical {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-muted); white-space: nowrap;
}
.in-row-purpose {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.in-row-state-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.in-row-state { font-size: 12.5px; font-weight: 600; }
.in-row-muted { font-weight: 500; color: var(--text-faint); }
/* The proof line. Last informational element allowed to disappear. */
.in-row-evidence {
  font-size: 12.5px; color: var(--text-faint); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.in-row-impact {
  font-size: 12.5px; color: var(--text-faint); text-align: right; white-space: nowrap;
}
.in-foot {
  margin: 26px 0 0; font-size: 12px; line-height: 1.65;
  color: var(--text-faint); max-width: 78ch;
}
.in-empty-search { padding: 44px 0; border-top: 1px solid var(--hairline); }
.in-empty-search-t { font-size: 14.5px; color: var(--text-quiet); }

/* ── notices, errors, skeletons ────────────────────────────────────── */

.in-notice {
  border-left: 2px solid var(--h-low); padding: 2px 0 2px 18px; max-width: 66ch;
}
.in-notice-t { font-size: 15.5px; font-weight: 600; letter-spacing: -0.006em; }
.in-notice-p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--text-quiet); }
.in-notice-lg .in-notice-t { font-size: 16px; }

.in-skel-tiles { display: flex; gap: 34px; }
.in-skel-tile { display: flex; flex-direction: column; gap: 8px; }
.in-skel-a { width: 34px; height: 26px; border-radius: 5px; background: var(--hairline); }
.in-skel-b { width: 78px; height: 11px; border-radius: 3px; background: var(--bg-sunken); }
.in-skel-row {
  display: grid; grid-template-columns: 1fr 240px 150px; gap: 20px;
  align-items: center; padding: 15px 0; border-top: 1px solid var(--hairline);
}
.in-skel-l { height: 13px; border-radius: 3px; background: var(--hairline); }
.in-skel-m { height: 11px; border-radius: 3px; background: var(--bg-sunken); }
.in-skel-r { height: 11px; border-radius: 3px; background: var(--bg-sunken); justify-self: end; width: 70%; }

/* ── detail ────────────────────────────────────────────────────────── */

.in-detail { display: flex; flex-direction: column; gap: 30px; }
.in-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.in-title {
  margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 32px;
  font-weight: 400; letter-spacing: -0.016em; line-height: 1.1;
}
.in-detail-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.in-detail-state { font-size: 13px; font-weight: 600; }
.in-detail-purpose {
  margin: 8px 0 0; font-size: 14px; line-height: 1.65;
  color: var(--text-quiet); max-width: 62ch;
}
.in-detail-acts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.in-verify-result { margin-top: 14px; font-size: 12.5px; font-weight: 600; }

.in-action { border-left: 2px solid var(--text-faint); padding: 2px 0 2px 18px; }
.in-action-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.in-action-title {
  font-size: 16.5px; font-weight: 600; letter-spacing: -0.008em; padding-top: 7px;
}
.in-action-body {
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.7;
  color: var(--text-quiet); max-width: 72ch;
}
.in-action-who {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.65;
  color: var(--text-faint); max-width: 72ch;
}
.in-envchips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.in-envchip {
  font-size: 12px; color: var(--text-quiet); background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--hairline); border-radius: 6px; padding: 4px 9px;
}

.in-rows { padding-top: 6px; }
.in-signal {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px; align-items: baseline; padding: 13px 0;
  border-top: 1px solid var(--hairline);
}
.in-signal-k { font-size: 13px; color: var(--text-muted); }
.in-signal-v-wrap { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.in-signal-v { font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.in-signal-v.is-loud { font-weight: 600; }
.in-signal-note { font-size: 12.5px; color: var(--text-faint); line-height: 1.55; }

.in-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px; font-size: 10px;
  font-weight: 700; flex: 0 0 auto;
}

.in-affects-body {
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.7;
  color: var(--text-quiet); max-width: 72ch;
}
.in-affect-list { display: flex; flex-wrap: wrap; gap: 7px 9px; padding-top: 14px; }
.in-affect {
  font-size: 12.5px; color: var(--text-quiet); background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--hairline); border-radius: 7px; padding: 5px 10px;
}
.in-depends {
  margin: 16px 0 0; font-size: 12.5px; line-height: 1.65;
  color: var(--text-faint); max-width: 72ch;
}

.in-tl {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 18px; align-items: baseline; padding: 11px 0;
  border-top: 1px solid var(--hairline);
}
.in-tl-when { font-size: 12.5px; color: var(--text-muted); }
.in-tl-job { font-size: 13.5px; }
.in-tl-result { font-size: 13px; color: var(--text-quiet); font-variant-numeric: tabular-nums; }
.in-small-foot {
  margin: 14px 0 0; font-size: 12px; color: var(--text-faint);
  line-height: 1.6; max-width: 72ch;
}

.in-queue { display: flex; gap: 44px; flex-wrap: wrap; padding-top: 16px; }
.in-queue-cell { display: flex; flex-direction: column; gap: 5px; }
.in-queue-v {
  font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -0.022em; line-height: 1;
}
.in-queue-k { font-size: 12.5px; color: var(--text-quiet); }

.in-account {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px;
  gap: 20px; align-items: center; padding: 15px 0;
  border-top: 1px solid var(--hairline);
}
.in-account-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.in-account-name { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.in-account-handles { font-size: 12.5px; color: var(--text-muted); }
.in-account-state { font-size: 13px; font-weight: 600; }
.in-account-ids { font-size: 11.5px; color: var(--text-faint); }
.in-account-scopes { font-size: 12.5px; color: var(--text-faint); text-align: right; }

.in-tech {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px;
  align-items: baseline; padding: 12px 0; border-top: 1px solid var(--hairline);
}
.in-tech-k { font-size: 13px; color: var(--text-muted); }
.in-tech-v { font-size: 13.5px; line-height: 1.55; word-break: break-word; color: var(--text-quiet); }
.in-tech-v.in-mono { font-size: 12.5px; }

.in-note-wrap { padding-top: 12px; max-width: 66ch; }
.in-note {
  font-size: 13.5px; line-height: 1.7; padding: 9px 11px; margin-left: -11px;
  border-radius: 8px; cursor: text; color: var(--text-quiet);
  background: transparent; border: 0; width: calc(100% + 22px);
  text-align: left; font-family: inherit; display: block;
}
.in-note.is-blank { color: var(--text-faint); font-style: italic; }

.in-monitor { display: flex; align-items: flex-start; gap: 16px; padding-top: 14px; max-width: 72ch; }
.in-switch {
  flex: 0 0 auto; width: 38px; height: 22px; border-radius: 11px; border: 0;
  cursor: pointer; padding: 2px; display: flex; transition: background 110ms;
  justify-content: flex-end; background: var(--text);
}
.in-switch[aria-checked="false"] { justify-content: flex-start; background: var(--hairline-strong); }
.in-knob {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-elevated); box-shadow: 0 1px 2px rgba(28, 24, 18, .2);
}
.in-monitor-label { font-size: 13.5px; font-weight: 500; }
.in-monitor-hint { margin: 5px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--text-faint); }
.in-manual { display: flex; align-items: center; gap: 14px; padding-top: 14px; flex-wrap: wrap; }
.in-manual-why { font-size: 12.5px; color: var(--text-faint); max-width: 56ch; line-height: 1.6; }

/* ── one-time secret reveal ────────────────────────────────────────── */

/* Calm, not alarming: an irreversible security moment, not an error. */
.in-reveal {
  border: 1px solid var(--hairline-strong); border-radius: var(--r-lg);
  background: var(--bg-elevated); padding: 26px 28px; max-width: 62ch;
  box-shadow: var(--shadow-sm);
}
.in-reveal-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.in-reveal-h {
  margin: 10px 0 0; font-family: "Newsreader", Georgia, serif; font-size: 23px;
  font-weight: 400; letter-spacing: -0.011em;
}
.in-reveal-p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--text-quiet); }
.in-reveal-box {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  padding: 14px 16px; background: var(--bg-sunken); border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.in-reveal-secret { font-size: 13px; flex: 1; word-break: break-all; line-height: 1.5; }
.in-reveal-done { padding-top: 20px; }

/* ── forms, keys, webhooks ─────────────────────────────────────────── */

.in-form {
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--surface); padding: 24px 26px; max-width: 70ch;
}
.in-form-h { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.006em; }
.in-form-body { display: flex; flex-direction: column; gap: 20px; padding-top: 20px; }
.in-field { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--text-muted); }
.in-field-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.in-form-acts { display: flex; align-items: center; gap: 12px; padding-top: 24px; flex-wrap: wrap; }
.in-form-why { font-size: 12.5px; color: var(--text-faint); }
.in-envseg {
  display: flex; gap: 3px; background: var(--bg-sunken); padding: 3px;
  border-radius: 9px; align-self: flex-start;
}
.in-envseg-btn {
  font-size: 12.5px; font-weight: 500; padding: 6px 14px; border-radius: 7px;
  cursor: pointer; border: 0; background: transparent; color: var(--text-muted);
  font-family: inherit;
}
.in-envseg-btn.is-on {
  font-weight: 600; background: var(--bg-elevated); color: var(--text);
  box-shadow: var(--shadow-xs);
}

.in-krow {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 108px 204px;
  gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--hairline);
}
.in-krow-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.in-krow-title { display: flex; align-items: baseline; gap: 9px; }
.in-krow-name { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.in-krow-name.is-revoked { color: var(--text-muted); text-decoration: line-through; }
.in-krow-env { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); }
.in-krow-env.is-test { color: var(--text-faint); }
.in-krow-masked { font-size: 12px; color: var(--text-muted); }
.in-krow-scopes { display: flex; flex-wrap: wrap; gap: 5px; }
.in-tag {
  font-size: 11px; color: var(--text-quiet); background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--hairline); border-radius: 5px; padding: 3px 7px;
}
.in-krow-used { font-size: 12.5px; color: var(--text-faint); }
.in-krow-used.is-revoked { color: var(--h-critical); }
.in-krow-acts { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }

.in-confirm {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--bg-sunken); border-radius: 10px; flex-wrap: wrap;
}
.in-confirm-t { font-size: 13px; color: var(--text-quiet); flex: 1; min-width: 240px; line-height: 1.6; }

.in-hrow {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 210px) 300px;
  gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--hairline);
}
.in-hrow-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.in-hrow-url { font-size: 12.5px; word-break: break-all; line-height: 1.5; }
.in-hrow-url.is-paused { color: var(--text-muted); }
.in-hrow-events { display: flex; flex-wrap: wrap; gap: 5px; }
.in-hrow-state-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.in-hrow-state { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.in-hrow-state.is-paused { color: var(--text-faint); }
.in-hrow-delivery { font-size: 12.5px; color: var(--text-faint); }
.in-hrow-delivery.is-bad { color: var(--h-critical); }
.in-hrow-acts { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }

.in-empty { padding: 40px 0; border-top: 1px solid var(--hairline); max-width: 60ch; }
.in-empty-h {
  font-family: "Newsreader", Georgia, serif; font-size: 21px;
  font-weight: 400; letter-spacing: -0.009em;
}
.in-empty-p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--text-quiet); }

/* ── database explorer ─────────────────────────────────────────────── */

.in-db-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  justify-content: space-between;
}
.in-db-head-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.in-db-ro {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--hairline-strong); border-radius: 6px; padding: 5px 10px;
}
.in-db-summary { font-size: 13px; color: var(--text-quiet); }
.in-db-ping { font-size: 12.5px; font-weight: 600; color: var(--h-strong); }
.in-db-ping.is-bad { color: var(--h-critical); }
.in-db-head-r { display: flex; align-items: center; gap: 10px; }

.in-db-layout {
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  gap: 30px; align-items: start; min-height: 0;
}
.in-db-nav { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; }
.in-db-list {
  display: flex; flex-direction: column; overflow: auto;
  max-height: min(560px, 60vh); border: 1px solid var(--hairline);
  border-radius: 10px; background: var(--bg-elevated);
}
.in-db-tbtn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 8px 11px; border: 0; cursor: pointer;
  background: transparent; font-family: inherit; color: var(--text);
}
.in-db-tbtn.is-on { background: var(--bg-sunken); }
.in-db-tname {
  font-size: 12.5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--text-quiet);
}
.in-db-tbtn.is-on .in-db-tname { font-weight: 600; color: var(--text); }
.in-db-trows { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.in-db-none { padding: 20px 12px; font-size: 12.5px; color: var(--text-faint); }

.in-db-detail-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding-bottom: 14px;
}
.in-db-tabname { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.004em; }
.in-db-tabmeta { font-size: 12.5px; color: var(--text-muted); padding-top: 5px; }
.in-db-sensitive { font-size: 12px; color: var(--h-low); font-weight: 600; }
.in-db-grid {
  overflow: auto; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--bg-elevated); max-height: min(520px, 56vh);
}
.in-db-grid table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.in-db-grid th {
  text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--hairline);
  background: var(--bg-sunken); position: sticky; top: 0; white-space: nowrap;
}
.in-db-th-n { font-size: 11.5px; font-weight: 600; color: var(--text-quiet); display: block; }
.in-db-th-t { font-size: 10.5px; font-weight: 400; color: var(--text-faint); display: block; padding-top: 2px; }
.in-db-grid td {
  padding: 8px 13px; border-bottom: 1px solid var(--hairline);
  white-space: nowrap; color: var(--text-quiet);
}
.in-db-grid td.is-null { color: var(--text-faint); }
.in-db-grid td.is-num {
  font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 12px;
}
.in-db-empty { padding: 40px 0; border-top: 1px solid var(--hairline); font-size: 13.5px; color: var(--text-quiet); }

/* ── responsive ────────────────────────────────────────────────────────
   The shell keeps its own breakpoints (sidebar drawer at 860). These are for
   the content: at ~1100 the viewport minus a 258px rail leaves too little for
   three columns, so impact goes. Evidence never goes. */

@media (max-width: 1100px) {
  /* Impact goes first. The remaining width favours the evidence column over
     identity, because a truncated proof is worth less than a truncated name. */
  .in-row { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); }
  .in-row-impact { display: none; }
  .in-signal { grid-template-columns: 130px minmax(0, 1fr); }
  .in-signal-note { grid-column: 2 / -1; padding-top: 2px; }
  .in-account { grid-template-columns: minmax(0, 1fr) 200px; }
  .in-account-scopes { display: none; }
  .in-krow { grid-template-columns: minmax(0, 1fr) 150px; }
  .in-krow-scopes, .in-krow-used { display: none; }
  .in-hrow { grid-template-columns: minmax(0, 1fr) 170px; }
  .in-hrow-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .in-db-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
  .in-tl { grid-template-columns: 102px minmax(0, 1fr) 22px; }
  .in-tl-result { grid-column: 2 / -1; }
}

@media (max-width: 620px) {
  .in-root { gap: 22px; }
  .in-tally { gap: 26px; }
  .in-row {
    grid-template-columns: 1fr; gap: 8px;
    padding: 14px 0 14px 0;
  }
  .in-row-rule { left: -10px; }
  .in-row-name { white-space: normal; }
  .in-row-purpose { white-space: normal; }
  /* The evidence line is the last thing to go — so it wraps instead. */
  .in-row-evidence { white-space: normal; }
  .in-search { width: 100%; }
  .in-signal, .in-account, .in-krow, .in-hrow, .in-tech, .in-tl {
    grid-template-columns: 1fr; gap: 8px;
  }
  .in-signal-note, .in-tl-result { grid-column: auto; }
  .in-krow-scopes, .in-krow-used, .in-account-scopes { display: flex; }
  .in-krow-used { display: block; }
  .in-krow-acts, .in-hrow-acts { justify-content: flex-start; }
  .in-title { font-size: 27px; }
  .in-attn { gap: 14px; padding: 14px 0; }
  .in-attn-cta { display: none; }
  .in-db-layout { grid-template-columns: 1fr; gap: 20px; }
  .in-db-nav { position: static; }
  .in-db-list { max-height: 220px; }
  .in-db-grid { max-height: 360px; }
  .in-queue { gap: 28px; }
  .in-reveal, .in-form { padding: 20px 18px; }
}