#reader-panel[hidden], #reader-steps[hidden], #queue-position[hidden], #slow-notice[hidden], .reader-action[hidden],
.new-link[hidden], .preview-tools[hidden] { display: none; }

#reader-panel {
  --reader-stock: var(--panel, #fffefa);
  --reader-step-line: #c1c4b9;
  --reader-step-ink: #676a60;
  --reader-accent: var(--blue);
  --reader-error: var(--error, #914437);
  --reader-mark: #fff;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  align-items: center;
  column-gap: clamp(14px, 3vw, 42px);
  min-height: var(--reader-entry-height, 112px);
}
#reader-visual { width: 100%; max-width: 390px; justify-self: center; }
.reader-copy { min-width: 0; }
#reader-title {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 30px);
  letter-spacing: -.04em;
  line-height: 1.25;
}
#reader-title:focus { outline: none; }
#reader-panel[data-phase="succeeded"] #reader-title { color: var(--blue); }
#reader-panel:is([data-phase="failed"], [data-phase="rejected"]) #reader-title { color: var(--reader-error); }
html[data-theme="dark"] #reader-panel {
  --reader-step-line: #58677c;
  --reader-step-ink: var(--muted);
  --reader-mark: #172746;
}
#reader-detail {
  margin: 5px 0 0;
  color: #67685d;
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
#queue-position {
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 0;
  padding-inline-start: 8px;
  border-inline-start: 3px solid var(--orange);
  color: var(--reader-accent);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* Queueing is an extra stop only on attempts that actually entered the queue. */
#reader-steps {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--stop-count, 4), minmax(0, 1fr));
  width: 100%;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
#reader-steps:has(#reader-queue-step) { --stop-count: 5; --track-inset: 10%; }
#reader-steps::before, #reader-steps::after {
  content: "";
  position: absolute;
  top: 7px;
  inset-inline: var(--track-inset, 12.5%);
  height: 2px;
  pointer-events: none;
}
#reader-steps::before {
  background: repeating-linear-gradient(90deg, var(--reader-step-line) 0 3px, transparent 3px 7px);
}
#reader-steps::after {
  background: var(--reader-accent);
  transform-origin: left center;
  transform: scaleX(var(--reader-progress, 0));
}
#reader-steps li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--reader-step-ink);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}
#reader-steps li::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--reader-step-line);
  border-radius: 50%;
  background: var(--reader-stock);
  box-shadow: 0 0 0 3px var(--reader-stock);
}
#reader-steps li[data-state="done"]::before {
  background: var(--reader-accent);
  border-color: var(--reader-accent);
}
#reader-steps li[data-state="done"]::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 5px;
  height: 8px;
  border: solid var(--reader-mark);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}
#reader-steps li:is([data-state="current"], [data-state="paused"]) {
  color: var(--reader-accent);
  font-weight: 750;
}
#reader-steps li:is([data-state="current"], [data-state="paused"])::before {
  border: 2px solid var(--reader-accent);
  background: radial-gradient(circle at center, var(--reader-accent) 0 3px, var(--reader-stock) 3.5px);
}
#reader-steps li[data-state="current"]::after {
  content: "";
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--reader-accent);
  opacity: 0;
}
#reader-steps li[data-state="stopped"] {
  color: var(--reader-error);
  font-weight: 750;
}
#reader-steps li[data-state="stopped"]::before {
  border-color: var(--reader-error);
  background: var(--reader-stock);
}
#reader-steps li[data-state="stopped"]::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 7px;
  height: 2px;
  border-radius: 3px;
  background: var(--reader-error);
}
/* Only the current stop breathes. Passing time never advances the printed line. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="paused"]) #reader-steps::after { transition: transform 240ms var(--ease-out); }
  html:not([data-motion="paused"]) #reader-steps li[data-state="current"]::after {
    animation: reader-step-pulse 1.8s ease-out infinite;
  }
}
@keyframes reader-step-pulse {
  0% { transform: scale(1); opacity: .7; }
  75%, 100% { transform: scale(1.7); opacity: 0; }
}

#slow-notice {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  margin-top: 10px;
  padding: 11px 0 0;
  border-top: 1px dashed #dad4c4;
}
.notice-rule {
  align-self: start;
  width: 9px;
  height: 4px;
  margin-top: 10px;
  border-radius: 1px;
  background: #bc793b;
  transform: skewX(-16deg);
}
#slow-copy { margin: 0; color: #644d33; font-size: 13px; line-height: 1.7; }
.reader-action, .new-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid #beb8aa;
  border-radius: 7px;
  background: #fbf8ef;
  color: #584c3a;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}
.reader-action[aria-disabled="true"] { opacity: .65; cursor: progress; }
#cancel-verification, #replace-verification { margin-top: 8px; }
#replace-verification {
  max-width: 100%;
  gap: 8px;
  padding-inline: 13px;
  border-color: var(--reader-error);
  color: var(--reader-error);
  background: var(--error-stock, #fbf0e8);
}
#replace-verification::after { content: "↗" / ""; font: 1.1em/1 var(--sans); }
#replace-verification:focus-visible, #next-verification:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
#next-verification, .new-link {
  min-height: 34px;
  padding: 2px 0;
  margin-top: 3px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--blue);
  text-underline-offset: 4px;
}
.new-link .icon { width: 14px; height: 14px; }
.preview-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}
.preview-tools a { padding: 4px 0; color: #596456; text-underline-offset: 3px; }
.preview-tools a[aria-current] { color: var(--blue); font-weight: 650; }
.new-link:focus-visible, .preview-tools a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
@media (hover: hover) {
  #replace-verification:hover { box-shadow: inset 0 0 0 1px currentColor; }
  #cancel-verification:hover { border-color: #948263; background: #f5f0e3; }
  #next-verification:hover, .new-link:hover { text-decoration: underline; }
}
@media (prefers-reduced-motion: no-preference) {
  #slow-notice { animation: slip-in 180ms var(--ease-out) backwards; }
  .reader-action { transition: background 150ms, transform 150ms var(--ease-out); }
  .reader-action:active { transform: translateY(1px); }
}
@media (max-width: 620px) {
  #reader-panel { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); column-gap: 12px; }
  #reader-title { font-size: 20px; }
  #reader-detail { font-size: 12px; }
  #cancel-verification, #replace-verification { min-height: 44px; }
}