/* ==========================================================================
   Proof surface composition — /proof/, /proof/demo/, and the demos beneath it
   ==========================================================================
   A sales surface, not an operator route. It wears the same Dream.OS chrome as
   every other page on this domain (menu bar, canvas, inspector) but drops the
   navigator rail and the activity strip: a maintenance planner arriving cold
   has no use for Skill Tree counts or our closeout stream, and an empty rail
   beside a guided demo reads as clutter rather than as restraint.

   Everything below is scoped to this route. It owns layout and demo-specific
   components only — colour still resolves to --os-* / --brand-*, so the demo
   reads as the same company as the rest of weareswarm.online.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Shell variant: bar over canvas + inspector
   -------------------------------------------------------------------------- */

.os-shell-demo {
  grid-template-columns: minmax(0, 1fr) var(--os-inspector);
  grid-template-rows: var(--os-bar) minmax(0, 1fr);
  grid-template-areas:
    "bar bar"
    "canvas inspector";
  opacity: 1;
  transform: none;
}

.os-shell-demo .os-pane {
  padding: 22px 24px 40px;
  scroll-behavior: smooth;
}

/* The index has nothing to inspect, so it drops the third column entirely
   rather than showing an empty one. */
.os-shell-index {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--os-bar) minmax(0, 1fr);
  grid-template-areas:
    "bar"
    "canvas";
  opacity: 1;
  transform: none;
}

.os-shell-index .os-pane {
  padding: 22px 24px 40px;
}

/* --------------------------------------------------------------------------
   Stage machine
   --------------------------------------------------------------------------
   Every stage stays in the DOM so a restored session can jump straight to the
   one it left off at, and so the whole cycle remains readable as one document
   once it has been played through.
   -------------------------------------------------------------------------- */

.rp-stage[hidden] {
  display: none;
}

.rp-stage + .rp-stage {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--os-edge);
}

/* Progress ribbon ---------------------------------------------------------- */

.rp-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}

.rp-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--os-edge);
  border-radius: 999px;
  background: transparent;
  font-family: var(--swarm-mono);
  font-size: 0.61rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--os-ink-3);
  transition: border-color var(--motion-base) var(--motion-ease),
              color var(--motion-base) var(--motion-ease),
              background var(--motion-base) var(--motion-ease);
}

.rp-step::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.rp-step[data-state="active"] {
  border-color: var(--os-accent-edge);
  background: var(--os-accent-wash);
  color: var(--os-accent);
}

.rp-step[data-state="active"]::before {
  opacity: 1;
  box-shadow: 0 0 10px var(--os-accent-glow);
}

.rp-step[data-state="done"] {
  color: var(--os-ink-2);
}

.rp-step[data-state="done"]::before {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Opening
   -------------------------------------------------------------------------- */

.rp-open {
  max-width: 720px;
}

.rp-eyebrow {
  margin: 0 0 12px;
  font-family: var(--swarm-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.rp-open h2 {
  margin: 0;
  font-size: clamp(1.7rem, 4.2vw, 2.5rem);
  font-weight: 250;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--os-ink);
}

.rp-lede {
  margin: 14px 0 0;
  font-size: clamp(0.92rem, 2vw, 1.02rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--os-ink-2);
}

.rp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 20px;
  border: 1px solid var(--os-edge-strong);
  border-radius: 999px;
  background: var(--os-plate);
  color: var(--os-ink);
  font-family: var(--swarm-sans);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--motion-fast) ease,
              background var(--motion-fast) ease,
              color var(--motion-fast) ease,
              transform var(--motion-fast) ease;
}

.rp-btn:hover:not(:disabled) {
  border-color: var(--os-accent-edge);
  background: var(--os-plate-2);
  transform: translateY(-1px);
}

.rp-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.rp-btn--primary {
  border-color: var(--os-accent-edge);
  background: var(--os-accent-wash);
  color: var(--os-accent);
}

.rp-btn--primary:hover:not(:disabled) {
  background: var(--os-accent-wash);
  border-color: var(--os-accent-glow);
}

.rp-btn--sm {
  min-height: 34px;
  padding: 7px 14px;
  font-size: 0.75rem;
}

/* Disclaimer — restated wherever a claim could be over-read. --------------- */

.rp-disclaimer {
  margin-top: 24px;
  padding: 12px 14px;
  border: 1px solid var(--os-edge);
  border-left: 2px solid var(--os-warn-edge);
  border-radius: 10px;
  background: var(--os-plate);
  font-size: 0.74rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--os-ink-2);
}

.rp-disclaimer strong {
  font-weight: 500;
  color: var(--os-ink);
}

/* --------------------------------------------------------------------------
   Demo index cards (/proof/demo/)
   --------------------------------------------------------------------------
   Two cards side by side: what exists, and the honest empty slot where the
   visitor's own workflow goes. The empty one is not a placeholder — it is the
   pitch, so it is styled as a peer of the live demo rather than as a ghost.
   -------------------------------------------------------------------------- */

.dx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.dx-demo {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px;
  border: 1px solid var(--os-edge);
  border-radius: 14px;
  background: var(--os-deck);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--motion-base) var(--motion-ease),
              background var(--motion-base) var(--motion-ease),
              transform var(--motion-base) var(--motion-ease);
}

a.dx-demo:hover {
  border-color: var(--os-accent-edge);
  background: var(--os-plate);
  transform: translateY(-2px);
}

.dx-demo--empty {
  border-style: dashed;
  border-color: var(--os-cool-edge);
  background: var(--os-cool-wash);
}

.dx-demo-role {
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.dx-demo-name {
  font-size: 1.08rem;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--os-ink);
}

.dx-demo-note {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--os-ink-2);
}

.dx-demo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--os-plate);
}

.dx-meta {
  font-family: var(--swarm-mono);
  font-size: 0.61rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.dx-demo-go {
  margin-left: auto;
  font-family: var(--swarm-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--os-accent);
}

/* --------------------------------------------------------------------------
   Principle list (/proof/)
   --------------------------------------------------------------------------
   Prose with a hard first clause. These are commitments about how the software
   behaves, so each one leads with the claim and follows with what it costs us
   to keep — not a feature bullet.
   -------------------------------------------------------------------------- */

.dx-principles {
  display: grid;
  gap: 1px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--os-edge);
}

.dx-principle {
  padding: 15px 2px;
  border-bottom: 1px solid var(--os-edge);
  font-size: 0.83rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--os-ink-2);
}

.dx-principle strong {
  display: block;
  margin-bottom: 3px;
  font-weight: 400;
  color: var(--os-ink);
}

/* --------------------------------------------------------------------------
   Moved-page notice (/demo/refinery-planner/)
   -------------------------------------------------------------------------- */

.dx-moved {
  max-width: 560px;
  margin: 8vh auto 0;
  padding: 26px;
  border: 1px solid var(--os-edge);
  border-radius: 16px;
  background: var(--os-deck);
  text-align: center;
}

.dx-moved h2 {
  margin: 10px 0 0;
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--os-ink);
}

.dx-moved p {
  margin: 12px 0 0;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--os-ink-2);
}

.dx-moved .rp-actions {
  justify-content: center;
}

.dx-moved code {
  font-family: var(--swarm-mono);
  font-size: 0.78rem;
  color: var(--os-accent);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Facility strip + workload table
   -------------------------------------------------------------------------- */

.rp-facility {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 16px;
  font-family: var(--swarm-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.rp-facility strong {
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--os-ink);
}

/* The shared metric strip uses auto-fill, which leaves a sixth empty cell at
   this pane width. Five metrics, five cells. */
.os-shell-demo .os-metrics {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.rp-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--os-edge);
  border-radius: 12px;
  background: var(--os-deck);
}

.rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.81rem;
}

.rp-table th {
  padding: 11px 14px;
  border-bottom: 1px solid var(--os-edge);
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  color: var(--os-ink-3);
  white-space: nowrap;
}

.rp-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--os-plate);
  font-weight: 300;
  line-height: 1.45;
  color: var(--os-ink-2);
  vertical-align: top;
}

.rp-table tr:last-child td {
  border-bottom: 0;
}

.rp-table .rp-req {
  font-weight: 400;
  color: var(--os-ink);
}

.rp-table .rp-tag {
  display: block;
  margin-top: 2px;
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.rp-blocker-ok {
  color: var(--os-accent);
}

/* --------------------------------------------------------------------------
   The run
   -------------------------------------------------------------------------- */

.rp-run {
  display: grid;
  gap: 1px;
  padding: 6px;
  border: 1px solid var(--os-edge);
  border-radius: 12px;
  background: var(--os-deck);
}

.rp-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 9px;
  opacity: 0.4;
  transition: opacity var(--motion-base) var(--motion-ease),
              background var(--motion-base) var(--motion-ease);
}

.rp-check[data-state="running"],
.rp-check[data-state="done"] {
  opacity: 1;
}

.rp-check[data-state="running"] {
  background: var(--os-plate);
}

.rp-check-num {
  font-family: var(--swarm-mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  color: var(--os-ink-3);
}

/* Name over note. Both are spans so they nest legally inside the row, which
   means the stacking has to be asked for explicitly. */
.rp-check-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--os-ink);
}

.rp-check-note {
  display: block;
  margin-top: 3px;
  font-family: var(--swarm-mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  color: var(--os-ink-3);
  min-height: 0.9em;
}

.rp-check-state {
  font-family: var(--swarm-mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--os-ink-3);
}

.rp-check[data-state="running"] .rp-check-state {
  color: var(--os-cool);
}

.rp-check[data-state="done"] .rp-check-state {
  color: var(--os-accent);
}

/* --------------------------------------------------------------------------
   Sorted buckets
   -------------------------------------------------------------------------- */

.rp-buckets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 12px;
}

.rp-bucket {
  display: flex;
  flex-direction: column;
  padding: 14px;
  border: 1px solid var(--os-edge);
  border-radius: 12px;
  background: var(--os-deck);
}

.rp-bucket[data-tone="ok"] { border-color: var(--os-accent-edge); }
.rp-bucket[data-tone="warn"] { border-color: var(--os-warn-edge); }
.rp-bucket[data-tone="halt"] { border-color: var(--os-halt-edge); }

.rp-bucket-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.rp-bucket-name {
  font-family: var(--swarm-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.rp-bucket-count {
  margin-left: auto;
  font-family: var(--swarm-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--os-ink-2);
}

.rp-bucket .os-rows {
  gap: 2px;
}

.rp-bucket .os-row {
  padding: 9px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Same reason as .rp-check-name: span children need the stacking spelled out.
   The shared row truncates its title to one line, which is right for a stream
   of events and wrong here — the tag number is the whole identity of a work
   request, and "V-115 valve inspe…" is not a request anyone can act on. */
.rp-bucket .os-row-title,
.rp-bucket .os-row-sub {
  display: block;
}

.rp-bucket .os-row-title {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.rp-bucket-empty {
  padding: 10px;
  font-size: 0.76rem;
  font-weight: 300;
  color: var(--os-ink-3);
}

.rp-needs {
  font-family: var(--swarm-mono);
  font-size: 0.61rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--os-warn);
}

.rp-needs[data-tone="done"] {
  color: var(--os-accent);
}

/* --------------------------------------------------------------------------
   Inspector: recommendation, evidence, decision
   -------------------------------------------------------------------------- */

.rp-recommend {
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid var(--os-cool-edge);
  border-radius: 11px;
  background: var(--os-cool-wash);
}

.rp-recommend-label {
  font-family: var(--swarm-mono);
  font-size: 0.59rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.rp-recommend p {
  margin: 7px 0 0;
  font-size: 0.83rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--os-ink);
}

.rp-decide {
  display: grid;
  gap: 7px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--os-edge);
}

.rp-decide .rp-btn {
  width: 100%;
}

.rp-decide-label {
  margin-bottom: 3px;
  font-family: var(--swarm-mono);
  font-size: 0.59rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.rp-decided {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border: 1px solid var(--os-accent-edge);
  border-radius: 10px;
  background: var(--os-accent-wash);
  font-family: var(--swarm-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--os-accent);
}

.rp-decided[data-tone="warn"] {
  border-color: var(--os-warn-edge);
  background: var(--os-warn-wash);
  color: var(--os-warn);
}

.rp-decided[data-tone="idle"] {
  border-color: var(--os-edge);
  background: var(--os-plate);
  color: var(--os-ink-2);
}

.rp-undo {
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--swarm-mono);
  font-size: 0.61rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--os-ink-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rp-undo:hover {
  color: var(--os-ink);
}

/* --------------------------------------------------------------------------
   Closeout
   -------------------------------------------------------------------------- */

.rp-verdict {
  padding: 18px 20px;
  border: 1px solid var(--os-accent-edge);
  border-radius: 14px;
  background: var(--os-accent-wash);
  margin-bottom: 22px;
}

.rp-verdict h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--os-ink);
}

.rp-verdict p {
  margin: 8px 0 0;
  font-size: 0.83rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--os-ink-2);
}

.rp-elapsed {
  font-family: var(--swarm-mono);
  font-variant-numeric: tabular-nums;
  color: var(--os-accent);
}

.rp-doctabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

.rp-doctab {
  padding: 7px 12px;
  border: 1px solid var(--os-edge);
  border-radius: 999px;
  background: transparent;
  font-family: var(--swarm-mono);
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--os-ink-3);
  cursor: pointer;
  transition: border-color var(--motion-fast) ease,
              background var(--motion-fast) ease,
              color var(--motion-fast) ease;
}

.rp-doctab:hover {
  border-color: var(--os-edge-strong);
  color: var(--os-ink);
}

.rp-doctab[aria-selected="true"] {
  border-color: var(--os-accent-edge);
  background: var(--os-accent-wash);
  color: var(--os-accent);
}

.rp-docwrap {
  position: relative;
  border: 1px solid var(--os-edge);
  border-radius: 12px;
  background: var(--os-deck);
}

.rp-doc {
  margin: 0;
  padding: 18px 18px 20px;
  overflow-x: auto;
  font-family: var(--swarm-mono);
  font-size: 0.73rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--os-ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.rp-doc-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--os-edge);
}

.rp-doc-name {
  font-family: var(--swarm-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--os-ink-3);
}

.rp-doc-bar .rp-btn {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Closing CTA — the actual sales move
   -------------------------------------------------------------------------- */

.rp-cta {
  margin-top: 28px;
  padding: 24px;
  border: 1px solid var(--os-cool-edge);
  border-radius: 16px;
  background: var(--os-cool-wash);
}

.rp-cta h3 {
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  font-weight: 250;
  letter-spacing: -0.02em;
  color: var(--os-ink);
}

.rp-cta p {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: 0.87rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--os-ink-2);
}

.rp-cta ul {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 0.81rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--os-ink-2);
}

/* --------------------------------------------------------------------------
   Narrow consoles
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .os-shell-demo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "bar"
      "canvas"
      "inspector";
    height: auto;
    min-height: 100dvh;
  }

  .os-shell-demo .os-pane {
    overflow: visible;
  }

  .os-shell-demo .os-inspector {
    border-left: 0;
    border-top: 1px solid var(--os-edge);
  }

  .os-shell-demo .os-inspector-body {
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .os-shell-demo .os-pane {
    padding: 18px 16px 34px;
  }

  /* The workload reads as five stacked records rather than a table nobody can
     see the right-hand column of. */
  .rp-table,
  .rp-table tbody,
  .rp-table tr,
  .rp-table td {
    display: block;
  }

  .rp-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .rp-table tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--os-plate);
  }

  .rp-table tr:last-child {
    border-bottom: 0;
  }

  .rp-table td {
    padding: 4px 0;
    border-bottom: 0;
  }

  .rp-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--swarm-mono);
    font-size: 0.57rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--os-ink-3);
  }

  .rp-table td:first-child::before {
    display: none;
  }

  .rp-actions .rp-btn {
    width: 100%;
  }

  .rp-cta {
    padding: 18px;
  }
}