/* =========================================================================
   mininnverifier — inspired by the FVNN lecture slide deck:
     · Bold IBM Plex Sans for headings and body
     · IBM Plex Mono for technical data (test paths, logs, status chips)
     · Flat solid-colour callout boxes; no textures, no offset shadows
     · Palette from colors.typ
   ========================================================================= */

:root {
  --indigo:          #5438DC;
  --indigo-deep:     #1A0E63;
  --indigo-mid:      #3D2AAF;
  --indigo-soft:     #A094E0;
  --indigo-tint:     #ECEAF8;

  --cherry:          #AF1B3F;
  --cherry-deep:     #650F25;
  --cherry-hot:      #D92050;
  --cherry-tint:     #FBEBEE;

  --sea:             #018741;
  --sea-deep:        #005228;
  --sea-vivid:       #01B857;
  --sea-tint:        #E0F4EA;

  --gold:            #E3B23C;
  --gold-deep:       #8A6200;
  --gold-tint:       #FDF6E3;

  --bubblegum:       #FF66CC;
  --bubblegum-tint:  #FDEAF8;
  --bubblegum-deep:  #8A1A65;
  --babyblue:        #9BB1FF;

  --ink:             #111111;
  --grey-mid:        #929292;
  --grey-rule:       #CACACA;
  --paper:           #FFFFFF;
  --paper-soft:      #F6F6F6;
  --stone:           #696260;

  --fs-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --fs-mono: "IBM Plex Mono", "Menlo", monospace;
}

/* -------------------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fs-sans);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--indigo-mid);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  transition: color 120ms ease;
}
a:hover { color: var(--cherry); }
a:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

code, pre, kbd, samp {
  font-family: var(--fs-mono);
  font-size: 0.92em;
}
code {
  background: var(--paper-soft);
  color: var(--ink);
  padding: 1px 5px;
  border: 1px solid var(--grey-rule);
}

h1, h2, h3, h4 {
  font-family: var(--fs-sans);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em 0;
  line-height: 1.15;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 0.8rem 0; }

/* -------------------------------------------------------------------------
   Layout frame
   ------------------------------------------------------------------------- */
.frame {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.page { padding-bottom: 3rem; }

/* -------------------------------------------------------------------------
   Masthead — a flat indigo bar inspired by section-slide headers
   ------------------------------------------------------------------------- */
.masthead {
  background: var(--indigo);
  color: var(--paper);
}
.masthead .frame {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--paper);
  text-decoration: none;
  border: 0;
}
.brand img {
  width: 44px;
  height: 44px;
  background: var(--paper);
  padding: 3px;
  display: block;
}
.brand-name {
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: -0.01em;
  line-height: 1;
}

.masthead .spacer { flex: 1; }

.masthead-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--paper);
  font-size: 0.9rem;
}
.masthead-meta .user-mail { opacity: 0.9; }
.masthead-meta form { margin: 0; }

/* -------------------------------------------------------------------------
   Navigation bar
   ------------------------------------------------------------------------- */
.navbar {
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
}
.navbar .frame {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.1rem;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  font-weight: 600;
  font-size: 0.95rem;
}
.nav-link:hover { background: var(--paper-soft); color: var(--ink); }
.nav-link.is-active {
  background: var(--ink);
  color: var(--paper);
}
.nav-link.is-active:hover { background: var(--indigo-deep); color: var(--paper); }

/* -------------------------------------------------------------------------
   Page banner (generic info strip)
   ------------------------------------------------------------------------- */
.banner {
  background: var(--gold-tint);
  border-bottom: 1.5px solid var(--gold-deep);
  padding: 0.55rem 0;
  font-size: 0.9rem;
  color: var(--gold-deep);
}
.banner a { color: var(--ink); }

/* -------------------------------------------------------------------------
   Section heading
   ------------------------------------------------------------------------- */
.section { padding-top: 2.2rem; }
.section + .section { padding-top: 2.8rem; }

.section > h2 {
  margin: 0 0 1.2rem 0;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
button,
.btn,
input[type="submit"] {
  font-family: var(--fs-sans);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  background: var(--indigo);
  color: var(--paper);
  border: 1.5px solid var(--indigo);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.15;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
button:hover:not([disabled]),
.btn:hover:not([disabled]) {
  background: var(--indigo-mid);
  color: var(--paper);
  border-color: var(--indigo-mid);
}
button[disabled],
.btn[disabled] {
  background: var(--grey-rule);
  color: var(--stone);
  border-color: var(--grey-rule);
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.btn-ghost:hover:not([disabled]) {
  background: var(--paper);
  color: var(--indigo-deep);
  border-color: var(--paper);
}

.btn-danger {
  background: var(--cherry);
  border-color: var(--cherry);
}
.btn-danger:hover:not([disabled]) {
  background: var(--cherry-deep);
  border-color: var(--cherry-deep);
}

.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
}

.inline-form {
  display: inline-flex;
  margin-left: 0.4rem;
}

/* -------------------------------------------------------------------------
   Status chips — flat solid-colour pills
   ------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--fs-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 2px 8px 3px;
  line-height: 1.1;
  white-space: nowrap;
  border: 1.5px solid var(--ink);
}

.chip-passed  { background: var(--sea);    color: var(--paper); border-color: var(--sea-deep); }
.chip-failed,
.chip-error   { background: var(--cherry); color: var(--paper); border-color: var(--cherry-deep); }
.node-row .chip-passed,
.node-row .chip-failed,
.node-row .chip-error { cursor: pointer; }
.chip-skipped { background: var(--paper);  color: var(--stone); border-color: var(--grey-rule); }
.chip-pending { background: var(--gold);   color: var(--ink);   border-color: var(--gold-deep); }
.chip-queued  { background: var(--indigo); color: var(--paper); border-color: var(--indigo-deep); }
.chip-built   { background: var(--sea);    color: var(--paper); border-color: var(--sea-deep); }
.chip-building,
.chip-none    { background: var(--gold);   color: var(--ink);   border-color: var(--gold-deep); }

.status-passed { color: var(--sea-deep); font-weight: 600; }
.status-failed,
.status-error  { color: var(--cherry-deep); font-weight: 600; }
.status-skipped { color: var(--stone); }
.status-running,
.status-queued,
.status-building { color: var(--indigo-mid); font-weight: 600; }
.status-done { color: var(--sea-deep); font-weight: 600; }
.status-cancelled { color: var(--stone); }

.bonus-bg {
  background: var(--bubblegum-tint) !important;
  padding: 1px 3px;
}

.error { color: var(--cherry-deep); }
.muted { color: var(--stone); font-size: 0.9rem; }

/* -------------------------------------------------------------------------
   Plate — flat solid-colour callout box, matching the deck's callouts
   ------------------------------------------------------------------------- */
.plate {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.6rem;
}
.plate > h2:first-child,
.plate > h3:first-child { margin-top: 0; }
.plate-body > p:last-child { margin-bottom: 0; }

.plate-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

/* State variants: flat filled blocks, heading colour carries the signal */
.plate-red {
  background: var(--cherry);
  color: var(--paper);
  border-color: var(--cherry-deep);
}
.plate-red a { color: var(--paper); }
.plate-red code { background: rgba(255,255,255,0.12); color: var(--paper); border-color: rgba(255,255,255,0.3); }
.plate-red .muted { color: rgba(255,255,255,0.85); }

.plate-yellow {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold-deep);
}
.plate-yellow a { color: var(--ink); }
.plate-yellow code { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.2); color: var(--ink); }
.plate-yellow .muted { color: rgba(0,0,0,0.7); }

.plate-green {
  background: var(--sea);
  color: var(--paper);
  border-color: var(--sea-deep);
}
.plate-green a { color: var(--paper); }
.plate-green code { background: rgba(255,255,255,0.12); color: var(--paper); border-color: rgba(255,255,255,0.3); }
.plate-green .muted { color: rgba(255,255,255,0.85); }

/* Buttons inside state-filled plates become light-on-dark ghost buttons */
.plate-red button:not([disabled]),
.plate-green button:not([disabled]) {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.plate-red button:hover:not([disabled]),
.plate-green button:hover:not([disabled]) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.plate-red .btn-danger,
.plate-green .btn-danger {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.plate-red .btn-danger:hover:not([disabled]),
.plate-green .btn-danger:hover:not([disabled]) {
  background: var(--cherry-deep);
  border-color: var(--cherry-deep);
}

.plate-yellow button:not([disabled]) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.plate-yellow button:hover:not([disabled]) {
  background: var(--cherry);
  border-color: var(--cherry);
}

/* File input styles inside coloured plates */
.plate-red input[type="file"],
.plate-green input[type="file"] { color: var(--paper); }
.plate-red input[type="file"]::file-selector-button,
.plate-green input[type="file"]::file-selector-button {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* -------------------------------------------------------------------------
   Build log
   ------------------------------------------------------------------------- */
.build-log {
  margin-top: 0.8rem;
  max-height: 14rem;
  overflow: auto;
  background: var(--ink);
  color: #f0f0f0;
  font-family: var(--fs-mono);
  font-size: 0.8rem;
  padding: 0.75rem 0.9rem;
  white-space: pre-wrap;
  border: 1.5px solid var(--ink);
  line-height: 1.45;
}

/* -------------------------------------------------------------------------
   Spinner
   ------------------------------------------------------------------------- */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  vertical-align: -0.15em;
  margin-right: 0.4rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------------
   Active-run row
   ------------------------------------------------------------------------- */
.active-run-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  background: var(--indigo-tint);
  border: 1.5px solid var(--indigo-deep);
  padding: 0.7rem 1rem;
  margin-bottom: 1.6rem;
  font-size: 0.92rem;
}
.active-run-row strong {
  font-weight: 700;
  color: var(--ink);
}
.active-run-row .sep { color: var(--indigo-soft); margin: 0 0.2rem; }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
input[type="file"] {
  font-family: var(--fs-sans);
  font-size: 0.9rem;
  color: inherit;
  padding: 0.3rem 0;
  max-width: 100%;
}
input[type="file"]::file-selector-button {
  font-family: var(--fs-sans);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  background: var(--indigo);
  color: var(--paper);
  border: 1.5px solid var(--indigo);
  cursor: pointer;
  margin-right: 0.75rem;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
input[type="file"]::file-selector-button:hover {
  background: var(--indigo-mid);
  color: var(--paper);
  border-color: var(--indigo-mid);
}

input[type="text"],
input[type="password"],
input[type="email"] {
  font-family: var(--fs-sans);
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color 120ms ease;
  width: 100%;
  max-width: 360px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  border-color: var(--indigo);
}

form p { margin: 0 0 0.85rem 0; }
form label, .label {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  display: block;
  margin-bottom: 0.25rem;
}

.upload-form {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* -------------------------------------------------------------------------
   Drag-and-drop upload zone
   ------------------------------------------------------------------------- */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.1rem 1.4rem;
  border: 2px dashed var(--indigo-soft);
  background: var(--paper-soft);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  min-width: min(420px, 100%);
  transition: background 120ms ease, border-color 120ms ease, border-style 0ms;
}
.dropzone input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.dropzone:hover { background: var(--indigo-tint); border-color: var(--indigo); }
.dropzone.is-dragover {
  background: var(--indigo-tint);
  border-color: var(--indigo);
  border-style: solid;
}
.dropzone-icon {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--indigo);
  line-height: 1;
}
.dropzone-text strong {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.005em;
}
.dropzone-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--stone);
  margin-top: 0.1rem;
}
.dropzone-filename {
  font-family: var(--fs-mono);
  font-size: 0.82rem;
  color: var(--stone);
  margin-top: 0.3rem;
  word-break: break-all;
}
.dropzone-filename.has-file { color: var(--ink); font-weight: 500; }

/* Variants: translucent white on saturated plate backgrounds */
.plate-green .dropzone,
.plate-red .dropzone {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.08);
  color: var(--paper);
}
.plate-green .dropzone:hover,
.plate-red .dropzone:hover,
.plate-green .dropzone.is-dragover,
.plate-red .dropzone.is-dragover {
  background: rgba(255,255,255,0.2);
  border-color: var(--paper);
}
.plate-green .dropzone-icon,
.plate-red .dropzone-icon { color: var(--paper); }
.plate-green .dropzone-sub,
.plate-red .dropzone-sub { color: rgba(255,255,255,0.8); }
.plate-green .dropzone-filename,
.plate-red .dropzone-filename { color: rgba(255,255,255,0.85); }
.plate-green .dropzone-filename.has-file,
.plate-red .dropzone-filename.has-file { color: var(--paper); font-weight: 600; }

.plate-yellow .dropzone {
  border-color: rgba(0,0,0,0.3);
  background: rgba(0,0,0,0.04);
  color: var(--ink);
}
.plate-yellow .dropzone:hover,
.plate-yellow .dropzone.is-dragover {
  background: rgba(0,0,0,0.08);
  border-color: var(--ink);
}

/* -------------------------------------------------------------------------
   Progress bar
   ------------------------------------------------------------------------- */
.progress-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem;
  align-items: center;
  margin: 0.4rem 0 1rem;
}
.progress-label {
  font-size: 0.9rem;
  color: var(--stone);
}
.progress-count {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  justify-self: end;
}
.progress {
  grid-column: 1 / -1;
  height: 10px;
  background: var(--paper-soft);
  border: 1.5px solid var(--ink);
}
.progress > div {
  background: var(--indigo);
  height: 100%;
  transition: width 320ms ease;
}

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */
table.results {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  background: var(--paper);
  border: 1.5px solid var(--ink);
}
table.results th,
table.results td {
  padding: 0.5rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
table.results thead th {
  font-weight: 700;
  font-size: 0.88rem;
  background: var(--paper-soft);
  border-bottom: 1.5px solid var(--ink);
  white-space: nowrap;
}
table.results tbody tr + tr td { border-top: 1px solid var(--grey-rule); }
table.results tbody tr:hover td { background: var(--paper-soft); }
table.results td code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   Test catalogue tree
   ------------------------------------------------------------------------- */
ul.catalogue,
ul.catalogue ul {
  list-style: none;
  margin: 0;
  padding-left: 1rem;
}
ul.catalogue {
  padding-left: 0;
  border-top: 1.5px solid var(--ink);
  padding-top: 0.4rem;
  margin-top: 0.4rem;
}
ul.catalogue > li {
  border-bottom: 1px solid var(--grey-rule);
  padding: 0.2rem 0;
}
ul.catalogue > li:last-child { border-bottom: 0; }
ul.catalogue ul {
  border-left: 1px solid var(--grey-rule);
  margin: 0.2rem 0 0.3rem 0.4rem;
  padding-left: 0.9rem;
}
ul.catalogue ul li { padding: 0.1rem 0; }

details { margin: 0; }
summary {
  list-style: none;
  cursor: pointer;
  padding: 0.3rem 0.1rem;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "›";
  display: inline-block;
  width: 0.9rem;
  flex: 0 0 auto;
  color: var(--indigo);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 140ms ease;
}
details[open] > summary::before {
  transform: rotate(90deg);
}
summary > .node-row { flex: 1; min-width: 0; }
summary:hover { background: var(--paper-soft); }

.node-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 1.7rem;
}
.node-row .node-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.node-row .node-name strong {
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
}
.node-row .node-name .path,
.node-row .node-name code {
  font-family: var(--fs-mono);
  font-size: 0.88rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0;
}
.node-row .node-result {
  flex: 0 0 auto;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Inline run-button is small, quiet until hover */
.node-row .inline-form button {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.node-row .inline-form button:hover:not([disabled]) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.node-row .inline-form button[disabled] {
  background: var(--paper);
  color: var(--grey-mid);
  border-color: var(--grey-rule);
}

/* Milestone rows — slightly bigger */
ul.catalogue > li > details > summary .node-name strong {
  font-size: 1.12rem;
}

/* Info button on test leaves — opens the description overlay */
.info-btn {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1.5px solid var(--indigo);
  border-radius: 50%;
  background: var(--paper);
  color: var(--indigo);
  font-family: var(--fs-sans);
  font-size: 0.78rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.info-btn:hover {
  background: var(--indigo);
  color: var(--paper);
}
.info-btn:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* Test description overlay */
.info-dialog {
  width: min(640px, calc(100vw - 2rem));
  max-height: 80vh;
  padding: 0;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.info-dialog::backdrop {
  background: rgba(17, 17, 17, 0.45);
}
.info-dialog-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  margin: 0;
  border-bottom: 1px solid var(--grey-rule);
  background: var(--paper-soft);
}
.info-dialog-path {
  flex: 1;
  min-width: 0;
  font-family: var(--fs-mono);
  font-size: 0.92rem;
  word-break: break-all;
  background: transparent;
  padding: 0;
}
.info-dialog-close {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}
.info-dialog-close:hover {
  background: var(--ink);
  color: var(--paper);
}
.info-dialog-body {
  padding: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.5;
  overflow: auto;
  max-height: calc(80vh - 3rem);
}
.info-dialog-description {
  white-space: pre-wrap;
}
.info-dialog-description[hidden] {
  display: none;
}
.info-dialog-show-wrap,
.info-dialog-error-wrap {
  margin-top: 0.9rem;
  border-top: 1px solid var(--grey-rule);
  padding-top: 0.7rem;
}
.info-dialog-show-wrap[hidden],
.info-dialog-error-wrap[hidden] {
  display: none;
}
.info-dialog-error-header {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--stone);
  margin: 0 0 0.4rem 0;
}
.info-dialog-error {
  font-family: var(--fs-mono);
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.info-dialog-show-header {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--stone);
  margin: 0 0 0.4rem 0;
}
.info-dialog-show {
  font-family: var(--fs-mono);
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
}
.info-dialog-show .ansi-dim { opacity: 0.55; }
.info-dialog-show .ansi-bold { font-weight: 700; }
.info-dialog-show .ansi-italic { font-style: italic; }
.info-dialog-show .ansi-underline { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Run-all bar
   ------------------------------------------------------------------------- */
.run-all-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------
   DL — run detail
   ------------------------------------------------------------------------- */
dl.summary-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1.2rem;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding: 0.75rem 0;
  margin: 0 0 1.5rem 0;
}
dl.summary-dl dt {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--stone);
}
dl.summary-dl dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   Auth pages — centred sheet
   ------------------------------------------------------------------------- */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: var(--paper-soft);
}
.auth-sheet {
  width: 100%;
  max-width: 400px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 2rem 1.8rem;
}
.auth-mark {
  width: 52px;
  height: 52px;
  padding: 4px;
  border: 1.5px solid var(--ink);
  margin-bottom: 1rem;
  display: grid;
  place-items: center;
}
.auth-mark img { width: 100%; height: 100%; object-fit: contain; }

.auth-title {
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem 0;
}
.auth-sub {
  color: var(--stone);
  margin-bottom: 1.2rem;
  font-size: 0.94rem;
}
.auth-sheet form { margin-top: 0.4rem; }
.auth-sheet button[type="submit"] { width: 100%; justify-content: center; }

.auth-sheet .errorlist {
  list-style: none;
  padding: 0.6rem 0.8rem;
  margin: 0 0 0.8rem 0;
  background: var(--cherry-tint);
  border: 1.5px solid var(--cherry);
  color: var(--cherry-deep);
  font-size: 0.9rem;
}
.auth-sheet .helptext {
  display: block;
  font-size: 0.8rem;
  color: var(--stone);
  margin-top: 0.15rem;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.colophon {
  margin-top: 3rem;
  padding: 1.2rem 0 1.6rem;
  border-top: 1px solid var(--grey-rule);
  color: var(--stone);
  font-size: 0.85rem;
}

/* -------------------------------------------------------------------------
   HTMX transition
   ------------------------------------------------------------------------- */
.htmx-swapping { opacity: 0.6; transition: opacity 80ms ease; }
.htmx-settling { opacity: 1; transition: opacity 200ms ease; }

/* -------------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .masthead .frame { flex-wrap: wrap; }
  .masthead-meta { width: 100%; justify-content: flex-start; }
  .navbar .frame { overflow-x: auto; }
  .brand img { width: 38px; height: 38px; }
}