/* Principles: sticky statement list + per-principle proof visual. Prefix: pr- */

.pr {
  padding: clamp(96px, 12vw, 160px) 0 0;
}

/* ---------- Header ---------- */
.pr-head {
  display: grid;
  gap: 20px;
  margin-bottom: clamp(56px, 8vw, 104px);
}
.pr-title {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 15ch;
}
.pr-lede {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--body);
  max-width: 46ch;
}
@media (min-width: 960px) {
  .pr-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: 64px; }
  .pr-lede { padding-bottom: 8px; }
}

/* ---------- Statements ---------- */
.pr-list { display: flex; flex-direction: column; }

.pr-item { padding-block: 8px 28px; }
.pr-num {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  margin-bottom: 18px;
}
/* Number chip, the app's fc-order-n: raised and muted; current = card fill, lime ink, lime ring. */
.pr-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--raised); color: var(--muted);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px transparent, inset 0 1px 0 rgb(255 255 255 / 0.04);
  transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.pr-item.is-active .pr-n {
  background: var(--card); color: var(--lime-ink);
  box-shadow: inset 0 0 0 1px var(--lime-line), inset 0 1px 0 rgb(255 255 255 / 0.05);
}
.pr-stmt {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 620;
  max-width: 17ch;
}
.pr-body {
  margin-top: 16px;
  font-size: 17px; line-height: 1.6;
  color: var(--body);
  max-width: 40ch;
}

/* ---------- Proof panels (shared) ---------- */
.pr-fig {
  margin: 0 0 clamp(72px, 14vw, 112px);
  display: flex; flex-direction: column; gap: 14px;
}
.pr-fig > :first-child {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--sidebar);
  background-image: radial-gradient(circle at 1px 1px, rgb(143 182 240 / 0.09) 1px, transparent 1.5px);
  background-size: 20px 20px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.045), var(--shadow-card);
  padding: clamp(16px, 3vw, 32px);
}
.pr-cap { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 52ch; }

.pr-logo {
  display: inline-block; width: 20px; height: 20px; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--pr-src) center / contain no-repeat;
          mask: var(--pr-src) center / contain no-repeat;
}
.pr-logo--claude     { --pr-src: url("../assets/ai/claude.svg");     color: #d97757; }
.pr-logo--openai     { --pr-src: url("../assets/ai/openai.svg");     color: var(--ink); }
.pr-logo--codex      { --pr-src: url("../assets/ai/codex.svg");      color: var(--ink); }
.pr-logo--claudecode { --pr-src: url("../assets/ai/claudecode.svg"); color: #d97757; }

.pr .mono { white-space: nowrap; }
.pr .ref { font-size: 12px; white-space: nowrap; }
.pr-av { width: 26px; height: 26px; font-size: 11.5px; }
.pr-av--blue { background-color: var(--id-blue); }
.pr-av--teal { background-color: var(--id-teal); }

/* Pointer-follow spotlight on cards and rows (JS sets --mx/--my). */
.pr-spot { position: relative; }
.pr-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--pr-spot, rgb(255 255 255 / 0.05)), transparent 70%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.pr-spot:hover::after { opacity: 1; }

/* Featured surfaces: a gradient hairline, brighter on top, settling into the line. */
.pr-task, .pr-record {
  border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(to bottom, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.03) 40%, var(--line)) border-box;
  box-shadow: var(--shadow-card);
}
.pr-av .pr-logo { width: 15px; height: 15px; color: #fff; }

.pr-live {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none;
  box-shadow: 0 0 0 3px var(--lime-soft);
}

/* Step reveals: only when JS is running, so a no-JS page shows everything. */
.pr-js .pr-step {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms var(--ease), transform 420ms var(--ease);
}
.pr-js .pr-fig.is-on .pr-step {
  opacity: 1; transform: none;
  transition-delay: var(--d, 0s);
}

/* ---------- 1. Chat ---------- */
.pr-fig > .pr-win {
  padding: 0;
  overflow: hidden;
}
.pr-win-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.02), transparent) var(--card);
}
.pr-win-name { font-size: 14px; font-weight: 600; color: var(--title); }
.pr-win-conn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted);
}
.pr-chat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: clamp(16px, 3vw, 28px);
}
.pr-msg { font-size: 15px; line-height: 1.55; max-width: 34ch; }
.pr-msg--user {
  align-self: flex-end;
  background: var(--raised); color: var(--ink);
  padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}
.pr-msg--ai { color: var(--body-strong); }

/* Tool call, as the app's row: mark, function, ref, state badge, chevron. */
.pr-call {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.025), transparent) var(--card);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.3);
  font-size: 13px;
  transition: border-color var(--dur-fast) var(--ease);
}
.pr-call:hover { border-color: var(--line-strong); }
.pr-call-mark { width: 20px; height: 20px; margin: -2px 0; }
.pr-call-fn { color: var(--ink); }
.pr-call-state { position: relative; display: inline-grid; margin-left: 4px; }
.pr-call-run, .pr-call-done { grid-area: 1 / 1; transition: opacity 200ms var(--ease); }
.pr-call-run::before { display: none; }
.pr-call-done { --wash: var(--success); opacity: 0; }
.pr-chev { color: var(--faint); flex: none; transition: color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease); }
.pr-call:hover .pr-chev { color: var(--muted); transform: translateX(2px); }
.pr-js .pr-fig.is-on .pr-call-run  { opacity: 0; transition-delay: 1.45s; }
.pr-js .pr-fig.is-on .pr-call-done { opacity: 1; transition-delay: 1.5s; }
.pr:not(.pr-js) .pr-call-run { opacity: 0; }
.pr:not(.pr-js) .pr-call-done { opacity: 1; }


.pr-task {
  width: min(100%, 340px);
  padding: 14px 16px;
  border-radius: var(--radius);
}
.pr-task-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-badge-prog { --wash: var(--lime); }
.pr-task:is(:hover, :focus-within) .ref,
.pr-rec:is(:hover, :focus-within) .ref { background: var(--lime-soft); box-shadow: -4px 0 0 var(--lime-soft), 4px 0 0 var(--lime-soft); color: var(--lime-ink); }
.pr-task-title { margin-top: 8px; font-size: 15.5px; font-weight: 600; color: var(--title); }
.pr-task-meta {
  margin-top: 10px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
}
.pr-task-meta .pr-av { width: 20px; height: 20px; font-size: 10px; }

.pr-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--link);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.pr-link span { transition: transform var(--dur-base) var(--ease); }
.pr-link:hover { text-decoration-color: var(--muted); }
.pr-link:hover span { transform: translateX(3px); }

/* ---------- 2. Diagram ---------- */
.pr-dia { display: flex; flex-direction: column; }
.pr-dia-label { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.pr-tools {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.pr-tool {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.pr-tile {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.035), transparent 60%) var(--card);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.3);
  transition: border-color var(--dur-fast) var(--ease);
}
.pr-tool:hover .pr-tile { border-color: var(--line-strong); }
.pr-tile .pr-logo { width: 24px; height: 24px; }
.pr-tool-name { font-size: 13px; color: var(--body-strong); line-height: 1.25; min-height: 2.5em; }
.pr-wire {
  position: relative; width: 1px; height: 44px; overflow: hidden;
  background-image: linear-gradient(var(--line-strong) 50%, transparent 50%);
  background-size: 1px 6px;
}
.pr-packet {
  position: absolute; left: -2px; top: 0;
  width: 5px; height: 10px; border-radius: 3px;
  background: var(--info-ink);
  opacity: 0;
}
.pr-js .pr-fig.is-on .pr-packet { animation: pr-down 2.4s var(--ease-inout) infinite; }
.pr-js .pr-fig.is-on .pr-wire--up .pr-packet { animation-name: pr-up; animation-delay: .6s; }
.pr-tool:nth-child(3) .pr-packet { animation-delay: 1.2s !important; }

.pr-record {
  border-radius: var(--radius);
  padding: 16px 18px 14px;
}
.pr-record-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pr-record-head img { width: 26px; height: 26px; margin: -3px 0; }
.pr-record-name { font-size: 15px; font-weight: 600; color: var(--title); }
.pr-record-role { font-size: 13px; color: var(--muted); }
.pr-rows { list-style: none; margin: 0; padding: 4px 0 0; }
.pr-rec {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.pr-k { color: var(--muted); font-size: 13px; }
.pr-v { color: var(--body-strong); min-width: 0; }
.pr-v .ref { margin-right: 6px; }
.pr-nomodel {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; font-size: 13px; color: var(--muted);
}
.pr-slot {
  width: 22px; height: 14px; border-radius: 4px;
  border: 1px dashed var(--line-strong);
}

/* ---------- 3. Activity log ---------- */
.pr-log-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pr-log-title { font-size: 14px; font-weight: 600; color: var(--title); }
.pr-log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 10px 12px;
  border: 1px solid transparent; border-radius: 10px;
  background-color: var(--card);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
  font-size: 14px; line-height: 1.5; color: var(--body);
}
.pr-row-text { min-width: 0; padding-top: 2px; }
.pr-row-text strong { color: var(--title); font-weight: 600; }
.pr-row-text strong span { color: var(--muted); font-weight: 500; }
.pr-row-text .mono { font-size: 12.5px; color: var(--ink); }
.pr-time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 3px; }
.pr-row--denied { --pr-spot: rgb(214 69 69 / 0.08); }
.pr-deny {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 6px; font-size: 13px; color: var(--body);
}
.pr-deny .pill { gap: 5px; padding-left: 6px; }
.pr-deny svg { flex: none; width: 13px; height: 13px; }
.pr-js .pr-fig.is-on .pr-row--denied { animation: pr-nudge 420ms var(--ease) both; animation-delay: calc(var(--d) + 180ms); }

.pr-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 16px; font-size: 13px; color: var(--muted);
}
.pr-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.pr-key { width: 12px; height: 12px; border: 1.5px solid var(--muted); }
.pr-key--person { border-radius: 50%; }
.pr-key--agent { border-radius: 3px; }

/* ---------- Desktop: sticky statements, one proof at a time ---------- */
@media (min-width: 960px) {
  .pr-js .pr-list {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(48px, 6vw, 104px);
  }
  .pr-js .pr-item {
    grid-column: 1;
    min-height: 52vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: 40px;
  }
  .pr-js .pr-item:nth-of-type(1) { grid-row: 1; }
  .pr-js .pr-item:nth-of-type(2) { grid-row: 2; }
  .pr-js .pr-item:nth-of-type(3) { grid-row: 3; }
  .pr-js .pr-list::after { content: ""; grid-column: 1; grid-row: 4; height: 16vh; }
  /* The current statement wears the app's active grammar: lime tint from the left, tinted hairline. */
  .pr-js .pr-card {
    position: relative; isolation: isolate;
    margin-inline: -24px; padding: 22px 24px 26px;
    border-radius: var(--radius-lg);
  }
  .pr-js .pr-card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background-image: linear-gradient(to right, rgb(111 181 65 / 0.07), rgb(111 181 65 / 0) 70%);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--lime) 18%, var(--line)), inset 0 1px 0 rgb(255 255 255 / 0.035);
    opacity: 0; transition: opacity var(--dur-slow) var(--ease);
  }
  .pr-js .pr-item.is-active .pr-card::before { opacity: 1; }
  .pr-js .pr-item .pr-stmt,
  .pr-js .pr-item .pr-body { color: var(--muted); transition: color 320ms var(--ease); }
  .pr-js .pr-item.is-active .pr-stmt { color: var(--title); }
  .pr-js .pr-item.is-active .pr-body { color: var(--body); }

  .pr-js .pr-fig {
    grid-column: 2; grid-row: 1 / span 4;
    align-self: start;
    position: sticky; top: max(88px, calc(50vh - 260px));
    margin: 0;
    min-height: 520px;
    justify-content: center;
    opacity: 0; transform: translateY(20px) scale(.985);
    transition: opacity 360ms var(--ease), transform 560ms var(--ease);
    pointer-events: none;
  }
  .pr-js .pr-fig.is-on { opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------- Keyframes ---------- */
@keyframes pr-down {
  0%   { transform: translateY(-12px); opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  85%, 100% { transform: translateY(46px); opacity: 0; }
}
@keyframes pr-up {
  0%   { transform: translateY(46px); opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  85%, 100% { transform: translateY(-12px); opacity: 0; }
}
@keyframes pr-nudge {
  0%, 100% { transform: none; }
  25% { transform: translateX(-3px); }
  60% { transform: translateX(2px); }
}

/* Pause loops offscreen (base.js sets data-inview) */
.pr:not([data-inview]) .pr-packet,
.pr:not([data-inview]) .live-dot,
.pr.pr-paused .pr-packet,
.pr.pr-paused .live-dot { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .pr-js .pr-step,
  .pr-js .pr-fig.is-on .pr-step,
  .pr-js .pr-fig.is-on .pr-call-run,
  .pr-js .pr-fig.is-on .pr-call-done { transition-delay: 0s !important; }
  .pr-packet, .live-dot, .pr-row--denied { animation: none !important; }
  .pr-packet { display: none; }
}

@media (max-width: 480px) {
  .pr-tile { width: 42px; height: 42px; }
  .pr-tool-name { font-size: 12px; }
  .pr-rec { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
  .pr-row { grid-template-columns: 26px minmax(0, 1fr); }
  .pr-time { display: none; }
  .pr-win-conn { font-size: 12px; }
}