/* ScaleLounge portals V2: client Approvals (V2 pages 6, 7, 18) and Calendar (page 8).
 * Scoped under html.pv-app. Every colour is a token, so both themes and the charcoal concept panel
 * read correctly without per-theme overrides.
 *
 * pvx-* classes are this family's own pieces (the platform version chips and tabs, the media with
 * its concept card, key/value rows, dialog content, disclosure). The platform letters (.pv-platform),
 * the select (.pv-select), the external link (.pv-extlink) and the phone sub-tab strip are shared
 * and live in pv-components.css.
 * pv-ap-* is the Approvals screen, pv-cal-* the Calendar screen. */

/* =============================================================================================
   pvx: shared pieces
   ============================================================================================= */

/* Platform chips: tabs that switch the previewed version. */
html.pv-app .pvx-ver__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

html.pv-app .pvx-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 9px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius-sm);
  background: var(--pv-surface);
  color: var(--pv-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: border-color .15s var(--pv-ease), background-color .15s var(--pv-ease);
}

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

/* The selected version: a 2px charcoal (white on dark) frame and an inverted monogram. */
html.pv-app .pvx-chip[aria-selected="true"] {
  border-color: var(--pv-text);
  box-shadow: inset 0 0 0 1px var(--pv-text);
  font-weight: 600;
}

html.pv-app .pvx-chip[aria-selected="true"] .pv-platform {
  background: var(--pv-text);
  color: var(--pv-surface);
}

html.pv-app .pvx-ver__panel {
  margin-top: 26px;
  border-radius: var(--pv-radius-sm);
}

html.pv-app .pvx-ver__panel:focus-visible {
  outline-offset: 6px;
}

html.pv-app .pvx-ver__caption {
  display: grid;
  gap: 18px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--pv-text);
}

html.pv-app .pvx-ver__link {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  color: var(--pv-text-secondary);
}

/* A long address breaks anywhere rather than running off the screen: the client reads the whole link. It wraps in
   the room beside the icons; the address is the item that gives way (min-width), never an icon. */
html.pv-app .pvx-ver__link a {
  overflow-wrap: anywhere;
  min-width: 0;
  align-items: flex-start;
}

/* The mark that says the address opens in a new tab sits on the first line too, beside the start of a wrapped address. */
html.pv-app .pvx-ver__link a svg {
  margin-top: 5px;
}

/* A link that is not an https address is shown as text, never as something to open (the server only stores https). */
html.pv-app .pvx-ver__linktext {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* An icon beside a long address keeps its size: left to shrink, a 600 character address squeezed it to a speck. */
html.pv-app .pvx-ver__link svg {
  flex: none;
}

/* The link icon sits on the first line of the address, not in the middle of a tall block. */
html.pv-app .pvx-ver__link > svg {
  margin-top: 5px;
}

/* Whether each network takes this many images (a post with several only); a network that takes fewer is said in the danger colour. */
html.pv-app .pvx-ver__imgsout {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: var(--pv-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

html.pv-app .pvx-ver__imgsout li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

html.pv-app .pvx-ver__imgsout li.is-over {
  color: var(--pv-status-danger-text);
  font-weight: 600;
}

/* Where the link goes on each network it is for (a post with a link only). */
html.pv-app .pvx-ver__linkout {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: var(--pv-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

html.pv-app .pvx-ver__linkout li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* A YouTube video's own details, with the video (a post that carries them or goes to YouTube only), and the line that says a post
   goes to TikTok and that its settings are given when it is approved (2026-10-16). */
html.pv-app .pvx-ver__yt,
html.pv-app .pvx-ver__tt {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--pv-border-subtle);
  border-radius: var(--pv-radius);
  color: var(--pv-text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

html.pv-app .pvx-ver__yt--missing {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-color: var(--pv-status-danger-text);
  color: var(--pv-status-danger-text);
}

html.pv-app .pvx-ver__ytname,
html.pv-app .pvx-ver__ttname {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--pv-text);
  font-size: 15px;
  font-weight: 600;
}

html.pv-app .pvx-ver__ytrows {
  margin: 0;
}

/* A long title wraps onto a line of its own: it reads from the left, under its label, rather than from the right edge. */
html.pv-app .pvx-ver__ytrows .pvx-kv__row dd {
  text-align: left;
}

html.pv-app .pvx-ver__ytnote {
  margin: 10px 0 0;
}

/* The TikTok settings and consents in the approve dialog: TikTok's own controls, in the order its guidelines give them. */
html.pv-app .pvx-tt {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--pv-border-subtle);
}

html.pv-app .pvx-tt .pvx-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

html.pv-app .pvx-tt p {
  margin: 0;
}

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

html.pv-app .pvx-tt__h {
  margin: 0 0 8px;
  font-weight: 600;
}

html.pv-app .pvx-tt__preview .pvx-media {
  max-width: 320px;
}

html.pv-app .pvx-tt__caption {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--pv-border-subtle);
  border-radius: var(--pv-radius);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

html.pv-app .pvx-tt__set {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

html.pv-app .pvx-tt__sub {
  display: grid;
  gap: 6px;
  margin: 4px 0 0 32px;
}

html.pv-app .pvx-tt__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

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

/* The mark that closes a sentence stays with the link before it, so a full stop never wraps onto a line of its own (TikTok's agreement line,
   which ends on the name of the policy it links). */
html.pv-app .pvx-tt__nowrap {
  white-space: nowrap;
}

/* A native select drawn as the V2 dropdown in the approvals dialogs (TikTok's "Who can see it on TikTok" and the request's "Which version?"): the
   wrapper holds the chevron over the select's right edge and the select's own arrow is taken off, so there is one arrow and it sits in the box,
   not under it. Scoped to the wrapper, since another screen puts the same class on a select itself. */
html.pv-app div.pvx-select {
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
}

html.pv-app div.pvx-select .pvx-select__native {
  padding-right: 40px;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

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

/* The calendar: how many images a post has, beside its first (a post with several only). */
html.pv-app .pv-cal-count {
  display: inline-block;
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-cal-count--line {
  display: block;
  margin: 2px 0 0;
}

html.pv-app .pvx-ver__panel .pvx-ver__rows {
  margin-top: 24px;
}

/* The caption toggle exists only where a layout collapses the caption (phones). Specific enough to
   beat .pvx-disclose, so a desktop never shows "Show full caption" under a caption already shown. */
html.pv-app .pvx-disclose.pvx-ver__more {
  display: none;
}

html.pv-app .pvx-ver__hint {
  margin-top: 18px;
  color: var(--pv-text-meta);
  font-size: 15px;
}

/* Key / value rows with dividers. */
html.pv-app .pvx-kv {
  margin: 0;
  border-top: 1px solid var(--pv-divider);
}

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

html.pv-app .pvx-kv__row dt {
  color: var(--pv-text-secondary);
  font-size: 16px;
}

html.pv-app .pvx-kv__row dd {
  margin: 0;
  color: var(--pv-text);
  font-size: 16px;
  font-weight: 600;
  text-align: right;
}

html.pv-app .pvx-kv__row--note {
  margin-top: -10px;
  padding-top: 0;
}

html.pv-app .pvx-kv__row--note dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 10px;
  width: 100%;
  font-weight: 400;
}

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

/* The post's visual: the image and its concept card. The card is charcoal in BOTH themes: it is
   part of the creative, and the creative never changes with the interface theme. */
html.pv-app .pvx-media {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--pv-charcoal);
}

html.pv-app .pvx-media__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* A video is shown whole, never cropped to the photo frame (Katie, 2026-10-21: a 9:16 reel was cut to 16:9 on her
   iPhone): its own shape, and when it is taller than the screen allows, the whole of it on the charcoal. More specific
   than the frame rules above and in the phone block below, so neither crops it. */
html.pv-app .pvx-media__img.pvx-media__video {
  aspect-ratio: auto;
  height: auto;
  max-height: 75vh;
  max-height: 75dvh;
  object-fit: contain;
  background: var(--pv-charcoal);
}

/* A post with several images (2026-10-14): every image in the order the approval covers, the rest two to a row, each marked with its
   place. The first takes the full width as a single image does only while the count is odd (:nth-last-child(odd) holds for the first
   item exactly then), so the others pair up and no row is left with an empty half; an even count is pairs from the first. */
html.pv-app .pvx-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.pv-app .pvx-gallery__item {
  position: relative;
  min-width: 0;
}

html.pv-app .pvx-gallery__item:first-child:nth-last-child(odd) {
  grid-column: 1 / -1;
}

html.pv-app .pvx-gallery__n {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pv-surface);
  color: var(--pv-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

html.pv-app .pvx-media__concept {
  padding: 26px 26px 28px;
  background: var(--pv-surface);
  color: var(--pv-text);
}

html.pv-app .pvx-media__eyebrow {
  color: var(--pv-accent-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html.pv-app .pvx-media__title {
  max-width: 11em;
  margin-top: 10px;
  font-family: var(--pv-font-heading);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

html.pv-app .pvx-media__line {
  margin-top: 10px;
  color: var(--pv-text-secondary);
  font-size: 16px;
}

/* Section headings inside a detail (request, record, placements). */
html.pv-app .pvx-section__title {
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Disclosure button */
html.pv-app .pvx-disclose {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pv-text);
  font-size: 15px;
  font-weight: 600;
}

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

html.pv-app .pvx-disclose[aria-expanded="true"] .pvx-disclose__chev {
  transform: rotate(180deg);
}

html.pv-app .pvx-textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.5;
}

/* Dialog content: confirmation and request forms. */
html.pv-app .pvx-dlg {
  display: grid;
  gap: 16px;
}

html.pv-app .pvx-dlg__lead {
  color: var(--pv-text);
}

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

html.pv-app .pvx-dlg__context {
  margin-top: -6px;
}

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

html.pv-app .pvx-dlg__thumb {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--pv-radius);
}

html.pv-app .pvx-dlg__images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html.pv-app .pvx-dlg__imgthumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--pv-radius);
  object-fit: cover;
}

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

html.pv-app .pvx-dlg__meta {
  color: var(--pv-text-secondary);
  font-size: 14px;
  overflow-wrap: anywhere;
}

html.pv-app .pvx-dlg__list {
  display: grid;
  gap: 0;
  list-style: none;
  border-top: 1px solid var(--pv-divider);
}

html.pv-app .pvx-dlg__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pv-divider);
}

html.pv-app .pvx-dlg__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

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

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

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

html.pv-app .pvx-notes {
  display: grid;
  gap: 8px;
  list-style: none;
}

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

html.pv-app .pvx-notes__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

html.pv-app .pvx-notes__on {
  color: var(--pv-text-secondary);
  font-size: 14px;
  font-weight: 600;
}

html.pv-app .pvx-notes__rm {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px 0;
  border: 0;
  border-radius: var(--pv-radius);
  background: none;
  color: var(--pv-text);
}

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

/* The request thread and the approval record */
html.pv-app .pvx-thread,
html.pv-app .pvx-record,
html.pv-app .pvx-place {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

html.pv-app .pvx-thread__meta,
html.pv-app .pvx-thread__when {
  color: var(--pv-text-meta);
  font-size: 14px;
}

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

html.pv-app .pvx-thread__notes,
html.pv-app .pvx-thread__replies {
  display: grid;
  gap: 10px;
  list-style: none;
}

html.pv-app .pvx-thread__note {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--pv-radius);
  background: var(--pv-surface-muted);
}

html.pv-app .pvx-thread__on {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--pv-text-secondary);
  font-size: 14px;
  font-weight: 600;
}

html.pv-app .pvx-thread__note .pv-platform {
  background: var(--pv-surface);
}

html.pv-app .pvx-thread__reply {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  border-left: 3px solid var(--pv-divider);
}

html.pv-app .pvx-thread__reply.is-team {
  border-left-color: var(--pv-accent-text);
}

html.pv-app .pvx-thread__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

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

html.pv-app .pvx-thread__text {
  overflow-wrap: anywhere;
}

html.pv-app .pvx-record__who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

html.pv-app .pvx-record__list {
  display: grid;
  gap: 0;
  list-style: none;
  border-top: 1px solid var(--pv-divider);
}

html.pv-app .pvx-record__list li {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: 2px 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--pv-divider);
  overflow-wrap: anywhere;
}

html.pv-app .pvx-record__k {
  color: var(--pv-text-secondary);
}

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

html.pv-app .pvx-place__list {
  display: grid;
  list-style: none;
  border-top: 1px solid var(--pv-divider);
}

html.pv-app .pvx-place__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pv-divider);
}

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

html.pv-app .pvx-place__dest {
  font-weight: 600;
  overflow-wrap: break-word;
}

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

html.pv-app .pvx-place__end {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

html.pv-app .pvx-place__link {
  min-height: 44px;
  font-size: 14px;
}

/* A narrow placements list (a phone, or the detail column beside the list at 768px): the status
   moves under the destination, so a destination such as "Meridian Studio / Company page" keeps its
   words whole instead of being squeezed beside the pill. */
html.pv-app .pvx-place {
  container: pvxplace / inline-size;
}

@container pvxplace (max-width: 419px) {
  html.pv-app .pvx-place__row {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 6px;
  }
  html.pv-app .pvx-place__row > .pv-platform {
    margin-top: 1px;
  }
  html.pv-app .pvx-place__text {
    flex: 1 1 calc(100% - 48px);
  }
  html.pv-app .pvx-place__end {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px 12px;
    padding-left: 36px;
  }
}

/* =============================================================================================
   Approvals (pv-ap)
   ============================================================================================= */
html.pv-app .pv-ap {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  align-items: stretch;
  gap: 22px;
}

html.pv-app .pv-ap-list {
  align-self: stretch;
}

html.pv-app .pv-ap-main {
  display: grid;
  min-width: 0;
}

html.pv-app .pv-ap-notice {
  margin-bottom: 20px;
}

/* The branding review, one item of Needs review (it opens the review in Brand Setup): Brand Setup's own quiet
   muted "Ready for your review" panel, with the palette mark in place of its image. */
html.pv-app .pv-ap-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 20px;
  margin-bottom: 20px;
  background: var(--pv-surface-muted);
  box-shadow: none;
}

html.pv-app .pv-ap-brand__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--pv-border);
  border-radius: 12px;
  background: var(--pv-surface);
  color: var(--pv-text-meta);
}

html.pv-app .pv-ap-brand__eyebrow {
  font-size: 12px;
}

html.pv-app .pv-ap-brand__title {
  margin-top: 4px;
  font-size: var(--pv-fs-card-title);
  line-height: 1.25;
}

html.pv-app .pv-ap-brand__body {
  margin-top: 4px;
  font-size: var(--pv-fs-meta);
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  html.pv-app .pv-ap-brand {
    grid-template-columns: auto minmax(0, 1fr);
  }
  html.pv-app .pv-ap-brand__action {
    grid-column: 1 / -1;
  }
  html.pv-app .pv-ap-brand__action .pv-btn {
    width: 100%;
  }
}

/* The batch list */
html.pv-app .pv-ap-list {
  padding: 18px 18px 22px;
}

html.pv-app .pv-ap-items {
  display: grid;
  list-style: none;
}

html.pv-app .pv-ap-items > li + li {
  border-top: 1px solid var(--pv-border-subtle);
}

html.pv-app .pv-ap-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 44px;
  margin: 0 -8px;
  padding: 10px 8px;
  border-radius: var(--pv-radius);
  color: var(--pv-text);
  text-decoration: none;
}

html.pv-app .pv-ap-items > li:first-child .pv-ap-item {
  margin-top: -2px;
}

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

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

/* The selected post: a muted surface and the accent edge (champagne ink on light, champagne on
   dark: both above 5:1 against the card). */
html.pv-app .pv-ap-item[aria-current="true"] {
  background: var(--pv-surface-muted);
  box-shadow: inset 3px 0 0 var(--pv-accent-text);
}

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

html.pv-app .pv-ap-item__images {
  font-size: 13px;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-ap-item__text {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-top: 6px;
}

html.pv-app .pv-ap-item__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

html.pv-app .pv-ap-item__meta {
  color: var(--pv-text-secondary);
  font-size: 14px;
}

html.pv-app .pv-ap-item__flag {
  color: var(--pv-accent-text);
  font-size: 14px;
  font-weight: 600;
}

html.pv-app .pv-ap-list__count {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--pv-border-subtle);
  color: var(--pv-text-secondary);
  font-size: 15px;
}

/* The pager is the phone's list; hidden on wider layouts. */
html.pv-app .pv-ap-pager {
  display: none;
}

/* The selected post */
html.pv-app .pv-ap-detail {
  padding: 24px 24px 22px;
}

html.pv-app .pv-ap-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 20px;
}

html.pv-app .pv-ap-detail__title {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

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

html.pv-app .pv-ap-detail__head .pv-pill {
  flex: none;
  margin-top: 2px;
}

/* V2 page 6: the media column is about 36 percent of the card (372 of 1023px at 1824). */
html.pv-app .pv-ap-detail__body {
  display: grid;
  grid-template-columns: minmax(0, 372fr) minmax(0, 650fr);
  align-items: start;
  gap: 28px;
}

html.pv-app .pv-ap-detail__info {
  min-width: 0;
}

/* "3 platform versions / View previews": the phone's way into the versions. */
html.pv-app .pv-ap-previews {
  display: none;
}

/* Love (inventory C48): a toggle beside the decision, separate from approval. */
html.pv-app .pv-ap-lovewrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 18px;
}

html.pv-app .pv-ap-love {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--pv-control-border);
  border-radius: var(--pv-radius);
  background: transparent;
  color: var(--pv-text);
  font-family: var(--pv-font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

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

html.pv-app .pv-ap-love[aria-pressed="true"] .pv-icon {
  fill: currentColor;
}

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

html.pv-app .pv-ap-returned {
  display: grid;
  gap: 2px;
  margin-bottom: 22px;
  padding: 14px 18px 6px;
  border: 1px solid var(--pv-border);
  border-radius: 12px;
  background: var(--pv-surface-muted);
}

html.pv-app .pv-ap-returned__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

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

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

html.pv-app .pv-ap-returned .pvx-disclose {
  margin-left: 32px;
}

html.pv-app .pv-ap-returned__notes {
  display: grid;
  gap: 12px;
  margin: 2px 0 12px 32px;
}

html.pv-app .pv-ap-returned__notes .pvx-thread__note {
  background: var(--pv-surface);
}

html.pv-app .pv-ap-detail__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--pv-divider);
}

html.pv-app .pv-ap-detail__note {
  color: var(--pv-text-secondary);
}

html.pv-app .pv-ap-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-left: auto;
}

html.pv-app .pv-ap-btn {
  min-width: 170px;
}

/* Loading */
html.pv-app .pv-ap--loading {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

html.pv-app .pv-ap-skel-row {
  display: flex;
  gap: 14px;
  padding: 6px 0;
}

html.pv-app .pv-ap-skel-lines {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 12px;
  padding-top: 8px;
}

html.pv-app .pv-ap-skel-body {
  display: grid;
  grid-template-columns: minmax(0, 396fr) minmax(0, 560fr);
  gap: 28px;
}

html.pv-app .pv-ap-skel-list,
html.pv-app .pv-ap-skel-detail {
  grid-template-columns: minmax(0, 1fr);
}

html.pv-app .pv-ap-skel-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
}

/* ---- Approvals: narrower content columns --------------------------------------------------- */
@container pvmain (max-width: 1100px) {
  html.pv-app .pv-ap,
  html.pv-app .pv-ap--loading {
    grid-template-columns: minmax(230px, 260px) minmax(0, 1fr);
    gap: 20px;
  }
  html.pv-app .pv-ap-detail__body,
  html.pv-app .pv-ap-skel-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }
  html.pv-app .pvx-media__title {
    font-size: 26px;
  }
}

/* Tablet: the batch becomes a row of cards above the post. */
@container pvmain (max-width: 900px) {
  html.pv-app .pv-ap,
  html.pv-app .pv-ap--loading {
    grid-template-columns: minmax(0, 1fr);
  }
  html.pv-app .pv-ap-list {
    padding: 14px 14px 16px;
  }
  html.pv-app .pv-ap-items {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
  }
  html.pv-app .pv-ap-items > li + li {
    border-top: 0;
  }
  html.pv-app .pv-ap-item,
  html.pv-app .pv-ap-items > li:first-child .pv-ap-item {
    margin: 0;
    height: 100%;
  }
  html.pv-app .pv-ap-item__thumb {
    width: 60px;
    height: 60px;
  }
  html.pv-app .pv-ap-item__text {
    padding-top: 2px;
  }
  html.pv-app .pv-ap-list__count {
    margin-top: 10px;
    padding-top: 12px;
  }
}

@container pvmain (max-width: 680px) {
  html.pv-app .pv-ap-detail__body,
  html.pv-app .pv-ap-skel-body {
    grid-template-columns: minmax(0, 1fr);
  }
  html.pv-app .pvx-media {
    max-width: 520px;
  }
}

/* ---- Approvals on phones: the page 18 composition --------------------------------------------
   One post at a time ("Post 1 of 3"), the visual first, the caption, then
   "3 platform versions / View previews" and the two decisions, full width. The page title stays
   for assistive technology; the phone header already names the page. */
@media (max-width: 599px) {
  /* :not([data-locked]): the locked page drawn at this address (pv-app.js) keeps its title and "Included in
     <plan>." on a phone, as every locked page does (the review of 2026-10-09). */
  html.pv-app [data-route="approvals"]:not([data-locked]) .pv-pagehead {
    margin-bottom: 4px;
  }
  /* The pager line ("Post 1 of 3 / Demo") carries the context on phones, as on page 18. Without a
     pager (an empty tab, an error) the business line stays. */
  html.pv-app [data-route="approvals"]:has(.pv-ap-pager) .pv-pagehead__eyebrow {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html.pv-app [data-route="approvals"]:not([data-locked]) .pv-pagehead__title,
  html.pv-app [data-route="approvals"]:not([data-locked]) .pv-pagehead__sub {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html.pv-app [data-route="approvals"] .pv-pagehead + .pv-tabs {
    margin-top: 0;
  }
  html.pv-app [data-route="approvals"] .pv-tabs {
    margin-bottom: 18px;
  }
  html.pv-app .pv-ap {
    gap: 0;
  }
  html.pv-app .pv-ap-list {
    display: none;
  }
  html.pv-app .pv-ap-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  html.pv-app .pv-ap-pager__label {
    color: var(--pv-text-secondary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  html.pv-app .pv-ap-pager__btns {
    display: flex;
    gap: 8px;
  }
  html.pv-app .pv-ap-pager .pv-iconbtn--bordered {
    border-color: var(--pv-control-border);
  }
  html.pv-app .pv-ap-pager .pv-iconbtn:disabled {
    opacity: .4;
  }
  html.pv-app .pv-ap-detail {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  html.pv-app .pv-ap-detail__head {
    order: 2;
  }
  /* The post title is the concept title on the visual; the heading stays for assistive tech. */
  html.pv-app .pv-ap-detail__head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    margin: 0;
  }
  html.pv-app .pv-ap-detail__body {
    gap: 20px;
  }
  html.pv-app .pvx-media {
    border-radius: 10px;
  }
  html.pv-app .pvx-media__img {
    aspect-ratio: 16 / 9;
  }
  html.pv-app .pvx-media__concept {
    padding: 20px 20px 22px;
  }
  html.pv-app .pvx-media__eyebrow,
  html.pv-app .pvx-media__line {
    display: none;
  }
  html.pv-app .pvx-media__title {
    margin-top: 0;
    font-size: 22px;
    line-height: 1.25;
  }
  html.pv-app .pv-ap-detail .pvx-ver__chips,
  html.pv-app .pv-ap-detail .pvx-ver__rows,
  html.pv-app .pv-ap-detail .pvx-ver__hint,
  html.pv-app .pv-ap-detail .pvx-ver__linkout,
  html.pv-app .pv-ap-detail .pvx-ver__imgsout {
    display: none;
  }
  html.pv-app .pv-ap-detail .pvx-ver__panel {
    margin-top: 0;
  }
  html.pv-app .pv-ap-detail .pvx-ver__caption {
    gap: 12px;
    font-size: 16px;
  }
  html.pv-app .pv-ap-detail .pvx-ver--collapsible:not(.is-open) .pvx-ver__caption > p + p {
    display: none;
  }
  html.pv-app .pv-ap-detail .pvx-ver__more {
    display: inline-flex;
    margin-top: -2px;
    color: var(--pv-text-secondary);
    font-weight: 500;
  }
  html.pv-app .pv-ap-previews {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
    min-height: 44px;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pv-text-secondary);
    font-size: 15px;
    text-align: left;
  }
  html.pv-app .pv-ap-previews__cta {
    color: var(--pv-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  html.pv-app .pv-ap-returned {
    margin-bottom: 16px;
  }
  html.pv-app .pv-ap-lovewrap {
    margin-top: 4px;
  }
  html.pv-app .pv-ap-love__hint {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* approvals.js puts the buttons first and Approve post on top in the DOM on phones, so the
     focus order is the order on screen (no column-reverse). */
  html.pv-app .pv-ap-detail__foot {
    margin-top: 14px;
    padding-top: 0;
    border-top: 0;
    flex-direction: column;
    align-items: stretch;
  }
  html.pv-app .pv-ap-detail__note {
    text-align: center;
    font-size: 15px;
  }
  html.pv-app .pv-ap-detail__actions {
    flex-direction: column;
    gap: 12px;
    margin-left: 0;
  }
  html.pv-app .pv-ap-btn {
    width: 100%;
    min-width: 0;
  }
  html.pv-app .pv-ap--loading {
    grid-template-columns: minmax(0, 1fr);
  }
  html.pv-app .pv-ap--loading .pv-ap-skel-list {
    display: none;
  }
  html.pv-app .pv-ap--loading .pv-ap-skel-detail {
    padding: 0;
    border: 0;
    background: transparent;
  }
  html.pv-app .pv-ap-skel-foot > .pv-skel {
    width: 100% !important;
  }
  html.pv-app .pvx-dlg__actions .pv-btn {
    flex: 1 1 auto;
  }
}

/* =============================================================================================
   Calendar (pv-cal)
   ============================================================================================= */
html.pv-app .pv-cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

html.pv-app .pv-cal-nav .pv-iconbtn--bordered {
  border-color: var(--pv-control-border);
}

html.pv-app .pv-cal-monthbtn {
  min-width: 182px;
  border-radius: var(--pv-radius);
  font-size: 17px;
}

html.pv-app .pv-cal {
  display: grid;
  gap: 22px;
}

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

html.pv-app .pv-cal-bar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Each filter is as wide as what it shows (V2 page 8: "All accounts" is a short control), where the
   browser can size a select to its content; elsewhere it keeps a short minimum. */
html.pv-app .pv-cal-filter .pv-select__input {
  min-width: 136px;
  max-width: 300px;
  field-sizing: content;
}

/* The calendar's own requests (Add something to promote, Start over): one quiet menu button. */
html.pv-app .pv-cal-more {
  flex: none;
}

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

html.pv-app .pv-cal-req__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

html.pv-app .pv-cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  align-items: start;
  gap: 22px;
}

html.pv-app .pv-cal[data-view="agenda"] .pv-cal-layout {
  display: none;
}

/* ---- The grid ---- */
html.pv-app .pv-cal-gridwrap {
  overflow: hidden;
  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-cal-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

html.pv-app .pv-cal-grid__caption {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--pv-border-subtle);
  color: var(--pv-text);
  font-family: var(--pv-font-heading);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
}

html.pv-app .pv-cal-grid thead th {
  height: 44px;
  padding: 0 10px;
  background: var(--pv-surface-muted);
  color: var(--pv-text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

html.pv-app .pv-cal-cell {
  position: relative;
  height: 102px;
  padding: 10px 6px;
  border-top: 1px solid var(--pv-border-subtle);
  border-left: 1px solid var(--pv-border-subtle);
  background: var(--pv-surface);
  vertical-align: top;
  cursor: pointer;
}

html.pv-app .pv-cal-cell:first-child {
  border-left: 0;
}

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

html.pv-app .pv-cal-cell.is-out {
  background: var(--pv-surface);
  cursor: default;
}

html.pv-app .pv-cal-cell__num {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  margin: -3px 0 0 -3px;
  padding: 0 4px;
  border-radius: 999px;
  color: var(--pv-text);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

html.pv-app .pv-cal-cell.is-out .pv-cal-cell__num {
  color: var(--pv-text-meta);
}

/* Today: the date sits in a ring (the cell's label also says "today"). */
html.pv-app .pv-cal-cell.is-today .pv-cal-cell__num {
  box-shadow: inset 0 0 0 2px var(--pv-text);
  font-weight: 700;
}

/* The selected day: a tinted cell with the accent edge along its top (5.46:1 on white, 5.65:1 on
   the dark card). Keyboard focus is a full ring, so the two never look alike, even in dark mode
   where the focus ring is champagne too. */
html.pv-app .pv-cal-cell.is-selected,
html.pv-app .pv-cal-cell.is-selected:hover {
  background: var(--pv-surface-hover);
  box-shadow: inset 0 4px 0 var(--pv-accent-text);
}

html.pv-app .pv-cal-cell:focus-visible {
  outline: 3px solid var(--pv-focus-ring);
  outline-offset: -3px;
  box-shadow: none;
}

html.pv-app .pv-cal-cell.is-selected:focus-visible {
  box-shadow: inset 0 4px 0 var(--pv-accent-text);
}

html.pv-app .pv-cal-cell__items {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

/* A post on the grid: the status is always written; the edge colour and, for dates that are only
   proposed, a dashed outline reinforce it. */
html.pv-app .pv-cal-chip {
  --pv-cal-edge: var(--pv-text-secondary);
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 5px 5px 6px 7px;
  border: 1px solid transparent;
  border-left: 3px solid var(--pv-cal-edge);
  border-radius: var(--pv-radius-xs);
  background: var(--pv-surface-muted);
}

html.pv-app .pv-cal-chip--needs-review { --pv-cal-edge: var(--pv-accent-text); }
html.pv-app .pv-cal-chip--changes-requested { --pv-cal-edge: var(--pv-status-danger-text); }
html.pv-app .pv-cal-chip--approved { --pv-cal-edge: var(--pv-status-info-text); }
html.pv-app .pv-cal-chip--scheduled { --pv-cal-edge: var(--pv-text-secondary); }
html.pv-app .pv-cal-chip--published { --pv-cal-edge: var(--pv-status-success-text); }
/* Planned, with no post made yet: the quietest edge, and dashed like a proposed date (slice 20). */
html.pv-app .pv-cal-chip--planned { --pv-cal-edge: var(--pv-control-border); }
html.pv-app .pv-cal-notice { display: grid; gap: 8px; }
html.pv-app .pv-cal-notice:empty { display: none; }
html.pv-app .pv-cal-req__status .pv-note--danger {
  border-color: var(--pv-status-danger-text);
  background: var(--pv-status-danger-bg);
  color: var(--pv-status-danger-text);
}

html.pv-app .pv-cal-chip.is-proposed {
  border-color: var(--pv-control-border);
  border-style: dashed;
  border-left-style: solid;
  border-left-color: var(--pv-cal-edge);
  background: var(--pv-surface);
}

html.pv-app .pv-cal-chip__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--pv-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

html.pv-app .pv-cal-chip__status,
html.pv-app .pv-cal-chip__time {
  overflow: hidden;
  color: var(--pv-text-secondary);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Week view: taller days with the visual of each post. */
html.pv-app .pv-cal-grid--week .pv-cal-cell {
  height: 340px;
}

html.pv-app .pv-cal-wcard {
  --pv-cal-edge: var(--pv-text-secondary);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 6px 6px 8px 8px;
  border: 1px solid transparent;
  border-left: 3px solid var(--pv-cal-edge);
  border-radius: var(--pv-radius-xs);
  background: var(--pv-surface-muted);
}

html.pv-app .pv-cal-wcard.is-proposed {
  border-color: var(--pv-control-border);
  border-style: dashed;
  border-left-style: solid;
  border-left-color: var(--pv-cal-edge);
  background: var(--pv-surface);
}

html.pv-app .pv-cal-wcard__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin-bottom: 4px;
  border-radius: var(--pv-radius-xs);
}

/* ---- The selected-day panel ---- */
html.pv-app .pv-cal-panel {
  padding: 26px 26px 28px;
}

html.pv-app .pv-cal-panel__title {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

html.pv-app .pv-cal-panel__none {
  margin: 14px 0 14px;
  color: var(--pv-text-secondary);
}

html.pv-app .pv-cal-panel .pv-empty {
  margin-top: 16px;
}

html.pv-app .pv-cal-panel__others {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  list-style: none;
}

html.pv-app .pv-cal-other {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  background: var(--pv-surface);
  color: var(--pv-text);
  text-align: left;
}

html.pv-app .pv-cal-other.is-current {
  border-color: var(--pv-text);
  box-shadow: inset 0 0 0 1px var(--pv-text);
}

html.pv-app .pv-cal-other__time {
  flex: none;
  color: var(--pv-text-secondary);
  font-size: 14px;
}

html.pv-app .pv-cal-other__title {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.pv-app .pv-cal-item {
  display: grid;
  justify-items: start;
}

html.pv-app .pv-cal-item__img {
  width: 100%;
  height: auto;
  aspect-ratio: 266 / 186;
  margin-top: 20px;
  border-radius: 10px;
}

html.pv-app .pv-cal-item__title {
  margin-top: 22px;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

html.pv-app .pv-cal-item__status {
  margin-top: 12px;
}

html.pv-app .pv-cal-item__facts {
  display: grid;
  justify-items: start;
  margin-top: 12px;
}

html.pv-app .pv-cal-versions {
  min-height: 44px;
  color: var(--pv-text);
  font-size: 16px;
  font-weight: 500;
}

html.pv-app .pv-cal-item__time {
  color: var(--pv-text);
}

html.pv-app .pv-cal-place {
  width: 100%;
  margin-top: 12px;
}

html.pv-app .pv-cal-place .pvx-place__row {
  align-items: flex-start;
  flex-wrap: wrap;
}

html.pv-app .pv-cal-place .pvx-place__end {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

html.pv-app .pv-cal-item__action {
  margin-top: 22px;
}

/* ---- Footnote ---- */
html.pv-app .pv-cal-foot {
  display: grid;
  gap: 6px;
  margin-top: -6px;
}

html.pv-app .pv-cal-foot__tz,
html.pv-app .pv-cal-foot__sync {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--pv-text-secondary);
  font-size: 15px;
}

html.pv-app .pv-cal-foot__tz .pv-icon,
html.pv-app .pv-cal-foot__sync .pv-icon {
  flex: none;
  margin-top: 1px;
}

html.pv-app .pv-cal-foot__sync {
  padding-left: 28px;
  color: var(--pv-text-meta);
  font-size: 14px;
}

html.pv-app .pv-cal-foot__sync.is-stale {
  padding: 10px 14px;
  border-radius: var(--pv-radius);
  background: var(--pv-status-attention-bg);
  color: var(--pv-status-attention-text);
  font-weight: 600;
}

/* ---- Month picker ---- */
html.pv-app .pv-cal-pop {
  width: 300px;
  padding: 12px;
}

html.pv-app .pv-cal-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

html.pv-app .pv-cal-picker__year {
  font-family: var(--pv-font-heading);
  font-size: 18px;
  font-weight: 600;
}

html.pv-app .pv-cal-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

html.pv-app .pv-cal-picker__month {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-radius);
  background: var(--pv-surface);
  color: var(--pv-text);
  font-size: 15px;
  font-weight: 500;
}

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

html.pv-app .pv-cal-picker__month.is-current {
  border-color: var(--pv-text);
  background: var(--pv-text);
  color: var(--pv-surface);
  font-weight: 600;
}

html.pv-app .pv-cal-picker__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pv-accent-text);
}

html.pv-app .pv-cal-picker__month.is-current .pv-cal-picker__dot {
  background: var(--pv-surface);
}

html.pv-app .pv-cal-picker__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* ---- Agenda: the Agenda view, and the only layout on narrow screens ---- */
html.pv-app .pv-cal-agenda-host {
  display: none;
}

html.pv-app .pv-cal-agenda-host.is-view {
  display: block;
  max-width: 880px;
}

html.pv-app .pv-cal-agenda {
  display: grid;
  gap: 22px;
}

html.pv-app .pv-cal-aday__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--pv-text-secondary);
  font-family: var(--pv-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html.pv-app .pv-cal-aday__today {
  padding: 2px 8px;
  border-radius: var(--pv-radius-xs);
  background: var(--pv-text);
  color: var(--pv-surface);
  font-size: 12px;
  letter-spacing: 0.08em;
}

html.pv-app .pv-cal-aday__list {
  display: grid;
  gap: 10px;
  list-style: none;
}

html.pv-app .pv-cal-aitem {
  --pv-cal-edge: var(--pv-text-secondary);
  display: grid;
  gap: 4px;
  padding: 14px 14px 8px 14px;
  border: 1px solid var(--pv-border);
  border-left: 3px solid var(--pv-cal-edge);
  border-radius: 12px;
  background: var(--pv-surface);
  box-shadow: var(--pv-shadow-card);
}

html.pv-app .pv-cal-aitem.is-proposed {
  border-style: dashed;
  border-left-style: solid;
  border-color: var(--pv-control-border);
  border-left-color: var(--pv-cal-edge);
}

html.pv-app .pv-cal-aitem__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

html.pv-app .pv-cal-aitem__img {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--pv-radius);
}

html.pv-app .pv-cal-aitem__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html.pv-app .pv-cal-aitem__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

html.pv-app .pv-cal-aitem__meta {
  color: var(--pv-text-secondary);
  font-size: 14px;
}

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

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

html.pv-app .pv-cal-aitem__act .pv-btn {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 15px;
}

html.pv-app .pv-cal-aitem .pv-cal-place {
  margin: 0 0 6px;
}

/* ---- Loading ---- */
html.pv-app .pv-cal--loading {
  display: grid;
  gap: 22px;
}

html.pv-app .pv-cal-skel-grid {
  min-height: 520px;
}

/* ---- Narrower content: the panel moves under the month ---- */
@container pvmain (max-width: 1100px) {
  html.pv-app .pv-cal-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  html.pv-app .pv-cal-panel .pv-cal-item--big {
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  html.pv-app .pv-cal-panel .pv-cal-item--big > * {
    grid-column: 2;
  }
  html.pv-app .pv-cal-panel .pv-cal-item--big > .pv-cal-item__img {
    grid-column: 1;
    grid-row: 1 / span 6;
  }
  html.pv-app .pv-cal-panel .pv-cal-item--big > .pv-cal-item__title {
    margin-top: 20px;
  }
}

/* Narrow: the agenda replaces the grid and the panel. */
@container pvmain (max-width: 699px) {
  html.pv-app .pv-cal-layout {
    display: none;
  }
  html.pv-app .pv-cal-agenda-host {
    display: block;
  }
  html.pv-app .pv-cal-filter--view {
    display: none;
  }
}

@media (max-width: 599px) {
  /* Never on the locked page drawn at this address (pv-app.js data-locked): its "Included in <plan>." stays. */
  html.pv-app [data-route="calendar"]:not([data-locked]) .pv-pagehead__sub {
    display: none;
  }
  html.pv-app [data-route="calendar"]:not([data-locked]) .pv-pagehead {
    margin-bottom: 18px;
  }
  html.pv-app .pv-cal {
    gap: 18px;
  }
  html.pv-app .pv-cal-nav {
    width: 100%;
  }
  html.pv-app .pv-cal-monthbtn {
    flex: 1;
    min-width: 0;
  }
  html.pv-app .pv-cal-bar {
    flex-wrap: nowrap;
    gap: 10px;
  }
  html.pv-app .pv-cal-bar__filters {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
  }
  html.pv-app .pv-cal-bar__filters > .pv-cal-skelfilter {
    width: 100% !important;
  }
  html.pv-app .pv-cal-filter .pv-select__box,
  html.pv-app .pv-cal-filter .pv-select__input {
    width: 100%;
    min-width: 0;
  }
  html.pv-app .pv-cal-filter .pv-select__input {
    padding-right: 32px;
    padding-left: 12px;
    text-overflow: ellipsis;
  }
  html.pv-app .pv-cal-filter .pv-select__chev {
    right: 9px;
  }
  html.pv-app .pv-cal-foot__sync {
    padding-left: 0;
  }
}

/* The narrowest phones: two filters side by side would cut "All content" to "All cont...", so
   each takes its own row, with the actions button beside the first. */
@media (max-width: 379px) {
  html.pv-app .pv-cal-bar {
    align-items: flex-start;
  }
  html.pv-app .pv-cal-bar__filters {
    grid-template-columns: minmax(0, 1fr);
  }
}