/* ============================================================
   Personalization page
   ------------------------------------------------------------
   Sized to fit one screen. The studio is a flex column pinned to the
   viewport height minus the site header, and the stage inside it takes
   whatever is left over — so the builder and preview get the space, and
   long templates scroll inside their own pane rather than pushing the
   page down. Below 1180px that constraint is dropped and everything
   stacks and scrolls normally.
   ============================================================ */

:root {
  --pz-ink: #0f172a;
  --pz-code-bg: #10141f;
  --pz-code-fg: #dbe3f0;
  --pz-blk-bg: rgba(123, 169, 255, 0.08);
  --pz-blk-line: rgba(123, 169, 255, 0.36);
  --pz-blk-on: rgba(123, 169, 255, 0.17);
  --pz-tok: #8ab8ff;
  --pz-soft: #f7f9fc;
  --pz-accent-soft: #eef3ff;
  --pz-accent-line: #c7d7fb;
  --pz-warn: #b4530f;
  --pz-warn-soft: #fdf1e7;
  --pz-warn-line: #f0cfae;
  --pz-good: #0f7a4f;
  --pz-good-soft: #edfaf3;
  --pz-good-line: #bde3ce;
}

body.personalization-page {
  --brand-avatar-bg: #ddeafe;
}

/* A wider gutter than the rest of the site. Three columns at the shared
   1100px max-width would leave the code pane too narrow to read. */
.pz-wide {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- studio shell ---------------------------------------------- */
/* This used to be height: calc(100vh - header) so the page could never
   scroll. The page scrolls now, so the stage gets a generous minimum instead
   of the viewport's leftovers — tall enough that the code and the preview are
   both comfortable, and free to grow past that if a scenario needs it. */
.pz-studio {
  padding: 14px 0;
  display: flex;
  flex-direction: column;
}
.pz-studio > .pz-wide {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---- masthead --------------------------------------------------- */
/* Same three columns as the stage below, aligned to one top edge: title over
   the rail, copy over the builder, tabs over the preview. Ragged tops were
   the thing that made this section read as unfinished. */
.pz-masthead {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 14px 24px;
  align-items: start;
  margin-bottom: 12px;
}

/* Stacked, not split. The copy already has its own column in the masthead
   grid; splitting it again gives ~40-character lines that read badly and are
   no shorter overall. */
/* Two columns now that the copy has the full width the tabs used to take.
   One column leaves ~400px of dead space to the right of a 72ch measure. */
.pz-mast-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding-top: 2px;
}
.pz-sub {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--muted);
}
.pz-sub b { color: var(--text); font-weight: 600; }

/* ---- control bar ------------------------------------------------ */
.pz-controlbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.pz-controlbar-label {
  flex: none;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted-soft);
}

/* ---- scenario tabs ---------------------------------------------- */
/* A grid rather than a wrapping row: two per line, filling the column so it
   reads as a deliberate block of controls instead of leftover chips. */
.pz-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.pz-tab {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  padding: 6px 11px;
  border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, color 0.14s, box-shadow 0.14s;
}
.pz-tab:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12); }
.pz-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.26);
}
.pz-tab small { display: block; font-weight: 500; font-size: 10px; color: var(--muted-soft); margin-top: 1px; }
.pz-tab.is-active small { color: rgba(255, 255, 255, 0.82); }

/* ---- stage ------------------------------------------------------ */
.pz-stage {
  /* The shell owns the height (14px frame in theme.css); the stage
     fills what the masthead and controlbar leave, and scenarios taller
     than that scroll inside their panes. */
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1.18fr) minmax(0, 1fr);
  /* An explicit 1fr row. Implicit grid rows are auto-sized, so without this
     the panes size to their content and leave the bottom of the stage empty —
     and worse, change height every time you switch scenario. */
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.pz-pane {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pz-pane-head {
  min-height: 42px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  flex: none;
}
/* Keep the label and its control group on one line: the group shrinks and
   wraps its own chips rather than the whole group dropping to a second row,
   which is what made the two pane headers different heights. */
.pz-pane-head h2 {
  flex: none;
  margin: 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-soft);
}
.pz-pane-hint {
  font-size: 11px;
  color: var(--muted-soft);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 7px;
}

/* ---- explanation rail ------------------------------------------- */
.pz-rail {
  border: 1px solid var(--pz-accent-line);
  border-radius: var(--radius);
  background: var(--pz-accent-soft);
  padding: 16px 17px;
  min-width: 0;
  overflow-y: auto;
  transition: background 0.16s, border-color 0.16s;
}
.pz-rail.is-live { background: #fff; border-color: var(--border-strong); box-shadow: var(--shadow); }
.pz-rail-idle { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.pz-rail-idle b { color: var(--text); display: block; margin-bottom: 3px; }
/* The lede-clause highlighter wash, on the rail's own opening line. */
.pz-rail-flag {
  display: inline-block;
  background: linear-gradient(transparent 62%, var(--pg-soft) 0);
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
}
.pz-rail-steps {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.pz-rail-steps li { margin-bottom: 6px; }
.pz-rail-steps li::marker { color: var(--pg-ink); font-weight: 700; }
.pz-rail-t {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  padding-left: 11px;
  border-left: 3px solid var(--accent);
}
.pz-rail-d { margin: 0; font-size: 13.3px; line-height: 1.62; color: var(--muted); }

/* Per-platform notes. The description above is identical on every tab; only
   this list changes, and platforms that behave the same are grouped into one
   row rather than repeated. The active tab's row is lifted so the reader can
   find it without reading all four. */
.pz-rail-sub {
  margin: 13px 0 7px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--muted-soft);
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.pz-pnotes { display: flex; flex-direction: column; gap: 7px; }
.pz-pnote {
  border-left: 2px solid var(--border-strong);
  padding-left: 10px;
  opacity: 0.6;
  transition: opacity 0.14s, border-color 0.14s;
}
.pz-pnote.is-on { opacity: 1; border-left-color: var(--accent); }
.pz-pnote b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.pz-pnote.is-on b { color: var(--accent-dark); }
.pz-pnote span { display: block; font-size: 12.2px; line-height: 1.5; color: var(--muted); }

.pz-rail code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--card-bg);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--text);
}

/* ---- platform chips --------------------------------------------- */
.pz-platforms {
  flex: 0 1 auto;
  min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.pz-chip {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, color 0.14s;
}
.pz-chip:hover { border-color: var(--accent); color: var(--text); }
.pz-chip.is-active { background: var(--pz-accent-soft); border-color: var(--accent); color: var(--accent-dark); }

/* ---- code surface ----------------------------------------------- */
/* Scroll shadows via the background-attachment trick: the two `local` layers
   are painted with the content and the two `scroll` layers are pinned to the
   box, so a shadow only shows on the edge you can actually scroll toward. On
   a short viewport the longest templates do scroll here, and a template that
   is cut off should look cut off rather than finished. */
.pz-code {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 14px;
  background:
    linear-gradient(var(--pz-code-bg) 30%, rgba(16, 20, 31, 0)) top / 100% 26px no-repeat local,
    linear-gradient(rgba(16, 20, 31, 0), var(--pz-code-bg) 70%) bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) top / 100% 13px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) bottom / 100% 13px no-repeat scroll,
    var(--pz-code-bg);
}
.pz-code pre { margin: 0; min-width: max-content; }

/* Each section is its own block so the whole rectangle is the hover target,
   not just the glyphs. Margin between blocks does the visual separating that
   blank lines would otherwise have to. */
.pz-blk {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--pz-code-fg);
  white-space: pre;
  padding: 8px 12px;
  margin: 0 0 7px;
  border-radius: 9px;
  border-left: 2px solid transparent;
  cursor: default;
  transition: background 0.13s, border-color 0.13s, box-shadow 0.13s;
}
.pz-blk[data-i] {
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  border-left-color: rgba(123, 169, 255, 0.28);
  cursor: help;
}
.pz-blk[data-i]:hover,
.pz-blk[data-i]:focus-visible,
.pz-blk.is-on {
  background: rgba(123, 169, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(123, 169, 255, 0.28);
  border-left-color: #7ba9ff;
  outline: none;
}

/* the editor tab: filename plus a language dot per platform */
.pz-fname {
  position: sticky;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  padding: 4px 12px 5px;
  border-radius: 7px 7px 0 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),
              inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: #93a1b8;
}
.pz-fname i { width: 8px; height: 8px; border-radius: 50%; }
.pz-fname i[data-p="braze"]      { background: #8b5cf6; box-shadow: 0 0 6px rgba(139, 92, 246, 0.7); }
.pz-fname i[data-p="iterable"]   { background: #f43f5e; box-shadow: 0 0 6px rgba(244, 63, 94, 0.7); }
.pz-fname i[data-p="customerio"] { background: #14b8a6; box-shadow: 0 0 6px rgba(20, 184, 166, 0.7); }
.pz-fname i[data-p="klaviyo"]    { background: #a3d13c; box-shadow: 0 0 6px rgba(163, 209, 60, 0.7); }

/* ---- token colours ------------------------------------------------
   A restrained editor palette on the navy: tags steel, keywords rose,
   strings mint, filters cyan, numbers apricot, platform builtins violet,
   feed fields and ${attributes} lavender, comments graphite italic. */
.tk-d { color: #7e8ca6; }
.tk-k { color: #ff85ad; }
.tk-h { color: #ff85ad; }
.tk-s { color: #8fe3ae; }
.tk-f { color: #6fd7e8; }
.tk-n { color: #ffbe80; }
.tk-b { color: #b9a8ff; }
.tk-a { color: #cabcff; font-style: italic; }
.tk-c { color: #5f6e88; font-style: italic; }
.pz-blk--plain { opacity: 0.72; }
.pz-blk:last-child { margin-bottom: 0; }

/* ---- version switcher ------------------------------------------- */
/* Lives in the pane header alongside the platform chips opposite, so both
   panes read the same way: label on the left, controls on the right. */
.pz-versions {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}
.pz-ver {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, color 0.14s;
}
.pz-ver:hover { border-color: var(--accent); color: var(--text); }
.pz-ver.is-active { background: var(--pz-accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.pz-ver.is-abort::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pz-warn);
  margin-right: 5px;
  vertical-align: middle;
}

.pz-preview {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 16px;
  background: #fff;
}

/* ---- product blocks ---------------------------------------------- */
/* The part of a lifecycle email that actually earns the send. The `why` line
   under the name is the load-bearing one — it is the difference between a
   recommendation and a catalogue dump. */
.pz-prod {
  display: flex;
  gap: 13px;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  margin: 0 0 9px;
  background: #fff;
}
.pz-pimg {
  width: 62px;
  height: 62px;
  border-radius: 8px;
  flex: none;
  object-fit: cover;
  display: block;
}
.pz-pimg--art {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tint) 20%, #fff);
  color: var(--tint);
  border: 1px solid color-mix(in srgb, var(--tint) 28%, #fff);
}
.pz-pimg--art svg { width: 46px; height: 46px; }
.pz-prod-txt { min-width: 0; flex: 1; }
.pz-prod-txt b { display: block; font-size: 13.5px; line-height: 1.3; }
.pz-prod-why {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 2px;
}
.pz-prod-price {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pz-prod-price s { color: var(--muted-soft); font-weight: 500; margin-right: 4px; }
.pz-prod-price em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--muted); margin-left: 6px; }
.pz-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-bottom: 4px;
  background: var(--pz-good-soft);
  color: var(--pz-good);
  border: 1px solid var(--pz-good-line);
}
.pz-badge.is-warn { background: var(--pz-warn-soft); color: var(--pz-warn); border-color: var(--pz-warn-line); }

/* Reward ladder. Showing the tiers turns "connect your account" from a chore
   into a sum the reader can do in their head. */
.pz-tiers {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 0;
  font-size: 13px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
}
.pz-tiers td { padding: 6px 11px; border-bottom: 1px solid var(--border); }
.pz-tiers tr:last-child td { border-bottom: none; }
.pz-tiers td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pz-tiers tr:nth-child(odd) { background: var(--bg-alt); }
.pz-tiers tr.is-hit { background: var(--pz-good-soft); }
.pz-tiers tr.is-hit td { color: var(--pz-good); font-weight: 700; }

.pz-small {
  margin: 10px 0 0 !important;
  font-size: 11.8px !important;
  line-height: 1.5;
  color: var(--muted-soft);
}

.pz-cta { margin: 12px 0 0 !important; }
.pz-cta a {
  display: inline-block;
  background: linear-gradient(180deg, #2e7d5b, #1f5c43);
  box-shadow: 0 4px 12px rgba(31, 92, 67, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

/* ---- what it is worth -------------------------------------------- */
/* The rubric, made visible: take this section out, does the message earn
   less? A section that cannot answer it is decoration. */
.pz-worth {
  margin-top: 11px;
  border-left: 3px solid var(--pz-good);
  background: var(--pz-good-soft);
  border-radius: 0 6px 6px 0;
  padding: 9px 11px;
}
.pz-worth b {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pz-good);
  margin-bottom: 3px;
}
.pz-worth span { display: block; font-size: 12.4px; line-height: 1.52; color: var(--text); }

/* ---- personalized values ---------------------------------------- */
/* Every value in a preview that came from the profile rather than the copy
   is marked. Without this the four versions visibly differ but a reader has
   to diff them by eye to work out what actually changed. */
.pz-dyn {
  background: linear-gradient(transparent 84%, rgba(37, 99, 235, 0.16) 0);
  border-bottom: 1px dashed rgba(37, 99, 235, 0.55);
  border-radius: 2px;
  padding: 0 1px;
  cursor: help;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background 0.13s, border-color 0.13s;
}
.pz-dyn:hover,
.pz-dyn:focus-visible,
.pz-dyn.is-lit {
  background: rgba(37, 99, 235, 0.2);
  border-bottom-color: var(--accent);
  outline: none;
}
.pz-push .pz-dyn { background: rgba(37, 99, 235, 0.13); }
.pz-bubble .pz-dyn { background: rgba(123, 169, 255, 0.28); border-bottom-color: rgba(123, 169, 255, 0.75); }

.pz-tip {
  position: fixed;
  z-index: 1200;
  max-width: 300px;
  background: var(--pz-ink);
  color: #e8eefb;
  border-radius: 8px;
  padding: 9px 11px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.3);
  font-size: 12.2px;
  line-height: 1.5;
  pointer-events: none;
}
.pz-tip b { color: #ffd479; font-family: var(--font-mono); font-size: 11.5px; }
.pz-tip::after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  bottom: -11px;
  border-top-color: var(--pz-ink);
}
.pz-tip.is-below::after {
  bottom: auto; top: -11px;
  border-top-color: transparent;
  border-bottom-color: var(--pz-ink);
}
@media (max-width: 760px) { .pz-tip { display: none; } }

/* ---- data drawer -------------------------------------------------- */
/* Collapsed by default so the message gets the pane. The profile and the
   note explaining the version are both reference material — useful, but not
   what someone came to look at. */
.pz-drawer { flex: none; border-top: 1px solid var(--border); background: var(--bg-alt); }
.pz-drawer > summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 13px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color 0.14s;
}
.pz-drawer > summary::-webkit-details-marker { display: none; }
.pz-drawer > summary::before {
  content: '';
  width: 0; height: 0;
  border-left: 5px solid var(--muted-soft);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.14s;
}
.pz-drawer[open] > summary::before { transform: rotate(90deg); }
.pz-drawer > summary:hover { color: var(--accent); }
.pz-drawer-body { border-top: 1px solid var(--border); background: #fff; }
.pz-drawer-hint {
  margin: 0;
  padding: 7px 13px 9px;
  font-size: 11px;
  color: var(--muted-soft);
  border-top: 1px solid var(--border);
}

.pz-prof { flex: none; }
.pz-prof-row.is-lit { background: rgba(37, 99, 235, 0.1); }
.pz-prof-row.is-lit code { color: var(--accent-dark); font-weight: 600; }
.pz-prof-row {
  display: grid;
  grid-template-columns: minmax(80px, 42%) 1fr;
  gap: 8px;
  padding: 4px 13px;
  font-size: 11.5px;
  align-items: baseline;
  border-bottom: 1px solid var(--border);
}
.pz-prof-row:last-child { border-bottom: none; }
.pz-prof-row span { color: var(--muted-soft); font-family: var(--font-mono); font-size: 10.5px; }
.pz-prof-row code { font-family: var(--font-mono); font-size: 10.8px; color: var(--text); word-break: break-word; }

.pz-note {
  margin: 0;
  padding: 10px 13px;
  border-bottom: 1px solid var(--border);
  font-size: 12.3px;
  line-height: 1.55;
  color: var(--muted);
}
.pz-note b { color: var(--text); font-weight: 700; }

/* ---- rendered email --------------------------------------------- */
/* No card. The message sits directly in the pane, because a bordered box
   inside a bordered pane is two frames around one thing. And one header,
   not two — the old inbox strip repeated the subject and the timestamp. */
.pz-mail-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.pz-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 700;
  flex: none;
}
.pz-mail-who { min-width: 0; flex: 1; font-size: 12px; line-height: 1.35; }
.pz-mail-who span { color: var(--muted-soft); }
.pz-mail-time { font-size: 11.5px; color: var(--muted-soft); flex: none; }

.pz-mail-subj { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.28; }
/* Preheader is inbox real estate and appears nowhere else, so it stays —
   greyed, the way a client shows it. */
.pz-mail-pre {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--muted-soft);
  line-height: 1.4;
}
.pz-mail-body {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.62;
}
.pz-mail-body p { margin: 0 0 11px; }
.pz-mail-body p:last-child { margin-bottom: 0; }
.pz-mail-body a { color: var(--accent); font-weight: 600; text-decoration: none; }
.pz-mail-body hr { border: 0; border-top: 1px solid var(--border); margin: 13px 0; }

.pz-total { font-size: 13.5px; }
.pz-total b { font-variant-numeric: tabular-nums; }

.pz-hi {
  background: var(--pz-good-soft);
  border: 1px solid var(--pz-good-line);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 12.8px;
  color: #0b5e3d;
}

/* ---- rendered push ---------------------------------------------- */
/* ---- drawn devices: the push lands on a phone, not in a grey box ---- */
.pz-device { display: flex; justify-content: center; padding: 4px 0 10px; }
.pz-dev-screen {
  position: relative;
  width: 292px;
  aspect-ratio: 9 / 18.5;
  border-radius: 42px;
  border: 9px solid #10131a;
  box-shadow: 0 0 0 2px #3a4252, 0 22px 44px rgba(0, 0, 0, 0.45),
              inset 0 0 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  padding: 0 12px;
}
.pz-device--ios .pz-dev-screen {
  background:
    radial-gradient(circle at 25% 18%, rgba(147, 51, 234, 0.5), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(37, 99, 235, 0.55), transparent 60%),
    linear-gradient(170deg, #1d2440 0%, #101527 100%);
}
.pz-device--android .pz-dev-screen {
  background:
    radial-gradient(circle at 75% 20%, rgba(20, 184, 130, 0.35), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(13, 110, 90, 0.4), transparent 60%),
    linear-gradient(170deg, #14241f 0%, #0d1512 100%);
}
.pz-dev-island {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 24px;
  border-radius: 999px;
  background: #05070b;
}
.pz-dev-punch {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #05070b;
  box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.15);
}
.pz-dev-home {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}
.pz-lock-date {
  margin-top: 52px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.pz-device--android .pz-lock-date { font-size: 12px; }
.pz-lock-time {
  text-align: center;
  font-size: 56px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 22px;
}
.pz-device--android .pz-lock-time { font-weight: 400; font-size: 52px; }

/* the notification arrives */
.pz-pop { animation: pz-pop 0.5s cubic-bezier(0.18, 0.9, 0.28, 1.15) both; animation-delay: 0.25s; }
@keyframes pz-pop {
  from { opacity: 0; transform: translateY(-26px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-pop { animation: none; }
}
.pz-push-icon {
  width: 17px; height: 17px;
  border-radius: 4.5px;
  object-fit: cover;
  flex: none;
}
.pz-phone-os {
  text-align: center; font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; font-weight: 700;
  color: rgba(255, 255, 255, 0.5); margin-bottom: 12px;
}
.pz-push { background: rgba(248, 250, 253, 0.92); backdrop-filter: blur(6px); border-radius: 16px; padding: 10px 12px 11px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); }
.pz-push-meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #5b6570; margin-bottom: 4px; }
.pz-push-meta .pz-push-time { margin-left: auto; }
.pz-push-app { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.pz-push-title { font-size: 13.5px; font-weight: 700; line-height: 1.28; }
.pz-push-body { font-size: 13px; line-height: 1.4; margin-top: 2px; }

/* ---- rendered sms ----------------------------------------------- */
.pz-sms { padding: 4px 2px; }
.pz-sms-sender {
  text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--muted-soft); margin-bottom: 10px;
}
.pz-bubble {
  background: #e9eaeb; border-radius: 15px 15px 15px 4px;
  padding: 10px 13px; font-size: 13.5px; line-height: 1.48; max-width: 92%;
}
.pz-sms-count {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted-soft); font-variant-numeric: tabular-nums;
}
.pz-sms-count b { color: var(--pz-good); }
.pz-sms-count.is-over, .pz-sms-count.is-over b { color: var(--pz-warn); }
.pz-sms-why { display: block; margin-top: 4px; color: var(--pz-warn); }
.pz-sms-why code {
  font-family: var(--font-mono); background: var(--pz-warn-soft);
  border: 1px solid var(--pz-warn-line); border-radius: 3px; padding: 0 4px;
}

/* ---- aborted ----------------------------------------------------- */
.pz-abort {
  border: 1px dashed var(--pz-warn-line);
  background: var(--pz-warn-soft);
  border-radius: 14px;
  padding: 16px;
  /* same elevation as the paper, so a cancelled send is still a sheet
     on the desk rather than a flat patch */
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08),
              0 10px 24px rgba(15, 23, 42, 0.10);
}
.pz-abort-mark {
  display: inline-block; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.09em; font-weight: 700; color: #fff;
  background: var(--pz-warn); border-radius: 999px; padding: 3px 11px; margin-bottom: 10px;
}
.pz-abort-reason { margin: 0 0 10px; }
.pz-abort-reason code {
  font-family: var(--font-mono); font-size: 11.5px; background: #fff;
  border: 1px solid var(--pz-warn-line); padding: 3px 6px; border-radius: 4px; color: #7a3b0d;
}
.pz-abort p { margin: 0; font-size: 12.8px; line-height: 1.58; color: #7a3b0d; }

/* ---- expandable comparison -------------------------------------- */
.pz-more { padding: 0 0 40px; }
.pz-details {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.pz-details > summary {
  cursor: pointer;
  padding: 15px 20px;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  transition: background 0.14s;
}
.pz-details > summary::-webkit-details-marker { display: none; }
.pz-details > summary:hover { background: var(--bg-alt); }
.pz-details > summary > span:first-child { font-weight: 700; font-size: 1rem; }
.pz-details > summary > span:first-child::before {
  content: '+';
  display: inline-block;
  width: 17px; height: 17px;
  line-height: 15px;
  text-align: center;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 5px;
  font-size: 13px;
  margin-right: 9px;
  vertical-align: 1px;
}
.pz-details[open] > summary > span:first-child::before { content: '−'; }
.pz-details-hint { font-size: 12.8px; color: var(--muted-soft); }

.pz-parity-wrap { overflow-x: auto; border-top: 1px solid var(--border); }
.pz-matrix { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 12.5px; }
.pz-matrix thead th {
  text-align: left; padding: 10px 14px; background: var(--bg-alt);
  border-bottom: 1px solid var(--border-strong); font-size: 12px;
}
.pz-matrix tbody th {
  text-align: left; padding: 11px 14px; font-weight: 700; font-size: 12.5px;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  width: 200px; vertical-align: top;
}
.pz-matrix td {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border); vertical-align: top; line-height: 1.48;
}
.pz-matrix td:last-child { border-right: none; }
.pz-matrix tbody tr:last-child td, .pz-matrix tbody tr:last-child th { border-bottom: none; }
.pz-matrix code {
  font-family: var(--font-mono); font-size: 10.8px;
  background: var(--card-bg); padding: 1px 4px; border-radius: 3px;
}
.pz-mark {
  display: inline-block; width: 17px; height: 17px; line-height: 17px;
  text-align: center; border-radius: 50%; font-size: 10.5px; font-weight: 700; margin-bottom: 4px;
}
.is-full .pz-mark { background: var(--pz-good-soft); color: var(--pz-good); border: 1px solid var(--pz-good-line); }
.is-partial .pz-mark { background: var(--pz-warn-soft); color: var(--pz-warn); border: 1px solid var(--pz-warn-line); }
.is-none .pz-mark { background: #f4f5f7; color: var(--muted-soft); border: 1px solid var(--border-strong); }
.pz-mdetail { display: block; font-size: 11.8px; color: var(--muted); }
.is-none .pz-mdetail { color: var(--muted-soft); }

/* ---- responsive -------------------------------------------------- */

/* Below full width the pane headers run out of room by a handful of pixels
   and a chip group drops to a second row — which makes the two panes start
   at different heights, the exact misalignment this layout fixes. Tightening
   the controls buys back more than enough. Enforced by the browser test. */
@media (max-width: 1520px) and (min-width: 1181px) {
  .pz-pane-head h2 { font-size: 0.76rem; letter-spacing: 0.05em; }
  .pz-pane-hint { font-size: 10.5px; margin-left: 5px; }
  .pz-chip, .pz-ver { padding: 5px 8px; font-size: 11.5px; }
  .pz-pane-head { gap: 8px; }
}

/* Narrower still, and no amount of tightening keeps five chips beside a
   label. Stacking BOTH headers is the robust answer: label on one row,
   controls on the next, so the two panes stay equal by construction instead
   of by luck with string lengths. */
@media (max-width: 1340px) {
  .pz-pane-head {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    min-height: 0;
  }
  .pz-pane-hint { display: none; }
  .pz-platforms, .pz-versions { justify-content: flex-start; }
}

/* Shorter viewports get tighter chrome and smaller code, so a whole template
   still lands in the pane rather than being cut off mid-block. Below roughly
   760px tall the longest templates do scroll inside the code pane — the page
   itself still does not. */
@media (max-height: 940px) and (min-width: 1181px) {
  .pz-blk { font-size: 11.5px; line-height: 1.5; padding: 3px 8px; margin-bottom: 3px; }
  .pz-rail { padding: 13px 14px; }
  .pz-rail-t { font-size: 13.6px; margin-bottom: 6px; }
  .pz-rail-d { font-size: 12.6px; line-height: 1.55; }
  .pz-worth { margin-top: 9px; padding: 8px 10px; }
  .pz-worth span { font-size: 11.8px; line-height: 1.48; }
  .pz-pnote span { font-size: 11.6px; line-height: 1.45; }
  .pz-rail-sub { margin: 11px 0 6px; padding-top: 9px; }
  .pz-code { padding: 8px 11px 11px; }
  .pz-pane-head { padding: 6px 13px; min-height: 38px; }
  .pz-preview { padding: 10px; }
}

@media (max-height: 800px) and (min-width: 1181px) {
  .pz-studio { padding: 8px 0 10px; }
  .pz-sub { font-size: 12.5px; line-height: 1.44; }
  /* Three across instead of two: five tabs in two rows rather than three,
     which is ~70px of stage height back on a 720-tall screen. */
  .pz-scenarios { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .pz-tab { padding: 6px 9px; font-size: 12px; border-radius: 8px; }
  .pz-tab small { font-size: 9.5px; margin-top: 1px; }
  .pz-tab:last-child { grid-column: auto; }
  .pz-tab { padding: 6px 11px; font-size: 12.5px; }
  .pz-blk { font-size: 11px; line-height: 1.46; padding: 3px 8px; margin-bottom: 2px; }
  .pz-code { padding: 7px 10px 9px; }
  .pz-rail { padding: 11px 13px; }
  .pz-rail-t { font-size: 12.9px; margin-bottom: 5px; }
  .pz-rail-d { font-size: 12px; line-height: 1.5; }
  .pz-worth { margin-top: 8px; padding: 7px 9px; }
  .pz-worth span { font-size: 11.3px; line-height: 1.45; }
  .pz-pnote span { font-size: 11.2px; line-height: 1.42; }
  .pz-pnotes { gap: 6px; }
}

/* Below three-column width the height lock comes off and the page scrolls
   like a normal page. Rail moves under the code, where a tapped section can
   put its explanation next to what you just tapped. */
@media (max-width: 1180px) {
  .pz-stage { grid-template-rows: auto; }
  /* two columns here, so the code pane is about half the window — shrink
     the type to keep a 62-column line from scrolling sideways */
  .pz-blk { font-size: 11px; line-height: 1.55; }
  .pz-studio { min-height: 0; display: block; padding: 20px 0 28px; }
  .pz-studio > .pz-wide { display: block; }
  .pz-masthead { grid-template-columns: 1fr; }
  .pz-scenarios { justify-content: flex-start; }
  .pz-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'code preview' 'rail preview';
    align-items: start;
  }
  .pz-stage > .pz-pane:nth-of-type(1) { grid-area: code; }
  .pz-stage > .pz-pane:nth-of-type(2) { grid-area: preview; }
  .pz-rail { grid-area: rail; }
  .pz-code { max-height: 60vh; }
}

@media (max-width: 760px) {
  .pz-stage {
    grid-template-columns: 1fr;
    grid-template-areas: 'code' 'rail' 'preview';
  }
  .pz-wide { padding: 0 18px; }
  .pz-masthead h1 { font-size: 1.5rem; }
  .pz-blk { font-size: 11.5px; }
  .pz-rail { position: sticky; bottom: 10px; }
}

/* Last word on code size, because width is the binding constraint here and
   the height queries above would otherwise win on source order. A 62-column
   line has to fit the code pane without scrolling sideways — losing the end
   of a line is unreadable in a way that losing the bottom of one is not. */
@media (max-width: 1300px) {
  .pz-blk { font-size: 10.4px; line-height: 1.5; }
}


/* ---- window treatment ---------------------------------------------
   The two panes read as app windows, the same family as the copy page:
   traffic lights in the bar, and the rendered email floats as white
   paper on the pane instead of sitting flat against it. */
.pz-dots { display: flex; gap: 6px; flex: none; }
.pz-dots i {
  width: 11px; height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.22),
              inset 0 1px 1px rgba(255, 255, 255, 0.55);
}
.pz-dots i:nth-child(1) { background: #ff5f57; }
.pz-dots i:nth-child(2) { background: #febc2e; }
.pz-dots i:nth-child(3) { background: #28c840; }
.pz-pane-head h2 { margin-right: auto; }

.pz-mail {
  background: #ffffff;
  color: #2a313c;
  border-radius: 14px;
  padding: 16px 18px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12),
              0 12px 30px rgba(15, 23, 42, 0.16);
}
/* Paper is white in both themes, so its inks are fixed, not tokens. */
.pz-mail .pz-mail-body { color: #2a313c; }
.pz-mail .pz-mail-who span,
.pz-mail .pz-mail-time,
.pz-mail .pz-mail-pre,
.pz-mail .pz-small,
.pz-mail .pz-prod-why,
.pz-mail .pz-prod-price s,
.pz-mail .pz-prod-price em { color: #69737e; }
.pz-mail .pz-mail-subj,
.pz-mail .pz-mail-body b,
.pz-mail .pz-prod-txt b { color: #10141a; }
.pz-mail .pz-mail-who b { color: #10141a; }
.pz-mail .pz-prod { border-color: #e4e8ef; }
.pz-mail .pz-mail-body hr { border-top-color: #edf0f4; }


/* the freed-up highlighter, now in the rail, in this page's blue */
.pz-rail-d strong {
  color: var(--text);
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--pg-soft) 0);
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* real product photos in the email cards */
.pz-prod-img {
  width: 104px;
  align-self: stretch;
  height: auto;
  min-height: 92px;
  border-radius: 0;
  object-fit: cover;
  flex: none;
  display: block;
}
.pz-prod-txt { padding: 11px 12px 11px 0; }

/* the summit avatar, monogrammed so it reads at 34px */
.pz-avatar--logo { position: relative; overflow: hidden; }
.pz-avatar--logo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* aim at the sunlit summit so the monogram sits on the bright snow */
  object-position: 50% 22%;
}
.pz-avatar--logo i {
  position: relative;
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}


/* ---- the SMS lands in Messages ---------------------------------- */
.pz-device--sms .pz-dev-screen {
  background: linear-gradient(180deg, #0a0b0f 0%, #060708 100%);
}
.pz-sms-contact {
  margin-top: 46px;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pz-sms-ava {
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.pz-sms-ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.pz-sms-contact b { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.pz-sms-thread { padding: 16px 2px 0; }
.pz-device--sms .pz-bubble {
  background: #26272c;
  color: #e8e9ee;
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  padding: 9px 12px;
  max-width: 88%;
  font-size: 12.5px;
  line-height: 1.42;
  width: fit-content;
}
.pz-sms-status {
  display: block;
  margin: 6px 2px 0;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.4);
}
.pz-sms-count {
  display: block;
  text-align: center;
  margin: 10px auto 0;
  font-size: 11px;
  color: #93a1b8;
}

/* ---- branded email chrome, the real-inbox basics ------------------ */
.pz-eml-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e8ecf1;
}
.pz-eml-brand img {
  width: 28px; height: 28px;
  border-radius: 7px;
  object-fit: cover;
  object-position: 50% 22%;
}
.pz-eml-brand b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: #10141a;
}
.pz-eml-brand b i { font-style: normal; font-weight: 500; color: #5b6570; }
.pz-eml-nav {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #98a1ae;
  white-space: nowrap;
}
.pz-eml-foot {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #e8ecf1;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.7;
  color: #98a1ae;
}
.pz-eml-foot a { color: inherit; text-decoration: underline; }


/* A dyn() that wraps a whole product block is not inline text, so the
   inline underline (and the stray line boxes it opens above and below)
   have to come off. The card itself takes the highlight instead. */
.pz-dyn:has(.pz-prod),
.pz-dyn:has(.pz-cta) {
  display: block;
  background: none;
  border-bottom: 0;
  padding: 0;
}
.pz-dyn:has(.pz-prod) .pz-prod {
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22);
  transition: box-shadow 0.13s;
}
.pz-dyn:has(.pz-prod):hover .pz-prod {
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.55);
}
.pz-dyn:hover, .pz-dyn:focus {
  background: rgba(37, 99, 235, 0.14);
  border-bottom-style: solid;
}


/* With the stage pinned, panes must absorb any excess content
   themselves rather than growing the card. */
.pz-stage > * { min-height: 0; }
.pz-preview { overflow-y: auto; }
.pz-rail { overflow-y: auto; scrollbar-width: thin; }


/* The parity table in here is PARKED (see the HTML comment in
   index.html). Until it returns, the empty section must not add height
   below the framed shell. Delete this rule when unparking. */
.pz-more { display: none; }