/* ScaleLounge portals V2: the Brand Presence Setup panel (Brand Presence Phase 8; docs/brand-presence/PHASE8-CONTRACT.md
 * sections 5.2 and 5.10; the Online Presence "Fix my online presence" button opens it).
 *
 * Every rule is scoped under html.pv-app and every colour is a token, so both themes read correctly; nothing here
 * re-declares a surface or text token and no new token is added. The panel lives in the page's dialog (a dialog from 600px
 * wide, a sheet below), outside the main column, so its narrow layout follows the viewport (@media), never the column.
 * Titles are balanced, lists wrap, buttons wrap at 375 and nothing scrolls sideways: a network's pill and its hint stack
 * under its name on a phone.
 */

html.pv-app .pv-csetup {
  display: grid;
  gap: 16px;
  min-width: 0;
}

html.pv-app .pv-csetup__lead {
  margin: 0;
  color: var(--pv-text-secondary);
  font-size: var(--pv-fs-support);
  line-height: 1.5;
  text-wrap: balance;
}

html.pv-app .pv-csetup__form,
html.pv-app .pv-csetup__awaiting,
html.pv-app .pv-csetup__done {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* ---- What is included ----------------------------------------------------------------------------- */
html.pv-app .pv-csetup__includes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.pv-app .pv-csetup__include {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-size: var(--pv-fs-meta);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

html.pv-app .pv-csetup__include .pv-icon {
  margin-top: 2px;
  color: var(--pv-accent-text);
}

/* ---- The profile list: one fieldset, a legend, a row for every network ------------------------------ */
html.pv-app .pv-csetup__profiles {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--pv-divider);
}

html.pv-app .pv-csetup__legend {
  padding: 0;
  color: var(--pv-text);
  font-family: var(--pv-font-heading);
  font-size: var(--pv-fs-card-title);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

html.pv-app .pv-csetup__intro {
  margin: 0;
  font-size: var(--pv-fs-meta);
  line-height: 1.5;
}

html.pv-app .pv-csetup__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A row has the same shape for every network: the name (a column as wide as its longest word, never narrower), the scan's pill at
   the end, and the hint on a line of its own under the name. The name column is sized by its words, not by what the pill and the
   hint ask for, so no name is ever broken inside a word (a word breaks only when it alone is wider than the dialog). */
html.pv-app .pv-csetup__row {
  display: grid;
  grid-template-columns: minmax(min-content, max-content) minmax(0, 1fr);
  align-items: center;
  gap: 0 12px;
  min-height: var(--pv-touch);
  padding: 4px 0;
  border-top: 1px solid var(--pv-border-subtle);
}

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

html.pv-app .pv-csetup__who {
  display: flex;
  grid-column: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

html.pv-app .pv-csetup__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--pv-accent-text);
}

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

html.pv-app .pv-csetup__name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 0;
  color: var(--pv-text);
  font-size: var(--pv-fs-body);
  line-height: 1.35;
  overflow-wrap: break-word;
  cursor: pointer;
}

html.pv-app .pv-csetup__meta {
  display: flex;
  grid-column: 2;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 10px;
  min-width: 0;
}

/* Under the name, in line with it (the box and the gap before the name are 32px). */
html.pv-app .pv-csetup__hint {
  grid-column: 1 / -1;
  margin: -6px 0 6px;
  padding-left: 32px;
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

html.pv-app .pv-csetup__honest {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

/* The line about Google's verification of the Google Business Profile, under the list of what is included. */
html.pv-app .pv-csetup__googlenote,
html.pv-app .pv-csetup__upgradenote {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* The one line for a buyer with no plan (Katie's decision of 2026-10-14): what a monthly plan adds once the profiles are set up. */
html.pv-app .pv-csetup__upgradenote {
  text-wrap: pretty;
}

html.pv-app .pv-csetup__count {
  margin: 6px 0 0;
  color: var(--pv-text);
  font-size: var(--pv-fs-meta);
  font-weight: 600;
}

/* ---- The price of exactly the profiles chosen ------------------------------------------------------- */
html.pv-app .pv-csetup__price {
  display: grid;
  gap: 4px;
  min-width: 0;
}

html.pv-app .pv-csetup__price:empty {
  display: none;
}

html.pv-app .pv-csetup__figure {
  margin: 0;
  color: var(--pv-text);
  font-family: var(--pv-font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

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

/* The first line of a price that is a sentence ("Included with your plan."): it leads, but it is text, not a heading. */
html.pv-app .pv-csetup__line--first {
  color: var(--pv-text);
  font-size: var(--pv-fs-support);
  font-weight: 600;
}

html.pv-app .pv-csetup__credit {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

html.pv-app .pv-csetup__held {
  margin: 0;
  color: var(--pv-text);
  font-size: var(--pv-fs-meta);
  line-height: 1.5;
}

html.pv-app .pv-csetup__held[hidden],
html.pv-app .pv-csetup__note[hidden] {
  display: none;
}

html.pv-app .pv-csetup__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* ---- Actions ----------------------------------------------------------------------------------------- */
html.pv-app .pv-csetup__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

html.pv-app .pv-csetup .pv-btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

html.pv-app .pv-csetup__go[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

html.pv-app .pv-csetup__result:empty {
  display: none;
}

html.pv-app .pv-csetup__result {
  display: grid;
  gap: 8px;
  justify-items: start;
}

html.pv-app .pv-csetup__err {
  margin: 0;
  color: var(--pv-text);
  font-size: var(--pv-fs-meta);
  line-height: 1.5;
}

html.pv-app .pv-csetup__failed {
  display: grid;
  gap: 12px;
}

html.pv-app .pv-csetup__notice {
  align-items: flex-start;
  font-size: var(--pv-fs-meta);
}

/* ---- The saved order: the payment steps, then the wait ------------------------------------------------ */
html.pv-app .pv-csetup__status {
  margin: 0;
  color: var(--pv-text);
  font-size: var(--pv-fs-support);
  font-weight: 600;
  line-height: 1.5;
  text-wrap: balance;
}

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

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

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

html.pv-app .pv-csetup__step {
  display: grid;
  gap: 4px;
  justify-items: start;
  min-width: 0;
}

html.pv-app .pv-csetup__qty {
  margin: 0;
  font-size: 13px;
}

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

html.pv-app .pv-csetup__checked {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* Empty it is a live region waiting for its words: out of the layout (no gap of its own) but never display:none, which a screen
   reader would not announce the first words of. */
html.pv-app .pv-csetup__checked:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---- Phones --------------------------------------------------------------------------------------------- */
@media (max-width: 599px) {
  html.pv-app .pv-csetup__row {
    grid-template-columns: minmax(0, 1fr);
    padding: 6px 0 8px;
  }
  html.pv-app .pv-csetup__meta {
    grid-column: 1;
    justify-content: flex-start;
    padding-left: 32px;
  }
  html.pv-app .pv-csetup__hint {
    grid-column: 1;
    margin: 0;
  }
  html.pv-app .pv-csetup__figure {
    font-size: 20px;
  }
  html.pv-app .pv-csetup__actions .pv-btn,
  html.pv-app .pv-csetup__steplink {
    flex: 1 1 auto;
    justify-content: center;
  }
}