/* ScaleLounge portals V2: components. Scoped under html.pv-app. Every colour is a token, so each
   component is right in both themes and inside any contrasting panel. */

/* ---- Page head and sub-tabs ------------------------------------------------------------------ */
html.pv-app .pv-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 28px;
}

html.pv-app .pv-pagehead__text {
  min-width: 0;
  max-width: 62rem;
}

html.pv-app .pv-pagehead__eyebrow {
  display: none;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-pagehead__title {
  font-size: var(--pv-fs-display);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

html.pv-app .pv-pagehead__title:focus,
html.pv-app .pv-pagehead__title:focus-visible {
  outline: none;
  box-shadow: none;
}

html.pv-app .pv-pagehead__sub {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-pagehead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html.pv-app .pv-pagehead + .pv-tabs {
  margin-top: -6px;
}

html.pv-app .pv-tabs {
  margin: 0 0 26px;
  border-bottom: 1px solid var(--pv-divider);
}

html.pv-app .pv-tabs__list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 28px;
  list-style: none;
}

html.pv-app .pv-tabs__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 8px 0 12px;
  border-bottom: 3px solid transparent;
  color: var(--pv-text-secondary);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

html.pv-app .pv-tabs__link:hover {
  color: var(--pv-text);
}

html.pv-app .pv-tabs__link[aria-current="page"] {
  border-bottom-color: var(--pv-text);
  color: var(--pv-text);
  font-weight: 600;
}

html.pv-app .pv-tabs__count {
  font-weight: 600;
}

/* ---- Buttons ---------------------------------------------------------------------------------- */
html.pv-app .pv-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  min-height: 46px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--pv-radius-sm);
  font-family: var(--pv-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s var(--pv-ease), border-color .15s var(--pv-ease), color .15s var(--pv-ease);
}

html.pv-app .pv-btn .pv-icon {
  flex: none;
}

html.pv-app .pv-btn--primary {
  background: var(--pv-btn-primary-bg);
  color: var(--pv-btn-primary-text);
}

html.pv-app .pv-btn--primary:hover {
  background: var(--pv-btn-primary-hover);
}

html.pv-app .pv-btn--secondary {
  border-color: var(--pv-btn-secondary-border);
  background: transparent;
  color: var(--pv-btn-secondary-text);
}

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

html.pv-app .pv-btn--ghost {
  background: transparent;
  color: var(--pv-text);
}

html.pv-app .pv-btn--ghost:hover {
  background: var(--pv-surface-hover);
}

html.pv-app .pv-btn--link {
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pv-link);
  text-align: left;
}

html.pv-app .pv-btn--link:hover .pv-btn__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.pv-app .pv-btn--link .pv-btn__trail {
  transition: transform .15s var(--pv-ease);
}

@media (hover: hover) {
  html.pv-app .pv-btn--link:hover .pv-btn__trail {
    transform: translateX(2px);
  }
}

html.pv-app .pv-btn--sm {
  min-height: 38px;
  padding: 6px 14px;
  border-radius: var(--pv-radius);
  font-size: 15px;
  white-space: nowrap;
}

/* A compact control keeps a 44px hit area. */
html.pv-app .pv-btn--sm::before {
  content: '';
  position: absolute;
  inset: -4px -2px;
}

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

/* ---- Cards and tiles -------------------------------------------------------------------------- */
html.pv-app .pv-card {
  min-width: 0;
  padding: 24px 26px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-card);
  background: var(--pv-surface);
  color: var(--pv-text);
  box-shadow: var(--pv-shadow-card);
}

html.pv-app .pv-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 18px;
}

html.pv-app .pv-card__title {
  font-size: var(--pv-fs-card-title);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

html.pv-app .pv-card__action {
  font-size: 15px;
}

html.pv-app .pv-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 142px;
  padding: 22px 26px 20px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-card);
  background: var(--pv-surface);
  color: var(--pv-text);
  text-decoration: none;
  box-shadow: var(--pv-shadow-card);
}

html.pv-app .pv-lead,
html.pv-app .pv-priority,
html.pv-app .pv-feature {
  box-shadow: none;
}

html.pv-app .pv-metric--link {
  transition: border-color .15s var(--pv-ease);
}

html.pv-app .pv-metric--link:hover {
  border-color: var(--pv-control-border);
}

html.pv-app .pv-metric__label {
  font-size: 16px;
  font-weight: 500;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-metric__value {
  margin-top: 6px;
  font-size: 40px;
  line-height: 1.05;
  color: var(--pv-text);
}

html.pv-app .pv-metric__sub {
  margin-top: auto;
  padding-top: 10px;
  font-size: 15px;
  color: var(--pv-text-meta);
}

/* ---- Pills, badges, thumbnails --------------------------------------------------------------- */
html.pv-app .pv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--pv-radius-sm);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

html.pv-app .pv-pill--neutral { background: var(--pv-status-neutral-bg); color: var(--pv-status-neutral-text); }
html.pv-app .pv-pill--attention { background: var(--pv-status-attention-bg); color: var(--pv-status-attention-text); }
html.pv-app .pv-pill--success { background: var(--pv-status-success-bg); color: var(--pv-status-success-text); }
html.pv-app .pv-pill--danger { background: var(--pv-status-danger-bg); color: var(--pv-status-danger-text); }
html.pv-app .pv-pill--info { background: var(--pv-status-info-bg); color: var(--pv-status-info-text); }

html.pv-app .pv-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--pv-radius-sm);
  background: var(--pv-surface-muted);
  color: var(--pv-text-secondary);
  font-size: 13px;
  font-weight: 600;
}

html.pv-app .pv-thumb {
  object-fit: cover;
  background: var(--pv-surface-muted);
}

/* A post with no image yet: the same tile, an icon in it (pv-components.js thumb). */
html.pv-app .pv-thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--pv-text-secondary);
}

/* ---- Rows ----------------------------------------------------------------------------------- */
html.pv-app .pv-rows {
  list-style: none;
}

html.pv-app .pv-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--pv-border-subtle);
}

html.pv-app .pv-row:first-child {
  padding-top: 2px;
  border-top: 0;
}

html.pv-app .pv-row:last-child {
  padding-bottom: 2px;
}

html.pv-app .pv-row__thumb {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: var(--pv-radius);
}

html.pv-app .pv-row__icon {
  flex: none;
  color: var(--pv-text);
}

html.pv-app .pv-row__main {
  flex: 1;
  min-width: 0;
}

html.pv-app .pv-row__title {
  display: block;
  margin: 0;
  color: var(--pv-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

html.pv-app .pv-row__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The whole row is the link's hit area (the title alone is about 23px tall). Anything interactive
   in the row's trailing slot sits above it and keeps its own clicks. */
html.pv-app .pv-row__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

html.pv-app .pv-row__meta {
  margin-top: 4px;
  font-size: 14px;
  color: var(--pv-text-meta);
}

html.pv-app .pv-row__trail {
  position: relative;
  z-index: 1;
  flex: none;
}

/* ---- Tables ----------------------------------------------------------------------------------- */
html.pv-app .pv-table-wrap {
  width: 100%;
}

html.pv-app .pv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
}

html.pv-app .pv-table thead th {
  padding: 12px 14px;
  background: var(--pv-surface-muted);
  color: var(--pv-text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

html.pv-app .pv-table thead th:first-child {
  border-radius: var(--pv-radius) 0 0 var(--pv-radius);
}

html.pv-app .pv-table thead th:last-child {
  border-radius: 0 var(--pv-radius) var(--pv-radius) 0;
}

html.pv-app .pv-table td,
html.pv-app .pv-table tbody th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--pv-border-subtle);
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}

html.pv-app .pv-table tbody tr:last-child td,
html.pv-app .pv-table tbody tr:last-child th {
  border-bottom: 0;
}

html.pv-app .pv-cellmedia {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

html.pv-app .pv-cellmedia__thumb {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: var(--pv-radius-sm);
}

html.pv-app .pv-cellmedia__title {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--pv-text);
  font-weight: 600;
  text-decoration: none;
}

html.pv-app .pv-cellmedia__title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Narrow: each row becomes a labelled stack. */
@container pvmain (max-width: 640px) {
  html.pv-app .pv-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  html.pv-app .pv-table,
  html.pv-app .pv-table tbody,
  html.pv-app .pv-table tr,
  html.pv-app .pv-table td,
  html.pv-app .pv-table tbody th {
    display: block;
    width: 100%;
  }
  html.pv-app .pv-table tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--pv-border-subtle);
  }
  html.pv-app .pv-table tbody tr:first-child {
    padding-top: 0;
  }
  html.pv-app .pv-table tbody tr:last-child {
    border-bottom: 0;
  }
  html.pv-app .pv-table td,
  html.pv-app .pv-table tbody th {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border: 0;
  }
  html.pv-app .pv-table td::before {
    content: attr(data-label);
    flex: none;
    color: var(--pv-text-secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  html.pv-app .pv-table td:first-child::before {
    content: none;
  }
}

/* ---- States ----------------------------------------------------------------------------------- */
html.pv-app .pv-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 32px;
  border-radius: var(--pv-radius-card);
  background: var(--pv-surface-muted);
  color: var(--pv-text);
}

html.pv-app .pv-empty--compact {
  padding: 22px 22px 24px;
  border-radius: var(--pv-radius);
}

html.pv-app .pv-empty--placeholder {
  padding: 40px 36px;
  border: 1px dashed var(--pv-control-border);
  background: transparent;
}

html.pv-app .pv-empty__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--pv-surface);
  color: var(--pv-text);
  box-shadow: inset 0 0 0 1px var(--pv-border);
}

html.pv-app .pv-empty__title {
  font-size: 20px;
  line-height: 1.3;
}

html.pv-app .pv-empty--compact .pv-empty__title {
  font-size: 17px;
}

html.pv-app .pv-empty__body {
  max-width: 56ch;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-empty__action {
  margin-top: 10px;
}

html.pv-app .pv-error {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 28px 32px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-card);
  background: var(--pv-surface);
  color: var(--pv-text);
}

html.pv-app .pv-error__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--pv-status-danger-bg);
  color: var(--pv-status-danger-text);
}

html.pv-app .pv-error__title {
  font-size: 20px;
}

html.pv-app .pv-error__body {
  max-width: 60ch;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-error__action {
  margin-top: 10px;
}

html.pv-app .pv-loading {
  display: grid;
  gap: 14px;
}

html.pv-app .pv-skel {
  display: block;
  border-radius: var(--pv-radius-sm);
  background: var(--pv-skeleton);
  animation: pv-pulse 1.6s ease-in-out infinite;
}

html.pv-app .pv-skelcard {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  min-height: 150px;
  padding: 26px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-card);
  background: var(--pv-surface);
}

html.pv-app .pv-skelcard--hero {
  min-height: 214px;
}

html.pv-app .pv-skelcard--tall {
  min-height: 288px;
}

/* ---- The AI Visibility ring ------------------------------------------------------------------- */
html.pv-app .pv-ring__track {
  stroke: var(--pv-ring-track);
}

html.pv-app .pv-ring__value {
  stroke: var(--pv-ring-value);
}

html.pv-app .pv-ring__text {
  fill: var(--pv-text);
  font-family: var(--pv-font-heading);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---- Charts ------------------------------------------------------------------------------------ */
html.pv-app .pv-chart {
  margin: 0;
}

html.pv-app .pv-chart__plot {
  width: 100%;
  min-width: 0;
}

html.pv-app .pv-chart__svg {
  display: block;
  overflow: visible;
}

html.pv-app .pv-chart__grid line {
  stroke: var(--pv-chart-grid);
  stroke-width: 1;
}

html.pv-app .pv-chart__axis {
  fill: var(--pv-chart-axis);
  font-family: var(--pv-font-body);
  font-size: 12px;
  font-weight: 500;
}

html.pv-app .pv-chart__area {
  fill: var(--pv-chart-fill);
}

html.pv-app .pv-chart__line {
  fill: none;
  stroke: var(--pv-chart-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.pv-app .pv-chart__end {
  fill: var(--pv-chart-point);
}

html.pv-app .pv-chart__pt {
  fill: transparent;
  stroke: none;
  cursor: pointer;
  outline: none;
}

html.pv-app .pv-chart__pt:focus,
html.pv-app .pv-chart__pt:focus-visible {
  outline: none;
  box-shadow: none;
  fill: none;
  stroke: var(--pv-focus-ring);
  stroke-width: 2;
}

html.pv-app .pv-chart__cursor line {
  stroke: var(--pv-chart-axis);
  stroke-dasharray: 3 3;
  stroke-width: 1;
}

html.pv-app .pv-chart__cursor circle {
  fill: var(--pv-surface);
  stroke: var(--pv-chart-line);
  stroke-width: 2;
}

html.pv-app .pv-chart__bar {
  fill: var(--pv-chart-bar);
  outline: none;
}

html.pv-app .pv-chart__bar.is-active,
html.pv-app .pv-chart__bar:focus-visible {
  fill: var(--pv-text);
}

html.pv-app .pv-chart__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 2px;
  border: 0;
  border-radius: var(--pv-radius-xs);
  background: none;
  color: var(--pv-text-secondary);
  font-size: 14px;
  font-weight: 600;
}

/* 32px tall plus 6px each way: a 44px hit area. */
html.pv-app .pv-chart__toggle::before {
  content: '';
  position: absolute;
  inset: -6px;
}

html.pv-app .pv-chart__toggle:hover {
  color: var(--pv-text);
}

html.pv-app .pv-chart__table {
  width: 100%;
  margin-top: 8px;
  font-size: 14px;
}

html.pv-app .pv-chart__table th,
html.pv-app .pv-chart__table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--pv-border-subtle);
  font-weight: 400;
  text-align: left;
}

html.pv-app .pv-chart__table thead th {
  color: var(--pv-text-secondary);
  font-weight: 600;
}

html.pv-app .pv-chart__table td {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---- Tooltip and toasts ------------------------------------------------------------------------ */
html.pv-app .pv-tooltip {
  position: absolute;
  z-index: 300;
  max-width: 260px;
  padding: 7px 10px;
  border-radius: var(--pv-radius-sm);
  background: var(--pv-text);
  color: var(--pv-page);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: var(--pv-shadow-pop);
  pointer-events: none;
}

html.pv-app .pv-toasts {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 400;
  display: grid;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
}

html.pv-app .pv-toast {
  padding: 12px 16px;
  border-radius: var(--pv-radius);
  background: var(--pv-text);
  color: var(--pv-page);
  font-weight: 500;
  box-shadow: var(--pv-shadow-pop);
  animation: pv-fade-up .2s var(--pv-ease);
  transition: opacity .4s var(--pv-ease);
}

html.pv-app .pv-toast--out {
  opacity: 0;
}

@media (max-width: 1023px) {
  html.pv-app .pv-toasts {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* ---- Dialogs, sheets, drawer ----------------------------------------------------------------- */
html.pv-app.pv-scroll-lock,
html.pv-app.pv-scroll-lock body {
  overflow: hidden;
}

html.pv-app .pv-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--pv-overlay);
  animation: pv-fade-in .15s var(--pv-ease);
}

html.pv-app .pv-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-card);
  background: var(--pv-surface-pop);
  color: var(--pv-text);
  box-shadow: var(--pv-shadow-pop);
  animation: pv-fade-up .18s var(--pv-ease);
}

html.pv-app .pv-dialog__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 14px 8px 24px;
}

html.pv-app .pv-dialog__title {
  font-size: 20px;
  line-height: 1.3;
}

/* A dialog's title takes focus only when its dialog opens on it (the announcement opens there, so a stray Enter never
   follows its link). It is never a control, so, like the page title, it draws no focus ring. */
html.pv-app .pv-dialog__title:focus,
html.pv-app .pv-dialog__title:focus-visible {
  outline: none;
  box-shadow: none;
}

html.pv-app .pv-dialog__body {
  padding: 6px 24px 24px;
}

html.pv-app .pv-overlay--palette {
  align-items: flex-start;
  padding-top: 12vh;
}

html.pv-app .pv-dialog--palette {
  width: min(660px, 100%);
}

html.pv-app .pv-dialog--palette .pv-dialog__body {
  padding: 0;
}

html.pv-app .pv-overlay--drawer {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

html.pv-app .pv-dialog--drawer {
  width: min(320px, 88vw);
  max-height: none;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: var(--pv-side-bg);
  color: var(--pv-side-text);
  animation: pv-fade-in .15s var(--pv-ease);
}

html.pv-app .pv-dialog--drawer .pv-dialog__head {
  padding: 12px 10px 0 24px;
}

html.pv-app .pv-dialog--drawer .pv-dialog__title {
  color: var(--pv-side-text);
  font-family: var(--pv-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html.pv-app .pv-dialog--drawer .pv-iconbtn {
  color: var(--pv-side-text);
}

html.pv-app .pv-dialog--drawer .pv-iconbtn:hover {
  background: var(--pv-side-hover);
}

html.pv-app .pv-dialog--drawer .pv-dialog__body {
  flex: 1;
  padding: 0;
}

html.pv-app .pv-sidebar--drawer {
  position: static;
  height: auto;
  min-height: 100%;
  border: 0;
}

html.pv-app .pv-sidebar--drawer .pv-sidebar__brand {
  padding-top: 8px;
}

html.pv-app .pv-sidebar--drawer .pv-sidebar__scroll {
  overflow: visible;
}

html.pv-app .pv-drawer__extra {
  display: grid;
  gap: 18px;
  padding: 18px 28px 28px;
  border-top: 1px solid var(--pv-side-divider);
  margin: 0 16px;
}

html.pv-app .pv-drawer__extra .pv-seg__legend {
  color: var(--pv-side-label);
}

html.pv-app .pv-drawer__extra .pv-seg__row {
  border-color: var(--pv-side-divider);
  background: var(--pv-side-hover);
}

html.pv-app .pv-drawer__extra .pv-seg__label {
  color: var(--pv-side-meta);
}

html.pv-app .pv-drawer__extra .pv-seg__input:checked + .pv-seg__label {
  background: var(--pv-side-active-bg);
  color: var(--pv-side-active-text);
}

html.pv-app .pv-drawer__who {
  display: flex;
  align-items: center;
  gap: 12px;
}

html.pv-app .pv-drawer__who > span {
  display: grid;
}

@media (max-width: 599px) {
  html.pv-app .pv-overlay--sheet {
    align-items: flex-end;
    padding: 0;
  }
  html.pv-app .pv-dialog--sheet {
    width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: pv-sheet-up .22s var(--pv-ease);
  }
  html.pv-app .pv-overlay--palette {
    align-items: stretch;
    padding: 0;
  }
  html.pv-app .pv-dialog--palette {
    width: 100%;
    max-height: none;
    height: 100%;
    border: 0;
    border-radius: 0;
  }
}

/* On a phone a dialog's body is measured like the main column (Katie, 2026-10-21: "make everything fit nicely in
   mobile"). Every rule written for a narrow main column (@container pvmain) applies inside a dialog too, so a table
   turns into labelled rows there as it does on the page: "Plan my deliverables" ran 170px past the screen, its Done
   button out of reach. Desktop dialogs are unchanged. Every dialog has a set width, so the body never sizes to its
   content (inline-size containment would collapse it). */
@media (max-width: 640px) {
  html.pv-app .pv-dialog__body {
    container: pvmain / inline-size;
  }
}

/* Sheet rows (More, account) */
html.pv-app .pv-more,
html.pv-app .pv-acct__links {
  display: grid;
  gap: 4px;
  list-style: none;
}

html.pv-app .pv-sheetlink {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--pv-radius);
  background: none;
  color: var(--pv-text);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

html.pv-app .pv-sheetlink:hover {
  background: var(--pv-surface-muted);
}

html.pv-app .pv-sheetlink[aria-current="page"] {
  background: var(--pv-surface-muted);
  box-shadow: inset 3px 0 0 var(--pv-accent-text);
}

html.pv-app .pv-sheetlink:disabled {
  color: var(--pv-text-meta);
}

html.pv-app .pv-sheetlink__text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

html.pv-app .pv-sheetlink__desc {
  color: var(--pv-text-meta);
  font-size: 14px;
  font-weight: 400;
}

html.pv-app .pv-sheetlink__chev {
  flex: none;
  margin-left: auto;
  color: var(--pv-text-meta);
}

html.pv-app .pv-acct {
  display: grid;
  gap: 18px;
}

html.pv-app .pv-acct__who {
  display: flex;
  align-items: center;
  gap: 14px;
}

html.pv-app .pv-acct__name {
  font-size: 17px;
  font-weight: 600;
}

html.pv-app .pv-acct__biz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--pv-text-secondary);
}

/* A team member's line under the business: whose account this is. */
html.pv-app .pv-acct__team {
  margin-top: 4px;
  font-size: 14px;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-acct__actions {
  display: grid;
  gap: 10px;
}

html.pv-app .pv-acct__actions .pv-btn {
  justify-content: flex-start;
}

/* ---- Popovers and menus ---------------------------------------------------------------------- */
html.pv-app .pv-pop {
  position: fixed;
  z-index: 250;
  min-width: 240px;
  max-width: min(360px, calc(100vw - 16px));
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--pv-border);
  border-radius: 12px;
  background: var(--pv-surface-pop);
  color: var(--pv-text);
  box-shadow: var(--pv-shadow-pop);
  animation: pv-fade-up .12s var(--pv-ease);
}

html.pv-app .pv-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--pv-radius);
  background: none;
  color: var(--pv-text);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}

html.pv-app .pv-menu__item:hover,
html.pv-app .pv-menu__item:focus-visible {
  background: var(--pv-surface-muted);
}

html.pv-app .pv-menu__item[aria-disabled="true"] {
  color: var(--pv-text-meta);
  cursor: not-allowed;
}

html.pv-app .pv-menu__text {
  display: grid;
  flex: 1;
  min-width: 0;
}

html.pv-app .pv-menu__desc {
  color: var(--pv-text-meta);
  font-size: 14px;
  font-weight: 400;
}

html.pv-app .pv-menu__check {
  display: inline-grid;
  flex: none;
  width: 18px;
  margin-left: auto;
}

html.pv-app .pv-menu__sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--pv-border-subtle);
}

html.pv-app .pv-menu__heading {
  padding: 8px 12px 4px;
  color: var(--pv-text-meta);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A sentence above the items (a team member's "Signed in as ..."), read as a sentence, not a label. */
html.pv-app .pv-menu__heading--plain {
  max-width: 260px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}

html.pv-app .pv-pop--notifs {
  width: 360px;
  padding: 8px;
}

html.pv-app .pv-notifs__title {
  padding: 8px 10px 6px;
  font-family: var(--pv-font-body);
  font-size: 16px;
  letter-spacing: 0;
}

html.pv-app .pv-notifs__list {
  list-style: none;
}

html.pv-app .pv-notifs__item a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 10px;
  border-radius: var(--pv-radius);
  color: var(--pv-text);
  text-decoration: none;
}

html.pv-app .pv-notifs__item a:hover {
  background: var(--pv-surface-muted);
}

html.pv-app .pv-notifs__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--pv-accent-text);
}

html.pv-app .pv-notifs__text {
  display: grid;
  gap: 2px;
}

html.pv-app .pv-notifs__item-title {
  font-size: 15px;
  font-weight: 600;
}

html.pv-app .pv-notifs__meta {
  color: var(--pv-text-meta);
  font-size: 14px;
}

/* ---- Search palette ---------------------------------------------------------------------------- */
html.pv-app .pv-search {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

html.pv-app .pv-search__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 18px;
  border-bottom: 1px solid var(--pv-border-subtle);
  color: var(--pv-text);
}

html.pv-app .pv-search__bar:focus-within {
  box-shadow: inset 0 -2px 0 var(--pv-focus-ring);
}

html.pv-app .pv-search__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--pv-text);
  font-size: 18px;
  appearance: none;
}

html.pv-app .pv-search__input:focus,
html.pv-app .pv-search__input:focus-visible {
  outline: none;
  box-shadow: none;
}

html.pv-app .pv-search__input::placeholder {
  color: var(--pv-text-meta);
}

html.pv-app .pv-search__input::-webkit-search-cancel-button {
  appearance: none;
}

html.pv-app .pv-search__scope {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 4px;
  color: var(--pv-text-meta);
  font-size: 14px;
}

/* Admin, one business selected: widen the search on request (a real toggle, aria-pressed). */
html.pv-app .pv-search__widen {
  margin-left: auto;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--pv-text);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

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

html.pv-app .pv-search__list {
  max-height: min(56vh, 440px);
  overflow: auto;
  padding: 6px 8px 8px;
  list-style: none;
}

html.pv-app .pv-search__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: var(--pv-radius);
  cursor: pointer;
}

html.pv-app .pv-search__opt[aria-selected="true"] {
  background: var(--pv-surface-muted);
  box-shadow: inset 3px 0 0 var(--pv-text);
}

html.pv-app .pv-search__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--pv-radius);
  background: var(--pv-surface-muted);
  color: var(--pv-text);
}

html.pv-app .pv-search__opt[aria-selected="true"] .pv-search__icon {
  background: var(--pv-surface);
}

html.pv-app .pv-search__text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

html.pv-app .pv-search__title {
  overflow: hidden;
  color: var(--pv-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.pv-app .pv-search__where {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--pv-text-meta);
  font-size: 14px;
}

html.pv-app .pv-search__biz {
  color: var(--pv-text-secondary);
  font-weight: 600;
}

html.pv-app .pv-search__kind {
  flex: none;
  margin-left: auto;
  color: var(--pv-text-meta);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html.pv-app .pv-search__status {
  padding: 10px 20px 14px;
  border-top: 1px solid var(--pv-border-subtle);
  color: var(--pv-text-meta);
  font-size: 14px;
}

@media (max-width: 599px) {
  html.pv-app .pv-search__list {
    flex: 1;
    max-height: none;
  }
  html.pv-app .pv-search__kind {
    display: none;
  }
}

/* ---- Form pieces ------------------------------------------------------------------------------ */
html.pv-app .pv-field {
  display: grid;
  gap: 6px;
}

html.pv-app .pv-field__label {
  font-size: 15px;
  font-weight: 600;
}

html.pv-app .pv-field__req {
  color: var(--pv-text-meta);
  font-weight: 500;
}

html.pv-app .pv-field__hint {
  color: var(--pv-text-meta);
  font-size: 14px;
}

html.pv-app .pv-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--pv-control-border);
  border-radius: var(--pv-radius);
  background: var(--pv-surface);
  color: var(--pv-text);
  font-size: 16px;
}

html.pv-app .pv-input::placeholder {
  color: var(--pv-text-meta);
}

/* A field never runs wider than its column, on a phone too (Katie, 2026-10-21: the Due date stuck out of
   "Your list" on an iPhone). iOS Safari gives a date or time input a width of its own; with the field's one
   column allowed to shrink, the input allowed to be narrower than that width, and the native look dropped on
   iOS alone (where its picker opens just the same), it fills its column like every other input. */
html.pv-app .pv-field {
  grid-template-columns: minmax(0, 1fr);
}

html.pv-app .pv-input {
  min-width: 0;
  max-width: 100%;
}

@supports (-webkit-touch-callout: none) {
  html.pv-app input.pv-input[type="date"],
  html.pv-app input.pv-input[type="time"],
  html.pv-app input.pv-input[type="datetime-local"],
  html.pv-app input.pv-input[type="month"] {
    display: block;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
  }
  html.pv-app input.pv-input::-webkit-date-and-time-value {
    min-height: 1.5em;
    text-align: left;
  }
}

html.pv-app .pv-field.is-invalid .pv-input {
  border-color: var(--pv-invalid);
  box-shadow: inset 0 0 0 1px var(--pv-invalid);
}

html.pv-app .pv-field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--pv-invalid);
  font-size: 14px;
  font-weight: 600;
}

html.pv-app .pv-seg {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

html.pv-app .pv-seg__legend {
  margin-bottom: 10px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}

html.pv-app .pv-seg__row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--pv-border);
  border-radius: 10px;
  background: var(--pv-surface-muted);
}

html.pv-app .pv-seg__opt {
  position: relative;
}

html.pv-app .pv-seg__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

html.pv-app .pv-seg__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 7px;
  color: var(--pv-text-secondary);
  font-weight: 600;
  cursor: pointer;
}

html.pv-app .pv-seg__input:checked + .pv-seg__label {
  background: var(--pv-surface);
  color: var(--pv-text);
  box-shadow: inset 0 0 0 1px var(--pv-control-border);
}

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

html.pv-app .pv-prefs {
  max-width: 640px;
}

html.pv-app .pv-prefs .pv-secondary {
  margin: -6px 0 16px;
}

/* ---- Notes --------------------------------------------------------------------------------- */
html.pv-app .pv-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border: 1px solid var(--pv-border);
  border-radius: 12px;
  background: var(--pv-surface-muted);
  color: var(--pv-text);
}

html.pv-app .pv-note .pv-icon {
  flex: none;
}

/* ---- Visibility helpers: one DOM, two compositions ------------------------------------------ */
/* !important on purpose: these helpers must beat any component's own display value. */
html.pv-app .pv-phone-only {
  display: none !important;
}

/* The context line above the page title: wherever the header that carries it is hidden.
   Client: the business and "Demo" below 1024px (the phone header shows only the section).
   Admin: "Demo workspace" or "Pre-launch" below 600px (the business selector needs the room). */
@media (max-width: 1023px) {
  html.pv-app .pv-pagehead--client .pv-pagehead__eyebrow {
    display: block;
  }
}

@media (max-width: 599px) {
  html.pv-app .pv-wide-only,
  html.pv-app .pv-wide-only-grid,
  html.pv-app .pv-wide-only-flex {
    display: none !important;
  }
  html.pv-app span.pv-phone-only {
    display: inline !important;
  }
  html.pv-app section.pv-phone-only,
  html.pv-app div.pv-phone-only {
    display: flex !important;
  }
  html.pv-app .pv-pagehead--admin .pv-pagehead__eyebrow {
    display: block;
  }
  html.pv-app .pv-pagehead__title {
    font-size: 30px;
    line-height: 1.12;
  }
  html.pv-app .pv-card {
    padding: 20px;
  }
  html.pv-app .pv-metric {
    padding: 18px 18px 16px;
  }
  html.pv-app .pv-card--flush-phone {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* ==== Shared pieces promoted from the screen families ===========================================
   One copy of each, used by both portals. Every colour is a token. */

/* ---- Touch areas on a phone -----------------------------------------------------------------
   Text links that sit inline are about 23px tall; on a touch screen each gets a 44px-tall hit area
   from padding the same size as a negative margin, so nothing on the page moves. */
@media (pointer: coarse), (max-width: 599px) {
  html.pv-app .pv-cres__view,
  html.pv-app .pv-caiv-q__link {
    display: inline-block;
    margin-block: -11px;
    padding-block: 11px;
  }
  html.pv-app .pvx-aff__sharesum {
    margin-block: -11px;
    padding-block: 11px;
  }
  html.pv-app .pv-chart__toggle {
    min-height: 44px;
  }
}

/* ---- Sub-tabs on a phone ----------------------------------------------------------------------
   Below 600px the sub-tabs are one segmented control that fits the screen: nothing scrolls or slides
   sideways (Katie 2026-10-19: "things are moving from left to right when they are not supposed to").
   Up to three tabs share one row; four make two rows of two, so a label never squeezes to one
   letter a line. A long label wraps inside its own segment, its count beside it. */
@media (max-width: 599px) {
  html.pv-app .pv-tabs {
    margin-bottom: 20px;
    border-bottom: 0;
  }
  html.pv-app .pv-pagehead + .pv-tabs {
    margin-top: 0;
  }
  html.pv-app .pv-tabs__list {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--pv-border);
    border-radius: 12px;
    background: var(--pv-surface-muted);
  }
  html.pv-app .pv-tabs__list:has(> li:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }
  html.pv-app .pv-tabs__list > li {
    display: flex;
    min-width: 0;
  }
  html.pv-app .pv-tabs__link {
    flex: 1 1 auto;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 0;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 6px 8px;
    border: 0;
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
  }
  html.pv-app .pv-tabs__link[aria-current="page"] {
    background: var(--pv-surface);
    box-shadow: inset 0 0 0 1px var(--pv-control-border);
    color: var(--pv-text);
  }
  html.pv-app .pv-tabs__link:focus-visible {
    outline: 2px solid var(--pv-focus-ring);
    outline-offset: 1px;
  }
}

/* ---- Select (a labelled native select drawn as the V2 dropdown) -------------------------------- */
html.pv-app .pv-select {
  display: inline-grid;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

html.pv-app .pv-select--block {
  display: grid;
  width: 100%;
}

html.pv-app .pv-select__label {
  font-size: 15px;
  font-weight: 600;
}

html.pv-app .pv-select__box {
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
}

html.pv-app .pv-select__input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--pv-control-border);
  border-radius: var(--pv-radius-sm);
  background: var(--pv-surface);
  color: var(--pv-text);
  font-size: 16px;  /* 16px: below it an iPhone zooms the page in on focus */
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

html.pv-app .pv-select__input:hover {
  background: var(--pv-surface-hover);
}

html.pv-app .pv-select__input:disabled {
  opacity: .6;
  cursor: not-allowed;
}

html.pv-app .pv-select__input option {
  background: var(--pv-surface-pop);
  color: var(--pv-text);
}

html.pv-app .pv-select__chev {
  position: absolute;
  top: 50%;
  right: 13px;
  color: var(--pv-text);
  transform: translateY(-50%);
  pointer-events: none;
}

html.pv-app .pv-select.is-invalid .pv-select__input {
  border-color: var(--pv-invalid);
  box-shadow: inset 0 0 0 1px var(--pv-invalid);
}

/* ---- Search field (not the search palette, .pv-search) ------------------------------------------------------------------------------ */
html.pv-app .pv-searchfield {
  position: relative;
  display: flex;
  align-items: center;
  width: 250px;
  min-width: 0;
  max-width: 100%;
}

html.pv-app .pv-searchfield__icon {
  position: absolute;
  left: 14px;
  color: var(--pv-text-secondary);
  pointer-events: none;
}

html.pv-app .pv-searchfield__input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px 0 42px;
  border: 1px solid var(--pv-control-border);
  border-radius: var(--pv-radius-sm);
  background: var(--pv-surface);
  color: var(--pv-text);
  font-size: 16px;  /* 16px: below it an iPhone zooms the page in on focus */
  -webkit-appearance: none;
  appearance: none;
}

html.pv-app .pv-searchfield__input::placeholder {
  color: var(--pv-text-meta);
}

html.pv-app .pv-searchfield__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ---- A select-like button with a radio menu (business, period and filter pickers) -------------- */
html.pv-app .pv-menuselect {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--pv-control-border);
  border-radius: var(--pv-radius-sm);
  background: transparent;
  color: var(--pv-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

html.pv-app .pv-menuselect:hover {
  background: var(--pv-surface-hover);
}

html.pv-app .pv-menuselect[aria-expanded="true"] {
  background: var(--pv-surface-muted);
}

html.pv-app .pv-menuselect > .pv-icon {
  flex: none;
}

html.pv-app .pv-menuselect__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

html.pv-app .pv-menuselect__chev {
  margin-left: 4px;
}

/* ---- Back link, external link, platform letters ----------------------------------------------- */
html.pv-app .pv-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--pv-text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

html.pv-app .pv-back:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.pv-app .pv-extlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* A 44px hit area that does not move the line: padding, taken back by the margin. */
  margin: -10px 0;
  padding: 10px 0;
  color: var(--pv-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

html.pv-app .pv-extlink:hover {
  text-decoration-thickness: 2px;
}

html.pv-app .pv-platform {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: var(--pv-radius-xs);
  background: var(--pv-surface-muted);
  color: var(--pv-text);
  font-family: var(--pv-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* ---- Meter (a thin bar against a total; the figure is always written beside it) ---------------- */
html.pv-app .pv-meter {
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--pv-ring-track);
}

html.pv-app .pv-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--pv-ring-value);
}

html.pv-app .pv-meter--chart {
  background: var(--pv-chart-grid);
}

html.pv-app .pv-meter--chart .pv-meter__fill {
  background: var(--pv-chart-bar);
}

/* ---- Label and value rows ----------------------------------------------------------------------- */
html.pv-app .pv-dl {
  margin: 0;
}

html.pv-app .pv-dl__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 11px 0;
  border-top: 1px solid var(--pv-divider);
}

html.pv-app .pv-dl__row dt {
  color: var(--pv-text-secondary);
}

html.pv-app .pv-dl__row dd {
  min-width: 0;
  margin: 0;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

html.pv-app .pv-dl__row dd .pv-pill {
  vertical-align: middle;
}

html.pv-app .pv-dl__row--stack {
  flex-direction: column;
  align-items: flex-start;
}

html.pv-app .pv-dl__row--stack dd {
  text-align: left;
}

/* ---- Confirm dialogs ---------------------------------------------------------------------------- */
html.pv-app .pv-dialog--wide {
  width: min(720px, 100%);
}

html.pv-app .pv-confirm {
  display: grid;
  gap: 16px;
}

html.pv-app .pv-confirm__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--pv-radius);
  background: var(--pv-surface-muted);
  color: var(--pv-text);
  font-size: 15px;
}

html.pv-app .pv-confirm__note .pv-icon {
  flex: none;
  margin-top: 2px;
}

/* A typed confirmation (ui.typedConfirm): the word to type, set apart from the label around it. */
html.pv-app .pv-typed {
  display: grid;
  gap: 16px;
}

html.pv-app .pv-typed__word {
  font-family: var(--pv-font-mono, ui-monospace, monospace);
  font-weight: 700;
  letter-spacing: 0.04em;
}

html.pv-app .pv-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

@media (max-width: 599px) {
  html.pv-app .pv-confirm__actions {
    flex-direction: column-reverse;
  }
  html.pv-app .pv-confirm__actions .pv-btn {
    width: 100%;
  }
}

/* ---- The ring with a count ("2 / 3") instead of a percentage ----------------------------------- */
html.pv-app .pv-ring--text .pv-ring__text {
  font-weight: 500;
  letter-spacing: 0;
}

/* ---- The selected row of a list-and-detail table: a tint plus an edge in the text colour (never
   champagne on white). The current link also carries aria-current. ------------------------------ */
html.pv-app .pv-table tr.is-current > * {
  background: var(--pv-surface-muted);
}

html.pv-app .pv-table tr.is-current > :first-child {
  box-shadow: inset 3px 0 0 var(--pv-text);
}

@container pvmain (max-width: 640px) {
  html.pv-app .pv-table tr.is-current {
    background: var(--pv-surface-muted);
    box-shadow: inset 3px 0 0 var(--pv-text);
  }
  html.pv-app .pv-table tr.is-current > *,
  html.pv-app .pv-table tr.is-current > :first-child {
    background: none;
    box-shadow: none;
  }
}

/* ---- Form details ------------------------------------------------------------------------------- */
html.pv-app textarea.pv-input {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

/* A heading that takes focus after a dialog closes (so focus has somewhere to land) shows no ring:
   it is not a control. */
html.pv-app .pv-card__title[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

/* WebKit: the radio the arrow keys moved to keeps a visible ring (ui.segmented marks the keyboard). */
html.pv-app .pv-seg.is-kbd .pv-seg__input:focus + .pv-seg__label {
  outline: 2px solid var(--pv-focus-ring);
  outline-offset: 2px;
}

/* A link inside a note reaches a 44px hit area without changing the line (vertical padding on an
   inline box does not move the text). */
html.pv-app .pv-note a {
  padding: 12px 0;
}

/* ---- Guided tour (pv-tour.js, inventory C13) ------------------------------------------------------
   The page dims, each part the step is about is cut out of the dim with a ring, and a card sits beside
   it (a sheet docked above the bottom bar below 640px). Tokens only, so both themes hold; with forced
   colours the dim goes and the rings are the system highlight. */
html.pv-app .pv-overlay--tour {
  z-index: 350;
  display: block;
  padding: 0;
  background: none;
  animation: none;
  pointer-events: none;
}

/* A sheet the tour opens (More, Account) is dimmed by the tour alone, never twice. */
html.pv-app.pv-touring .pv-overlay:not(.pv-overlay--tour) {
  background: transparent;
}

html.pv-app .pv-tour__shield {
  position: fixed;
  inset: 0;
  pointer-events: auto;
}

html.pv-app .pv-tour__shade {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

html.pv-app .pv-tour__shade-fill {
  fill: var(--pv-overlay);
}

html.pv-app .pv-tour__ring {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--pv-focus-ring);
  outline: 2px solid transparent;
  pointer-events: none;
  animation: pv-tour-pulse .9s var(--pv-ease) 1;
}

html.pv-app .pv-tour__ring--side {
  box-shadow: 0 0 0 2px var(--pv-side-focus);
}

@keyframes pv-tour-pulse {
  from {
    outline-color: var(--pv-focus-ring);
    outline-offset: 0;
  }
  to {
    outline-color: transparent;
    outline-offset: 12px;
  }
}

html.pv-app .pv-tour__card {
  position: fixed;
  top: 16px;
  left: 16px;
  display: grid;
  gap: 10px;
  width: min(384px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-card);
  background: var(--pv-surface-pop);
  color: var(--pv-text);
  box-shadow: var(--pv-shadow-pop);
  pointer-events: auto;
  animation: pv-fade-up .18s var(--pv-ease);
}

/* The small pointer towards the part, on the side the card sits. */
html.pv-app .pv-tour__card::before {
  position: absolute;
  display: none;
  width: 12px;
  height: 12px;
  border: 1px solid var(--pv-border);
  background: var(--pv-surface-pop);
  content: '';
  transform: rotate(45deg);
}

html.pv-app .pv-tour__card[data-side="right"]::before {
  display: block;
  top: calc(var(--pv-tour-caret, 24px) - 7px);
  left: -7px;
  border-width: 0 0 1px 1px;
}

html.pv-app .pv-tour__card[data-side="left"]::before {
  display: block;
  top: calc(var(--pv-tour-caret, 24px) - 7px);
  right: -7px;
  border-width: 1px 1px 0 0;
}

html.pv-app .pv-tour__card[data-side="below"]::before {
  display: block;
  top: -7px;
  left: calc(var(--pv-tour-caret, 24px) - 7px);
  border-width: 1px 0 0 1px;
}

html.pv-app .pv-tour__card[data-side="above"]::before {
  display: block;
  bottom: -7px;
  left: calc(var(--pv-tour-caret, 24px) - 7px);
  border-width: 0 1px 1px 0;
}

/* A phone: the card floats 12px clear of the screen's sides (and of a notch) and of the bar it docks against
   (pv-tour.js SHEET_INSET), rounded all round like every card (Katie, 2026-10-21: it ran edge to edge). */
html.pv-app .pv-tour__card--sheet {
  right: calc(12px + env(safe-area-inset-right, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  width: auto;
  max-height: 60vh;
  max-height: 60dvh;
  overflow: auto;
  padding: 18px 18px 16px;
}

html.pv-app .pv-tour__top {
  display: grid;
  gap: 6px;
}

html.pv-app .pv-tour__count {
  color: var(--pv-text-secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
}

html.pv-app .pv-tour__meter .pv-meter {
  height: 4px;
}

html.pv-app .pv-tour__title {
  font-size: 20px;
  line-height: 1.3;
}

/* Focus rests on the title as each step is read (as on a page title); it is not a control. */
html.pv-app .pv-tour__title:focus,
html.pv-app .pv-tour__title:focus-visible {
  outline: none;
  box-shadow: none;
}

html.pv-app .pv-tour__body {
  color: var(--pv-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

html.pv-app .pv-tour__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 4px;
}

html.pv-app .pv-tour__nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Skip the tour, Back and Next on one row, on a phone too. */
html.pv-app .pv-tour__card .pv-btn {
  gap: 8px;
  min-height: var(--pv-touch);
  padding-right: 16px;
  padding-left: 16px;
}

html.pv-app .pv-tour__skip {
  margin-left: -10px;
  color: var(--pv-text-secondary);
}

@media (forced-colors: active) {
  html.pv-app .pv-tour__shade {
    display: none;
  }
  html.pv-app .pv-tour__ring {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
  html.pv-app .pv-tour__card {
    border: 2px solid CanvasText;
  }
}

/* ---- Locked areas (Katie, 2026-10-09) ---------------------------------------------------------
   The page of an area another plan includes: what it is, what it covers (words, never a sample screen),
   the plan as facts, one primary button, at most one quiet link, one line of reassurance. White on the
   light page and the raised surface in dark, from the tokens; no charcoal panel (that is "what needs you
   now"), champagne only as the eyebrow's accessible text colour. No animation. */
html.pv-app .pv-locked {
  display: grid;
  gap: var(--pv-gap);
  max-width: 760px;
}

html.pv-app .pv-locked__mark {
  margin-bottom: 0;
}

html.pv-app .pv-locked__lead {
  max-width: 64ch;
  color: var(--pv-text);
  font-size: 17px;
  line-height: 1.55;
}

html.pv-app .pv-locked__lead-note {
  max-width: 64ch;
  margin-top: -8px;
}

html.pv-app .pv-locked__list {
  display: grid;
  gap: 14px;
  margin: 0;
}

html.pv-app .pv-locked__item dt {
  color: var(--pv-text);
  font-weight: 600;
}

html.pv-app .pv-locked__item dd {
  margin: 2px 0 0;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-locked__plan {
  display: grid;
  gap: 6px;
  padding: 24px 26px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-card);
  background: var(--pv-surface);
  box-shadow: var(--pv-shadow-card);
}

html.pv-app .pv-locked__eyebrow {
  color: var(--pv-accent-text);
}

html.pv-app .pv-locked__planname {
  font-size: 22px;
}

html.pv-app .pv-locked__price {
  color: var(--pv-text);
  font-weight: 600;
}

html.pv-app .pv-locked__summary {
  max-width: 64ch;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-locked__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 12px;
}

html.pv-app .pv-locked__note {
  margin-top: 4px;
}

/* A locked tab (Settings > Connections): one card under the strip, the plan inside it, no summary. */
html.pv-app .pv-locked--tab .pv-card__body {
  display: grid;
  gap: 12px;
}

html.pv-app .pv-locked--tab .pv-locked__plan {
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--pv-border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

html.pv-app .pv-locked__title {
  font-size: 20px;
}

/* The padlock after a locked tab's label: the label's own colour, so it never reads as a status. */
html.pv-app .pv-tabs__lock {
  display: inline-flex;
  flex: none;
  color: var(--pv-text-meta);
}

/* The padlock never shrinks away beside its label (a phone's segment wraps the label instead). */
html.pv-app .pv-tabs__lock svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* Search: a locked area's plan where a result names its business, and its padlock. */
html.pv-app .pv-search__lock {
  display: inline-flex;
  flex: none;
  color: var(--pv-text-meta);
}

/* Results > Social: the one quiet line about the next plan, last on the page. */
html.pv-app .pv-uplift {
  max-width: 70ch;
  margin-top: 4px;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-uplift__link {
  color: var(--pv-text);
  font-weight: 600;
}

/* Home: the areas on other plans (a free member), and the AI Visibility card (Social Essentials). */
html.pv-app .pv-plans-ahead .pv-card__body {
  display: grid;
  gap: 10px;
}

html.pv-app .pv-plans-ahead__eyebrow {
  color: var(--pv-accent-text);
}

html.pv-app .pv-plans-ahead__list {
  display: grid;
  gap: 4px;
  margin: 6px 0 4px;
  list-style: none;
}

html.pv-app .pv-plans-ahead__row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--pv-touch);
  padding: 10px 12px;
  border-radius: var(--pv-radius);
  color: var(--pv-text);
  text-decoration: none;
}

html.pv-app .pv-plans-ahead__row:hover {
  background: var(--pv-surface-muted);
}

html.pv-app .pv-plans-ahead__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--pv-radius);
  background: var(--pv-surface-muted);
  color: var(--pv-text-secondary);
}

html.pv-app .pv-plans-ahead__text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

html.pv-app .pv-plans-ahead__label {
  font-weight: 600;
}

html.pv-app .pv-plans-ahead__line {
  color: var(--pv-text-secondary);
  font-size: 15px;
}

html.pv-app .pv-plans-ahead__plan {
  color: var(--pv-text-meta);
  font-size: 14px;
}

html.pv-app .pv-plans-ahead__lock {
  display: inline-flex;
  flex: none;
  color: var(--pv-text-meta);
}

html.pv-app .pv-plans-ahead__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 4px;
}

/* Plan & billing: the plan a lock's button named, outlined (no colour fill), its name ready to take focus. */
/* Its name takes focus only to be read out and scrolled to: the outline above marks it, so no second ring. */
html.pv-app .pvx-planopt.is-picked .pvx-planopt__name:focus,
html.pv-app .pvx-planopt.is-picked .pvx-planopt__name:focus-visible {
  outline: none;
  box-shadow: none;
}

html.pv-app .pvx-planopt.is-picked {
  outline: 2px solid var(--pv-control-border);
  outline-offset: 2px;
}

html.pv-app .pvx-plans__aiv {
  margin: -4px 0 0;
}

@media (max-width: 599px) {
  html.pv-app .pv-locked__plan {
    padding: 20px;
  }
  html.pv-app .pv-locked__actions {
    flex-direction: column;
    align-items: stretch;
  }
  html.pv-app .pv-locked__actions .pv-btn--primary {
    width: 100%;
    min-height: var(--pv-touch);
  }
}

@media (forced-colors: active) {
  html.pv-app .pv-tabs__lock,
  html.pv-app .pv-search__lock,
  html.pv-app .pv-plans-ahead__lock {
    color: LinkText;
  }
  html.pv-app .pvx-planopt.is-picked {
    outline-color: Highlight;
  }
}