/*
 * PairRail UI v2 shared shell: <pr-logo>, <pr-nav>, <pr-footer>, buttons, container.
 * Requires /ui/tokens.css. Markup is rendered by /ui/components.js (light DOM, no shadow root).
 *
 * v2 page <head>:
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 *   <link rel="stylesheet" href="/ui/tokens.css">
 *   <link rel="stylesheet" href="/ui/components.css">
 *   <script src="/ui/components.js" defer></script>   (before /app.js, so the nav IDs exist when app.js binds)
 */

/* —— Primitives —— */
.pr-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter-mobile);
}
@media (min-width: 768px) {
  .pr-container { padding-inline: var(--layout-gutter); }
}

.pr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pr-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height-marketing);
  padding: 0 var(--control-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  line-height: var(--type-button-leading);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--motion-ui) var(--motion-ease-out),
    border-color var(--motion-ui) var(--motion-ease-out),
    color var(--motion-ui) var(--motion-ease-out),
    transform var(--motion-ui) var(--motion-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.pr-button:active { transform: scale(0.97); }
.pr-button[aria-busy="true"]:active { transform: none; }
.pr-button--app { height: var(--control-height-app); }
.pr-button--primary { background: var(--color-rail); color: var(--color-on-rail); }
@media (hover: hover) and (pointer: fine) {
  .pr-button--primary:hover { background: var(--color-rail-hover); }
    }
.pr-button--secondary {
  background: var(--color-canvas);
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}
.pr-button--quiet { background: transparent; color: var(--color-ink-secondary); padding-inline: var(--space-3); }
.pr-button:disabled,
.pr-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
/* Loading is not unavailable: a busy button keeps full strength. */
.pr-button[aria-busy="true"][aria-disabled="true"] { opacity: 1; cursor: progress; }

:where(.pr-logo, .pr-nav, .pr-footer, .pr-button) :focus-visible,
.pr-button:focus-visible,
.pr-logo:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* —— <pr-logo> —— */
pr-logo { display: inline-flex; }
.pr-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--logo-gap);
  color: var(--color-ink);
  text-decoration: none;
  border-radius: var(--radius-mark-footer);
}
.pr-logo__mark {
  display: block;
  flex: none;
  width: var(--logo-mark-nav);
  height: var(--logo-mark-nav);
  border-radius: var(--radius-mark-nav);
}
.pr-logo__word {
  font-family: var(--font-sans);
  font-size: var(--type-wordmark-nav-size);
  font-weight: var(--type-wordmark-weight);
  letter-spacing: var(--type-wordmark-tracking);
  line-height: 1;
}
.pr-logo--footer .pr-logo__mark {
  width: var(--logo-mark-footer);
  height: var(--logo-mark-footer);
  border-radius: var(--radius-mark-footer);
}
.pr-logo--footer .pr-logo__word { font-size: var(--type-wordmark-footer-size); }

/* —— <pr-nav> —— */
pr-nav { display: block; }
pr-nav:not(:defined) {
  box-sizing: border-box;
  min-height: var(--layout-nav-height);
  border-bottom: var(--hairline);
  background: var(--color-canvas);
}
.pr-nav {
  background: var(--color-canvas);
  border-bottom: var(--hairline);
  font-family: var(--font-sans);
}
.pr-nav__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-6);
}
.pr-nav__brand {
  display: flex;
  align-items: center;
  height: calc(var(--layout-nav-height) - 1px);
}
.pr-nav__panel {
  display: flex;
  flex: 1;
  align-items: center;
  column-gap: var(--space-6);
}
.pr-nav__panel > nav { margin-inline: auto; }
.pr-nav__links {
  display: flex;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pr-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-ink-secondary);
  font-size: var(--type-small-size);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-control);
  transition: color var(--motion-ui) var(--motion-ease-out);
}
.pr-nav__link[aria-current="page"] { color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) { .pr-nav__link:hover { color: var(--color-ink); } }
.pr-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}
.pr-nav__actions { display: flex; align-items: center; }
.pr-nav__auth:not([hidden]) { display: flex; align-items: center; gap: var(--space-3); }

.pr-nav__plan {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--color-pill-bg);
  color: var(--color-pill-text);
  font-size: var(--type-caption-size);
  font-weight: 500;
}
.pr-nav__plan[hidden] { display: none; }

.pr-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--color-sunken);
  color: var(--color-ink-muted);
}
.pr-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pr-avatar img[hidden] { display: none; }

.pr-nav__toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  color: var(--color-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pr-nav__toggle svg { display: block; margin: auto; }
.pr-nav__toggle .pr-icon-close { display: none; }
.pr-nav[data-open] .pr-nav__toggle .pr-icon-menu { display: none; }
.pr-nav[data-open] .pr-nav__toggle .pr-icon-close { display: block; }

@media (max-width: 1023.98px) {
  .pr-nav__toggle { display: block; }
  .pr-nav__panel {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-2) 0 var(--space-5);
    border-top: var(--hairline);
  }
  .pr-nav[data-open] .pr-nav__panel {
    display: flex;
    /* Opens from the toggle above it; closing is instant (exit faster than enter). */
    transition:
      opacity 180ms var(--motion-ease-out),
      transform 180ms var(--motion-ease-out);
  }
  @starting-style {
    .pr-nav[data-open] .pr-nav__panel { opacity: 0; transform: translateY(-4px); }
  }
  .pr-nav__panel > nav { margin-inline: 0; }
  .pr-nav__links { flex-direction: column; gap: 0; }
  .pr-nav__link {
    display: flex;
    min-height: 48px;
    font-size: var(--type-body-size);
    border-bottom: var(--hairline);
    border-radius: 0;
  }
  .pr-nav__link[aria-current="page"] { text-decoration: none; font-weight: 600; }
  .pr-nav__actions { padding-top: var(--space-5); }
  .pr-nav__auth:not([hidden]) { flex-wrap: wrap; width: 100%; }
  .pr-nav__auth .pr-button { flex: 1; height: var(--control-height-marketing); }
}

/* —— <pr-theme-toggle> (DESIGN.md "Theme") ——
 * Three segments in a sunken track; the chosen one is a raised chip. Neutral only: no green. */
pr-theme-toggle { display: inline-flex; flex: none; }
pr-theme-toggle:not(:defined) { width: 92px; height: 32px; }
.pr-theme {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-sunken);
}
.pr-theme__opt {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: background-color var(--motion-ui) ease, color var(--motion-ui) ease, box-shadow var(--motion-ui) ease;
}
.pr-theme__opt svg { display: block; }
.pr-theme__opt[aria-checked="true"] {
  background: var(--color-raised);
  color: var(--color-ink);
  box-shadow: var(--shadow-chip), 0 0 0 1px var(--color-border);
}
@media (hover: hover) and (pointer: fine) {
  .pr-theme__opt[aria-checked="false"]:hover { color: var(--color-ink); }
}
.pr-theme__opt:focus-visible { outline: var(--focus-ring); outline-offset: 1px; position: relative; z-index: 1; }
.pr-theme__opt:active { transform: scale(0.94); }
.pr-nav__actions pr-theme-toggle { margin-right: var(--space-4); }
@media (max-width: 1023.98px) {
  .pr-nav__actions { flex-wrap: wrap; gap: var(--space-4); }
  .pr-nav__actions pr-theme-toggle { margin-right: 0; order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-theme__opt { transition: none; }
  .pr-theme__opt:active { transform: none; }
}

/* —— Nav "Book a demo" text link (second entry point to the demo section) —— */
.pr-nav__demo {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-right: var(--space-4);
  color: var(--color-ink-secondary);
  font-size: var(--type-small-size);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-mark-footer);
  transition: color var(--motion-ui) var(--motion-ease-out);
}
@media (hover: hover) and (pointer: fine) { .pr-nav__demo:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; } }
.pr-nav__demo:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
@media (max-width: 1023.98px) {
  .pr-nav__demo { order: 1; margin-right: 0; }
}

/* —— <pr-footer> (DESIGN.md v3.1 "Footer") ——
 * Thin rule grid, mono-caps column labels, base row with copyright, status and theme. */
pr-footer { display: block; }
pr-footer:not(:defined) { min-height: 320px; }
.pr-footer {
  border-top: var(--hairline);
  background: var(--color-canvas);
  font-family: var(--font-sans);
  padding-block: 0 var(--space-6);
}
.pr-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: var(--hairline);
}
.pr-footer__col {
  padding: var(--space-6) var(--space-5) var(--space-7);
  border-left: var(--hairline);
}
.pr-footer__col:first-child { border-left: 0; padding-left: 0; }
.pr-footer__label {
  margin: 0 0 var(--space-4);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pr-footer__list,
.pr-footer__more-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pr-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-ink-secondary);
  font-size: var(--type-small-size);
  text-decoration: none;
  text-underline-offset: 4px;
  border-radius: var(--radius-mark-footer);
  transition: color var(--motion-ui) var(--motion-ease-out);
}
.pr-footer__link[aria-current="page"] { color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) { .pr-footer__link:hover { color: var(--color-ink); text-decoration: underline; } }
.pr-footer__more { padding-block: var(--space-4); border-bottom: var(--hairline); }
.pr-footer__more-links { flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-5); }
.pr-footer__link--quiet { min-height: 28px; color: var(--color-ink-muted); font-size: var(--type-caption-size); }
.pr-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-5);
}
.pr-footer__brand { display: flex; align-items: center; gap: var(--space-4); }
.pr-footer__copy {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--type-caption-size);
  font-variant-numeric: var(--numeric-prices);
}
.pr-footer__meta { display: flex; align-items: center; gap: var(--space-5); }
.pr-footer__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-ink-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.02em;
}
.pr-footer__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ink-muted);
}
.pr-footer__status[data-state="live"] .pr-footer__dot { background: var(--color-live-solid); box-shadow: 0 0 0 3px var(--color-live-tint); }
.pr-footer__status[data-state="degraded"] .pr-footer__dot { background: var(--color-approval-solid); box-shadow: 0 0 0 3px var(--color-approval-tint); }
.pr-footer__status[data-state="down"] .pr-footer__dot { background: var(--color-blocked-solid); box-shadow: 0 0 0 3px var(--color-blocked-tint); }

@media (max-width: 767.98px) {
  .pr-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-footer__col { padding: var(--space-5) var(--space-4) var(--space-5); }
  .pr-footer__col:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pr-footer__col:nth-child(n + 3) { border-top: var(--hairline); }
}
@media (max-width: 359.98px) {
  .pr-footer__grid { grid-template-columns: 1fr; }
  .pr-footer__col { border-left: 0; padding-left: 0; }
  .pr-footer__col + .pr-footer__col { border-top: var(--hairline); }
  .pr-footer__meta { width: 100%; justify-content: space-between; }
}

/* —— <pr-quote-band> (DESIGN.md v3.1 "Signature animation: price to quote") —— */
pr-quote-band {
  position: relative;
  display: block;
  height: 120px;
  background: var(--band-bg);
  border-top: var(--hairline);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.pr-quote-band__canvas { display: block; width: 100%; height: 100%; }
pr-quote-band:focus { outline: none; }
pr-quote-band:focus-visible { box-shadow: inset 0 0 0 2px var(--color-ink); }

/* —— <pr-book-demo> (DESIGN.md v3.1 "Book a demo section") —— */
pr-book-demo { display: block; }
pr-book-demo:not(:defined) { min-height: 420px; background: var(--demo-bg); }
.pr-demo {
  background: var(--demo-bg);
  border-top: 1px solid var(--color-live-border);
  border-bottom: 1px solid var(--color-live-border);
  padding-block: clamp(var(--space-8), 9vw, 120px);
  font-family: var(--font-sans);
  scroll-margin-top: var(--space-5);
}
.pr-demo__inner { max-width: 760px; text-align: center; }
.pr-demo__eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--color-live-text);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: 500;
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}
.pr-demo__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-tracking);
  text-wrap: balance;
}
.pr-demo__sub {
  max-width: 52ch;
  margin: var(--space-4) auto 0;
  color: var(--color-ink-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  text-wrap: pretty;
}
.pr-demo__form {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 0 var(--space-3);
  align-items: start;
  margin-top: var(--space-7);
  text-align: left;
}
.pr-demo__field { display: grid; gap: var(--space-2); min-width: 0; }
.pr-demo__label { color: var(--color-ink); font-size: var(--type-small-size); font-weight: 500; line-height: 20px; }
.pr-demo__optional { color: var(--color-ink-muted); font-weight: 400; }
.pr-demo__input {
  box-sizing: border-box;
  width: 100%;
  height: var(--control-height-marketing);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  transition: border-color var(--motion-ui) var(--motion-ease-out);
}
.pr-demo__input::placeholder { color: var(--color-ink-muted); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .pr-demo__input:hover { border-color: var(--color-ink-secondary); } }
.pr-demo__input:focus-visible { outline: var(--focus-ring); outline-offset: 1px; border-color: var(--color-ink); }
.pr-demo__input[aria-invalid="true"] { border-color: var(--color-blocked-solid); }
.pr-demo__msg,
.pr-demo__preview {
  min-height: 20px;
  margin: 0;
  font-size: var(--type-caption-size);
  line-height: 20px;
}
.pr-demo__msg[data-kind="error"] { color: var(--color-blocked-text); }
.pr-demo__msg[data-kind="warn"] { color: var(--color-approval-text); }
.pr-demo__preview { color: var(--color-live-text); font-family: var(--font-mono); font-size: 12px; opacity: 0; transition: opacity var(--motion-ui) var(--motion-ease-out); overflow-wrap: anywhere; }
.pr-demo__preview[data-on] { opacity: 1; }
.pr-demo__actions { padding-top: 28px; } /* label line (20px) + gap (8px): button sits on the input row */
.pr-demo__submit { min-width: 148px; }
.pr-demo__submit[aria-disabled="true"] { cursor: progress; opacity: 0.85; }
.pr-demo__submit:active { transform: scale(0.97); }
.pr-demo__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; left: -9999px; }
.pr-demo__error {
  grid-column: 1 / -1;
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-blocked-border);
  border-radius: var(--radius-control);
  background: var(--color-blocked-tint);
  color: var(--color-blocked-text);
  font-size: var(--type-small-size);
  line-height: 22px;
}
.pr-demo__done {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-live-border);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-size: var(--type-body-size);
  outline: none;
}
.pr-demo__done:not([hidden]) { animation: pr-demo-in 240ms var(--motion-ease-out); }
.pr-demo__done-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-live-tint); color: var(--color-live-text); }
@keyframes pr-demo-in { from { opacity: 0; transform: translateY(4px); } }
.pr-demo__fine {
  margin: var(--space-5) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--type-caption-size);
  line-height: 20px;
}
.pr-demo__fine a { color: var(--color-ink-secondary); text-underline-offset: 3px; }
.pr-demo__fine a:hover { color: var(--color-ink); }
.pr-demo a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: 2px; }

@media (max-width: 767.98px) {
  .pr-demo__form { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .pr-demo__actions { padding-top: var(--space-2); }
  .pr-demo__submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-demo__done:not([hidden]) { animation: none; }
  .pr-demo__preview, .pr-nav__demo { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-nav[data-open] .pr-nav__panel { transition: opacity 180ms linear; }
  @starting-style {
    .pr-nav[data-open] .pr-nav__panel { transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .pr-button,
  .pr-nav__link,
  .pr-footer__link { transition: none; }
}

/* ==========================================================================
   Standalone v2 pages (<body class="pr-page">). The homepage shares index.html with v1
   and scopes the same base to #public-landing in home.css instead.
   ========================================================================== */
body.pr-page {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink-secondary);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:where(body.pr-page) :where(h1, h2, h3, p, figure, dl, dd) { margin: 0; }
:where(body.pr-page) :where(ol, ul) { margin: 0; padding: 0; list-style: none; }
:where(body.pr-page) :where(button) { font: inherit; }
body.pr-page ::selection { background: var(--color-border); color: var(--color-ink); }

.pr-skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-ink);
  color: var(--color-canvas);
  font-weight: 500;
  text-decoration: none;
}
.pr-skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   Touch: feel native on phones (both standalone pages and the homepage landing)
   ========================================================================== */
html:has(body.pr-page),
html:has(#public-landing.pr-landing:not([hidden])) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.pr-page,
.pr-landing { -webkit-tap-highlight-color: transparent; }
:where(.pr-page, .pr-landing) :where(a, button, [role="button"], summary) { touch-action: manipulation; }
/* Controls are not content: no text selection or callout on long-press. */
:where(.pr-page, .pr-landing) :where(button, .pr-button, .pr-nav__toggle) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Links have no :hover on touch; give them a press state instead. */
:where(.pr-nav__link, .pr-footer__link, .pr-text-link):active { color: var(--color-ink); opacity: 0.7; }
/* Horizontal scrollers (code, wide tables) must not trigger browser back-swipe at their edges. */
.pr-code pre,
.pr-table-wrap { overscroll-behavior-x: contain; }

/* ==========================================================================
   Type & layout primitives shared by v2 pages
   ========================================================================== */
.pr-eyebrow {
  margin: 0 0 var(--space-5);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}
.pr-band .pr-eyebrow { color: var(--color-dark-muted); }
.pr-display,
.pr-h1,
.pr-h2,
.pr-h3 { margin: 0; color: var(--color-ink); text-wrap: balance; }
.pr-display {
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
}
.pr-h1 {
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-leading);
  letter-spacing: var(--type-h1-tracking);
}
.pr-h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-tracking);
}
.pr-h3 {
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--type-h3-tracking);
}
.pr-lead {
  margin: 0;
  max-width: 34em;
  color: var(--color-ink-secondary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-leading);
}
.pr-caption {
  margin: var(--space-4) 0 0;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  line-height: 20px;
}
.pr-text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--control-height-marketing);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  text-decoration: none;
  border-radius: var(--radius-control);
}
.pr-text-link span { transition: transform var(--motion-ui) var(--motion-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pr-text-link:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .pr-text-link:hover span { transform: translateX(3px); }
}
.pr-text-link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

.pr-section { padding-block: clamp(var(--layout-section-y-mobile), 10vw, var(--layout-section-y)); }
.pr-band {
  padding-block: clamp(var(--layout-section-y-mobile), 10vw, var(--layout-section-y));
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
}
.pr-band .pr-h2,
.pr-band .pr-h3 { color: var(--color-dark-text-strong); }
.pr-band .pr-lead { color: var(--color-dark-text); }
.pr-band .pr-text-link { color: var(--color-dark-text-strong); }
.pr-band :focus-visible { outline-color: var(--color-dark-text-strong); }

/* ==========================================================================
   <pr-approval-badge>  HumanApprovalBadge
   Amber: a person decides (DESIGN.md v3, rule 5). Copy is authored in the element:
   <pr-approval-badge>Human approval above $5,000</pr-approval-badge>
   ========================================================================== */
pr-approval-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--color-approval-border);
  border-radius: var(--radius-pill);
  background: var(--color-approval-tint);
  color: var(--color-approval-text);
  font-family: var(--font-mono);
  font-size: var(--type-badge-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 240ms var(--motion-ease-out), border-color 240ms var(--motion-ease-out), color 240ms var(--motion-ease-out);
}
pr-approval-badge::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: var(--icon-approval) center / contain no-repeat; mask: var(--icon-approval) center / contain no-repeat; }
/* Above the threshold the decision is pending: the badge becomes the viewport's strong accent. */
.pr-quote[data-approval="required"] pr-approval-badge { border-color: var(--color-approval-solid); background: var(--color-approval-solid); color: var(--color-approval-on); }

/* ==========================================================================
   <pr-agent-quote>  AgentQuoteCard (renders from a JSON child)
   ========================================================================== */
/* A size container, so the card adapts to its column (the 5/7 demo split, a sidebar), not the viewport. */
pr-agent-quote { display: block; min-width: 0; container-type: inline-size; }
pr-agent-quote:not(:defined) { min-height: 420px; }
.pr-quote {
  --quote-pad: 28px;
  position: relative;
  padding: var(--quote-pad);
  border: var(--hairline);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
  box-shadow: var(--shadow-card);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--type-mono-size);
  line-height: var(--type-mono-leading);
}
.pr-quote > header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.pr-quote > header > div { min-width: 0; }
.pr-quote__title { margin: 0; color: var(--color-ink); font-family: var(--font-sans); font-size: var(--type-body-size); font-weight: 600; line-height: var(--type-body-leading); }
.pr-quote__meta { margin: 2px 0 0; color: var(--color-ink-muted); font-size: var(--type-caption-size); line-height: 20px; font-variant-numeric: tabular-nums; }
.pr-quote dl { margin: 0; }
.pr-quote__lines { margin-top: var(--space-4); padding-block: 10px; border-block: var(--hairline); }
.pr-quote__terms { padding-block: 10px; border-bottom: var(--hairline); }
.pr-quote__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: 4px; }
.pr-quote__row dt { min-width: 0; overflow-wrap: anywhere; }
.pr-quote__part { white-space: nowrap; }
.pr-quote__missing { color: var(--color-ink-muted); }
.pr-quote__total .pr-quote__missing { font-size: var(--type-mono-size); font-weight: 400; }
.pr-quote__none { margin: var(--space-4) 0 0; padding-block: var(--space-4); border-block: var(--hairline); color: var(--color-ink-muted); font-family: var(--font-sans); font-size: var(--type-note-size); }
/* Long term values (compound rules) stack label-over-value at any width. */
.pr-quote__terms .pr-quote__row--stack { flex-direction: column; align-items: flex-start; gap: 0; }
.pr-quote__terms .pr-quote__row--stack dd { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.pr-quote__row dd { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: var(--numeric-prices); }
.pr-quote__terms dt { color: var(--color-ink-muted); white-space: nowrap; }
.pr-quote__terms dd { color: var(--color-ink-secondary); white-space: normal; }
.pr-quote__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--space-4); }
.pr-quote__total strong { font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: var(--numeric-prices); }
.pr-quote__approval { display: flex; align-items: center; margin-top: var(--space-4); }
/* The rail and the badge it enters are one unit: they never wrap apart. */
.pr-quote__gate { display: flex; flex: none; align-items: center; max-width: 100%; }
/* Rail motif place (3): a short rail entering the approval badge from the card edge. */
.pr-quote__rail {
  flex: none;
  width: calc(var(--quote-pad) + 20px);
  height: var(--rail-width);
  margin-left: calc(-1 * var(--quote-pad) - 1px);
  border-radius: 0 1px 1px 0;
  background: var(--color-rail);
  transform-origin: left center;
}
/* Footed variant (approvalNote): the approval row becomes a subtle strip across the card foot. */
.pr-quote--footed .pr-quote__approval {
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-6) calc(-1 * var(--quote-pad)) calc(-1 * var(--quote-pad));
  padding: var(--space-4) var(--quote-pad);
  border-top: var(--hairline);
  border-radius: 0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px);
  background: var(--color-subtle);
}
.pr-quote--footed .pr-quote__rail { margin-left: calc(-1 * var(--quote-pad)); width: calc(var(--quote-pad) + 4px); }
.pr-quote__note {
  margin: 0;
  flex: 1 1 16em;
  color: var(--color-ink-secondary);
  font-family: var(--font-sans);
  font-size: var(--type-note-size);
  line-height: var(--type-note-leading);
  text-wrap: pretty;
}
.pr-quote[data-approval="required"] .pr-quote__note { color: var(--color-ink); font-weight: 500; }
.pr-quote__total-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
/* Neutral, never green: the badge carries the green; this marks the total that waits on a person. */
.pr-quote__routed { border: 1px solid var(--color-approval-border); background: var(--color-approval-tint); color: var(--color-approval-text); font-family: var(--font-sans); }
/* Approved total: the number itself reports the state (live text, plus the word in the label). */
.pr-quote__total strong { transition: color 300ms var(--motion-ease-out); }
.pr-quote[data-state="approved"] .pr-quote__total strong { color: var(--color-live-text); }
.pr-quote__within { animation: pr-chip-in 240ms var(--motion-ease-out); }
@keyframes pr-chip-in { from { opacity: 0; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
  .pr-quote__total strong, .pr-chip, pr-approval-badge { transition: none; }
  .pr-quote__within { animation: none; }
}
@container (max-width: 440px) {
  .pr-quote { --quote-pad: 20px; font-size: 14px; }
  .pr-quote__total strong { font-size: 24px; }
  /* Narrow card: label above value, so machine values never wrap ragged-right. */
  .pr-quote__terms .pr-quote__row { flex-direction: column; align-items: flex-start; gap: 0; }
  .pr-quote__terms dd { text-align: left; white-space: normal; overflow-wrap: anywhere; }
}

/* ==========================================================================
   <pr-code-panel>  CodePanel (one dark surface per page; theme="light" otherwise)
   ========================================================================== */
pr-code-panel { display: block; }
.pr-code {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-dark-hairline);
  border-radius: var(--radius-card);
  background: var(--color-code-bg);
  color: var(--color-dark-text);
}
.pr-band .pr-code { background: rgba(255, 255, 255, 0.02); }
.pr-code__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: 14px var(--space-5);
  border-bottom: 1px solid var(--color-dark-hairline);
  color: var(--color-dark-muted);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  line-height: 20px;
}
.pr-code__bar span { white-space: nowrap; }
.pr-code pre {
  margin: 0;
  padding: var(--space-5);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--type-code-size);
  line-height: 22px;
  tab-size: 2;
}
.pr-code pre:focus-visible { outline: var(--focus-ring); outline-offset: -4px; }
.pr-code .c { color: var(--color-dark-muted); }  /* comment */
.pr-code .k { color: var(--color-dark-text-strong); } /* emphasized line */
pr-code-panel[theme="light"] .pr-code { border-color: var(--color-border); background: var(--color-subtle); color: var(--color-ink); }
pr-code-panel[theme="light"] .pr-code__bar { border-color: var(--color-border); color: var(--color-ink-muted); }
pr-code-panel[theme="light"] .pr-code .c { color: var(--color-ink-muted); }
pr-code-panel[theme="light"] .pr-code .k { color: var(--color-ink); font-weight: 500; }

/* ==========================================================================
   <pr-step-list>  StepList: authored <ol>, numbered 01..; rail motif place (2)
   ========================================================================== */
pr-step-list { display: block; }
pr-step-list > ol {
  --node: 12px;
  position: relative;
  display: grid;
  gap: var(--space-7);
  margin: 0;
  padding: 0 0 0 var(--space-7);
  list-style: none;
  counter-reset: pr-step;
}
pr-step-list > ol::before,
pr-step-list > ol::after {
  content: "";
  position: absolute;
  left: calc(var(--node) / 2 - 1px);
  top: 6px;
  bottom: 0;
  width: var(--rail-width);
  background: var(--color-rail);
  transform-origin: top center;
}
pr-step-list > ol::before { background: var(--color-border); }
pr-step-list > ol > li { position: relative; counter-increment: pr-step; }
pr-step-list > ol > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-7));
  top: 6px;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  border: var(--rail-width) solid var(--color-rail);
  border-radius: 50%;
  background: var(--color-canvas);
  box-sizing: border-box;
}
pr-step-list > ol > li::after {
  content: counter(pr-step, decimal-leading-zero);
  order: -1;
  display: block;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  font-variant-numeric: tabular-nums;
}
pr-step-list > ol > li { display: flex; flex-direction: column; }
pr-step-list h3 {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-ink);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--type-h3-tracking);
}
pr-step-list p { margin: 0; max-width: 30em; }
@media (min-width: 768px) {
  pr-step-list > ol { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding: var(--space-7) 0 0; }
  pr-step-list > ol::before,
  pr-step-list > ol::after { left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: var(--rail-width); transform-origin: left center; }
  pr-step-list > ol > li::before { left: 0; top: calc(-1 * var(--space-7)); }
}

/* ==========================================================================
   <pr-protocol-tile>  ProtocolTile: name + protocol + authored description
   ========================================================================== */
pr-protocol-tile { display: block; }
.pr-protocol__name {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--type-h3-tracking);
}
.pr-protocol__full {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  line-height: 20px;
}
.pr-protocol__body { margin: 0; max-width: 34em; text-wrap: pretty; }
/* Protocol rails are agent activity: blue caption (only where the tile names a protocol). */
pr-protocol-tile[data-kind="protocol"] .pr-protocol__full { color: var(--color-agent-text); }

@media (prefers-reduced-motion: reduce) {
  .pr-text-link span { transition: none; }
  .pr-text-link:hover span { transform: none; }
  .pr-button:active { transform: none; }
}

/* ==========================================================================
   App view primitives: card, status pills, initials avatar
   ========================================================================== */
.pr-card {
  box-sizing: border-box;
  padding: var(--space-5);
  border: var(--hairline);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
  box-shadow: var(--shadow-chip);
}
.pr-card__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--type-body-size);
  font-weight: 500;
  line-height: var(--type-body-leading);
}
.pr-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--color-pill-bg);
  color: var(--color-pill-text);
  font-family: var(--font-sans);
  font-size: var(--type-caption-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.pr-pill--warn {
  border: 1px solid var(--color-approval-border);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.pr-avatar--initials {
  width: 34px;
  height: 34px;
  color: var(--color-ink-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  user-select: none;
}

/* ==========================================================================
   <pr-stat-card>  StatCard: label, value / max, neutral meter, checklist
   ========================================================================== */
pr-stat-card { display: block; }
.pr-stat__label { margin: 0; color: var(--color-ink); font-size: var(--type-body-size); font-weight: 500; line-height: var(--type-body-leading); }
.pr-stat__value {
  margin: var(--space-1) 0 0;
  color: var(--color-ink);
  font-size: 40px;
  font-weight: 600;
  line-height: 46px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pr-stat__max { color: var(--color-ink); }
/* Meter is ink, never green: green is not a status color. */
.pr-stat__meter {
  height: 6px;
  margin-top: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-sunken);
}
.pr-stat__meter > span { display: block; height: 100%; border-radius: inherit; background: var(--color-ink); }
.pr-stat__list { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.pr-stat__list li {
  position: relative;
  padding-left: var(--space-4);
  color: var(--color-ink-secondary);
  font-size: var(--type-note-size);
  line-height: var(--type-note-leading);
}
.pr-stat__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-ink-muted);
  opacity: 0.6;
}
.pr-stat__list li[data-state="warn"] { color: var(--color-ink); }
.pr-stat__list li[data-state="warn"]::before { background: var(--color-approval-solid); opacity: 1; }

/* ==========================================================================
   <pr-data-table>  DataTable: hairline rows, no vertical rules, mono for SKUs and prices
   Cells: .pr-table__mono for machine values; .pr-table__end right-aligns (status).
   ========================================================================== */
pr-data-table { display: block; min-width: 0; max-width: 100%; }
.pr-table-wrap {
  overflow-x: auto;
  border: var(--hairline);
  border-radius: var(--radius-card);
  background: var(--color-canvas);
  box-shadow: var(--shadow-chip);
}
.pr-table-wrap:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.pr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  text-align: left;
}
.pr-table th {
  padding: 12px var(--space-5);
  border-bottom: var(--hairline);
  background: var(--color-subtle);
  color: var(--color-ink-muted);
  font-size: var(--type-caption-size);
  font-weight: 500;
  white-space: nowrap;
}
.pr-table td {
  padding: 14px var(--space-5);
  border-bottom: var(--hairline);
  color: var(--color-ink-secondary);
  vertical-align: middle;
}
.pr-table tbody tr:last-child td { border-bottom: 0; }
.pr-table tbody tr { transition: background-color var(--motion-ui) var(--motion-ease-out); }
.pr-table tbody tr { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .pr-table tbody tr:hover { background: var(--color-subtle); }
}
.pr-table__mono { color: var(--color-ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Identifiers (SKUs) wrap rather than widen the table; prices never wrap. */
.pr-table__id { min-width: 14ch; color: var(--color-ink); font-family: var(--font-mono); overflow-wrap: anywhere; }
/* Missing value: say so, don't leave a blank that could mean zero or loading. */
.pr-table td:empty::after { content: "—"; color: var(--color-ink-muted); }
.pr-table__empty td { padding-block: var(--space-7); color: var(--color-ink-muted); text-align: center; font-size: var(--type-note-size); line-height: var(--type-note-leading); }
.pr-table th.pr-table__end,
.pr-table td.pr-table__end { text-align: right; }
@media (max-width: 639.98px) {
  /* Stack rows as label/value pairs; the first cell is the row title. */
  .pr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pr-table, .pr-table tbody, .pr-table tr, .pr-table td { display: block; }
  .pr-table tbody tr { padding: var(--space-4); border-bottom: var(--hairline); }
  .pr-table tbody tr:last-child { border-bottom: 0; }
  .pr-table td { display: flex; justify-content: space-between; gap: var(--space-4); padding: 4px 0; border: 0; text-align: right; }
  .pr-table td::before { content: attr(data-label); color: var(--color-ink-muted); font-family: var(--font-sans); text-align: left; white-space: nowrap; }
  .pr-table td:first-child { padding-bottom: var(--space-2); font-weight: 500; text-align: left; }
  .pr-table__empty td { display: block; text-align: center; }
  .pr-table__empty td::before { content: none; }
  .pr-table td:first-child::before { content: none; }
  .pr-table__mono { white-space: normal; overflow-wrap: anywhere; }
}

/* ==========================================================================
   <pr-threshold-list>  approval thresholds by buyer tier
   ========================================================================== */
pr-threshold-list { display: block; }
pr-threshold-list > ul { margin: 0; padding: 0; list-style: none; }
pr-threshold-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--hairline);
}
pr-threshold-list li:first-child { padding-top: 0; }
pr-threshold-list [data-tier] { margin: 0; color: var(--color-ink); font-size: var(--type-body-size); font-weight: 500; line-height: 24px; }
pr-threshold-list [data-note] { margin: 0; color: var(--color-ink-muted); font-size: var(--type-caption-size); line-height: 18px; }
pr-threshold-list li > div { min-width: 0; }
.pr-thr__value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.pr-thr__empty { margin: 0; padding-block: var(--space-5); color: var(--color-ink-muted); font-size: var(--type-note-size); line-height: var(--type-note-leading); }
.pr-thr__value[hidden] { display: none; }
.pr-thr__edit { height: 32px; padding-inline: 10px; font-size: var(--type-small-size); }
.pr-thr__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Shared form bits: text input, $-prefixed amount field, inline field error */
.pr-input {
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  height: var(--control-height-app);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-control);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 16px; /* ≥16px so iOS does not zoom on focus */
  transition: border-color var(--motion-ui) var(--motion-ease-out);
}
@media (hover: hover) and (pointer: fine) { .pr-input:hover { border-color: var(--color-ink-secondary); } }
.pr-input[aria-invalid="true"] { border-color: var(--color-error-text); }
.pr-input:focus-visible { outline: var(--focus-ring); outline-offset: 1px; border-color: var(--color-ink); }
.pr-money { position: relative; display: inline-flex; align-items: center; }
.pr-money > span { position: absolute; left: 12px; color: var(--color-ink-muted); font-family: var(--font-mono); pointer-events: none; }
.pr-money .pr-input { width: 9.5em; padding-left: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.pr-field-error { flex-basis: 100%; margin: 0; color: var(--color-error-text); font-size: var(--type-caption-size); line-height: 18px; }
.pr-field-error:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pr-table tbody tr,
  .pr-input { transition: none; }
}

/* Fingers need 44px. Desktop keeps the compact 40/32px app controls. */
@media (pointer: coarse) {
  .pr-button--app { height: 44px; }
  .pr-nav__toggle { width: 44px; height: 44px; }
  .pr-thr__edit { height: 44px; padding-inline: var(--space-3); }
  .pr-footer__link,
  .pr-footer__legal .pr-footer__link { min-height: 44px; }
  .pr-footer__link { min-width: 44px; justify-content: center; }
  .pr-footer__links,
  .pr-footer__legal-links { row-gap: 0; }
  .pr-input { height: 44px; }
  .pr-logo { min-height: 44px; }
}

/* ==========================================================================
   Semantic color v3: icons, chips, eyebrow topic dots (DESIGN.md v3)
   Every status color ships with an icon and a word; color never carries meaning alone.
   ========================================================================== */
:root {
  --icon-live: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  --icon-approval: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 2.5h7M4.5 13.5h7M5 2.5c0 3 6 3 6 5.5S5 10.5 5 13.5M11 2.5c0 1.3-1.1 2.1-2.4 2.9M11 13.5c0-1.2-1-2-2.2-2.7'/%3E%3C/svg%3E");
  --icon-agent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3Ccircle cx='3' cy='3.5' r='1.25'/%3E%3Ccircle cx='13' cy='3.5' r='1.25'/%3E%3Ccircle cx='8' cy='13.5' r='1.25'/%3E%3Cpath d='M4 4.4l2.5 2.3M12 4.4L9.5 6.7M8 10v2.2'/%3E%3C/svg%3E");
  --icon-blocked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5.75'/%3E%3Cpath d='M3.9 12.1l8.2-8.2'/%3E%3C/svg%3E");
  --icon-audit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2.5h6l2.5 2.5v8.5H4z'/%3E%3Cpath d='M6.25 8.25l1.5 1.5 2.5-3'/%3E%3C/svg%3E");
  --icon-draft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 2.75l2.75 2.75L6 12.75l-3.25.5.5-3.25z'/%3E%3C/svg%3E");
}
.pr-icon {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--pr-icon) center / contain no-repeat;
  mask: var(--pr-icon) center / contain no-repeat;
}
.pr-chip {
  --chip-text: var(--color-ink-secondary); --chip-tint: var(--color-sunken); --chip-border: var(--color-border); --pr-icon: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px;
  border: 1px solid var(--chip-border);
  border-radius: var(--radius-pill);
  background: var(--chip-tint);
  color: var(--chip-text);
  font: 500 var(--type-caption-size) / 1.3 var(--font-mono);
  white-space: nowrap;
  transition: background-color 200ms var(--motion-ease-out), border-color 200ms var(--motion-ease-out), color 200ms var(--motion-ease-out);
}
.pr-chip::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: var(--pr-icon) center / contain no-repeat; mask: var(--pr-icon) center / contain no-repeat; }
.pr-chip:not([data-tone])::before, .pr-chip[data-tone="neutral"]::before { display: none; }
.pr-chip[data-tone="live"] { --chip-text: var(--color-live-text); --chip-tint: var(--color-live-tint); --chip-border: var(--color-live-border); --pr-icon: var(--icon-live); }
.pr-chip[data-tone="approval"] { --chip-text: var(--color-approval-text); --chip-tint: var(--color-approval-tint); --chip-border: var(--color-approval-border); --pr-icon: var(--icon-approval); }
.pr-chip[data-tone="agent"] { --chip-text: var(--color-agent-text); --chip-tint: var(--color-agent-tint); --chip-border: var(--color-agent-border); --pr-icon: var(--icon-agent); }
.pr-chip[data-tone="blocked"] { --chip-text: var(--color-blocked-text); --chip-tint: var(--color-blocked-tint); --chip-border: var(--color-blocked-border); --pr-icon: var(--icon-blocked); }
.pr-chip[data-tone="audit"] { --chip-text: var(--color-audit-text); --chip-tint: var(--color-audit-tint); --chip-border: var(--color-audit-border); --pr-icon: var(--icon-audit); }
.pr-chip[data-tone="draft"] { --pr-icon: var(--icon-draft); }
.pr-chip[data-variant="outline"] { background: transparent; }

/* Eyebrow topic dot: only where the eyebrow names a role topic (rule 9). */
.pr-eyebrow[data-topic] { display: inline-flex; align-items: center; gap: 10px; }
.pr-eyebrow[data-topic]::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--topic, var(--color-ink-muted)); }
.pr-eyebrow[data-topic="live"] { --topic: var(--color-live-solid); }
.pr-eyebrow[data-topic="approval"] { --topic: var(--color-approval-solid); }
.pr-eyebrow[data-topic="agent"] { --topic: var(--color-agent-solid); }
.pr-eyebrow[data-topic="audit"] { --topic: var(--color-audit-solid); }