/* ==========================================================================
   guardstate portal demo — shared scroll-driven walkthrough component
   Pair with portal-demo.js. See the header comment in that file for the
   full list of options and CSS custom properties.
   Everything here is scoped under .pd so it cannot leak into a host page.
   ========================================================================== */

.pd {
  /* ---- type ------------------------------------------------------------ */
  --pd-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pd-font-display: var(--pd-font-ui);
  --pd-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- colour (light default) ------------------------------------------ */
  --pd-bg: transparent;
  --pd-surface: #ffffff;
  --pd-surface-2: #f4f5f3;
  --pd-ink: #15181a;
  --pd-ink-2: #585e63;
  --pd-line: #e3e4e0;
  --pd-accent: #17509b;
  --pd-accent-ink: #ffffff;
  --pd-good: #1b7a4a;
  --pd-warn: #b0700c;
  --pd-bad: #b3261e;
  --pd-radius: 10px;
  --pd-shadow: 0 1px 2px rgba(15, 18, 20, .06), 0 20px 44px -20px rgba(15, 18, 20, .3);
  --pd-frame: #e6e7e3;
  --pd-caption-ink: #26292c;

  /* ---- layout knobs (safe to override, undocumented extras) ------------ */
  --pd-max: 1040px;
  --pd-scroll-per-step: 92svh;
  --pd-gap: clamp(18px, 3vh, 30px);

  /* ---- derived tokens: never set these directly ------------------------ */
  --pd-good-ink: color-mix(in oklab, var(--pd-good) 74%, var(--pd-ink));
  --pd-good-bg: color-mix(in oklab, var(--pd-good) 12%, var(--pd-surface));
  --pd-warn-ink: color-mix(in oklab, var(--pd-warn) 72%, var(--pd-ink));
  --pd-warn-bg: color-mix(in oklab, var(--pd-warn) 13%, var(--pd-surface));
  --pd-bad-ink: color-mix(in oklab, var(--pd-bad) 74%, var(--pd-ink));
  --pd-bad-bg: color-mix(in oklab, var(--pd-bad) 11%, var(--pd-surface));
  --pd-run: 0;

  position: relative;
  display: block;
  background: var(--pd-bg);
  font-family: var(--pd-font-ui);
  color: var(--pd-ink);
  -webkit-font-smoothing: antialiased;
}

.pd--dark {
  --pd-surface: #14181b;
  --pd-surface-2: #1b2024;
  --pd-ink: #e9eef0;
  --pd-ink-2: #98a2a8;
  --pd-line: #272d32;
  --pd-accent: #7fb2ff;
  --pd-accent-ink: #0d1012;
  --pd-good: #4cc287;
  --pd-warn: #e0a545;
  --pd-bad: #f08078;
  --pd-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 22px 48px -22px rgba(0, 0, 0, .85);
  --pd-frame: #1b2024;
  --pd-caption-ink: #dfe5e8;
}

.pd *,
.pd *::before,
.pd *::after { box-sizing: border-box; }

.pd :focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.pd ::selection {
  background: color-mix(in oklab, var(--pd-accent) 26%, transparent);
  color: var(--pd-ink);
}

/* ---- scroll scaffold ----------------------------------------------------- */

.pd__wrap {
  position: relative;
  height: calc(100vh + 4 * 92vh);
  height: calc(100svh + 4 * var(--pd-scroll-per-step));
}

.pd__sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pd-gap);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(16px, 4vh, 44px) 16px;
}

.pd__stage {
  width: 100%;
  max-width: var(--pd-max);
}

/* scaled by the script only when the stage would outgrow the sticky viewport */
.pd__fit {
  transform-origin: top center;
  will-change: transform;
}

/* ---- browser frame ------------------------------------------------------- */

.pd__frame {
  border: 1px solid var(--pd-line);
  border-radius: calc(var(--pd-radius) + 4px);
  background: var(--pd-frame);
  box-shadow: var(--pd-shadow);
  overflow: hidden;
}

.pd__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--pd-line);
}

.pd__lights { display: flex; gap: 6px; flex: 0 0 auto; }

.pd__lights i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--pd-ink) 22%, var(--pd-frame));
}

.pd__url {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 340px;
  margin: 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pd-surface);
  border: 1px solid var(--pd-line);
  font-size: 11.5px;
  color: var(--pd-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd__url svg { flex: 0 0 auto; }

.pd--frameless .pd__chrome { display: none; }
.pd--frameless .pd__frame {
  background: var(--pd-surface);
  border-radius: var(--pd-radius);
}

/* ---- app shell ----------------------------------------------------------- */

.pd__app {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  background: var(--pd-surface);
  color: var(--pd-ink);
  font-size: 13px;
  line-height: 1.45;
}

.pd__rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--pd-line);
  background: var(--pd-surface-2);
}

.pd__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 6px 16px;
  color: var(--pd-ink);
}

.pd__brand svg { flex: 0 0 auto; }

.pd__brand b {
  font-family: var(--pd-font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.pd__navitem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 7px;
  color: var(--pd-ink-2);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
}

.pd__navitem svg { flex: 0 0 auto; opacity: .85; }

.pd__navitem.is-on {
  background: var(--pd-surface);
  color: var(--pd-ink);
  box-shadow: inset 0 0 0 1px var(--pd-line);
}

.pd__navitem.is-on svg { color: var(--pd-accent); opacity: 1; }

.pd__navspace { flex: 1 1 auto; min-height: 16px; }

.pd__pane { display: flex; flex-direction: column; min-width: 0; }

.pd__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 46px;
  border-bottom: 1px solid var(--pd-line);
}

/* The tenant is the name of the thing you are looking at: it keeps its width
   and the chrome around it gives way first. The ellipsis is a last resort. */
.pd__tenant {
  flex: 0 1 auto;
  min-width: 7ch;
  font-size: 13px;
  color: var(--pd-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd__topright {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.pd__clock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--pd-ink-2);
  white-space: nowrap;
}

.pd__clock b {
  font-family: var(--pd-font-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--pd-ink);
}

/* ---- shared app atoms ---------------------------------------------------- */

.pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--pd-line);
  background: var(--pd-surface);
  color: var(--pd-ink-2);
  font-size: 11px;
  letter-spacing: .01em;
  white-space: nowrap;
}

.pd-chip--example {
  border-style: dashed;
  color: var(--pd-warn-ink);
  border-color: color-mix(in oklab, var(--pd-warn) 42%, var(--pd-line));
  background: var(--pd-warn-bg);
}

.pd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  white-space: nowrap;
  background: var(--pd-surface-2);
  color: var(--pd-ink-2);
  box-shadow: inset 0 0 0 1px var(--pd-line);
}

.pd-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.pd-pill--good { background: var(--pd-good-bg); color: var(--pd-good-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pd-good) 28%, transparent); }
.pd-pill--warn { background: var(--pd-warn-bg); color: var(--pd-warn-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pd-warn) 30%, transparent); }
.pd-pill--bad  { background: var(--pd-bad-bg);  color: var(--pd-bad-ink);  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pd-bad) 28%, transparent); }

.pd-mono {
  font-family: var(--pd-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .95em;
  letter-spacing: -0.01em;
}

.pd-mute { color: var(--pd-ink-2); }

.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--pd-line);
  background: var(--pd-surface);
  color: var(--pd-ink);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

.pd-btn:hover { background: var(--pd-surface-2); }

.pd-btn--primary {
  background: var(--pd-accent);
  border-color: var(--pd-accent);
  color: var(--pd-accent-ink);
}

.pd-btn--primary:hover { background: color-mix(in oklab, var(--pd-accent) 86%, var(--pd-ink)); }

.pd-btn[disabled] { cursor: default; opacity: .62; }

.pd-link {
  padding: 0;
  border: 0;
  text-align: left;
  background: none;
  font: inherit;
  color: var(--pd-ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--pd-ink) 30%, transparent);
  text-underline-offset: 3px;
}

.pd-link:hover { text-decoration-color: var(--pd-accent); color: var(--pd-accent); }

/* ---- screens ------------------------------------------------------------- */

.pd__screens {
  position: relative; /* the origin box the drill-in zoom is measured against */
  display: grid;
  grid-template-areas: "stack";
  min-width: 0;
}

.pd-scr {
  grid-area: stack;
  min-width: 0;
  padding: 16px 18px 18px;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.pd-scr__crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--pd-ink-2);
  margin-bottom: 9px;
  min-height: 16px;
}

.pd-scr__crumb svg { opacity: .7; }

.pd-scr__head {
  display: flex;
  align-items: baseline;
  gap: 10px 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
}

.pd-scr__head h3 {
  margin: 0;
  font-family: var(--pd-font-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--pd-ink);
}

.pd-scr__sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--pd-ink-2);
}

.pd-scr__state { margin-left: auto; align-self: center; }

.pd-scr__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 16px;
  align-items: start;
}

.pd-scr__body--wide { grid-template-columns: minmax(0, 1fr); }

/* ---- table --------------------------------------------------------------- */

.pd-tblwrap {
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  overflow: hidden;
}

.pd-tbl {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.pd-tbl th {
  text-align: left;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pd-ink-2);
  padding: 8px 12px;
  background: var(--pd-surface-2);
  border-bottom: 1px solid var(--pd-line);
  white-space: nowrap;
}

.pd-tbl td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--pd-line);
  font-size: 12.5px;
  color: var(--pd-ink);
  vertical-align: middle;
}

.pd-tbl tr:last-child td { border-bottom: 0; }
.pd-tbl td.pd-num { text-align: right; white-space: nowrap; color: var(--pd-ink-2); }
.pd-tbl td.pd-t { white-space: nowrap; }

.pd-tbl tbody tr.is-click { cursor: pointer; }
.pd-tbl tbody tr.is-click:hover { background: var(--pd-surface-2); }

.pd-tbl tr.is-target td:first-child { position: relative; }

.pd-tbl__more td {
  background: var(--pd-surface-2);
  color: var(--pd-ink-2);
  font-size: 11.5px;
}

.pd-go {
  display: inline-flex;
  align-items: center;
  color: var(--pd-ink-2);
}

/* ---- panels -------------------------------------------------------------- */

.pd-panel {
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  padding: 12px;
  background: var(--pd-surface);
}

.pd-panel + .pd-panel { margin-top: 12px; }

.pd-panel__h {
  margin: 0 0 9px;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pd-ink-2);
  font-weight: 400;
}

.pd-panel__h--row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pd-only-sm { display: none; }

.pd-panel__h--row b {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11.5px;
  color: var(--pd-ink);
}

.pd-kv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0;
  font-size: 12px;
}

.pd-kv dt { color: var(--pd-ink-2); white-space: nowrap; }
.pd-kv dd { margin: 0; color: var(--pd-ink); text-align: right; overflow-wrap: anywhere; }

.pd-note {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pd-ink-2);
}

/* ---- drift / remediation / gate ------------------------------------------ */

.pd-block {
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  padding: 12px 14px;
  background: var(--pd-surface);
}

.pd-block + .pd-block { margin-top: 10px; }

.pd-block__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.pd-block__top h4 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pd-ink);
}

.pd-block p { margin: 0; font-size: 12.5px; color: var(--pd-ink-2); line-height: 1.55; }
.pd-block p + p { margin-top: 6px; }
.pd-block p b { font-weight: 500; color: var(--pd-ink); }

.pd-action {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin: 8px 0;
  border-radius: 7px;
  background: var(--pd-surface-2);
  border: 1px solid var(--pd-line);
}

.pd-action code {
  font-family: var(--pd-font-mono);
  font-size: 12px;
  color: var(--pd-ink);
}

.pd-sign {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--pd-good-ink);
  margin-left: auto;
}

.pd-gate {
  border: 1px solid color-mix(in oklab, var(--pd-warn) 36%, var(--pd-line));
  background: var(--pd-warn-bg);
}

.pd-gate__row {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.pd-gate__row .pd-note { margin: 0; flex: 1 1 200px; min-width: 160px; }

.pd-run {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--pd-ink-2);
}

.pd-run__track {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 999px;
  background: var(--pd-surface-2);
  box-shadow: inset 0 0 0 1px var(--pd-line);
  overflow: hidden;
}

.pd-run__bar {
  display: block;
  height: 100%;
  width: calc(var(--pd-run) * 100%);
  background: var(--pd-good);
  border-radius: 999px;
}

.pd-run__done { opacity: clamp(0, calc((var(--pd-run) - .72) * 4), 1); }
.pd-run__pct { font-variant-numeric: tabular-nums; }

.pd-steps {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.pd-steps li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--pd-ink-2);
}

.pd-steps li b { font-weight: 500; color: var(--pd-ink); }
.pd-steps li .pd-t { font-family: var(--pd-font-mono); font-size: 11.5px; white-space: nowrap; }
.pd-steps svg { margin-top: 2px; color: var(--pd-good-ink); }

/* ---- evidence ------------------------------------------------------------ */

.pd-ev { display: grid; gap: 0; }

.pd-ev__row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--pd-line);
  font-size: 12px;
}

.pd-ev__row:last-child { border-bottom: 0; }

.pd-ev__t {
  font-family: var(--pd-font-mono);
  font-size: 11.5px;
  color: var(--pd-ink-2);
  white-space: nowrap;
}

.pd-ev__k {
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pd-ink-2);
  white-space: nowrap;
}

.pd-ev__k--verified { color: var(--pd-good-ink); }
.pd-ev__k--fix { color: var(--pd-accent); }

.pd-ev__d { color: var(--pd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pd-ev__h {
  font-family: var(--pd-font-mono);
  font-size: 11.5px;
  color: var(--pd-ink-2);
  white-space: nowrap;
}

.pd-ev__row.is-new .pd-ev__d { color: var(--pd-ink); }
.pd-ev__row.is-new { background: var(--pd-good-bg); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pd-good) 22%, transparent); border-radius: 6px; padding-left: 8px; padding-right: 8px; border-bottom-color: transparent; }

.pd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--pd-ink-2);
}

.pd-head b {
  font-family: var(--pd-font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--pd-ink);
}

/* ---- caption + step control ---------------------------------------------- */

.pd__caption {
  width: 100%;
  max-width: var(--pd-max);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 28px;
  color: var(--pd-caption-ink);
}

.pd__caps { display: grid; grid-template-areas: "cap"; min-width: 0; }

.pd-cap {
  grid-area: cap;
  min-width: 0;
  max-width: 62ch;
  transition: opacity .26s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  .pd-cap { transition: none; }
  .pd-btn, .pd__next, .pd__dot i { transition: none; }
}

.pd-cap h3 {
  margin: 0 0 6px;
  font-family: var(--pd-font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--pd-caption-ink);
}

.pd-cap p {
  margin: 0;
  font-size: clamp(.9rem, 1.05vw, .975rem);
  line-height: 1.55;
  color: var(--pd-caption-ink);
}

.pd__nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.pd__dots { display: flex; align-items: center; gap: 6px; }

.pd__dot {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.pd__dot i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--pd-caption-ink) 30%, transparent);
  transition: background .2s ease, transform .2s ease;
}

.pd__dot:hover i { background: color-mix(in oklab, var(--pd-caption-ink) 58%, transparent); }
.pd__dot[aria-current="step"] i { background: var(--pd-accent); transform: scale(1.3); }

.pd__count {
  font-family: var(--pd-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: color-mix(in oklab, var(--pd-caption-ink) 78%, transparent);
  white-space: nowrap;
}

.pd__next {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 7px;
  border: 1px solid color-mix(in oklab, var(--pd-caption-ink) 30%, transparent);
  background: none;
  color: var(--pd-caption-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.pd__next:hover {
  border-color: var(--pd-accent);
  background: color-mix(in oklab, var(--pd-accent) 10%, transparent);
}

.pd__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- the approval gate, once approved ------------------------------------- */

.pd-gate__done {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--pd-good-ink);
}

.pd-gate__done svg { flex: 0 0 auto; }

.pd[data-pd-approved="1"] .pd-gate {
  border-color: color-mix(in oklab, var(--pd-good) 34%, var(--pd-line));
  background: var(--pd-good-bg);
}

.pd[data-pd-approved="1"] .pd-gate__ask { display: none; }
.pd[data-pd-approved="1"] .pd-gate__done { display: flex; }

/* ---- static mode (reduced motion) ----------------------------------------
   The five screens stack as static frames inside one app shell, each with its
   own caption directly beneath it. Nothing moves and nothing is hidden.       */

.pd--static .pd__wrap { height: auto; }

.pd--static .pd__sticky {
  position: static;
  min-height: 0;
  display: block;
  padding: 0 16px;
}

.pd--static .pd__screens { display: block; }

.pd--static .pd-scr {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.pd--static .pd-scr + .pd-cap { border-top: 1px solid var(--pd-line); }

.pd--static .pd-cap {
  max-width: none;
  padding: 16px 18px 20px;
  background: var(--pd-surface-2);
  border-bottom: 1px solid var(--pd-line);
}

.pd--static .pd-cap h3 { color: var(--pd-ink); font-size: 1.05rem; }
.pd--static .pd-cap p { color: var(--pd-ink-2); font-size: .8125rem; max-width: 70ch; }

.pd--static .pd__stage,
.pd--static .pd__caption { max-width: var(--pd-max); margin: 0 auto; }

.pd--static .pd__caption { display: none; }

/* ---- forced single step (?step=N) ---------------------------------------- */

.pd--forced .pd__wrap { height: auto; }
.pd--forced .pd__sticky { position: static; min-height: 0; }

/* ---- mid widths: rail to icons, tables lose their widest column ---------- */

@media (max-width: 1000px) {
  .pd__app { grid-template-columns: 54px minmax(0, 1fr); }
  .pd__brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .pd__brand b { display: none; }
  .pd__rail { align-items: center; padding: 12px 8px; }
  .pd__navitem { justify-content: center; width: 38px; padding: 7px 0; }
  .pd__navitem span { display: none; }
  .pd-scr__body { grid-template-columns: minmax(0, 1fr) 204px; }
  .pd-hide-md { display: none !important; }
}

/* ---- mobile -------------------------------------------------------------- */

@media (max-width: 720px) {
  .pd__app { grid-template-columns: 52px minmax(0, 1fr); font-size: 12.5px; }
  .pd__rail { padding: 10px 8px; align-items: center; }
  .pd__brand { padding: 2px 0 12px; }
  .pd__brand b { display: none; }
  .pd__navitem { justify-content: center; padding: 7px 0; width: 36px; }
  .pd__navitem span { display: none; }
  .pd__top { height: 42px; padding: 0 10px; gap: 7px; }
  .pd__scope { display: none; }
  .pd-scr { padding: 11px 11px 13px; }
  .pd-scr__body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pd-scr__head { padding-bottom: 9px; }
  .pd-scr__head h3 { font-size: 17px; }
  .pd-hide-sm { display: none !important; }
  .pd-only-sm { display: inline; }
  .pd-tbl td { padding: 8px 10px; }
  .pd-block { padding: 10px 11px; }
  .pd-block + .pd-block { margin-top: 8px; }
  .pd-block p { font-size: 12px; line-height: 1.5; }
  .pd-action { margin: 7px 0; padding: 7px 9px; }
  .pd-panel { padding: 10px; }
  .pd-steps li { font-size: 12px; }
  .pd-gate__row .pd-note { font-size: 11.5px; }
  .pd-ev__row { padding: 6px 0; }
  .pd-cap p { font-size: .85rem; }
  .pd__caption { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pd__nav { justify-content: space-between; width: 100%; }
  .pd-ev__row { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 1px; column-gap: 8px; }
  .pd-ev__row .pd-ev__h { grid-column: 3; grid-row: 1; justify-self: end; }
  .pd-ev__row .pd-ev__d { grid-column: 1 / -1; grid-row: 2; white-space: normal; font-size: 11.5px; line-height: 1.4; }
  .pd-kv { font-size: 11.5px; }
  .pd-gate__row .pd-note { display: none; }
  .pd-steps { gap: 6px; }
  .pd-steps li { grid-template-columns: 14px minmax(0, 1fr) auto; gap: 7px; font-size: 11.5px; }
  .pd-steps li .pd-t { font-size: 11px; }
  .pd__sticky { padding: 10px 14px; gap: 12px; justify-content: flex-start; }
  .pd-cap h3 { font-size: 1.02rem; margin-bottom: 4px; }
  .pd-cap p { line-height: 1.45; }
  .pd__caption { gap: 10px; }
}

@media (max-width: 520px) {
  /* the clock keeps its icon and its time; the words go, so the tenant fits */
  .pd__clocklabel { display: none; }
  .pd__top { gap: 8px; }
  .pd__topright { gap: 8px; }
}

@media (max-width: 460px) {
  /* a phone does not need a desktop browser frame drawn around the app */
  .pd__chrome { display: none; }
  .pd__top { padding: 0 8px; gap: 7px; }
  .pd__topright { gap: 6px; }
  .pd-chip--example { padding: 2px 6px; }
  .pd-scr__head { gap: 6px 10px; }
  .pd-scr__state { margin-left: 0; }
}