/* ============================================================
   The appraisal desk + the report — /appraise and /run/:id.
   Loads on top of styles.css and inherits its whole vocabulary
   (ledger rows, coin piles, heat, sage accent). Only what is
   unique to this page lives here.

   The report's job is to be read at a glance and then sent to
   someone else, so it leads with one verdict at poster scale and
   argues it with the same coins the index quiz uses. Loud in
   SCALE, not in colour — the palette stays the instrument's.
   ============================================================ */

/* ---------------- desk bar ---------------- */
.deskbar {
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px clamp(16px, 4vw, 36px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.deskbar-brand { text-decoration: none; color: inherit; display: block; }
.deskbar-kicker {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
}
.deskbar-word {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 1px;
}
.deskbar-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.deskbar-link:hover { background: var(--accent-wash); color: var(--accent-ink); }

/* ---------------- the commission form ---------------- */
.desk-intro { padding-top: clamp(28px, 5vw, 48px); }
.desk-title {
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 12px 0 14px;
}
.desk-sub {
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--ink-2);
  max-width: 62ch;
  line-height: 1.5;
  text-wrap: pretty;
  margin-bottom: 30px;
}
.desk-sub em { color: var(--ink); font-style: normal; font-weight: 600; }
.desk-intro[hidden] { display: none; }

/* ---------------- stage ordering ----------------
Live, the stage reads top-down as it happens: progress, what we understood, the
book, the prices filling in. Settled, it becomes a document — the verdict first,
the scaffolding after or gone. Order does that without re-parenting any node. */
.run-stage {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-2);
  margin-top: 8px;
  padding-top: 24px;
}
/* display above would otherwise beat the [hidden] attribute, and an idle desk
   would show a progress bar for a run nobody has commissioned. */
.run-stage[hidden] { display: none; }
.run-stage.is-report {
  border-top: none;
  padding-top: clamp(20px, 4vw, 34px);
}
.run-stage.is-report .run-progress { display: none; }
.run-stage.is-report .run-verdict { order: 1; }
.run-stage.is-report .run-twist { order: 2; }
.run-stage.is-report .run-plot { order: 3; }
.run-stage.is-report .run-book { order: 4; }
.run-stage.is-report .run-share { order: 5; }
.run-stage.is-report .run-log-wrap { order: 6; }

/* ---------------- the verdict ----------------
The answer, at the largest type on the site. Everything else on the page exists
to make this line believable. */
.run-verdict {
  background: linear-gradient(180deg, var(--accent-wash), var(--surface) 78%);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 18px;
  padding: clamp(22px, 3.4vw, 38px);
  margin-bottom: 26px;
  animation: verdictIn 0.6s var(--ease) both;
}
@keyframes verdictIn { from { opacity: 0; transform: translateY(10px); } }

.rv-kicker {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.rv-lede {
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink-2);
  text-wrap: balance;
  margin-bottom: 18px;
}
.rv-lede b { color: var(--ink); font-weight: 700; }

.rv-winner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "badge name"
    "badge prov"
    "price price";
  column-gap: 16px;
  align-items: center;
}
.rv-badge {
  grid-area: badge;
  align-self: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-ink);
  color: #fff;
  flex: none;
}
.rv-badge-icon { width: 26px; height: 26px; display: block; }
.rv-name {
  grid-area: name;
  align-self: end;
  font-size: clamp(28px, 5.2vw, 52px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.rv-prov {
  grid-area: prov;
  align-self: start;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: 4px;
}
/* A receipt's total rule: the number you came for, ruled off from the name. */
.rv-price {
  grid-area: price;
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed color-mix(in srgb, var(--accent-ink) 34%, transparent);
}
.rv-amount {
  font-size: clamp(38px, 7vw, 66px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--accent-ink);
}
.rv-unit { font-size: clamp(13px, 1.6vw, 16px); font-weight: 500; color: var(--ink-2); }

.rv-summary {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 66ch;
  margin-top: 20px;
}

/* Three readings off the same run — the instrument's own small print, boxed so
   they scan as a row of gauges rather than a sentence. */
.rv-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: 13px;
  overflow: hidden;
  margin-top: 24px;
}
.rv-tile {
  background: var(--surface);
  padding: 15px 17px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rv-tv {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}
.rv-tv.q-good { color: var(--good-t); }
.rv-tv.q-mid { color: var(--mid-t); }
.rv-tv.q-bad { color: var(--bad-t); }
.rv-tv.is-flip { color: var(--accent-ink); }
.rv-to { color: var(--ink-3); font-weight: 500; margin: 0 2px; }
.rv-tk { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; text-wrap: pretty; }
.rv-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 16px;
}

@media (max-width: 560px) {
  .rv-winner {
    grid-template-columns: 1fr;
    grid-template-areas: "badge" "name" "prov" "price";
    row-gap: 2px;
  }
  .rv-badge { margin-bottom: 12px; width: 44px; height: 44px; }
  .rv-badge-icon { width: 22px; height: 22px; }
}

/* ---------------- the twist ----------------
The thesis, retold with this run's own numbers, in the same coins the index quiz
uses — a reader who played the game recognises the shape before reading a word. */
.run-twist {
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 30px);
  margin-bottom: 28px;
}
.tw-head { margin-bottom: 16px; }
.tw-kicker {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.tw-head h4 {
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-wrap: balance;
}
.tw-head h4 b { color: var(--accent-ink); font-weight: 700; }
.tw-line {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 18px;
  max-width: 62ch;
}
.tw-line b { color: var(--ink); font-weight: 600; }
.tw-line-turn { margin-top: 26px; font-weight: 600; color: var(--ink); }
.tw-body { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; max-width: 64ch; }
.tw-body b { color: var(--ink); font-weight: 600; }
.tw-body em { font-style: normal; font-weight: 600; color: var(--ink); }
.tw-body a, .tw-punch a { color: var(--accent-ink); font-weight: 600; }
.tw-punch {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 68ch;
  text-wrap: pretty;
}
.tw-punch b { color: var(--ink); font-weight: 700; }
/* The piles are the argument here, not a hero — hold them to a calmer scale. */
.run-twist .pile-svg { width: 54px; }
.run-twist .q-row-task { margin-top: 18px; }
.run-twist .q-row-tok .pg-val { font-size: 18px; }
.run-twist .q-row-task .pg-val { font-size: 21px; }

/* ---------------- share ---------------- */
.run-share { margin: 6px 0 12px; }
.rs-share-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 9px;
}
.rs-share-native { color: #fff; background: var(--accent-ink); border-color: transparent; }
.rs-share-native:hover { background: color-mix(in srgb, var(--accent-ink) 85%, #000); color: #fff; }

/* ---------------- what's next ----------------
Two doors off the report and nothing else: run one yourself, or go read the
index. The first is filled, the second is not — one primary action per view. */
.run-ends { padding: clamp(30px, 5vw, 52px) 0 8px; }
.run-ends[hidden] { display: none; }
.ends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.ends-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: 26px 26px 24px;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.ends-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(23, 23, 20, 0.07);
}
.ends-primary {
  background: linear-gradient(180deg, var(--accent-wash), var(--surface) 70%);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}
.ends-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.ends-head {
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
}
.ends-note {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  text-wrap: pretty;
}
.ends-btn {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--accent-ink);
  border-radius: 10px;
  padding: 11px 20px;
}
.ends-btn-quiet {
  color: var(--accent-ink);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.ends-arrow { display: inline-block; margin-left: 6px; transition: transform 0.18s var(--ease); }
.ends-card:hover .ends-arrow { transform: translateX(3px); }
.ends-fine { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .run-verdict { animation: none; }
  .ends-card:hover { transform: none; }
}