/* =========================================================
   CampusSeva Partners - panel.css
   Partner sign-in and the partner panel. Colours, fonts and radii come from the theme (global.css variables);
   every variable has a fallback so the panel still looks right without the theme. All classes start with pp-.
   ========================================================= */

.pp-body {
  --pp-bg: var(--background, #FFF6F3);
  --pp-surface: var(--surface-elevated, #fff);
  --pp-soft: var(--surface, #FFFCFB);
  --pp-line: var(--border, #EED9D4);
  --pp-line2: var(--border-strong, #DDBFB8);
  --pp-text: var(--text, #311F1B);
  --pp-muted: var(--text-muted, #87655E);
  --pp-pri: var(--primary, #DF2600);
  --pp-pri-h: var(--primary-hover, #C52000);
  --pp-pri-t: var(--primary-text, #C52000);
  --pp-pri-soft: var(--primary-soft, #FFE6DF);
  --pp-ring: var(--primary-ring, rgb(223 38 0 / .18));
  --pp-ok: var(--success, #008130);
  --pp-err: var(--error, #CC3430);
  --pp-wa: #128C4A;
  --pp-wa-h: #0E7339;
  --pp-r: var(--radius-md, 12px);
  --pp-rl: var(--radius-lg, 18px);
  --pp-side: 17.5rem;
  --pp-head: var(--font-heading, 'Space Grotesk', system-ui, sans-serif);
  --pp-mono: var(--font-mono, ui-monospace, Menlo, monospace);
  margin: 0;
  background: var(--pp-bg);
  color: var(--pp-text);
  font-family: var(--font-body, system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

:where(.pp-body) *, :where(.pp-body) *::before, :where(.pp-body) *::after { box-sizing: border-box; }
:where(.pp-body) :is(h1, h2, h3) { font-family: var(--pp-head); line-height: 1.2; margin: 0; color: var(--pp-text); }
:where(.pp-body) p { margin: 0; }
:where(.pp-body) ul { list-style: none; margin: 0; padding: 0; }
:where(.pp-body) a { color: var(--pp-pri-t); }
:where(.pp-body) a:hover { color: var(--pp-pri-h); }
:where(.pp-body) :focus-visible { outline: 2px solid var(--pp-pri); outline-offset: 2px; border-radius: 6px; }

.pp-body .pp-i { display: inline-block; width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pp-muted { color: var(--pp-muted); }
.pp-small { font-size: .875rem; line-height: 1.45; }
.pp-body .pp-small .pp-i { width: 1rem; height: 1rem; vertical-align: -3px; margin-right: .35rem; }

@view-transition { navigation: none; }

/* ---------- Buttons ---------- */
.pp-body .pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .55rem 1.1rem; border: 1px solid transparent; border-radius: var(--pp-r);
  font: 600 .9375rem/1.2 var(--pp-head); letter-spacing: 0; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.pp-body .pp-btn--primary { background: var(--pp-pri); color: var(--on-primary, #fff); box-shadow: 0 6px 16px -8px var(--pp-pri); }
.pp-body .pp-btn--primary:hover { background: var(--pp-pri-h); color: var(--on-primary, #fff); }
.pp-body .pp-btn--primary:active { transform: translateY(1px); }
.pp-body .pp-btn--primary:disabled { background: var(--pp-line2); color: var(--pp-muted); box-shadow: none; cursor: not-allowed; }
.pp-body .pp-btn--ghost { background: transparent; border-color: var(--pp-line2); color: var(--pp-text); }
.pp-body .pp-btn--ghost:hover { background: var(--pp-pri-soft); border-color: var(--pp-pri); color: var(--pp-pri-t); }
.pp-body .pp-btn--soft { background: var(--pp-pri-soft); color: var(--pp-pri-t); }
.pp-body .pp-btn--soft:hover { background: var(--pp-pri); color: var(--on-primary, #fff); }
.pp-body .pp-btn--wa { background: var(--pp-wa); color: #fff; }
.pp-body .pp-btn--wa:hover { background: var(--pp-wa-h); color: #fff; }
.pp-body .pp-btn--sm { min-height: 2.25rem; padding: .35rem .8rem; font-size: .875rem; }
.pp-body .pp-btn--lg { min-height: 3rem; padding: .7rem 1.4rem; }
.pp-body .pp-btn--block { width: 100%; }
.pp-body .pp-btn .pp-i { width: 1.1rem; height: 1.1rem; }

.pp-body .pp-ib {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--pp-line);
  border-radius: 10px; background: var(--pp-surface); color: var(--pp-muted); cursor: pointer; text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.pp-body .pp-ib:hover { background: var(--pp-pri-soft); color: var(--pp-pri-t); border-color: var(--pp-pri); }
.pp-body .pp-ib--x:hover { background: var(--pp-err); color: #fff; border-color: var(--pp-err); }
.pp-body .pp-ib:disabled { opacity: .4; cursor: not-allowed; }

.pp-ico { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--pp-pri-soft); color: var(--pp-pri-t); }
.pp-ico--lg { width: 3.5rem; height: 3.5rem; border-radius: 16px; }
.pp-ico--lg .pp-i { width: 1.6rem; height: 1.6rem; }

/* ---------- Form controls ---------- */
.pp-label { display: block; margin: 0 0 .35rem; font: 600 .875rem/1.3 var(--pp-head); color: var(--pp-text); }
.pp-req { color: var(--pp-err); }
.pp-hint { margin-top: .35rem; font-size: .8125rem; line-height: 1.4; color: var(--pp-muted); }
.pp-body .pp-input {
  display: block; width: 100%; min-height: 2.75rem; padding: .6rem .8rem; border: 1px solid var(--pp-line2); border-radius: var(--pp-r);
  background: var(--pp-soft); color: var(--pp-text); font: inherit; font-size: 1rem; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.pp-body textarea.pp-input { min-height: 6rem; resize: vertical; }
.pp-body .pp-input:hover { border-color: var(--pp-muted); }
.pp-body .pp-input:focus { outline: none; border-color: var(--pp-pri); box-shadow: 0 0 0 3px var(--pp-ring); background: var(--pp-surface); }
.pp-body select.pp-input { appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2387655E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; }
/* The list that opens from a select: same design as the theme (rounded panel, soft hover, selected row). Browsers without customisable selects keep their own list, coloured to match. */
.pp-body option { background: var(--pp-surface); color: var(--pp-text); }
@supports (appearance: base-select) {
  .pp-body select.pp-input, .pp-body select.pp-input::picker(select) { appearance: base-select; }
  .pp-body select.pp-input { cursor: pointer; }
  .pp-body select.pp-input::picker-icon { display: none; }
  .pp-body select.pp-input::picker(select) {
    box-sizing: border-box; min-width: anchor-size(width); max-height: min(20rem, 60dvh); margin-block: .4rem; padding: .4rem;
    border: 1px solid var(--pp-line2); border-radius: var(--pp-r); background: var(--pp-surface); box-shadow: 0 12px 32px rgb(60 20 10 / .16); scrollbar-width: thin;
    opacity: 0; transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, overlay .15s allow-discrete, display .15s allow-discrete;
  }
  .pp-body select.pp-input:open::picker(select) { opacity: 1; transform: none; }
  @starting-style { .pp-body select.pp-input:open::picker(select) { opacity: 0; transform: translateY(-6px); } }
  .pp-body select.pp-input option {
    display: flex; align-items: center; gap: .6rem; min-height: 2.5rem; margin-bottom: 4px; padding: .5rem .75rem; border-radius: calc(var(--pp-r) - 4px);
    background: transparent; color: var(--pp-text); font: inherit; font-size: .9375rem; cursor: pointer; transition: background-color .15s ease, color .15s ease;
  }
  .pp-body select.pp-input option::checkmark { order: 2; margin-left: auto; color: var(--pp-pri-t); }
  .pp-body select.pp-input option:hover, .pp-body select.pp-input option:focus-visible { background: var(--pp-pri-soft); color: var(--pp-pri-t); }
  .pp-body select.pp-input option:checked { background: var(--pp-pri-soft); color: var(--pp-pri-t); font-weight: 600; }
  .pp-body select.pp-input option:disabled { color: var(--pp-muted); cursor: not-allowed; }
}
.pp-field.has-error .pp-input, .pp-field--sub.has-error .pp-input { border-color: var(--pp-err); box-shadow: 0 0 0 3px rgb(204 52 48 / .15); }
.pp-err { margin-top: .35rem; display: flex; gap: .35rem; align-items: flex-start; font-size: .8125rem; font-weight: 600; color: var(--pp-err); }
.pp-field.is-changed > .pp-label::after, .pp-field--sub.is-changed > .pp-label::after { content: ''; display: inline-block; width: .45rem; height: .45rem; margin-left: .45rem; border-radius: 50%; background: var(--pp-pri); vertical-align: middle; }

.pp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.pp-fields > .pp-field { grid-column: 1 / -1; min-width: 0; }
.pp-fields > .pp-field--half { grid-column: auto; }
.pp-fields > .pp-field--text, .pp-fields > .pp-field--url, .pp-fields > .pp-field--email, .pp-fields > .pp-field--number, .pp-fields > .pp-field--select, .pp-fields > .pp-field--date_picker { grid-column: auto; }
@media (max-width: 40rem) { .pp-fields { grid-template-columns: 1fr; } .pp-fields > .pp-field { grid-column: 1 / -1 !important; } }

.pp-affix { display: flex; align-items: stretch; border: 1px solid var(--pp-line2); border-radius: var(--pp-r); background: var(--pp-soft); overflow: hidden; }
.pp-affix:focus-within { border-color: var(--pp-pri); box-shadow: 0 0 0 3px var(--pp-ring); }
.pp-affix > span { display: grid; place-items: center; padding: 0 .8rem; background: var(--pp-pri-soft); color: var(--pp-pri-t); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.pp-body .pp-affix .pp-input { border: 0; border-radius: 0; box-shadow: none; background: transparent; min-width: 0; }

.pp-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pp-chip { position: relative; cursor: pointer; }
.pp-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pp-chip span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .35rem .9rem; border: 1px solid var(--pp-line2); border-radius: 999px; background: var(--pp-soft); font-size: .9375rem; transition: .15s; }
.pp-chip:hover span { border-color: var(--pp-pri); }
.pp-chip input:checked + span { background: var(--pp-pri); border-color: var(--pp-pri); color: var(--on-primary, #fff); font-weight: 600; }
.pp-chip input:focus-visible + span { outline: 2px solid var(--pp-pri); outline-offset: 2px; }

.pp-switch { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; min-height: 2.5rem; }
.pp-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pp-switch__ui { position: relative; width: 2.75rem; height: 1.6rem; border-radius: 999px; background: var(--pp-line2); transition: background-color .2s; flex: none; }
.pp-switch__ui::after { content: ''; position: absolute; top: .2rem; left: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s var(--ease-out, ease); }
.pp-switch input:checked ~ .pp-switch__ui { background: var(--pp-ok); }
.pp-switch input:checked ~ .pp-switch__ui::after { transform: translateX(1.15rem); }
.pp-switch input:focus-visible ~ .pp-switch__ui { outline: 2px solid var(--pp-pri); outline-offset: 2px; }

.pp-check { display: flex; align-items: center; gap: .6rem; font-size: .9375rem; cursor: pointer; }
.pp-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--pp-pri); }

/* ---------- Images ---------- */
.pp-media { display: grid; gap: .6rem; }
.pp-media__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .75rem; }
.pp-media__list:empty { display: none; }
.pp-thumb { position: relative; margin: 0; border: 1px solid var(--pp-line); border-radius: var(--pp-r); overflow: hidden; background: var(--pp-soft); aspect-ratio: 4 / 3; }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-thumb figcaption { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; gap: .25rem; padding: .35rem; background: linear-gradient(transparent, rgb(0 0 0 / .65)); opacity: 1; }
.pp-thumb__b { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 8px; background: rgb(255 255 255 / .92); color: #311F1B; cursor: pointer; }
.pp-thumb__b:hover { background: var(--pp-pri); color: #fff; }
.pp-thumb__b--x:hover { background: var(--pp-err); }
.pp-thumb__b .pp-i { width: 1rem; height: 1rem; }
.pp-thumb.is-new { animation: pp-pop .35s var(--ease-out, ease); }
@keyframes pp-pop { from { transform: scale(.92); opacity: 0; } }
.pp-media__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.pp-media__count { font: 600 .8125rem var(--pp-mono); color: var(--pp-muted); }
.pp-media__msg { font-size: .8125rem; font-weight: 600; }
.pp-media__msg.is-err { color: var(--pp-err); }
.pp-media.is-full .pp-upload { opacity: .5; pointer-events: none; }
.pp-media.is-busy .pp-upload { opacity: .6; pointer-events: none; }

/* ---------- Repeater ---------- */
.pp-rep { display: grid; gap: .75rem; }
.pp-rep__rows { display: grid; gap: .75rem; }
.pp-row { border: 1px solid var(--pp-line); border-radius: var(--pp-r); background: var(--pp-soft); }
.pp-row__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .5rem .5rem .9rem; border-bottom: 1px solid var(--pp-line); }
.pp-row__n { font: 600 .8125rem var(--pp-mono); color: var(--pp-muted); }
.pp-row__btns { display: flex; gap: .35rem; }
.pp-row__btns .pp-ib { width: 2.1rem; height: 2.1rem; }
.pp-row__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
.pp-field--wide { grid-column: 1 / -1; }
.pp-rep__bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pp-rep__count { font: 600 .8125rem var(--pp-mono); color: var(--pp-muted); }
.pp-rep.is-full [data-pp-add] { opacity: .5; pointer-events: none; }
.pp-rep--videos .pp-row__grid { grid-template-columns: 1fr; }
@media (max-width: 40rem) { .pp-row__grid { grid-template-columns: 1fr; } }

/* ---------- Login ---------- */
.pp-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 100vh; min-height: 100dvh; }
.pp-login__form { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.25rem, 4vw, 3rem); }
.pp-login__form .pp-brand { justify-self: start; margin: 0 0 .5rem; }
.pp-login__box { width: 100%; max-width: 26rem; margin: 0 auto; display: grid; gap: 1rem; }
.pp-login__box h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); }
.pp-login__help { text-align: left; margin-top: .5rem; }
.pp-form .pp-field + .pp-field { margin-top: 0; }
.pp-login .pp-form { display: grid; gap: 1rem; }
.pp-pass { position: relative; }
.pp-pass .pp-input { padding-right: 3rem; }
.pp-pass__btn { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 8px; background: transparent; color: var(--pp-muted); cursor: pointer; }
.pp-pass__btn:hover { color: var(--pp-pri-t); }
.pp-alert { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--pp-r); font-size: .9375rem; font-weight: 500; }
.pp-alert .pp-i { margin-top: .1rem; }
.pp-alert--error { background: rgb(204 52 48 / .1); color: var(--pp-err); border: 1px solid rgb(204 52 48 / .3); }
.pp-alert--ok { background: rgb(0 129 48 / .1); color: var(--pp-ok); border: 1px solid rgb(0 129 48 / .3); }
.pp-login__side { position: relative; display: grid; align-items: center; padding: clamp(2rem, 5vw, 4rem); background: linear-gradient(150deg, #2a1410 0%, #4a1c10 55%, #a82100 130%); color: #fbe9e3; overflow: hidden; }
.pp-login__side::before { content: ''; position: absolute; inset: auto -20% -35% auto; width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(circle, rgb(255 90 40 / .35), transparent 65%); }
.pp-login__sidein { position: relative; max-width: 30rem; display: grid; gap: 1.75rem; }
.pp-login__sidein h2 { color: #fff; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }
.pp-login__sidein li { display: flex; gap: .9rem; align-items: flex-start; }
.pp-login__sidein li + li { margin-top: 1.1rem; }
.pp-login__sidein li strong { display: block; color: #fff; font-family: var(--pp-head); }
.pp-login__sidein li span:not(.pp-ico) { display: block; color: #f0cfc6; font-size: .9375rem; }
.pp-login__sidein .pp-ico { background: rgb(255 255 255 / .12); color: #fff; }
.pp-login__note { display: flex; gap: .6rem; align-items: center; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .18); color: #f0cfc6; font-size: .875rem; }
@media (max-width: 56rem) { .pp-login { grid-template-columns: 1fr; } .pp-login__side { display: none; } }
@media (max-width: 40rem) { .pp-login__form { justify-content: flex-start; padding-top: 1.5rem; } }

/* ---------- App shell ---------- */
.pp-app { display: grid; grid-template-columns: var(--pp-side) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.pp-previewbar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: center; padding: .5rem 1rem; background: #1b1b1f; color: #fff; font-size: .875rem; }
.pp-previewbar a { color: #ffd2c5; font-weight: 600; }
.pp-side { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem 1rem; background: var(--pp-surface); border-right: 1px solid var(--pp-line); overflow-y: auto; overscroll-behavior: contain; }
.is-preview .pp-side { top: 2.4rem; height: calc(100dvh - 2.4rem); }
.pp-side__top { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: 0 .25rem; }
.pp-body .pp-side__close, .pp-body .pp-top__menu { display: none; }
.pp-brand { display: inline-flex; align-items: center; text-decoration: none; }
.pp-brand .logo { display: inline-flex; align-items: center; gap: .55rem; }
.pp-brand .logo__mark { width: 2.2rem; height: auto; }
.pp-brand__name { font: 700 1.2rem var(--pp-head); color: var(--pp-text); }
.pp-listing { display: flex; align-items: center; gap: .75rem; padding: .7rem; border: 1px solid var(--pp-line); border-radius: var(--pp-r); background: var(--pp-soft); }
.pp-listing__img { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 10px; background: var(--pp-pri-soft); color: var(--pp-pri-t); overflow: hidden; }
.pp-listing__img img { width: 100%; height: 100%; object-fit: cover; }
.pp-listing__txt { min-width: 0; display: grid; }
.pp-listing__txt strong { font-family: var(--pp-head); font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-listing__txt span { font-size: .8125rem; color: var(--pp-muted); }
.pp-switch-list summary { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; border-radius: 10px; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--pp-muted); list-style: none; }
.pp-switch-list summary::-webkit-details-marker { display: none; }
.pp-switch-list[open] summary .pp-i { transform: rotate(180deg); }
.pp-switch-list li a { display: block; padding: .45rem .75rem; border-radius: 8px; text-decoration: none; color: var(--pp-text); font-size: .9375rem; }
.pp-switch-list li a:hover, .pp-switch-list li a[aria-current] { background: var(--pp-pri-soft); color: var(--pp-pri-t); }
.pp-nav { display: grid; gap: .15rem; align-content: start; flex: 1; }
.pp-nav__h { margin: .9rem .75rem .3rem; font: 600 .75rem var(--pp-head); color: var(--pp-muted); letter-spacing: .02em; }
.pp-nav__a { position: relative; display: flex; align-items: center; gap: .7rem; min-height: 2.6rem; padding: .45rem .75rem; border-radius: 10px; color: var(--pp-text); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: background-color .15s, color .15s; }
.pp-nav__a .pp-i { color: var(--pp-muted); transition: color .15s; }
.pp-nav__a > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-nav__a:hover { background: var(--pp-pri-soft); color: var(--pp-text); }
.pp-nav__a:hover .pp-i { color: var(--pp-pri-t); }
.pp-nav__a.is-on { background: var(--pp-pri-soft); color: var(--pp-pri-t); font-weight: 600; }
.pp-nav__a.is-on::before { content: ''; position: absolute; left: -1rem; top: .5rem; bottom: .5rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--pp-pri); }
.pp-nav__a.is-on .pp-i { color: var(--pp-pri-t); }
.pp-nav__a--out { margin-top: .25rem; }
.pp-nav__a--out:hover, .pp-nav__a--out:hover .pp-i { color: var(--pp-err); }
.pp-nav__n { font: 600 .75rem var(--pp-mono); font-style: normal; color: var(--pp-muted); }
.pp-nav__n.is-full { color: var(--pp-ok); }
.pp-side__foot { display: grid; gap: .75rem; padding-top: .9rem; border-top: 1px solid var(--pp-line); }
.pp-side__row { display: flex; align-items: center; gap: .4rem; }
.pp-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 600; }
.pp-ico-sun, .pp-ico-moon { display: contents; }
.pp-ico-moon { display: none; }
html.dark .pp-ico-sun { display: none; }
html.dark .pp-ico-moon { display: contents; }

.pp-main { min-width: 0; display: flex; flex-direction: column; }
.pp-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .9rem; padding: .8rem clamp(1rem, 3vw, 2rem); background: color-mix(in srgb, var(--pp-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--pp-line); }
.is-preview .pp-top { top: 2.4rem; }
.pp-top__crumb { font-size: .8125rem; color: var(--pp-muted); }
.pp-top__h { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
.pp-content.is-loading { opacity: .55; transition: opacity .15s .1s; pointer-events: none; }
.pp-content { width: 100%; max-width: 70rem; padding: clamp(1rem, 3vw, 2rem); display: grid; gap: 1.5rem; align-content: start; }

.pp-scrim { position: fixed; inset: 0; z-index: 70; background: rgb(20 10 8 / .5); }
@media (max-width: 62rem) {
  .pp-app { grid-template-columns: 1fr; }
  .pp-side { position: fixed; z-index: 80; inset: 0 auto 0 0; width: min(20rem, 88vw); height: 100dvh; transform: translateX(-102%); transition: transform .28s var(--ease-out, ease); box-shadow: var(--shadow-lg, 0 20px 50px rgb(0 0 0 / .3)); }
  .is-preview .pp-side { top: 0; height: 100dvh; }
  .pp-side.is-open { transform: none; }
  .pp-body .pp-side__close, .pp-body .pp-top__menu { display: inline-grid; }
  .pp-nav__a.is-on::before { left: -1rem; }
}

/* ---------- Cards, overview ---------- */
.pp-card { min-width: 0; padding: clamp(1.1rem, 1rem + .8vw, 1.75rem); border: 1px solid var(--pp-line); border-radius: var(--pp-rl); background: var(--pp-surface); box-shadow: var(--shadow-xs, 0 1px 2px rgb(49 31 27 / .06)); }
.pp-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.pp-card__t { font-size: 1.2rem; margin-bottom: .35rem; }
.pp-card__head .pp-card__t { margin-bottom: 0; }
.pp-card > .pp-muted { margin-bottom: 1rem; }
.pp-pill { display: inline-flex; padding: .25rem .75rem; border-radius: 999px; background: var(--pp-pri-soft); color: var(--pp-pri-t); font: 600 .8125rem var(--pp-head); }
.pp-hello { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.pp-hello h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.pp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pp-kpi { display: grid; gap: .25rem; align-content: start; padding: 1.1rem; border: 1px solid var(--pp-line); border-radius: var(--pp-rl); background: var(--pp-surface); }
.pp-kpi .pp-ico { margin-bottom: .5rem; }
.pp-kpi__l { font-size: .875rem; color: var(--pp-muted); line-height: 1.3; min-height: 2.6em; }
.pp-kpi__v { font: 700 clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem)/1.1 var(--pp-head); }
.pp-kpi__s { font-size: .8125rem; color: var(--pp-muted); }
@media (max-width: 62rem) { .pp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .pp-kpis { gap: .6rem; } .pp-kpi { padding: .85rem; } }

.pp-graph__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.pp-seg { display: inline-flex; padding: .2rem; border-radius: 12px; background: var(--pp-soft); border: 1px solid var(--pp-line); }
.pp-seg button { min-height: 2.25rem; padding: .3rem .95rem; border: 0; border-radius: 9px; background: transparent; color: var(--pp-muted); font: 600 .875rem var(--pp-head); cursor: pointer; transition: .15s; }
.pp-seg button.is-on { background: var(--pp-pri); color: var(--on-primary, #fff); }
.pp-seg button:not(.is-on):hover { color: var(--pp-pri-t); }

.pp-chart { --bar: var(--pp-pri); }
.pp-readout { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; margin-bottom: 1.5rem; min-height: 1.6rem; }
.pp-readout strong { font-family: var(--pp-head); }
.pp-readout span { color: var(--pp-muted); }
.pp-chart__plot { position: relative; height: 13rem; margin-left: 2.6rem; }
.pp-chart__grid { position: absolute; inset: 0; pointer-events: none; }
.pp-chart__grid span { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px dashed var(--pp-line); }
.pp-chart__grid i { position: absolute; left: -2.6rem; top: -.65rem; width: 2.2rem; text-align: right; font: normal 500 .6875rem var(--pp-mono); color: var(--pp-muted); }
.pp-chart__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(.2rem, 1vw, .6rem); align-items: end; }
.pp-col { position: relative; height: 100%; display: flex; align-items: flex-end; border-radius: 6px; cursor: default; }
.pp-col:hover, .pp-col:focus-visible { background: var(--pp-pri-soft); outline: none; }
.pp-col__bar { display: block; width: 100%; height: var(--h); min-height: 3px; border-radius: 6px 6px 2px 2px; background: var(--bar); transform-origin: bottom; animation: pp-grow .7s var(--ease-out, ease) both; }
.pp-col.is-zero .pp-col__bar { background: var(--pp-line2); height: 3px; }
.pp-col:not(.is-now) .pp-col__bar { opacity: .72; }
@keyframes pp-grow { from { transform: scaleY(0); } }
.pp-chart__axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(.2rem, 1vw, .6rem); margin: .5rem 0 .75rem 2.6rem; }
.pp-chart__axis span { text-align: center; font: 500 .6875rem var(--pp-mono); color: var(--pp-muted); overflow: hidden; }
.pp-chart__axis span.is-now { color: var(--pp-pri-t); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .pp-col__bar, .pp-thumb.is-new { animation: none; } * { transition-duration: .01ms !important; } }

.pp-prog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.pp-prog a { display: flex; align-items: center; gap: .8rem; padding: .8rem; border: 1px solid var(--pp-line); border-radius: var(--pp-r); text-decoration: none; color: var(--pp-text); transition: .15s; }
.pp-prog a:hover { border-color: var(--pp-pri); background: var(--pp-soft); }
.pp-prog__txt { flex: 1; min-width: 0; display: grid; gap: .4rem; }
.pp-prog__txt strong { font-family: var(--pp-head); font-size: .9375rem; }
.pp-prog em { font: 600 .8125rem var(--pp-mono); font-style: normal; color: var(--pp-muted); }
.pp-prog > li > a > .pp-i { color: var(--pp-muted); }
.pp-bar { display: block; height: .4rem; border-radius: 999px; background: var(--pp-line); overflow: hidden; }
.pp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--pp-ok); }
@media (max-width: 48rem) { .pp-prog { grid-template-columns: 1fr; } }
.pp-admincheck { border-style: dashed; }
.pp-admincheck ul { display: grid; gap: .2rem; margin-top: .5rem; }

/* ---------- Edit ---------- */
.pp-edit { display: grid; gap: 1.25rem; }
.pp-edit__intro { display: grid; gap: .4rem; }
.pp-fs { display: grid; gap: 1.25rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.pp-sec__t { margin-bottom: 1rem; font-size: 1.1rem; }
.pp-savebar { position: sticky; bottom: 0; z-index: 25; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: .5rem; padding: .85rem 1.1rem; border: 1px solid var(--pp-line2); border-radius: var(--pp-rl); background: var(--pp-surface); box-shadow: var(--shadow-md, 0 8px 24px -6px rgb(49 31 27 / .2)); }
.pp-savebar__msg { flex: 1; min-width: 12rem; }
.pp-savebar__state { font: 600 .9375rem var(--pp-head); }
.pp-savebar.is-dirty { border-color: var(--pp-pri); }
.pp-savebar.is-dirty .pp-savebar__state { color: var(--pp-pri-t); }
.pp-savebar.is-saved .pp-savebar__state { color: var(--pp-ok); }
.pp-savebar.is-error .pp-savebar__state { color: var(--pp-err); }
.pp-savebar .pp-btn--lg { margin-left: auto; }

/* ---------- Tables, tips, empty ---------- */
.pp-tablewrap { overflow-x: auto; margin-top: .5rem; }
.pp-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.pp-table th { text-align: left; padding: .6rem .75rem; border-bottom: 2px solid var(--pp-line); font: 600 .8125rem var(--pp-head); color: var(--pp-muted); }
.pp-table td { padding: .75rem; border-bottom: 1px solid var(--pp-line); vertical-align: top; overflow-wrap: anywhere; }
.pp-table td strong { display: block; font-family: var(--pp-head); }
@media (max-width: 40rem) {
  .pp-table thead { display: none; }
  .pp-table tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--pp-line); }
  .pp-table td { display: grid; grid-template-columns: 5rem 1fr; gap: .5rem; padding: .3rem 0; border: 0; }
  .pp-table td::before { content: attr(data-l); font-size: .8125rem; color: var(--pp-muted); font-weight: 600; }
}
.pp-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 62rem) { .pp-two { grid-template-columns: 1fr; } }
.pp-tips { display: grid; gap: 1.1rem; margin-top: .75rem; }
.pp-tips li { display: flex; gap: .9rem; }
.pp-tips strong { font-family: var(--pp-head); }
.pp-tips p { color: var(--pp-muted); font-size: .9375rem; }
.pp-contact { display: grid; gap: .75rem; justify-items: start; }
.pp-contact .pp-card__t { margin: 0; }
.pp-empty { display: grid; justify-items: center; gap: .6rem; text-align: center; padding-block: 3rem; }
.pp-empty--in { padding-block: 2rem; }
.pp-empty h2 { font-size: 1.3rem; }

/* ---------- Toast ---------- */
.pp-toast { position: fixed; z-index: 100; right: 1.25rem; top: 4.75rem; transform: translateY(-.75rem); max-width: min(26rem, calc(100vw - 2.5rem)); padding: .8rem 1.1rem; border-radius: var(--pp-r); background: #1d1210; color: #fff; font-size: .9375rem; font-weight: 500; box-shadow: var(--shadow-lg, 0 20px 50px rgb(0 0 0 / .3)); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
.pp-toast.is-on { opacity: 1; transform: none; }
.pp-toast.is-err { background: var(--pp-err); }
.pp-toast.is-ok { background: var(--pp-ok); }
.pp-toast[hidden] { display: block; visibility: hidden; }
.pp-toast.is-on[hidden] { visibility: visible; }

@media (max-width: 40rem) {
  .pp-savebar { padding: .6rem .75rem; gap: .5rem .75rem; }
  .pp-savebar__msg { min-width: 0; }
  .pp-savebar [data-pp-prog], .pp-savebar [data-pp-next] { display: none; }
  .pp-body .pp-savebar .pp-btn--lg { min-height: 2.75rem; padding: .5rem 1rem; }
  .pp-toast { top: 4.25rem; right: .75rem; }
}

/* =========================================================
   Promotion plans: plans, buy, pay, my plan
   ========================================================= */
.pp-body .pp-alert--warn { background: rgb(214 140 0 / .12); color: var(--pp-text); border: 1px solid rgb(214 140 0 / .4); }
.pp-body .pp-alert--info { background: var(--pp-pri-soft); color: var(--pp-text); border: 1px solid var(--pp-line2); }
.pp-body .pp-alert a { color: inherit; font-weight: 700; }
.pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pp-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .75rem; }
.pp-back { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; }
.pp-back .pp-i { width: 1rem; height: 1rem; }
.pp-help { margin-top: .35rem; font-size: .8125rem; color: var(--pp-muted); }
.pp-help--err { color: var(--pp-err); font-weight: 600; }
.pp-body .pp-input--mono { font-family: var(--pp-mono); letter-spacing: .04em; }
.pp-body .pp-ib--sm { width: 2rem; height: 2rem; }
.pp-link-btn { padding: 0; border: 0; background: none; color: var(--pp-pri-t); font: inherit; text-decoration: underline; cursor: pointer; }
.pp-body fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pp-body fieldset:disabled { opacity: .6; }

.pp-seg--links { display: inline-flex; padding: .2rem; border-radius: 12px; background: var(--pp-soft); border: 1px solid var(--pp-line); justify-self: start; }
.pp-seg--links a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .3rem 1.1rem; border-radius: 9px; color: var(--pp-muted); font: 600 .9375rem var(--pp-head); text-decoration: none; }
.pp-seg--links a.is-on { background: var(--pp-pri); color: var(--on-primary, #fff); }
.pp-seg--links a:not(.is-on):hover { color: var(--pp-pri-t); }

.pp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; align-items: stretch; }
.pp-plan { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: .6rem; padding: 1.4rem; border: 1px solid var(--pp-line); border-radius: var(--pp-rl); background: var(--pp-surface); }
.pp-plan.is-top { border-color: var(--pp-pri); box-shadow: 0 0 0 1px var(--pp-pri), 0 14px 30px -18px var(--pp-pri); }
.pp-plan header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.pp-plan h3 { font-size: 1.25rem; }
.pp-plan__price strong { font: 700 clamp(1.8rem, 1.5rem + 1vw, 2.3rem)/1.1 var(--pp-head); }
.pp-plan__price span { color: var(--pp-muted); }
.pp-save { color: var(--pp-ok); }
.pp-ticks { display: grid; gap: .55rem; margin: .5rem 0 1rem; align-content: start; }
.pp-ticks li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9375rem; }
.pp-ticks .pp-i { color: var(--pp-ok); width: 1.1rem; height: 1.1rem; margin-top: .2rem; }

.pp-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); gap: 1.25rem; align-items: start; }
.pp-split--even { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
@media (max-width: 56rem) { .pp-split { grid-template-columns: 1fr; } .pp-summary { order: -1; } }
.pp-form { display: grid; gap: 1rem; align-content: start; }
.pp-sum { display: grid; gap: .1rem; margin: .75rem 0 0; }
.pp-sum > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--pp-line); }
.pp-sum dt { color: var(--pp-muted); }
.pp-sum dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.pp-sum .is-total { border-bottom: 0; padding-top: .75rem; }
.pp-sum .is-total dt { color: var(--pp-text); font: 700 1rem var(--pp-head); }
.pp-sum .is-total dd { font: 700 1.4rem var(--pp-head); }

.pp-pill--pending { background: rgb(214 140 0 / .15); color: var(--pp-text); }
.pp-pill--submitted { background: rgb(26 115 232 / .14); color: var(--pp-text); }
.pp-pill--active, .pp-pill--running { background: rgb(0 129 48 / .14); color: var(--pp-ok); }
.pp-pill--upcoming { background: rgb(26 115 232 / .14); color: var(--pp-text); }
.pp-pill--finished, .pp-pill--cancelled { background: var(--pp-soft); color: var(--pp-muted); border: 1px solid var(--pp-line); }

.pp-qr { width: min(15rem, 100%); margin: .5rem auto 0; padding: .5rem; border-radius: var(--pp-r); background: #fff; border: 1px solid var(--pp-line); aspect-ratio: 1; display: grid; place-items: center; font-size: .8125rem; color: #444; text-align: center; }
.pp-qr svg { width: 100%; height: 100%; display: block; }
.pp-qr__amt { text-align: center; font: 700 1.5rem var(--pp-head); margin: .6rem 0; }
.pp-body .pp-only-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .pp-body .pp-only-touch { display: inline-flex; margin-bottom: .75rem; } }
.pp-copylist { display: grid; gap: .1rem; margin: .5rem 0 0; }
.pp-copy { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--pp-line); }
.pp-copy dt { color: var(--pp-muted); font-size: .875rem; }
.pp-copy dd { margin: 0; display: flex; align-items: center; gap: .35rem; font-family: var(--pp-mono); font-size: .9375rem; overflow-wrap: anywhere; text-align: right; }

.pp-planhead { display: grid; gap: 1rem; }
.pp-progwrap { display: grid; gap: .5rem; }
.pp-bar--lg { height: .7rem; }
.pp-month { border-top: 1px solid var(--pp-line); }
.pp-month:first-of-type { margin-top: 1rem; }
.pp-month > summary { display: flex; align-items: center; gap: .75rem; padding: .85rem 0; cursor: pointer; list-style: none; }
.pp-month > summary::-webkit-details-marker { display: none; }
.pp-month > summary > span { flex: 1; }
.pp-month > summary em { font: 600 .8125rem var(--pp-mono); font-style: normal; color: var(--pp-muted); }
.pp-month[open] > summary .pp-i { transform: rotate(180deg); }
.pp-items { display: grid; gap: .75rem; padding-bottom: 1rem; }
.pp-item { display: grid; gap: .6rem; padding: 1rem; border: 1px solid var(--pp-line); border-radius: var(--pp-r); background: var(--pp-soft); scroll-margin-top: 5rem; }
.pp-item:target { border-color: var(--pp-pri); }
.pp-item--ready { border-color: rgb(214 140 0 / .6); background: rgb(214 140 0 / .07); }
.pp-item__head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pp-item__t { flex: 1; min-width: 12rem; display: grid; }
.pp-item__cap { white-space: normal; overflow-wrap: anywhere; }
.pp-st { display: inline-flex; padding: .15rem .6rem; border-radius: 999px; font: 600 .75rem var(--pp-head); background: var(--pp-line); color: var(--pp-text); }
.pp-st--published { background: rgb(0 129 48 / .15); color: var(--pp-ok); }
.pp-st--ready { background: rgb(214 140 0 / .2); }
.pp-st--changes, .pp-st--late { background: rgb(204 52 48 / .14); color: var(--pp-err); }
.pp-st--approved, .pp-st--scheduled { background: rgb(26 115 232 / .14); }
.pp-review { display: grid; gap: .5rem; }
.pp-chan { display: grid; gap: .6rem; }
.pp-chan > li { padding: .75rem; border-radius: var(--pp-r); background: var(--pp-surface); border: 1px solid var(--pp-line); display: grid; gap: .4rem; }
.pp-chan__h { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: baseline; }
.pp-chan__h a { margin-left: auto; }
.pp-chan__h .pp-i { width: .9rem; height: .9rem; vertical-align: -2px; margin-right: .25rem; }
.pp-nums { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; }
.pp-nums > div { display: grid; }
.pp-nums dt { font-size: .75rem; color: var(--pp-muted); }
.pp-nums dd { margin: 0; font: 700 1.1rem var(--pp-head); font-variant-numeric: tabular-nums; }
.pp-nav__n.is-alert { background: var(--pp-pri); color: var(--on-primary, #fff); border-radius: 999px; padding: .05rem .5rem; }
@media (max-width: 40rem) { .pp-chan__h a { margin-left: 0; } }
.pp-table td .pp-small { display: block; }

/* Approval: what is waiting, what the team decided */
.pp-pill--rejected { background: rgb(204 52 48 / .12); color: var(--pp-err); }
.pp-pill--ic { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.pp-pill--ic .pp-i { width: 1rem; height: 1rem; }
.pp-nav__n.is-ok { background: var(--pp-ok); color: #fff; border-radius: 999px; padding: .05rem .5rem; }
.pp-nav__n.is-wait { background: rgb(214 140 0 / .2); color: var(--pp-text); border-radius: 999px; padding: .05rem .5rem; }
.pp-nav__w { display: inline-grid; place-items: center; margin-left: auto; color: #b26a00; font-style: normal; }
.pp-nav__w + .pp-nav__n { margin-left: .4rem; }
.pp-nav__w .pp-i { width: 1rem; height: 1rem; color: inherit; }
.pp-wait { display: inline-flex; align-items: center; margin-left: .5rem; padding: .05rem .5rem; border-radius: 999px; background: rgb(214 140 0 / .18); color: var(--pp-text); font: 600 .75rem var(--pp-head); vertical-align: middle; }
.pp-new { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; background: var(--pp-ok); color: #fff; font: 700 .7rem var(--pp-head); }
.pp-why { display: block; margin-top: .3rem; padding: .35rem .55rem; border-left: 3px solid var(--pp-err); background: rgb(204 52 48 / .07); border-radius: .25rem; color: var(--pp-text); }
.pp-sumline { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; padding: 0; list-style: none; }
.pp-table tr.is-fresh td { background: rgb(0 129 48 / .06); }
.pp-table td .pp-pill { display: inline-flex; }

/* Claim search: each found page is its own box, with room above and below. */
.pp-card > .pp-form[role="search"] { margin-bottom: 1.1rem; }
.pp-card > .pp-form[role="search"] + p, .pp-card > .pp-form[role="search"] + .pp-claim { margin-top: 0; }
.pp-claim { gap: .85rem; margin-top: 1rem; padding: 1rem 1.1rem 1.15rem; border: 1px solid var(--pp-line); border-radius: var(--pp-r); background: var(--pp-soft); }
.pp-claim > p { margin: 0; line-height: 1.5; }
.pp-claim > p a { margin-left: .35rem; white-space: nowrap; }
.pp-claim .pp-btn { justify-self: stretch; }
@media (min-width: 40rem) { .pp-claim .pp-btn { justify-self: start; } }
.pp-card__t + form.pp-form[role="search"] { margin-top: .75rem; }

/* Draft overview: room between the steps and the button under them. */
.pp-card > ol.pp-tips + p { margin-top: 1rem; }
.pp-bundle { display: grid; gap: .65rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--pp-line, #e8d9d4); }

.pp-where { border: 0; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .6rem; min-width: 0; }
.pp-where legend { padding: 0; margin-bottom: .25rem; }
.pp-where [data-pp-own] { display: grid; gap: .75rem; margin-top: .25rem; }
.pp-where [data-pp-own][hidden] { display: none; }
.pp-help--warn { padding: .7rem .85rem; border-radius: .6rem; background: rgb(214 140 0 / .12); border: 1px solid rgb(214 140 0 / .4); color: var(--pp-text); font-size: .875rem; line-height: 1.5; }