/* Bellside — "the engine, running" surface.
 *
 * A dark console is used here for one reason: this is the only place on the page
 * where machine output is quoted verbatim, so it should not wear the same warm
 * paper as the editorial sections. Everything else on the page stays on --paper.
 *
 * Constraints held deliberately:
 *  - every font size >= 10px (the DOM probe asserts the minimum rendered size)
 *  - the run button clears 32px so it survives the touch-target gate
 *  - all colour comes from the existing token set; no new palette is introduced
 *  - motion is gated behind prefers-reduced-motion
 */

#engine .engtop {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* ---------------- the console itself ---------------- */
#engine .engcon {
  background: var(--pitch);
  border: 1px solid var(--rule-2);
  min-width: 0;
}

#engine .engbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #ffffff1f;
  flex-wrap: wrap;
}

#engine .engdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9fd45f;
  flex: none;
  animation: engbreathe 2.6s ease-in-out infinite;
}

#engine .engbar b {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: #f2efe6;
  font-weight: 400;
  text-transform: uppercase;
}

#engine .engcls {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: #8f9a8b;
  margin-left: auto;
}

#engine #engRun {
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pitch);
  background: #9fd45f;
  border: 1px solid #9fd45f;
  border-radius: 2px;
  /* min-height, not padding alone: the pill elsewhere on this page measured
     27px from padding and failed the 32px touch-target floor. */
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

#engine #engRun:hover {
  background: #b8e07a;
  border-color: #b8e07a;
}

#engine #engRun:active { transform: translateY(1px); }

#engine #engRun:focus-visible {
  outline: 2px solid #9fd45f;
  outline-offset: 2px;
}

#engine #engRun[disabled] {
  opacity: .5;
  cursor: progress;
}

/* ---------------- trace lines ---------------- */
#engine .engout {
  list-style: none;
  margin: 0;
  padding: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  /* A derivation is 12-13 lines; cap the box so the section does not jump
     height while the trace prints, and let a longer trace scroll instead. */
  max-height: 340px;
  overflow-y: auto;
  counter-reset: engline;
}

#engine .engln {
  display: grid;
  /* 19ch, not 15ch: the widest label ("read registry record") measures 148px at
     10px mono while a 15ch column gave 120px, so three of thirteen labels were
     silently ellipsised. Measured with scrollWidth vs clientWidth — a vision
     pass called the truncation "intentional", which it was not. */
  grid-template-columns: 22px minmax(0, 19ch) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 1px 0;
}

#engine .engln::before {
  counter-increment: engline;
  content: counter(engline, decimal-leading-zero);
  color: #5d665c;
  font-size: 10px;
  text-align: right;
}

#engine .engln .ek {
  color: #8f9a8b;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#engine .engln .ev {
  color: #e4e0d5;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* kinds: the console must not colour everything the same or nothing reads */
#engine .engln.ok   .ev { color: #a9d97f; }
#engine .engln.warn .ev { color: #f0c96a; }
#engine .engln.warn .ek { color: #c9a94f; }
#engine .engln.why  .ev { color: #cfcabc; font-style: italic; }
#engine .engln.why  .ek { color: #8f9a8b; }

#engine .engln.warn { background: #f0c96a0f; }

/* Each line arrives; without this the staggered print reads as a jump cut. */
@media (prefers-reduced-motion: no-preference) {
  #engine .engln { animation: engin .18s ease-out both; }
}

@keyframes engin {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

@keyframes engbreathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ---------------- ruleset panel ---------------- */
#engine .engspec {
  background: var(--card);
  border: 1px solid var(--rule-2);
  padding: 14px 16px;
  min-width: 0;
}

#engine .engspec h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
  font-weight: 400;
}

#engine .engspec dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 6px 12px;
}

#engine .engspec dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

#engine .engspec dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

#engine .engnote {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}

/* ---------------- document ledger ---------------- */
#engine .engled {
  margin-top: 18px;
  border: 1px solid var(--rule-2);
  background: var(--card);
}

#engine .engled h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-weight: 400;
}

#engine .engled ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

#engine .edoc {
  display: grid;
  grid-template-columns: 84px minmax(0, 150px) minmax(0, 1fr) 52px;
  gap: 12px;
  align-items: baseline;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
}

#engine .edoc:last-child { border-bottom: 0; }

#engine .edoc .et {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Tier is the load-bearing fact in this ledger, so it gets the ink weight. */
  color: var(--ink);
  border-left: 3px solid var(--rule-2);
  padding-left: 8px;
}

#engine .edoc.t-paperwork .et { border-left-color: var(--desk); }
#engine .edoc.t-operator  .et { border-left-color: var(--amber); }
#engine .edoc.t-external  .et { border-left-color: var(--slate); }

#engine .edoc .ed {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  word-break: break-word;
}

#engine .edoc .ec {
  color: var(--ink-2);
  line-height: 1.5;
}

#engine .edoc .ea {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#engine .edoc.neg .ec { color: var(--brick); }

#engine .edoc.none {
  display: block;
  color: var(--ink-3);
  font-size: 12.5px;
}

/* ---------------- narrow ---------------- */
@media (max-width: 900px) {
  #engine .engtop { grid-template-columns: 1fr; }
  #engine .engln { grid-template-columns: 20px minmax(0, 1fr); }
  /* The label/value split cannot survive a phone column: stack them and let
     the value own the full width rather than squeezing to 4 characters. */
  #engine .engln .ev { grid-column: 2; }
  #engine .edoc {
    grid-template-columns: minmax(0, 1fr) 52px;
    row-gap: 4px;
  }
  #engine .edoc .et { grid-column: 1; }
  #engine .edoc .ea { grid-column: 2; grid-row: 1; }
  #engine .edoc .ed { grid-column: 1 / -1; }
  #engine .edoc .ec { grid-column: 1 / -1; }
}

/* Thumbs get a bigger button without disturbing desktop rhythm.
   44px, not 36px: measured at 390px the button was 36px tall while the nav
   links beside it are 40px — the view's primary action was the smallest
   control on screen. 44px is the platform floor and now reads as the
   biggest tap target here, which is what it should be. */
@media (pointer: coarse) {
  #engine #engRun { min-height: 44px; padding: 0 16px; }
}