/* GENERATED from homepage-v5-app.css for the Pages workspace (#pageDetailView) — do not hand-edit; see pages-v5-glue below */
/* ═══════════════════════════════════════════════════════════════
   AgencyOS — homepage-v5-app.css
   Glue between the reference Homepage stylesheet (homepage-v5.css,
   extracted unchanged and scoped to .hp5) and the live AgencyOS markup:
   token map, hiding the legacy chrome, and neutralising legacy layout
   rules. Scoped to #pageDetailView so no other screen is affected.
   ═══════════════════════════════════════════════════════════════ */
#pageDetailView .hp5 {
  --bg: var(--st-bg); --surface: var(--st-surface); --surface-2: var(--st-surface-2);
  --ink: var(--st-ink); --text: var(--st-ink); --muted: var(--st-muted); --line: var(--st-line);
  --primary: var(--st-primary); --primary-2: var(--st-primary-2); --teal: var(--st-teal); --shadow: var(--st-shadow);
  --teal-soft: var(--st-soft); --orange-soft: var(--st-soft); --accent: var(--st-primary);
  color: var(--st-ink); font-family: var(--app-font, Inter, 'Outfit', system-ui, sans-serif); font-size: 16px; line-height: 1.55;
}
#pageDetailView .hp5 *, #pageDetailView .hp5 *::before, #pageDetailView .hp5 *::after { box-sizing: border-box; }
#pageDetailView .hp5 { padding: 4px 24px 24px; }

/* legacy chrome that the approved design does not have (markup + handlers stay in the DOM) */
#pageDetailView .hp5 > .section-header,
#pageDetailView .hp5 > .version-bar,
#pageDetailView .hp5 .preview-pane-header > .preview-pane-label,
#pageDetailView .hp5 .preview-pane-header > .preview-pane-actions,
#pageDetailView .hp5 .sm-panel-header { display: none !important; }

/* the grid: manifest left, preview right */
#pageDetailView .hp5 #pdvNormalWorkspace { display: block; height: auto; min-height: 0; max-height: none; padding: 0; margin: 0; border: 0; background: none; }
#pageDetailView .hp5 .homepageWorkspaceGrid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: stretch; height: calc(100vh - 300px); min-height: 520px; padding: 0; margin: 0; overflow: hidden; border: 0; background: none; }
#pageDetailView .hp5 .homepageWorkspaceGrid.imagesWide { grid-template-columns: 560px minmax(0, 1fr); }
#pageDetailView .hp5 .homepageWorkspaceGrid > .homepage-preview-pane { display: block; min-width: 0; min-height: 0; height: 100%; padding: 0; margin: 0; border: 0; background: none; flex: none; overflow: hidden; }
#pageDetailView .hp5 .workspaceToolCard { position: static; top: auto; width: auto; height: 100%; min-height: 0; justify-self: stretch; display: flex; flex-direction: column; overflow: hidden; }
#pageDetailView .hp5 .homepageWorkspaceGrid > .workspaceToolCard { grid-column: 1; }
#pageDetailView .hp5 .homepageWorkspaceGrid > .homepage-preview-pane { grid-column: 2; }
#pageDetailView .hp5 .hp5-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 8px 10px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#pageDetailView .hp5 .hp5-body[hidden] { display: none; }
#pageDetailView .hp5 .sm-panel { width: 100%; min-width: 0; border: 0; background: none; padding: 0; margin: 0; box-shadow: none; display: block; }
#pageDetailView .hp5 .sm-panel .sm-list { padding: 0; max-height: none; overflow: visible; }
#pageDetailView .hp5 .manifestList { display: grid; gap: 8px; max-height: none; overflow: visible; padding: 0; }
#pageDetailView .hp5 .manifestItem { position: relative; }
#pageDetailView .hp5 .manifestItem .manifestSelect { background: none; border: 0; }
#pageDetailView .hp5 .manifestAdd { margin-left: auto; }
#pageDetailView .hp5 .manifestExpand[hidden], #pageDetailView .hp5 .manifestAdd[hidden] { display: none; }
#pageDetailView .hp5 .sm-panel-empty, #pageDetailView .hp5 .sm-panel-loading, #pageDetailView .hp5 .sm-panel-error { padding: 22px 12px; color: var(--muted); font-size: 12.5px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface-2); }

/* the body-level row menu */

/* preview card */
#pageDetailView .hp5 .previewCard { height: 100%; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#pageDetailView .hp5 .previewCard > .previewBar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#pageDetailView .hp5 .previewCard > .previewScrollTrack { flex: none; }
#pageDetailView .hp5 .previewCard > .projectPreviewFrame { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; border: 0; background: #fff; }
#pageDetailView .hp5 .previewCard > .projectPreviewFrame.mobile { width: 390px; max-width: 100%; margin-inline: auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
#pageDetailView .hp5 .previewCard > #pdvPreviewMock { flex: 1 1 auto; min-height: 0; overflow: auto; }
#pageDetailView .hp5 .versionMenuFoot { padding: 8px 4px 2px; border-top: 1px solid var(--line); margin-top: 6px; }
#pageDetailView .hp5 .hp5UseBtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
#pageDetailView .hp5 .hp5UseBtn:disabled { background: var(--surface-2); color: var(--muted); cursor: default; }
#pageDetailView .hp5 .hp5UseBtn svg { width: 15px; height: 15px; }
#pageDetailView .hp5 .previewMoreMenu button:disabled { color: var(--muted); opacity: .45; cursor: not-allowed; }
#pageDetailView .hp5 .previewMoreMenu button svg, #pageDetailView .hp5 .previewBar svg { width: 16px; height: 16px; flex: none; }

/* real image workspace sits inside the Images tab */
#pageDetailView .hp5 #imageWorkspacePanel-page { padding: 0 !important; margin: 0; }

@media (max-width: 1100px) {
  #pageDetailView .hp5 .homepageWorkspaceGrid, #pageDetailView .hp5 .homepageWorkspaceGrid.imagesWide { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  #pageDetailView .hp5 .homepageWorkspaceGrid > .workspaceToolCard, #pageDetailView .hp5 .homepageWorkspaceGrid > .homepage-preview-pane { grid-column: 1; height: auto; }
  #pageDetailView .hp5 .workspaceToolCard { max-height: 520px; }
  #pageDetailView .hp5 .previewCard { height: 680px; }
}

/* icons inside the reference controls (the reference sizes every svg via its icon helper) */
#pageDetailView .hp5 .manifestMore svg, #pageDetailView .hp5 .versionCopyAction svg, #pageDetailView .hp5 .iconSegmented svg, #pageDetailView .hp5 .themeControl svg, #pageDetailView .hp5 .manifestExpand svg { width: 16px; height: 16px; flex: none; }
#pageDetailView .hp5 .manifestMore { display: grid; place-items: center; }
#pageDetailView .hp5 .hp5-body { padding-top: 6px; }

/* the reference resets buttons globally (button { font: inherit }) at element specificity so its own class rules still win */
.hp5 button, .hp5 input, .hp5 textarea, .hp5 select { font: inherit; }
.hp5 button { color: inherit; cursor: pointer; }

/* legacy .sm-row flex layout must not leak into the reference row */
#pageDetailView .hp5 .manifestItem.sm-row { display: block; gap: normal; }
#pageDetailView .hp5 .manifestSelect, #pageDetailView .hp5 .manifestHeader button { padding: 1px 6px; }
#pageDetailView .hp5 .manifestMore { padding: 3px 8px 2px; }

/* Images tab: the real Image Workspace (section list + inspector) fits the 320px manifest card by stacking;
   the expand control (imagesWide) restores the two-column layout. */
#pageDetailView .hp5 #pdv5ImagesBody .iw-root { flex-direction: column; gap: 14px; min-height: 0; }
#pageDetailView .hp5 #pdv5ImagesBody .iw-section-list { width: 100%; max-height: 190px; overflow-y: auto; border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
#pageDetailView .hp5 #pdv5ImagesBody .iw-section-list-header { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
#pageDetailView .hp5 #pdv5ImagesBody .iw-section-row { border-radius: 8px; padding: 8px 10px; }
#pageDetailView .hp5 #pdv5ImagesBody .iw-section-row-active { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-color: var(--primary); }
#pageDetailView .hp5 #pdv5ImagesBody .iw-inspector { width: 100%; }
#pageDetailView .hp5 .homepageWorkspaceGrid.imagesWideIn #pdv5ImagesBody .iw-root { flex-direction: row; }
#pageDetailView .hp5 .homepageWorkspaceGrid.imagesWideIn #pdv5ImagesBody .iw-section-list { width: 190px; max-height: none; border-right: 1px solid var(--line); border-bottom: 0; padding-right: 12px; padding-bottom: 0; }
#pageDetailView .hp5 #pdv5ImagesBody .iw-tabs { overflow-x: auto; scrollbar-width: none; }
#pageDetailView .hp5 #pdv5ImagesBody .iw-tab-btn { font-size: 13px; padding: 8px 12px; white-space: nowrap; }
#pageDetailView .hp5 #pdv5ImagesBody .iw-inspector { min-width: 0; overflow-x: auto; scrollbar-width: thin; }

/* the live iframe sits inside the legacy .preview-pane-content wrapper */
#pageDetailView .hp5 .previewCard > .preview-pane-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; margin: 0; border: 0; background: none; overflow: hidden; }
#pageDetailView .hp5 .preview-pane-content > .projectPreviewFrame { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; border: 0; background: #fff; }
#pageDetailView .hp5 .preview-pane-content > .projectPreviewFrame.mobile { width: 390px; max-width: 100%; margin-inline: auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
#pageDetailView .hp5 .preview-pane-content > #pdvPreviewMock { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* an id rule in the legacy sheet sets the iframe width — match it with an id so the reference Mobile width wins */
#pageDetailView .hp5 #pdvEmbeddedFrame.mobile { width: 390px !important; max-width: 100%; flex: 0 0 auto; align-self: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
#pageDetailView .hp5 #pdvEmbeddedFrame.mobile { height: 100%; }

/* ── Homepage loading skeleton (the #pdvPreviewMock placeholder): theme-aware, V5 tokens + shimmer ── */
#pageDetailView .hp5 .preview-pane-content:has(> #pdvPreviewMock:not([style*="display: none"])) { align-items: stretch; justify-content: stretch; padding: 0; overflow: hidden; }
#pageDetailView .hp5 #pdvPreviewMock { width: 100%; max-width: none; height: 100%; }
#pageDetailView .hp5 #pdvPreviewMock .mock-hero { position: relative; height: 100%; padding: 28px 44px 36px; gap: 16px; background: var(--surface); border: 0; border-radius: 0; align-content: start; overflow: hidden; }
#pageDetailView .hp5 #pdvPreviewMock .mock-hero::before { content: ""; display: block; height: 46px; margin-bottom: 14px; border-radius: 12px; }
#pageDetailView .hp5 #pdvPreviewMock .mock-hero::before,
#pageDetailView .hp5 #pdvPreviewMock .mock-eyebrow,
#pageDetailView .hp5 #pdvPreviewMock .mock-h1,
#pageDetailView .hp5 #pdvPreviewMock .mock-sub,
#pageDetailView .hp5 #pdvPreviewMock .mock-cta-ghost,
#pageDetailView .hp5 #pdvPreviewMock .mock-screenshot {
  background-color: color-mix(in srgb, var(--muted) 14%, var(--surface));
  background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 80%);
  background-size: 220% 100%; background-repeat: no-repeat; animation: skv5Shimmer 1.3s ease-in-out infinite;
}
#pageDetailView .hp5 #pdvPreviewMock .mock-eyebrow { height: 12px; width: 120px; border-radius: 999px; }
#pageDetailView .hp5 #pdvPreviewMock .mock-h1 { height: 36px; width: 64%; border-radius: 10px; }
#pageDetailView .hp5 #pdvPreviewMock .mock-h1.short { width: 46%; }
#pageDetailView .hp5 #pdvPreviewMock .mock-sub { height: 14px; width: 50%; border-radius: 8px; }
#pageDetailView .hp5 #pdvPreviewMock .mock-sub.shorter { width: 38%; }
#pageDetailView .hp5 #pdvPreviewMock .mock-ctas { gap: 12px; margin-top: 8px; }
#pageDetailView .hp5 #pdvPreviewMock .mock-cta-primary { height: 44px; width: 150px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 26%, var(--surface)); animation: skv5Pulse 1.6s ease-in-out infinite; }
#pageDetailView .hp5 #pdvPreviewMock .mock-cta-ghost { height: 44px; width: 150px; border-radius: 12px; border: 1px solid var(--line); }
#pageDetailView .hp5 #pdvPreviewMock .mock-screenshot { flex: 1 1 auto; min-height: 200px; margin-top: 14px; border: 1px solid var(--line); border-radius: 16px; }
@keyframes skv5Pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { #pageDetailView .hp5 #pdvPreviewMock * , #pageDetailView .hp5 #pdvPreviewMock .mock-hero::before { animation: none !important; } }
#pageDetailView .hp5 #pdvPreviewMock .mock-hero { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
#pageDetailView .hp5 #pdvPreviewMock .mock-hero > *, #pageDetailView .hp5 #pdvPreviewMock .mock-hero::before { flex: 0 0 auto; }
#pageDetailView .hp5 #pdvPreviewMock .mock-hero::before { width: 100%; }
#pageDetailView .hp5 #pdvPreviewMock .mock-ctas { display: flex; }
#pageDetailView .hp5 #pdvPreviewMock .mock-screenshot { flex: 1 1 auto; width: 100%; }

/* Version chooser: icon must not shrink to a dot; "Use This Version" footer hidden (selection is automatic) */
#pageDetailView .hp5 .previewVersionLinks > button svg { flex: 0 0 auto; }
#pageDetailView .hp5 .previewVersionLinksMenu .versionMenuFoot { display: none; }

/* Version dropdown polish (Homepage + Pages workspace): clock icon box, copy-link button */
.hp5 .previewVersionLinks > button svg { box-sizing: border-box; width: 28px; height: 28px; padding: 6px; flex: 0 0 auto; }
.hp5 .versionList .versionMenuRow .versionCopyAction { box-sizing: border-box; width: 34px; height: 34px; flex: none; border: 0; border-radius: 10px; background: transparent; color: var(--muted); transform: none; }
.hp5 .versionList .versionMenuRow .versionCopyAction:hover { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); border: 0; transform: none; }
.hp5 .versionList .versionMenuRow .versionCopyAction svg { width: 16px; height: 16px; padding: 0; }
.hp5 .versionList .versionMenuRow { grid-template-columns: minmax(0, 1fr) 34px; padding: 4px 6px 4px 6px; overflow: hidden; }
.hp5 .previewVersionLinks > button svg { width: 30px; height: 30px; padding: 4px; stroke-width: 2.2; }
.hp5 .previewBar .previewVersionLinks > button svg { width: 30px !important; height: 30px !important; padding: 6px; }


/* ═══ Pages tab glue (list + detail) ═══ */
/* token map for the list container (the detail container gets its own from the generated block above) */
#tab-pages > .tab-panel-inner.hp5 {
  --bg: var(--st-bg); --surface: var(--st-surface); --surface-2: var(--st-surface-2);
  --ink: var(--st-ink); --text: var(--st-ink); --muted: var(--st-muted); --line: var(--st-line);
  --primary: var(--st-primary); --primary-2: var(--st-primary-2); --teal: var(--st-teal); --shadow: var(--st-shadow);
  --teal-soft: var(--st-soft); --orange-soft: var(--st-soft); --accent: var(--st-primary);
  color: var(--st-ink); font-family: var(--app-font, Inter, 'Outfit', system-ui, sans-serif); font-size: 16px; line-height: 1.55;
  padding: 4px 24px 24px;
}
#tab-pages > .tab-panel-inner.hp5 *, #tab-pages > .tab-panel-inner.hp5 *::before, #tab-pages > .tab-panel-inner.hp5 *::after { box-sizing: border-box; }

/* page detail container */
#pageDetailView .hp5 .homepage-layout { display: block; height: auto; min-height: 0; max-height: none; padding: 0; margin: 0; border: 0; background: none; }
@media (min-width: 1101px) { #pageDetailView .hp5 .homepageWorkspaceGrid { height: calc(100vh - 272px - var(--ws-bottom-gap, 24px)); } }  /* desktop only — ≤1100px stacks and sizes itself (rule at the top of this file) */
#pageDetailView .hp5 .iw-panel { padding: 0 !important; }
#pageDetailView .hp5 #pdv5Manifest .eyebrow { display: inline; }
#pageDetailView .hp5 > .pageWorkspaceBar { margin-bottom: 14px; }
#pageDetailView .hp5 .pageWorkspaceTitle { color: var(--ink); }
#pageDetailView .hp5 .pageWorkspaceIdentity .backProject {
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer;
}
#pageDetailView .hp5 .pageWorkspaceIdentity .backProject:hover { border-color: var(--primary); color: var(--primary); }
#pageDetailView .hp5 .pageWorkspaceIdentity .backProject svg { width: 16px; height: 16px; }
#pageDetailView .hp5 > .active-build-panel, #pageDetailView .hp5 > .regen-banner { margin-bottom: 14px; }
#pageDetailView .hp5 .versionMenuFoot { display: none; }

/* ── List: stage header + panel ── */
#tab-pages .pg5 > .stageHead { align-items: center; margin-bottom: 14px; }
#tab-pages .pg5 > .stageHead h2 { color: var(--ink); }
#tab-pages .pg5 > .stageHead p { color: var(--muted); }
#tab-pages .pg5 .pagesStageActions { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
#tab-pages .pg5 .pagesSourceChooser { position: relative; display: block; flex: 0 0 auto; }
#tab-pages .pg5 .pagesSourceChooser > button {
  height: 32px; min-height: 32px; max-height: 32px; padding: 0 30px 0 12px; line-height: 30px; display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer;
}
#tab-pages .pg5 .pagesSourceChooser .previewVersionLinksMenu strong { display: block; padding: 6px 10px 8px; font-size: 10px; letter-spacing: .1em; color: var(--muted); }
#tab-pages .pg5 .sourceVersionRow { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
#tab-pages .pg5 .sourceVersionRow:hover, #tab-pages .pg5 .sourceVersionRow.selected { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
#tab-pages .pg5 .sourceVersionRow small { color: var(--muted); font-weight: 600; font-size: 11px; }
#tab-pages .pg5 .pagesStageActions > .btn { height: 32px; min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
#tab-pages .pg5 .pagesStageActions > .btn:hover { border-color: var(--primary); }
#tab-pages .pg5 .pagesStageActions > .btn.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
#tab-pages .pg5 .pagesStageActions > .btn:disabled { opacity: .5; cursor: not-allowed; }

/* the legacy status strip / header block are not part of the design (their markup + handlers stay) */
#tab-pages > .tab-panel-inner.pg5 > #stackStatusBar,
#tab-pages > .tab-panel-inner.pg5 > #pagesGridHeader { display: none !important; }
#tab-pages .pg5 .pg5-hide { display: none !important; }

#tab-pages .pg5 #pg5ListHeader { border: 1px solid var(--line); border-radius: 14px 14px 0 0; background: var(--surface); }
#tab-pages .pg5 #pg5ListHeader .eyebrow { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
#tab-pages .pg5 #pagesGrid { display: block; gap: 0; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; background: var(--surface); overflow: hidden; }
#tab-pages .pg5 #pagesGrid[style*="display: none"] , #tab-pages .pg5 #pagesGrid[style*="display:none"] { display: none !important; }
#tab-pages .pg5 #pagesEmptyState { color: var(--muted); }

/* page cards → reference page rows */
#tab-pages .pg5 #pagesGrid > .page-card {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto 24px; grid-template-areas: "num name chip actions arrow" "num meta chip actions arrow";
  align-items: center; column-gap: 12px; row-gap: 1px; margin: 0; padding: 14px 16px; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; transform: none; cursor: pointer; text-align: left;
}
#tab-pages .pg5 #pagesGrid > .page-card:last-child { border-bottom: 0; }
#tab-pages .pg5 #pagesGrid > .page-card:hover { background: var(--surface-2); transform: none; border-color: var(--line); }
#tab-pages .pg5 #pagesGrid > .page-card::after { content: "→"; grid-area: arrow; color: var(--primary); font-size: 18px; justify-self: end; }
#tab-pages .pg5 .page-card-header { display: contents; }
#tab-pages .pg5 .page-card-num {
  grid-area: num; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--muted);
  font: 700 11px/1 var(--app-font, Inter, system-ui, sans-serif);
}
#tab-pages .pg5 .page-card-name { grid-area: name; margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
#tab-pages .pg5 .page-card-meta { grid-area: meta; margin: 0; font-size: 11px; color: var(--muted); }
#tab-pages .pg5 .page-card-meta[data-ver]::before { content: attr(data-ver) " · "; }
#tab-pages .pg5 .page-approved-badge, #tab-pages .pg5 .page-version-bar { display: none; }
#tab-pages .pg5 .page-card-status-chip {
  grid-area: chip; justify-self: end; display: inline-flex; align-items: center; width: max-content; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
#tab-pages .pg5 .page-card-status-chip.approved { background: var(--teal-soft); color: var(--teal); border-color: color-mix(in srgb, var(--teal) 28%, var(--surface)); }
#tab-pages .pg5 .page-card-status-chip.ready, #tab-pages .pg5 .page-card-status-chip.sent { background: color-mix(in srgb, #e0902a 14%, var(--surface)); color: #b06a10; border-color: color-mix(in srgb, #e0902a 35%, var(--surface)); }
:root:not([data-theme="light"]) #tab-pages .pg5 .page-card-status-chip.ready, :root:not([data-theme="light"]) #tab-pages .pg5 .page-card-status-chip.sent { background: #47291f; color: #ffd8c8; border-color: #89523f; }
#tab-pages .pg5 .page-card-actions { grid-area: actions; display: flex; gap: 6px; opacity: 0; transition: opacity .15s ease; }
#tab-pages .pg5 .page-card:hover .page-card-actions, #tab-pages .pg5 .page-card:focus-within .page-card-actions, #tab-pages .pg5 .page-card-actions:has(.primary) { opacity: 1; }
#tab-pages .pg5 .pc-btn { flex: none; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 700; cursor: pointer; }
#tab-pages .pg5 .pc-btn:hover { border-color: var(--primary); background: var(--surface); box-shadow: none; color: var(--ink); }
#tab-pages .pg5 .pc-btn.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
#tab-pages .pg5 .pc-btn.amber, #tab-pages .pg5 .pc-btn.purple { background: var(--surface); color: var(--ink); border-color: var(--line); }

/* readiness card (Convert gate) → compact V5 strip */
#tab-pages .pg5 .pages-readiness { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); }
#tab-pages .pg5 .pages-readiness.ready { border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); }
#tab-pages .pg5 .pages-readiness.blocked { border-color: color-mix(in srgb, #e0902a 45%, var(--line)); }
#tab-pages .pg5 .pages-readiness .rc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#tab-pages .pg5 .pages-readiness .rc-title { font-size: 14px; font-weight: 800; }
#tab-pages .pg5 .pages-readiness .rc-list { display: flex; flex-wrap: wrap; gap: 6px; }
#tab-pages .pg5 .pages-readiness .rc-row { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: 11.5px; }
#tab-pages .pg5 .pages-readiness .rc-row.ok .rc-mark { color: var(--teal); }
#tab-pages .pg5 .pages-readiness .rc-row.bad .rc-mark { color: #c97a14; }
#tab-pages .pg5 .pages-readiness .rc-sep { display: none; }
#tab-pages .pg5 .pages-readiness .rc-state { color: var(--muted); }
#tab-pages .pg5 .pages-readiness .rc-home { margin-top: 8px; font-size: 12px; color: var(--muted); }
#tab-pages .pg5 .pages-readiness .rc-msgs { margin-top: 6px; font-size: 12px; color: var(--muted); max-height: 64px; overflow: auto; }
#tab-pages .pg5 .pages-readiness .rc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#tab-pages .pg5 .pages-readiness .action-btn { height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }
#tab-pages .pg5 .pages-readiness .action-btn.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }

/* the Pages-tab batch bars keep working, just on the V5 surface */
#tab-pages .pg5 .pages-all-approved { border-radius: 14px; }

@media (max-width: 900px) {
  #tab-pages .pg5 > .stageHead { flex-direction: column; align-items: stretch; }
  #tab-pages .pg5 .pagesStageActions { flex-wrap: wrap; }
  #tab-pages .pg5 #pagesGrid > .page-card { grid-template-columns: 34px minmax(0, 1fr) auto 24px; grid-template-areas: "num name chip arrow" "num meta actions arrow"; }
}

/* while a page workspace is open, the list chrome steps aside */
#tab-pages.pg5-detail-open > .tab-panel-inner.pg5 > * { display: none !important; }

/* readiness: one compact strip (per-page state is on the rows, blockers keep their action buttons) */
#tab-pages .pg5 .pages-readiness .rc-list, #tab-pages .pg5 .pages-readiness .rc-msgs { display: none; }
#tab-pages .pg5 .pages-readiness { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 16px; padding: 12px 16px; }
#tab-pages .pg5 .pages-readiness .rc-head { margin: 0; }
#tab-pages .pg5 .pages-readiness .rc-home { margin: 0; }
#tab-pages .pg5 .pages-readiness .rc-actions { margin: 0; justify-content: flex-end; }


/* ═══ Page Structure editor (V5): compact tiles + header/footer menu tabs ═══ */
#pageStructureManager { --surface: var(--st-surface); --surface-2: var(--st-surface-2); --ink: var(--st-ink); --muted: var(--st-muted); --line: var(--st-line); --primary: var(--st-primary); --primary-2: var(--st-primary-2); color: var(--st-ink); }
/* not needed for now (markup + handlers stay): title/save bar, counters, explainer, 'Pages to Build' label */
#pageStructureManager .section-header,
#pageStructureManager .psm-stats-row,
#pageStructureManager .psm-info-banner,
#pageStructureManager #psmNavRefBanner + .psm-section-label { display: none !important; }
#pageStructureManager > .tab-panel-inner { padding: 0 !important; }
#pageStructureManager .psm-section-label { margin: 18px 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
#pageStructureManager .psm-section-sub { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }

/* page list → compact tiles, 4 per row */
#pageStructureManager #psmList { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
#pageStructureManager .psm-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "drag num name actions" "places places places places"; align-items: center; gap: 8px;
  margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s ease, background-color .15s ease;
}
#pageStructureManager .psm-row:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
#pageStructureManager .psm-row-drag { grid-area: drag; color: var(--muted); cursor: grab; display: grid; place-items: center; }
#pageStructureManager .psm-row-num { grid-area: num; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); font: 700 10.5px/1 var(--app-font, Inter, system-ui, sans-serif); }
#pageStructureManager .psm-row-name { grid-area: name; min-width: 0; font-size: 13px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pageStructureManager .psm-row input[type=text] { grid-area: name; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--primary); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; }
#pageStructureManager .psm-row-places { grid-area: places; display: flex; gap: 6px; }
#pageStructureManager .psm-place { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 700; cursor: pointer; }
#pageStructureManager .psm-place:hover { border-color: var(--primary); color: var(--ink); }
#pageStructureManager .psm-place input { margin: 0; accent-color: var(--primary); }
#pageStructureManager .psm-row-actions { grid-area: actions; display: flex; gap: 4px; }
#pageStructureManager .psm-action-btn { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12px; cursor: pointer; }
#pageStructureManager .psm-action-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--surface); }
#pageStructureManager .psm-action-btn:disabled { opacity: .35; cursor: not-allowed; }
#pageStructureManager .psm-action-btn[title*="elete"]:hover:not(:disabled) { color: #d6453d; border-color: #d6453d; }

/* add row */
#pageStructureManager .psm-add-row { display: flex; gap: 10px; margin-top: 12px; }
#pageStructureManager .psm-add-input { flex: 1; max-width: 360px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13px; outline: 0; }
#pageStructureManager .psm-add-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
#pageStructureManager .psm-add-row .action-btn { height: 36px; padding: 0 14px; border: 0; border-radius: 10px; color: #fff; font-size: 12.5px; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--primary-2)); cursor: pointer; }

/* where to show links → Header / Footer menu tabs, order as compact tiles */
#pageStructureManager #psmNavNote { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
#pageStructureManager .pg5-tabs { display: inline-flex; gap: 6px; margin: 0 0 12px; }
#pageStructureManager .pg5-tabs button { height: 36px; padding: 0 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
#pageStructureManager .pg5-tabs button:hover { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border-color: var(--primary); color: var(--primary); }
#pageStructureManager .pg5-tabs button.active { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); border-color: var(--primary); color: var(--primary); }
#pageStructureManager #psmNavOrder { display: block; }
#pageStructureManager .psm-order-col { display: none; }
#pageStructureManager .psm-order-col.pg5-on { display: block; }
#pageStructureManager .psm-order-title { display: none; }
#pageStructureManager .psm-order-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; counter-reset: ord; }
#pageStructureManager .psm-order-list li { counter-increment: ord; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
#pageStructureManager .psm-order-list li:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
#pageStructureManager .psm-order-list li::before { content: counter(ord); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); font: 700 10.5px/1 var(--app-font, Inter, system-ui, sans-serif); }
#pageStructureManager .psm-order-name { font-size: 13px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pageStructureManager .psm-order-col { border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
#pageStructureManager #psmNavOrder { border: 0; background: none; padding: 0; }
#pageStructureManager .psm-row-places { justify-content: flex-start; }
/* row actions: icon buttons, revealed on hover / keyboard focus */
#pageStructureManager .psm-row-actions { opacity: 0; transition: opacity .15s ease; }
#pageStructureManager .psm-row:hover .psm-row-actions, #pageStructureManager .psm-row:focus-within .psm-row-actions { opacity: 1; }
#pageStructureManager .psm-row-actions .psm-action-btn { font-size: 0; }
#pageStructureManager .psm-row-actions .psm-action-btn::before { font-size: 13px; line-height: 1; }
#pageStructureManager .psm-row-actions .psm-action-btn[title*="p"][aria-label*="up"]::before { content: "↑"; }
#pageStructureManager .psm-row-actions .psm-action-btn[aria-label*="down"]::before { content: "↓"; }
#pageStructureManager .psm-row-actions .psm-action-btn[title*="ename"]::before { content: "✎"; }
#pageStructureManager .psm-row-actions .psm-action-btn[title*="elete"]::before { content: "✕"; }
#pageStructureManager .psm-row-places { margin: 0 !important; }

/* exactly four tiles per row (fewer on narrow screens) */
#pageStructureManager #psmList, #pageStructureManager .psm-order-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px) { #pageStructureManager #psmList, #pageStructureManager .psm-order-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { #pageStructureManager #psmList, #pageStructureManager .psm-order-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #pageStructureManager #psmList, #pageStructureManager .psm-order-list { grid-template-columns: minmax(0, 1fr); } }
#pageStructureManager .psm-row, #pageStructureManager .psm-order-list li { padding: 14px 14px; }
#pageStructureManager .psm-row { row-gap: 12px; }

/* Page workspace: the legacy "Page Images" heading and "Page QA" block sit below the grid — not part of the design (markup + handlers stay; Images live in the manifest card) */
#pdvNormalWorkspace > .section-header,
#pdvNormalWorkspace > #pdvQaLoadingState, #pdvNormalWorkspace > #pdvQaEmptyState, #pdvNormalWorkspace > #pdvQaErrorState, #pdvNormalWorkspace > #pdvQaResultsPanel { display: none !important; }

/* unbuilt page: build call-to-action replaces the grey placeholder */
#pageDetailView .hp5 .previewCard.pdv5-unbuilt #pdvPreviewMock { display: none !important; }
#pageDetailView .hp5 .pdv5BuildCta { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px; text-align: center; }
#pageDetailView .hp5 .pdv5BuildCta[hidden] { display: none; }
#pageDetailView .hp5 .pdv5BuildIcon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); }
#pageDetailView .hp5 .pdv5BuildIcon svg { width: 24px; height: 24px; }
#pageDetailView .hp5 .pdv5BuildCta h3 { margin: 6px 0 0; font-size: 16px; font-weight: 800; color: var(--ink); }
#pageDetailView .hp5 .pdv5BuildCta p { margin: 0 0 8px; font-size: 13px; color: var(--muted); max-width: 340px; }
#pageDetailView .hp5 .pdv5BuildCta .btn { height: 38px; padding: 0 22px; border: 0; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--primary-2)); cursor: pointer; }
#pageDetailView .hp5 .pdv5BuildCta .btn:disabled { opacity: .5; cursor: not-allowed; }

/* tile: custom badge on the name row, Build to the right of the Header / Footer chips, hover actions overlay (no reserved width) */
#pageStructureManager .psm-row { position: relative; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "drag num name badge" "places places places build"; }
#pageStructureManager .psm-custom-badge { grid-area: badge; justify-self: end; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line)); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#pageStructureManager .psm-row-actions { position: absolute; top: 8px; right: 8px; z-index: 1; padding-left: 8px; background: color-mix(in srgb, var(--primary) 7%, var(--surface)); border-radius: 10px; }
#pageStructureManager .pg5-build { grid-area: build; justify-self: end; height: 28px; padding: 0 14px; border: 0; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--primary-2)); cursor: pointer; }
#pageStructureManager .pg5-build:hover { filter: brightness(1.08); }

/* autosave status next to the Add Custom Page row */
#pageStructureManager .pg5-savestate { align-self: center; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
#pageStructureManager .pg5-savestate.ok { color: var(--teal); }
#pageStructureManager .pg5-savestate.busy { color: var(--primary); }
#pageStructureManager .pg5-savestate.bad { color: #d6453d; }

/* ═══ Pages view = structure tiles. The old list rows, Approval / History and the duplicate list header step aside ═══ */
#tab-pages > .tab-panel-inner.pg5 { display: flex; flex-direction: column; }
#tab-pages > .tab-panel-inner.pg5 > #pg5StageHead { order: 0; }
#tab-pages > .tab-panel-inner.pg5 > #pagesReadinessCard { order: 1; }
#tab-pages > .tab-panel-inner.pg5 > #pageStructureManager { order: 2; }
#tab-pages > .tab-panel-inner.pg5 > #pg5ListHeader, #tab-pages > .tab-panel-inner.pg5 > #pagesGrid, #tab-pages > .tab-panel-inner.pg5 > #pagesEmptyState,
#tab-pages > .tab-panel-inner.pg5 > #pagesApprovalDetails, #tab-pages > .tab-panel-inner.pg5 > #pagesAllApproved { display: none !important; }
#pageStructureManager { display: block; }
#pageStructureManager .psm-row { cursor: pointer; }
#pageStructureManager .psm-row-drag, #pageStructureManager .psm-place, #pageStructureManager .psm-place * { cursor: default; }
#pageStructureManager .psm-row-drag { cursor: grab; }
#pageStructureManager .pg5-status { grid-area: badge; justify-self: end; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
#pageStructureManager .pg5-status.approved { background: color-mix(in srgb, var(--teal) 14%, var(--surface)); color: var(--teal); border-color: color-mix(in srgb, var(--teal) 30%, var(--line)); }
#pageStructureManager .pg5-status.ready, #pageStructureManager .pg5-status.sent { background: color-mix(in srgb, #e0902a 14%, var(--surface)); color: #b06a10; border-color: color-mix(in srgb, #e0902a 35%, var(--surface)); }
:root:not([data-theme="light"]) #pageStructureManager .pg5-status.ready, :root:not([data-theme="light"]) #pageStructureManager .pg5-status.sent { background: #47291f; color: #ffd8c8; border-color: #89523f; }
#tab-pages .pg5 .pages-readiness .rc-actions .action-btn { white-space: nowrap; }
#tab-pages .pg5 .pagesStageActions > [hidden] { display: none !important; }

/* tile hover behaviour: only not-yet-built pages get the edit icons; the status chip steps aside and Build appears on hover */
#pageStructureManager .psm-row[data-pg5status]:not([data-pg5status="pending"]) .psm-row-actions { display: none !important; }
#pageStructureManager .psm-row:hover .pg5-status.pending, #pageStructureManager .psm-row:focus-within .pg5-status.pending,
#pageStructureManager .psm-row:hover .psm-custom-badge, #pageStructureManager .psm-row:focus-within .psm-custom-badge { visibility: hidden; }
#pageStructureManager .pg5-build { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
#pageStructureManager .psm-row:hover .pg5-build, #pageStructureManager .psm-row:focus-within .pg5-build { opacity: 1; pointer-events: auto; }
/* the list container takes no space while a page workspace is open */
#tab-pages.pg5-detail-open > .tab-panel-inner.pg5 { display: none !important; }

/* phone: readiness card stacks instead of pushing its actions past the card edge */
@media (max-width: 700px) {
  #pagesReadinessCard { grid-template-columns: minmax(0, 1fr) !important; }
  #pagesReadinessCard .rc-actions { flex-wrap: wrap; width: auto; }
  #pagesReadinessCard .rc-actions .action-btn { flex: 1 1 auto; max-width: 100%; }
}

/* the name box + button row in the middle of the page is hidden (markup and psmAddPage() kept); "+ Add Custom Page" lives next to the version dropdown in the Inner Pages header */
#pageStructureManager .psm-add-row { display: none !important; }

/* page workspace: same animated expand of the image panel */
#pageDetailView .hp5 .homepageWorkspaceGrid { transition: grid-template-columns .38s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { #pageDetailView .hp5 .homepageWorkspaceGrid { transition: none; } }

/* Pages tab → homepage version chooser: rows were 100% wide PLUS the shared 8px side margins, so they stuck out of the menu on the right.
   The menu is also anchored to the chooser's right edge (it sits at the card's right end) and never scrolls sideways. */
#tab-pages .pg5 .pagesSourceChooser .previewVersionLinksMenu { left: auto; right: 0; min-width: 270px; max-width: min(360px, calc(100vw - 32px)); overflow-x: hidden; overflow-y: auto; box-sizing: border-box; }
#tab-pages .pg5 .pagesSourceChooser .sourceVersionRow { width: calc(100% - 16px); box-sizing: border-box; }   /* 100% minus the shared 8px side margins */