/* Status page only. Shared components live in site.css; every colour is a --ep-* token. */

/* ---------- head: the page, then node A's card, then a band of the tile ---------- */
.sp-head { padding-top: clamp(24px, 3vw, 44px); }
.sp-head-top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ep-space-2) var(--ep-space-5);
  padding-bottom: var(--ep-space-4); border-bottom: 1px solid var(--ep-rule-strong);
}
.sp-head-top .lbl { color: var(--ep-text); }
.sp-head-body {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ep-col-gap); row-gap: var(--ep-space-7);
  padding-top: clamp(24px, 2.8vw, 40px); align-items: end;
}
.sp-head-text { grid-column: 1 / span 7; display: grid; gap: var(--ep-space-5); min-width: 0; }
.sp-head-text .statement-page { max-width: 17ch; padding-top: 0; }
.sp-head-text .lead { color: var(--ep-text-2); max-width: 56ch; }

.sp-node { grid-column: 9 / -1; display: grid; gap: var(--ep-space-4); min-width: 0; border-top: 2px solid var(--ep-text); padding-top: var(--ep-space-4); }
.sp-node-id { display: flex; align-items: center; gap: var(--ep-space-4); }
.sp-node-mark { width: 44px; height: 44px; flex: none; fill: currentColor; color: var(--ep-mark); }
.sp-node-name { font-stretch: var(--ep-width-display); font-weight: 560; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.05; letter-spacing: -.01em; }
.sp-node-kv { border-bottom: 1px solid var(--ep-rule); }
.sp-node-kv dd { font-size: 14.5px; color: var(--ep-text-2); }
.sp-node-kv dd .mono, .sp-node-kv dd a { color: var(--ep-text); }


@media (max-width: 1100px) {
  .sp-head-text { grid-column: 1 / span 7; }
  .sp-node { grid-column: 8 / -1; }
}
@media (max-width: 900px) {
  .sp-head-body { grid-template-columns: minmax(0, 1fr); row-gap: var(--ep-space-6); }
  .sp-head-text, .sp-node { grid-column: 1 / -1; }
  .sp-node { max-width: 560px; }
}

/* ---------- the console: one reading, from the visitor's browser ---------- */
.sp-live { padding-top: clamp(32px, 3.4vw, 48px); }
.console { border: 1px solid var(--ep-rule-strong); background: var(--ep-panel); min-width: 0; }
.con-pad { padding-inline: clamp(16px, 2.2vw, 32px); }
.con-top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--ep-space-5);
  padding: 12px clamp(16px, 2.2vw, 32px); border-bottom: 1px solid var(--ep-rule);
}
.con-top .lbl { color: var(--ep-text); }
.con-top .data { overflow-wrap: anywhere; min-width: 0; }
.con-band { display: grid; border-bottom: 1px solid var(--ep-rule); }
/* until our guardian has answered (loading, or not reachable) the band's pearl takes --ep-tile-pearl-idle:
   on Fathom the pearl is Glint, which says live beside the live dot, so it is Foil until a reading lands.
   The same colour elsewhere; status.js redraws the band when the state changes. */
.console:not([data-state="live"]):not([data-state="paused"]) .con-band canvas { --ep-tile-pearl: var(--ep-tile-pearl-idle); }

.con-head {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; align-items: end;
  gap: var(--ep-space-5) clamp(24px, 3vw, 48px);
  padding: clamp(24px, 3vw, 44px) clamp(16px, 2.2vw, 32px) clamp(20px, 2.4vw, 32px);
}
.con-state { display: grid; gap: var(--ep-space-3); min-width: 0; }
.con-word {
  display: flex; align-items: center; gap: .32em; max-width: none;
  font-stretch: var(--ep-width-display); font-weight: 420; font-size: clamp(36px, 4vw, 58px); line-height: 1; letter-spacing: -.014em; white-space: nowrap;
}
.con-glyph { width: .4em; height: .4em; flex: none; border: 3px solid var(--ep-text-3); }
.con-glyph.is-ok { background: var(--ep-synced); border-color: var(--ep-synced); }
.con-glyph.is-bad { border-color: var(--ep-refused); background: linear-gradient(135deg, transparent 42%, var(--ep-refused) 42% 58%, transparent 58%); }
.con-glyph.is-off { border-color: var(--ep-offline); background: transparent; }
.con-glyph.is-wait { border-style: dotted; background: transparent; }
.con-sub { font-size: 15.5px; color: var(--ep-text-2); }

.con-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; min-width: 0; }
.con-meta-item { display: grid; grid-template-rows: auto auto; gap: var(--ep-space-2); align-content: start; min-width: 0; padding: 0 var(--ep-space-3) 0 var(--ep-space-4); border-left: 1px solid var(--ep-rule); }
.con-meta dd { margin: 0; display: grid; gap: 4px; align-content: start; min-width: 0; }
/* one line box for every value, so a smaller countdown still sits on the same baseline */
.con-meta .bigfig, .con-clock {
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-weight: 300; font-variant-numeric: tabular-nums;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 30px; letter-spacing: -.01em; white-space: nowrap;
}
.con-meta .con-next { font-size: 20px; color: var(--ep-text-2); }
.con-meta .bigfig small { font-size: .56em; }
.con-meta-sub { font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11.5px; line-height: 1.45; color: var(--ep-text-3); }
.con-refresh { min-height: 40px; padding: 0 14px; font-size: 14.5px; align-self: end; white-space: nowrap; }
.con-refresh .ic { width: 18px; height: 18px; }
.con-refresh[aria-disabled="true"] { cursor: progress; color: var(--ep-text-2); border-color: var(--ep-rule-strong); }
.con-refresh[aria-disabled="true"]:hover { background: transparent; }
.con-word:focus { outline: none; }
/* the halo fills the whole gap inside the outline (Glint wash on Bond; transparent elsewhere) */
.con-word:focus-visible { outline: 2px solid var(--ep-focus); outline-offset: 6px; box-shadow: 0 0 0 6px var(--ep-focus-halo); }

/* while a reading is in flight the glyph breathes; still under reduced motion (site.css) */
.console.is-busy .con-glyph { animation: sp-breathe 1.2s ease-in-out infinite; }
@keyframes sp-breathe { 50% { opacity: .35; } }

/* the four vitals */
.con-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ep-rule); }
.con-cell { display: grid; gap: 10px; align-content: start; min-width: 0; padding: var(--ep-space-4) clamp(16px, 2.2vw, 32px) var(--ep-space-5); }
.con-cell + .con-cell { border-left: 1px solid var(--ep-rule); }
.con-value {
  min-height: 34px; display: flex; align-items: center; min-width: 0; overflow-wrap: anywhere;
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-weight: 300; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.02em;
}
.con-value.is-bad { color: var(--ep-refused); font-weight: 400; }
.con-cell[aria-busy="true"] .con-value, .console[data-state="unreachable"] .con-value { color: var(--ep-text-3); }
.con-cell-sub { font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11.5px; line-height: 1.5; color: var(--ep-text-2); overflow-wrap: anywhere; }
.con-cell-sub .st { font-size: 12.5px; }

/* configuration: published against live, eight groups of eight */
.con-config { display: grid; gap: var(--ep-space-4); border-top: 1px solid var(--ep-rule); padding: var(--ep-space-5) clamp(16px, 2.2vw, 32px) clamp(24px, 2.6vw, 36px); min-width: 0; }
.cc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ep-space-2) var(--ep-space-5); }
.cc-head .lbl { color: var(--ep-text); }
.cc-verdict { max-width: none; }
.cc-verdict .st { font-size: 13.5px; }
.cc-rows {
  display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) auto; align-items: center;
  grid-template-areas: "lp hp cp" "ll hl .";
  column-gap: var(--ep-space-5); row-gap: 0;
  border-top: 1px solid var(--ep-rule); border-bottom: 1px solid var(--ep-rule);
}
.cc-rows > * { padding-block: var(--ep-space-3); }
.cc-label-pub { grid-area: lp; } .cc-hex-pub { grid-area: hp; } .cc-copy { grid-area: cp; }
.cc-label-live { grid-area: ll; } .cc-live { grid-area: hl; }
.cc-rows > .cc-label-pub, .cc-rows > .cc-hex-pub, .cc-rows > .cc-copy { padding-bottom: var(--ep-space-2); }
.cc-rows > .cc-label-live, .cc-rows > .cc-live { padding-top: var(--ep-space-2); }
.cc-label { display: grid; gap: 2px; max-width: none; }
.cc-label .lbl { color: var(--ep-text-2); }
.cc-hex {
  display: flex; flex-wrap: wrap; column-gap: .85em; row-gap: 2px; min-width: 0; max-width: none;
  font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: clamp(13px, 1.2vw, 16.5px); line-height: 1.5; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--ep-text-2);
}
.cc-hex.cc-live { color: var(--ep-text); }
.cc-half { display: inline-flex; column-gap: .85em; white-space: nowrap; }
.cc-g { white-space: nowrap; }
.cc-g.is-diff { color: var(--ep-refused); box-shadow: inset 0 -2px 0 var(--ep-refused); }
.con-config[data-match="true"] .cc-live .cc-g { box-shadow: inset 0 -1px 0 var(--ep-synced); }
.con-config[aria-busy="true"] .cc-live, .console[data-state="unreachable"] .cc-live { color: var(--ep-text-3); }
.cc-note, .cc-mismatch { max-width: 78ch; }
.cc-mismatch { border-left: 2px solid var(--ep-refused); padding-left: 12px; font-size: 14.5px; color: var(--ep-text); }

/* the message between head and vitals: unreachable, or paused */
.con-msg { border-top: 1px solid var(--ep-rule); background: var(--ep-ground); padding: clamp(24px, 3vw, 44px) clamp(16px, 2.2vw, 32px); }
.cu-lead { display: grid; gap: var(--ep-space-2); margin-bottom: clamp(24px, 3vw, 40px); }
.cu-title { font-stretch: var(--ep-width-display); font-weight: 520; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.1; letter-spacing: -.01em; max-width: 30ch; }
.cu-detail { font-size: 15.5px; color: var(--ep-text-2); max-width: 70ch; }
.cu-lead .cu-title + .cu-detail { color: var(--ep-text); }
.cu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ep-space-6) clamp(32px, 4vw, 64px); align-items: start; }
.cu-why, .cu-check { display: grid; gap: var(--ep-space-4); min-width: 0; align-content: start; }
.why { display: grid; border-top: 1px solid var(--ep-rule-strong); }
.why-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--ep-space-4); padding: var(--ep-space-4) 0; border-bottom: 1px solid var(--ep-rule); }
.why-no { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--ep-rule-strong); color: var(--ep-text-2); font-size: 11.5px; line-height: 1; margin-top: 1px; }
.why-body { display: grid; gap: 4px; min-width: 0; }
.why-body h4 { font-stretch: var(--ep-width-heading); font-weight: 600; font-size: 16.5px; line-height: 1.3; }
.why-body p { font-size: 14.5px; line-height: 1.55; color: var(--ep-text-2); }
.cu-why .note-line { max-width: 64ch; }
.cu-check .cmd { background: var(--ep-panel); }
.cu-look-lbl { margin-top: var(--ep-space-3); }
.cu-look { grid-template-columns: max-content minmax(0, 1fr); }
.cu-look dt { font-size: 12.5px; color: var(--ep-text-2); padding-top: 12px; }
.cu-look dd { font-size: 14px; color: var(--ep-text-2); }
.cu-look dd .mono { color: var(--ep-text); }
.cu-check .actions { margin-top: var(--ep-space-2); }
.con-paused { display: grid; gap: var(--ep-space-3); max-width: 78ch; }
.con-paused p { color: var(--ep-text-2); }
.con-paused p.con-reason { color: var(--ep-text); font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 15px; line-height: 1.5; border-left: 2px solid var(--ep-refused); padding: 4px 0 4px 14px; overflow-wrap: anywhere; }
.sp-noscript { margin-bottom: var(--ep-space-4); }

@media (max-width: 1100px) {
  .con-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "state btn" "meta meta"; align-items: end; }
  .con-state { grid-area: state; } .con-meta { grid-area: meta; } .con-refresh { grid-area: btn; }
  .con-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ep-rule); padding-top: var(--ep-space-4); }
  .con-meta-item:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .cu-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .kv.cu-look dd { border-top: 1px solid var(--ep-rule); padding-top: 10px; }
  .cc-rows .cc-label { grid-auto-flow: row; gap: 2px; }
  .cc-label .data { white-space: nowrap; }
}
@media (max-width: 900px) {
  .con-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .con-cell:nth-child(3) { border-left: 0; }
  .con-cell:nth-child(n+3) { border-top: 1px solid var(--ep-rule); }
}
@media (max-width: 760px) {
  .cc-rows { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lp cp" "hp hp" "ll ll" "hl hl"; }
  .cc-rows > * { padding-block: var(--ep-space-2); }
  .cc-hex-pub { padding-top: 0; }
  .cc-rows > .cc-live { padding-top: 0; padding-bottom: var(--ep-space-3); }
  .cc-rows > .cc-label-live { padding-top: var(--ep-space-3); }
  .cc-label { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: var(--ep-space-3); }
}
@media (max-width: 620px) {
  /* Round trip | Read at, then Next read | Read now: the button takes the meta list's empty cell */
  .con-head { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; column-gap: 0; }
  .con-state { grid-area: auto; grid-column: 1 / -1; grid-row: 1; }
  .con-meta { grid-area: auto; grid-column: 1 / -1; grid-row: 2; }
  .con-refresh { grid-area: auto; grid-column: 2; grid-row: 2; align-self: end; justify-self: start; margin-left: calc(var(--ep-space-3) + 1px); }
  .con-meta-item { padding-left: var(--ep-space-3); }
  .con-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--ep-space-4); }
  .con-meta-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .con-meta .bigfig, .con-clock { font-size: 20px; }
  .con-meta-sub { font-size: 11px; }
  .con-value { font-size: 20px; }
  .con-cell { padding-inline: 16px; }
}
@media (max-width: 359px) {
  .con-head { grid-template-columns: minmax(0, 1fr); }
  .con-refresh { grid-column: 1; grid-row: 3; margin-left: 0; }
  .con-cells { grid-template-columns: minmax(0, 1fr); }
  .con-cell + .con-cell { border-left: 0; border-top: 1px solid var(--ep-rule); }
  .con-meta { grid-template-columns: minmax(0, 1fr); gap: var(--ep-space-3); }
  .con-meta-item { border-left: 0; padding-left: 0; }
}

/* ---------- amounts: right-aligned, lined up on the decimal point ---------- */
.amt { display: inline-flex; justify-content: flex-end; white-space: nowrap; font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-variant-numeric: tabular-nums; }
.amt-f { display: inline-block; text-align: left; }
.amt.is-zero, td.is-zero, .amt.is-unpaid { color: var(--ep-text-3); }
.amt-note { display: block; margin-top: 3px; font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--ep-text-3); white-space: normal; }

/* ---------- what it agreed to sign ---------- */
.sp-signed { align-items: start; row-gap: var(--ep-space-7); }
.sp-kinds caption { padding-bottom: var(--ep-space-4); }
.sp-kinds thead th { vertical-align: bottom; white-space: normal; }
.sp-kinds thead th.num { padding-left: var(--ep-space-4); white-space: nowrap; }
.th-unit { display: block; }
.sp-kinds th[scope="row"] { padding-right: var(--ep-space-5); }
.sp-kind { display: block; font-stretch: var(--ep-width-heading); font-weight: 600; font-size: 15.5px; line-height: 1.3; white-space: nowrap; }
.sp-kind-key { display: block; font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11.5px; font-weight: 400; color: var(--ep-text-3); }
.sp-kinds td.sp-col-what { font-size: 14px; line-height: 1.5; color: var(--ep-text-2); min-width: 16ch; }
.sp-kinds td.num { font-size: 15px; white-space: nowrap; padding-left: var(--ep-space-4); }
.sp-kinds td.num:last-child, .sp-kinds th.num:last-child { padding-right: 0; }
.sp-kinds tfoot th, .sp-kinds tfoot td { border-top: 1px solid var(--ep-rule-strong); padding-top: 14px; }
.sp-kinds tfoot .sp-kind { font-weight: 650; }
.sp-kinds tfoot td.num { color: var(--ep-text); font-weight: 500; }
.sp-signed-table[aria-busy="true"] td.num, [data-gstate="unreachable"] .sp-kinds td.num { color: var(--ep-text-3); }
.sp-aside { display: grid; gap: var(--ep-space-6); align-content: start; border-top: 1px solid var(--ep-rule-strong); padding-top: var(--ep-space-4); }
.sp-fees dt { padding-top: 11px; }
.sp-fees dd { font-size: 14.5px; }
@media (max-width: 620px) {
  .kv.sp-fees { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); column-gap: var(--ep-space-4); }
  .kv.sp-fees dd { border-top: 1px solid var(--ep-rule); padding-top: 10px; }
}

@media (max-width: 760px) {
  .sp-kinds, .sp-kinds tbody, .sp-kinds tfoot { display: block; }
  .sp-kinds caption { display: block; }
  .sp-kinds thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sp-kinds tr { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.15fr) minmax(0, 1.15fr); gap: var(--ep-space-2) var(--ep-space-3); padding: var(--ep-space-4) 0; border-top: 1px solid var(--ep-rule); }
  .sp-kinds tfoot tr { border-top: 1px solid var(--ep-rule-strong); }
  .sp-kinds th, .sp-kinds td, .sp-kinds tfoot th, .sp-kinds tfoot td { display: block; border: 0; padding: 0; text-align: left; }
  .sp-kinds th[scope="row"] { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--ep-space-3); padding: 0; }
  .sp-kinds td.sp-col-what { grid-column: 1 / -1; min-width: 0; }
  .sp-kinds tfoot td.sp-col-what { display: none; }
  .table.sp-kinds td.num { padding: 0; text-align: left; }
  .sp-kinds td.num::before { content: attr(data-label); display: flex; align-items: flex-end; min-height: 2.7em; line-height: 1.35; white-space: normal; margin-bottom: 2px; font-family: var(--ep-font-sans); font-stretch: var(--ep-width-label); font-weight: 650; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ep-text-3); }
  .sp-kinds .amt { justify-content: flex-start; }
  .sp-kinds .amt-f { min-width: 0 !important; }
}

/* ---------- the reserve and fees ---------- */
.figs { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); border-top: 2px solid var(--ep-text); border-bottom: 1px solid var(--ep-rule); }
.fig { display: grid; grid-template-rows: auto 1fr auto; gap: var(--ep-space-4); min-width: 0; padding: var(--ep-space-4) var(--ep-space-5) var(--ep-space-6) 0; }
.fig + .fig { border-left: 1px solid var(--ep-rule); padding-left: var(--ep-space-5); }
.fig-value { display: flex; flex-wrap: wrap; align-items: baseline; font-size: clamp(30px, 3vw, 42px); max-width: none; overflow-wrap: anywhere; min-width: 0; }
.fig-main .fig-value { font-size: clamp(44px, 6vw, 88px); letter-spacing: -.035em; line-height: .95; }
.fig-value .fig-frac { color: var(--ep-text-2); }
.fig-value small { font-size: max(12px, .3em); letter-spacing: 0; }
.fig[aria-busy="true"] .fig-value, [data-gstate="unreachable"] .fig-value { color: var(--ep-text-3); }
.fig-sub { font-size: 14.5px; line-height: 1.5; color: var(--ep-text-2); max-width: 40ch; }
.sp-sweep { margin-top: var(--ep-space-6); max-width: 78ch; }
@media (max-width: 900px) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig-main { grid-column: 1 / -1; border-bottom: 1px solid var(--ep-rule); }
  .fig-main + .fig { border-left: 0; padding-left: 0; }
}
@media (max-width: 620px) {
  .figs { grid-template-columns: minmax(0, 1fr); }
  .fig + .fig { border-left: 0; padding-left: 0; border-top: 1px solid var(--ep-rule); }
  .fig-main { border-bottom: 0; }
  .fig { padding-right: 0; padding-bottom: var(--ep-space-5); }
}

/* ---------- what it led: six states, glyph first ---------- */
.led { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--ep-rule); border: 1px solid var(--ep-rule); margin-bottom: clamp(40px, 5vw, 64px); }
.led-cell { display: grid; grid-template-rows: auto auto 1fr; gap: var(--ep-space-3); min-width: 0; background: var(--ep-panel); padding: var(--ep-space-4) clamp(14px, 1.4vw, 20px) var(--ep-space-5); }
.led-cell .st { font-size: 12px; }
.st.settled { --st: var(--ep-text-2); --st-ink: var(--ep-text-2); }
.led-cell.is-zero .st, .led[aria-busy="true"] .st, [data-gstate="unreachable"] .led .st { --st: var(--ep-text-3); --st-ink: var(--ep-text-3); }
.led-cell .bigfig { font-size: clamp(28px, 2.8vw, 40px); }
.led-cell.is-zero .bigfig, .led[aria-busy="true"] .bigfig, [data-gstate="unreachable"] .led .bigfig { color: var(--ep-text-3); }
.led-note { font-size: 13.5px; line-height: 1.45; color: var(--ep-text-2); }
.led-note b { font-weight: 600; color: var(--ep-text); }
.led-cell.is-alert { box-shadow: inset 0 0 0 2px var(--ep-refused); }
@media (max-width: 1100px) {
  .led { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .led { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- operations it led ---------- */
.ops { display: grid; gap: var(--ep-space-4); min-width: 0; }
.ops-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ep-space-2) var(--ep-space-6); border-top: 1px solid var(--ep-rule-strong); padding-top: var(--ep-space-4); }
.ops-head h3 { font-stretch: var(--ep-width-heading); }
.ops-head p { max-width: 64ch; }
.ops-table td { vertical-align: top; }
@media (min-width: 901px) {
  .ops-table { table-layout: fixed; }
  .ops-c-kind { width: 12%; } .ops-c-id { width: 30%; } .ops-c-pay { width: 14%; } .ops-c-st { width: 16%; }
  .ops-table th.op-status, .ops-table td.op-status { padding-left: var(--ep-space-6); }
  .ops-table th.op-kind, .ops-table td.op-kind { overflow-wrap: anywhere; }
}
.ops-table td.op-kind { font-family: var(--ep-font-sans); font-stretch: var(--ep-width-heading); font-weight: 600; font-size: 14.5px; }
.op-id-row { display: inline-flex; align-items: baseline; gap: var(--ep-space-2); }
.op-id-row .copy-sm { margin-block: -6px; align-self: center; }
.op-id-short { color: var(--ep-text); }
.op-sub { display: block; margin-top: 3px; font-family: var(--ep-font-mono); font-stretch: var(--ep-width-data); font-size: 11px; color: var(--ep-text-3); white-space: normal; }
.op-warn { color: var(--ep-refused); }
.ops-table td.op-paid { text-align: right; }
.ops-table td.op-paid .op-sub { text-align: right; }
.ops-table td.op-result { color: var(--ep-text-2); overflow-wrap: anywhere; }
.op-result .mono { color: var(--ep-text); font-size: 12.5px; }
.op-result .copy-sm { vertical-align: middle; margin-left: 6px; }
.op-person { color: var(--ep-text); font-weight: 600; }
.op-reasons { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ops-table tr[data-status="failed"] td { background: var(--ep-tint); }
/* on the tint, small print steps up to text-2 (text-3 would fall below AA in Carbon and Bond), the
   unpaid amount with it (never dimmer than its own note), and a copy button's edge to text-3 (the
   control edge, tuned for the ground, falls under 3:1 on the tint; 4.5:1 or more as text-3) */
.ops-table tr[data-status="failed"] .op-sub:not(.op-warn), .ops-table tr[data-status="failed"] .amt-note, .ops-table tr[data-status="failed"] .faint,
.ops-table tr[data-status="failed"] .amt.is-unpaid { color: var(--ep-text-2); }
.ops-table tr[data-status="failed"] .copy:not(:hover):not([data-copied]) { border-color: var(--ep-text-3); }
.ops-table tr[data-status="failed"] td:first-child { box-shadow: inset 2px 0 0 var(--ep-refused); padding-left: 10px; }
.ops-table tr.ops-empty td { color: var(--ep-text-2); padding-block: 18px; }
.copy-sm { min-height: 28px; padding: 0 6px; }
.copy-sm .ic { width: 14px; height: 14px; }
.ops-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ep-space-3) var(--ep-space-5); border-top: 1px solid var(--ep-rule); padding-top: var(--ep-space-3); }
.ops-more { min-height: 40px; font-size: 14.5px; }

@media (max-width: 900px) {
  .ops-table, .ops-table tbody { display: block; }
  .ops-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ops-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--ep-space-3);
    grid-template-areas: "k s" "i i" "p p" "r r";
    padding: var(--ep-space-4) 0; border-top: 1px solid var(--ep-rule);
  }
  .ops-table td { display: block; padding: 0; border: 0; white-space: normal; }
  .ops-table td.op-kind { grid-area: k; }
  .ops-table td.op-status { grid-area: s; }
  .ops-table td.op-id { grid-area: i; }
  .ops-table td.op-paid { grid-area: p; text-align: left; }
  .ops-table td.op-paid .op-sub { text-align: left; display: inline; margin-left: var(--ep-space-2); }
  .ops-table td.op-paid .amt { justify-content: flex-start; }
  .ops-table td.op-paid .amt::after { content: " PRL"; color: var(--ep-text-3); white-space: pre; }
  .ops-table tr[data-status="failed"] td.op-paid .amt::after { color: var(--ep-text-2); }
  .ops-table td.op-paid .amt-f { min-width: 0 !important; }
  .ops-table td.op-result { grid-area: r; min-width: 0; max-width: none; }
  .ops-table tr.ops-empty { display: block; }
  .ops-table tr[data-status="failed"] { background: var(--ep-tint); box-shadow: inset 2px 0 0 var(--ep-refused); padding-inline: 12px; }
  .ops-table tr[data-status="failed"] td, .ops-table tr[data-status="failed"] td:first-child { background: none; box-shadow: none; padding-left: 0; }
}

/* ---------- check it on chain ---------- */
.chain { align-items: stretch; }
.chain-plate { grid-template-rows: auto auto 1fr auto auto; gap: var(--ep-space-4); padding: clamp(20px, 2.4vw, 28px); }
.chain-plate h3 { font-stretch: var(--ep-width-display); font-weight: 520; font-size: clamp(22px, 2vw, 26px); line-height: 1.1; letter-spacing: -.01em; }
.chain-plate > p { max-width: 44ch; }
.chain-ic { width: 26px; height: 26px; color: var(--ep-text-2); }
.chain-link { justify-self: start; font-size: 14.5px; }
.chain-link .ic { width: 16px; height: 16px; }
.chain-foot { align-self: end; }
.chain-plate .datum { align-content: start; }
@media (min-width: 1101px) {
  .chain { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .chain-plate { grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--ep-space-4); }
}
@media (max-width: 1100px) and (min-width: 621px) {
  .chain { grid-template-columns: minmax(0, 1fr); }
  .chain-plate { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- where the figures come from ---------- */
.method-kv dd { color: var(--ep-text-2); }
.method-kv dd .mono { color: var(--ep-text); }
.method-raw { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--ep-space-4); align-content: start; }
.raw { border-top: 1px solid var(--ep-rule-strong); border-bottom: 1px solid var(--ep-rule); }
.raw summary {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--ep-space-4);
  padding: 14px 0; cursor: pointer; list-style: none;
}
.raw summary::-webkit-details-marker { display: none; }
.raw summary .lbl { color: var(--ep-text); display: inline-flex; align-items: center; gap: 10px; }
.raw summary .lbl::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.raw[open] summary .lbl::before { transform: rotate(45deg); }
.raw-log { max-height: 440px; overflow: auto; margin-bottom: var(--ep-space-4); font-size: 12px; line-height: 1.65; }

.disclose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ep-space-6) clamp(24px, 3vw, 48px); margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--ep-rule-strong); padding-top: var(--ep-space-5); }
.disclose-item { display: grid; gap: var(--ep-space-2); align-content: start; min-width: 0; }
.disclose-item p:not(.lbl) { font-size: 15px; line-height: 1.55; color: var(--ep-text-2); }
@media (max-width: 760px) { .disclose { grid-template-columns: minmax(0, 1fr); } }

/* print: the console's state glyph keeps its fill (browsers drop backgrounds) */
@media print {
  .con-glyph { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}