/* ScaleLounge portals V2: client Brand Setup (Brand Presence PDF pages 5 to 8, the phone layouts on page 9).
 *
 * Every rule is scoped under html.pv-app and every colour is a token, so both themes and every panel read
 * correctly; nothing here re-declares a surface or text token. The setup bar and the progress line are the accent
 * (the ring tokens: champagne ink #7E663A on white, #B79A63 on dark), never raw champagne. The logo tile and the
 * palette swatches carry the brand's own colours (set from the approved record, checked as #rrggbb), which never
 * change with the theme: dark mode changes the interface, not the brand. Layout follows the main column's width
 * (@container pvmain), so the page never scrolls sideways on a phone.
 */

/* ---- The page --------------------------------------------------------------------------------- */
html.pv-app .pv-cbrand {
  display: grid;
  gap: var(--pv-gap);
  min-width: 0;
}

html.pv-app .pv-cbrand-headaction {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

html.pv-app .pv-cbrand .pv-card__title,
html.pv-app .pv-cbrand-cmp__title,
html.pv-app .pv-cbrand-changed__title {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

html.pv-app .pv-cbrand .pv-card__head {
  margin-bottom: 14px;
}

html.pv-app .pv-cbrand-row {
  display: grid;
  align-items: stretch;
  gap: var(--pv-gap);
  min-width: 0;
}

html.pv-app .pv-cbrand-stack {
  display: grid;
  align-content: start;
  gap: var(--pv-gap);
  min-width: 0;
}

/* The confirmation after a decision or a request: first on the page, focus moved to it. */
html.pv-app .pv-cbrand-notice {
  align-items: flex-start;
  margin-bottom: var(--pv-gap);
  font-size: var(--pv-fs-support);
  line-height: 1.5;
}

html.pv-app .pv-cbrand-notice.is-success {
  border-color: var(--pv-status-success-bg);
}

html.pv-app .pv-cbrand-notice.is-danger {
  color: var(--pv-text);
  border-color: var(--pv-invalid);
}

html.pv-app .pv-cbrand-notice:focus {
  outline: none;
}

html.pv-app .pv-cbrand-notice:focus-visible {
  outline: 2px solid var(--pv-focus-ring);
  outline-offset: 2px;
}

/* ---- Overview (page 5) ------------------------------------------------------------------------- */
html.pv-app .pv-cbrand-row--overview {
  grid-template-columns: minmax(250px, 1fr) minmax(0, 2.5fr);
}

html.pv-app .pv-cbrand-setup {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html.pv-app .pv-cbrand-setup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

html.pv-app .pv-cbrand-setup__eyebrow,
html.pv-app .pv-cbrand-next__eyebrow,
html.pv-app .pv-cbrand-changes__title,
html.pv-app .pv-cbrand-decision__eyebrow {
  font-size: 12px;
}

html.pv-app .pv-cbrand-setup__figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  color: var(--pv-text);
}

html.pv-app .pv-cbrand-setup__value {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

html.pv-app .pv-cbrand-setup__of {
  color: var(--pv-text-meta);
  font-family: var(--pv-font-heading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

html.pv-app .pv-cbrand-setup__bar {
  margin-bottom: 4px;
}

html.pv-app .pv-cbrand-steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--pv-divider);
  list-style: none;
}

html.pv-app .pv-cbrand-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

html.pv-app .pv-cbrand-step__mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--pv-border);
  border-radius: 50%;
  background: var(--pv-surface-muted);
  color: var(--pv-text-secondary);
  font-family: var(--pv-font-heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

html.pv-app .pv-cbrand-step.is-done .pv-cbrand-step__mark {
  border-color: transparent;
  background: var(--pv-status-success-bg);
  color: var(--pv-status-success-text);
}

html.pv-app .pv-cbrand-step.is-current .pv-cbrand-step__mark {
  border-color: transparent;
  background: var(--pv-btn-primary-bg);
  color: var(--pv-btn-primary-text);
}

html.pv-app .pv-cbrand-step__title {
  color: var(--pv-text);
  font-size: var(--pv-fs-meta);
  font-weight: 600;
  line-height: 1.35;
}

html.pv-app .pv-cbrand-step__detail {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
}

/* READY FOR YOUR REVIEW, or what stands in its place: a quiet muted panel with its image. */
html.pv-app .pv-cbrand-next {
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  background: var(--pv-surface-muted);
  box-shadow: none;
}

html.pv-app .pv-cbrand-next__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: var(--pv-surface);
  object-fit: cover;
}

html.pv-app .pv-cbrand-next__img--empty {
  display: grid;
  place-items: center;
  border: 1px solid var(--pv-border);
  color: var(--pv-text-meta);
}

html.pv-app .pv-cbrand-next__title {
  margin-top: 6px;
  font-size: var(--pv-fs-card-title);
  line-height: 1.25;
}

html.pv-app .pv-cbrand-next__body {
  margin-top: 6px;
  font-size: var(--pv-fs-meta);
  line-height: 1.5;
}

html.pv-app .pv-cbrand-next__action {
  margin-top: 14px;
}

html.pv-app .pv-cbrand-next .pv-btn--secondary,
html.pv-app .pv-cbrand-changed .pv-btn--secondary {
  background: var(--pv-surface);
}

html.pv-app .pv-cbrand-next .pv-btn--secondary:hover,
html.pv-app .pv-cbrand-changed .pv-btn--secondary:hover {
  background: var(--pv-btn-secondary-hover);
}

/* Connected social profiles. */
html.pv-app .pv-cbrand-plist {
  margin: 0;
  padding: 0;
  list-style: none;
}

html.pv-app .pv-cbrand-plist__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border-top: 1px solid var(--pv-border-subtle);
}

html.pv-app .pv-cbrand-plist__row:first-child {
  border-top: 0;
}

html.pv-app .pv-cbrand-plist__name {
  color: var(--pv-text);
  font-size: var(--pv-fs-meta);
  font-weight: 600;
}

html.pv-app .pv-cbrand-plist__sub {
  font-size: 13px;
  overflow-wrap: anywhere;
}

html.pv-app .pv-cbrand-plist__status {
  color: var(--pv-text-secondary);
  font-size: var(--pv-fs-meta);
}

html.pv-app .pv-cbrand-plist__count {
  font-size: 13px;
}

html.pv-app .pv-cbrand-setupnote {
  padding: 12px 16px;
  color: var(--pv-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* The invitation to a monthly plan (Katie's decision of 2026-10-14): a quiet card under the overview, one button. */
html.pv-app .pv-cbrand-upgrade {
  display: grid;
  gap: 6px;
  min-width: 0;
  background: var(--pv-surface-muted);
  box-shadow: none;
}

html.pv-app .pv-cbrand-upgrade__eyebrow {
  margin: 0;
  font-size: 12px;
}

html.pv-app .pv-cbrand-upgrade__title {
  margin: 0;
  font-size: var(--pv-fs-card-title);
  line-height: 1.25;
  text-wrap: balance;
}

html.pv-app .pv-cbrand-upgrade__body {
  max-width: 64ch;
  margin: 0;
  font-size: var(--pv-fs-meta);
  line-height: 1.5;
  text-wrap: pretty;
}

html.pv-app .pv-cbrand-upgrade__action {
  margin-top: 8px;
}

html.pv-app .pv-cbrand-upgrade .pv-btn--secondary {
  background: var(--pv-surface);
}

html.pv-app .pv-cbrand-upgrade .pv-btn--secondary:hover {
  background: var(--pv-btn-secondary-hover);
}

/* ---- Social profiles: the review (page 6) ------------------------------------------------------ */
html.pv-app .pv-cbrand-compare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.pv-app .pv-cbrand-cmp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 14px;
}

html.pv-app .pv-cbrand-cmp__none {
  padding: 32px 0;
}

/* A profile's look: the cover, then the picture, the name and the bio. */
html.pv-app .pv-cbrand-pv {
  display: grid;
  gap: 14px;
  min-width: 0;
}

html.pv-app .pv-cbrand-pv__cover {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 2;
  border-radius: 10px;
  background: var(--pv-surface-muted);
  object-fit: cover;
}

html.pv-app .pv-cbrand-pv__cover--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--pv-border);
  color: var(--pv-text-meta);
}

html.pv-app .pv-cbrand-pv__who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

html.pv-app .pv-cbrand-pv__avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
}

html.pv-app .pv-cbrand-pv__avatar--letter {
  display: inline-grid;
  place-items: center;
  background: var(--pv-btn-primary-bg);
  color: var(--pv-btn-primary-text);
  font-family: var(--pv-font-heading);
  font-size: 14px;
  font-weight: 700;
}

/* The earlier look reads quieter than the proposed one, as on page 6: its cover and its picture in grey, its letter
   tile the same quiet grey. Only the comparison's Before card: the branding in force elsewhere keeps its colour. */
html.pv-app .pv-cbrand-cmp--before .pv-cbrand-pv__avatar--letter {
  background: var(--pv-text-meta);
  color: var(--pv-surface);
}

html.pv-app .pv-cbrand-cmp--before img.pv-cbrand-pv__cover,
html.pv-app .pv-cbrand-cmp--before img.pv-cbrand-pv__avatar {
  filter: grayscale(1);
}

html.pv-app .pv-cbrand-pv__text {
  min-width: 0;
}

html.pv-app .pv-cbrand-pv__name {
  color: var(--pv-text);
  font-size: var(--pv-fs-meta);
  font-weight: 600;
}

html.pv-app .pv-cbrand-pv__bio {
  font-size: 13px;
}

html.pv-app .pv-cbrand-row--lower {
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
}

html.pv-app .pv-cbrand-row--lower.is-single {
  grid-template-columns: minmax(0, 1fr);
}

html.pv-app .pv-cbrand-changes__title {
  margin-bottom: 8px;
}

html.pv-app .pv-cbrand-changes__list {
  margin: 0;
}

html.pv-app .pv-cbrand-changes__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px;
  padding: 11px 12px;
  border-top: 1px solid var(--pv-border-subtle);
  font-size: var(--pv-fs-meta);
}

html.pv-app .pv-cbrand-changes__row:first-child {
  border-top: 0;
}

html.pv-app .pv-cbrand-changes__row dt {
  color: var(--pv-text);
}

html.pv-app .pv-cbrand-changes__row dd {
  margin: 0;
  color: var(--pv-text);
  overflow-wrap: anywhere;
}

html.pv-app .pv-cbrand-decision {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html.pv-app .pv-cbrand-decision__title {
  font-size: 18px;
  line-height: 1.3;
}

html.pv-app .pv-cbrand-decision__body {
  font-size: 13px;
  line-height: 1.5;
}

html.pv-app .pv-cbrand-decision__actions {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

html.pv-app .pv-cbrand-decision__actions .pv-btn {
  justify-content: center;
  width: 100%;
}

html.pv-app .pv-cbrand-decision__err,
html.pv-app .pv-cbrand-dlg__err {
  color: var(--pv-invalid);
  font-size: var(--pv-fs-meta);
}

html.pv-app .pv-cbrand-decision__err:empty,
html.pv-app .pv-cbrand-dlg__err:empty {
  display: none;
}

/* Approve held: why, above the buttons (the hidden attribute keeps it out until then). */
html.pv-app .pv-cbrand-decision__held {
  padding: 12px 14px;
  color: var(--pv-text);
  font-size: 13px;
  line-height: 1.5;
}

/* The phone's review stack (page 9): shown as a flex box by pv-phone-only below 600px. */
html.pv-app .pv-cbrand-phone {
  flex-direction: column;
  gap: 14px;
}

html.pv-app .pv-cbrand-pv--phone .pv-cbrand-pv__cover {
  aspect-ratio: 16 / 9;
}

html.pv-app .pv-cbrand-phone__note {
  padding: 12px 14px;
  color: var(--pv-text-secondary);
  font-size: 13px;
}

/* A restore version (Phase 6): what it brings back. On the phone, the same quiet box as the note under it; in the
   wide decision card, the size of the card's body above it; on the phone's version card, the size of its line. */
html.pv-app .pv-cbrand-restored--phone {
  padding: 12px 14px;
  color: var(--pv-text-secondary);
  font-size: 13px;
}

html.pv-app .pv-cbrand-restored--decision,
html.pv-app .pv-cbrand-restored--card {
  font-size: 13px;
  line-height: 1.5;
}

/* What the client asked for, while ScaleLounge works on it. */
html.pv-app .pv-cbrand-request__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 12px;
}

html.pv-app .pv-cbrand-request__notes {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

html.pv-app .pv-cbrand-request__note {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--pv-surface-muted);
}

html.pv-app .pv-cbrand-request__on {
  color: var(--pv-text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html.pv-app .pv-cbrand-request__text {
  margin-top: 4px;
  color: var(--pv-text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

html.pv-app .pv-cbrand-current__meta {
  margin-top: 12px;
}

/* ---- Dialogs: approve, request changes, restore, view, update ---------------------------------- */
html.pv-app .pv-cbrand-dlg,
html.pv-app .pv-cbrand-confirm {
  display: grid;
  gap: 14px;
  min-width: 0;
}

html.pv-app .pv-cbrand-confirm__lead:focus {
  outline: none;
}

html.pv-app .pv-cbrand-confirm__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 1.2em;
  color: var(--pv-text);
}

html.pv-app .pv-cbrand-textarea {
  min-height: 104px;
  resize: vertical;
}

html.pv-app .pv-cbrand-notes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.pv-app .pv-cbrand-notes__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--pv-border);
  border-radius: 10px;
}

html.pv-app .pv-cbrand-notes__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

html.pv-app .pv-cbrand-notes__on {
  color: var(--pv-text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html.pv-app .pv-cbrand-notes__rm {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 0;
  border: 0;
  border-radius: var(--pv-radius-sm);
  background: transparent;
  color: var(--pv-text-secondary);
  cursor: pointer;
}

html.pv-app .pv-cbrand-notes__rm:hover {
  background: var(--pv-surface-hover);
  color: var(--pv-text);
}

html.pv-app .pv-cbrand-dlg__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

html.pv-app .pv-cbrand-restdlg__body {
  font-size: var(--pv-fs-meta);
  line-height: 1.5;
}

/* ---- Brand kit (page 7) ------------------------------------------------------------------------ */
html.pv-app .pv-cbrand-row--kit {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.95fr);
}

/* The logo on the brand's own dark colour (inline, from the approved record); charcoal when there is none. */
html.pv-app .pv-cbrand-tile {
  display: grid;
  place-items: center;
  min-height: 104px;
  padding: 24px;
  border: 1px solid var(--pv-border);
  border-radius: 10px;
  background: var(--pv-charcoal);
  color: var(--pv-white);
}

html.pv-app .pv-cbrand-tile.is-light {
  color: var(--pv-ink);
}

html.pv-app .pv-cbrand-tile__logo {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}

html.pv-app .pv-cbrand-tile__word {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  font-family: var(--pv-font-heading);
  text-align: center;
}

html.pv-app .pv-cbrand-tile__mark {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

html.pv-app .pv-cbrand-tile__rule {
  width: 1px;
  height: 32px;
  background: currentColor;
  opacity: 0.55;
}

html.pv-app .pv-cbrand-tile__name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

html.pv-app .pv-cbrand-kit__h {
  margin: 18px 0 10px;
  font-size: var(--pv-fs-meta);
}

html.pv-app .pv-cbrand-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.pv-app .pv-cbrand-swatch {
  display: grid;
  gap: 6px;
  width: 54px;
}

html.pv-app .pv-cbrand-swatch__chip {
  display: block;
  width: 52px;
  height: 34px;
  border: 1px solid var(--pv-border);
  border-radius: 6px;
}

html.pv-app .pv-cbrand-swatch__hex {
  color: var(--pv-text-meta);
  font-size: 11px;
  letter-spacing: 0.02em;
}

html.pv-app .pv-cbrand-kit__rule {
  margin: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--pv-divider);
}

html.pv-app .pv-cbrand-files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.pv-app .pv-cbrand-files__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--pv-border);
  border-radius: 8px;
  object-fit: cover;
}

/* A logo file or graphic that did not load: its name on the calm tint, never the broken-image icon. */
html.pv-app .pv-cbrand-files__img--missing {
  display: grid;
  place-items: center;
  padding: 8px;
  background: var(--pv-surface-muted);
  text-align: center;
  overflow-wrap: anywhere;
}

html.pv-app .pv-cbrand-files__note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
}

html.pv-app .pv-cbrand-fields {
  display: grid;
  gap: 16px;
  margin: 0;
}

html.pv-app .pv-cbrand-fields__row dt {
  margin-bottom: 6px;
  color: var(--pv-text);
  font-size: 13px;
  font-weight: 600;
}

html.pv-app .pv-cbrand-box {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--pv-border);
  border-radius: 8px;
  color: var(--pv-text);
  font-size: var(--pv-fs-meta);
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

html.pv-app .pv-cbrand-box--contact {
  white-space: normal;
}

/* Website + contact: the parts that exist, a bar between them. The bar is generated content with empty
   alternative text, so it is drawn but never read aloud or copied; a browser that does not know the alternative
   text form keeps the plain bar of the line before it. */
html.pv-app .pv-cbrand-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.pv-app .pv-cbrand-contact li {
  margin: 0;
}

html.pv-app .pv-cbrand-contact li + li::before {
  content: '|';
  content: '|' / '';
  margin: 0 12px;
  color: var(--pv-text-meta);
}

html.pv-app .pv-cbrand-derived {
  margin-top: 16px;
  padding: 12px 14px;
  color: var(--pv-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

html.pv-app .pv-cbrand-changed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  background: var(--pv-surface-muted);
  box-shadow: none;
}

html.pv-app .pv-cbrand-changed__text {
  min-width: 0;
}

html.pv-app .pv-cbrand-changed__said {
  color: var(--pv-text-secondary);
  font-size: var(--pv-fs-meta);
}

html.pv-app .pv-cbrand-changed__said:focus {
  outline: none;
}

/* ---- Brand health and history (page 8) --------------------------------------------------------- */
html.pv-app .pv-cbrand-row--history {
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
}

html.pv-app .pv-cbrand-progress__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

html.pv-app .pv-cbrand-progress__figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--pv-text);
}

html.pv-app .pv-cbrand-progress__value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

html.pv-app .pv-cbrand-progress__of {
  color: var(--pv-text-meta);
  font-size: 12px;
}

html.pv-app .pv-cbrand-progress__compare {
  margin-top: 8px;
  font-size: 13px;
}

html.pv-app .pv-cbrand-progress__chart {
  margin-top: 14px;
}

/* The progress line is the accent (champagne ink on white, champagne on dark), as on page 8. */
html.pv-app .pv-cbrand-chart .pv-chart__line,
html.pv-app .pv-cbrand-chart .pv-chart__cursor circle {
  stroke: var(--pv-ring-value);
  stroke-width: 2.5;
}

html.pv-app .pv-cbrand-chart .pv-chart__end {
  fill: var(--pv-ring-value);
}

html.pv-app .pv-cbrand-chart .pv-chart__area {
  fill: transparent;
}

html.pv-app .pv-cbrand-progress__note {
  margin-top: 14px;
  padding: 12px 14px;
  color: var(--pv-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

html.pv-app .pv-cbrand-guardlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

html.pv-app .pv-cbrand-guard {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--pv-border-subtle);
}

html.pv-app .pv-cbrand-guard:first-child {
  padding-top: 0;
  border-top: 0;
}

html.pv-app .pv-cbrand-guard__mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pv-surface-muted);
  color: var(--pv-text);
  font-family: var(--pv-font-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

html.pv-app .pv-cbrand-guard.is-ok .pv-cbrand-guard__mark {
  background: var(--pv-status-success-bg);
  color: var(--pv-status-success-text);
}

html.pv-app .pv-cbrand-guard__title {
  color: var(--pv-text);
  font-size: var(--pv-fs-meta);
  font-weight: 600;
}

html.pv-app .pv-cbrand-guardian__checked {
  margin-top: 12px;
  font-size: 12px;
}

html.pv-app .pv-cbrand-versions__aside {
  font-size: 13px;
}

/* Page 8 draws the versions as plain rows: the column names stay for assistive technology only, hidden the way
   pv-components.css hides them on a narrow column. */
html.pv-app .pv-cbrand-versions__table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

html.pv-app .pv-cbrand-versions__table {
  font-size: var(--pv-fs-meta);
}

html.pv-app .pv-cbrand-versions__no {
  width: 12%;
}

html.pv-app .pv-cbrand-versions__date {
  width: 22%;
  white-space: nowrap;
}

html.pv-app .pv-cbrand-versions__act {
  width: 22%;
}

/* The phone's version cards (page 9): shown as a flex box by pv-phone-only below 600px. */
html.pv-app .pv-cbrand-vcards {
  flex-direction: column;
  gap: 12px;
}

html.pv-app .pv-cbrand-vcards__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.pv-app .pv-cbrand-vcard {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 18px 18px 16px;
}

html.pv-app .pv-cbrand-vcard__eyebrow {
  font-size: 11px;
}

html.pv-app .pv-cbrand-vcard__name {
  font-size: 17px;
}

html.pv-app .pv-cbrand-vcard__line {
  font-size: 13px;
}

html.pv-app .pv-cbrand-vcard__action {
  margin-top: 6px;
}

html.pv-app .pv-cbrand-printframe {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---- The setup report (Phase 8, page 8): above the progress card, a card of what was done ---------------------- */
html.pv-app .pv-cbrand-report {
  display: grid;
  gap: 12px;
  min-width: 0;
}

html.pv-app .pv-cbrand-report__eyebrow {
  margin: 0;
  font-size: 12px;
}

html.pv-app .pv-cbrand-report__title {
  margin: 0;
  text-wrap: balance;
}

html.pv-app .pv-cbrand-report__range {
  margin: 0;
}

html.pv-app .pv-cbrand-report__score,
html.pv-app .pv-cbrand-report__lines {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--pv-fs-meta);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

html.pv-app .pv-cbrand-report__part {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--pv-border-subtle);
}

html.pv-app .pv-cbrand-report__h {
  margin: 0;
  color: var(--pv-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

html.pv-app .pv-cbrand-report__line {
  margin: 0;
  color: var(--pv-text-secondary);
  font-size: var(--pv-fs-meta);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

html.pv-app .pv-cbrand-report__wait {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--pv-border-subtle);
  line-height: 1.5;
}

/* A finished Setup on no monthly plan ends with one line and a button (Katie's decision of 2026-10-14). */
html.pv-app .pv-cbrand-report__upgrade {
  display: grid;
  justify-items: start;
  gap: 10px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--pv-border-subtle);
}

html.pv-app .pv-cbrand-report__upgrade .pv-cbrand-report__line {
  text-wrap: pretty;
}

html.pv-app .pv-cbrand-report__stillrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}

html.pv-app .pv-cbrand-report__stilltitle {
  min-width: 0;
  overflow-wrap: anywhere;
}

html.pv-app .pv-cbrand-report__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pv-gap);
}

html.pv-app .pv-cbrand-report__col {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

html.pv-app .pv-cbrand-report__colh {
  margin: 0;
  font-size: 12px;
}

@container pvmain (max-width: 639px) {
  html.pv-app .pv-cbrand-report__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Narrower columns ---------------------------------------------------------------------------- */
@container pvmain (max-width: 900px) {
  html.pv-app .pv-cbrand-row--overview,
  html.pv-app .pv-cbrand-row--kit,
  html.pv-app .pv-cbrand-row--history,
  html.pv-app .pv-cbrand-row--lower {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container pvmain (max-width: 720px) {
  html.pv-app .pv-cbrand-compare {
    grid-template-columns: minmax(0, 1fr);
  }
  html.pv-app .pv-cbrand-next {
    grid-template-columns: minmax(0, 1fr);
  }
  html.pv-app .pv-cbrand-next__img {
    aspect-ratio: 7 / 2;
  }
  html.pv-app .pv-cbrand-plist__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  html.pv-app .pv-cbrand-plist__next {
    grid-column: 1 / -1;
  }
  html.pv-app .pv-cbrand-plist__next:empty {
    display: none;
  }
}

/* ---- Phones (page 9) ----------------------------------------------------------------------------- */
/* The review on a phone is the stack alone (the comparison and WHAT CHANGED are pv-wide-only), so Request changes
   is the page's last part, and the client frame's bottom padding (pv-shell.css: the tab bar's height and the home
   indicator) keeps it clear of the fixed tab bar. */
@media (max-width: 599px) {
  html.pv-app .pv-cbrand-setup__value {
    font-size: 40px;
  }
  html.pv-app .pv-cbrand-phone .pv-cbrand-decision__actions {
    margin-top: 0;
  }
  html.pv-app .pv-cbrand-changes__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 10px 0;
  }
  html.pv-app .pv-cbrand-changes__row dt {
    color: var(--pv-text-secondary);
    font-size: 13px;
  }
  html.pv-app .pv-cbrand-changed {
    flex-direction: column;
    align-items: stretch;
  }
  html.pv-app .pv-cbrand-changed .pv-btn {
    justify-content: center;
    width: 100%;
  }
  html.pv-app .pv-cbrand-files {
    grid-template-columns: minmax(0, 1fr);
  }
  html.pv-app .pv-cbrand-dlg__actions .pv-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}