/* v4-pages.css: the grids the v4 tree needs and the kit does not define.
   Scope: body.v4p (app/server/views/frontend/v4/_layout.pug). Tokens and the
   opt-in classes (.v4-wrap, .v4-section, .v4-head, .v4-card, .v4-btn-*,
   .v4-thumb*) come from designerbox-v4.css; nothing here restates them.
   The page is pure white: no section here paints a ground and no view in the
   tree uses .v4-band (Vytas, 2026-09-11). A one-column hero takes the kit's
   .v4-head--center; the detail heroes keep their text left beside the media.
   Raw stylesheet: bump ?v= in _layout.pug on every edit. */

/* ---- Buttons on the v10 shell -------------------------------------------- */
/* home-next-v10.css paints every link `color: inherit` at (0,1,1), which beats
   the kit's .v4-btn-primary (0,1,0) and leaves an ink label on an ink button.
   Restate the label at rest; the hover guard in designerbox-v4.css owns hover. */
html body.v4p a.v4-btn-primary { color: #FFFFFF; }
html body.v4p a.v4-btn-secondary { color: #121212; }

/* ---- Breadcrumb ---------------------------------------------------------- */
body.v4p .v4p-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 24px; font-size: 13px; line-height: 1.5; color: #6F6D6A; }
body.v4p .v4p-crumbs a { color: #6F6D6A; text-decoration: none; transition: color 150ms ease; }
body.v4p .v4p-crumbs a:hover { color: #121212; text-decoration: underline; text-underline-offset: 3px; }
/* The separator reads in the crumb colour: #D7D4CF on white was 1.4:1, which
   audit-v4.js reports as invisible text (it does not skip aria-hidden). */
body.v4p .v4p-crumbs-sep { color: #6F6D6A; }
/* On a phone the crumbs stay on one line and scroll sideways. A four-level
   path (Home / Templates / Product imagery / Hero product shot) wrapped to two
   lines at 390 and put the H1 146px below the top of main; the kit allows 130. */
@media (max-width: 767.98px) {
    body.v4p .v4p-crumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; margin-bottom: 20px; scrollbar-width: none; }
    body.v4p .v4p-crumbs::-webkit-scrollbar { display: none; }
}

/* home-next-v10.css also zeroes every paragraph (`body.v10 p`, (0,1,1)),
   which beats the kit's .v4-lead / .v4-sub (0,1,0) and glues a heading to
   its lead. Restate the kit's 16px at a heavier selector. */
html body.v4p .v4-lead, html body.v4p .v4-sub { margin: 16px 0 0; }
html body.v4p .v4-head--center .v4-lead, html body.v4p .v4-head--center .v4-sub { margin-inline: auto; }

/* ---- Hero section sits tighter under the capsule ------------------------- */
/* 40px above (the capsule spacer already clears the header) and 40px below,
   so the rail does not sit on 96 + 96px of empty page before section one. */
body.v4p .v4p-hero { padding-top: 40px; padding-bottom: 40px; }

/* ---- The use-case rail --------------------------------------------------- */
body.v4p .v4p-rail { display: flex; gap: 8px; overflow-x: auto; margin-top: 40px; padding-bottom: 4px; scrollbar-width: none; }
body.v4p .v4p-rail::-webkit-scrollbar { display: none; }
body.v4p .v4p-rail-item { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 36px; padding: 0 14px 0 6px; border: 1px solid #E6E4E1; border-radius: 10px; background: #FFFFFF; color: #3D3D3C; font-size: 13px; font-weight: 500; text-decoration: none; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
body.v4p .v4p-rail-item img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }
body.v4p .v4p-rail-item:hover { background: #F6F5F4; color: #121212; }
body.v4p .v4p-rail-item.is-active { background: #121212; border-color: #121212; color: #FFFFFF; padding-left: 14px; }

/* ---- Card grid ----------------------------------------------------------- */
body.v4p .v4p-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1024px) { body.v4p .v4p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body.v4p .v4p-grid { grid-template-columns: 1fr; } }

body.v4p a.v4p-card { display: flex; flex-direction: column; gap: 16px; padding: 12px; text-decoration: none; color: inherit; }
body.v4p .v4p-card-body { padding: 0 8px 8px; }
body.v4p .v4p-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.v4p .v4p-card-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #6F6D6A; }
body.v4p .v4p-badge { display: inline-flex; align-items: center; flex: 0 0 auto; height: 22px; padding: 0 8px; border-radius: 9999px; background: #ECEBE9; color: #3D3D3C; font-size: 11px; font-weight: 500; line-height: 1; }
body.v4p .v4p-badge--new { background: #E6FFC8; color: #121212; }

/* ---- The composed thumbnail: five layouts -------------------------------- */
body.v4p .v4-thumb { width: 100%; }
body.v4p .v4-thumb-input { top: 22%; left: 6%; width: 22%; aspect-ratio: 1; z-index: 2; }
body.v4p .v4-thumb--fan .v4-thumb-out { top: 14%; width: 24%; aspect-ratio: 3 / 4; }
body.v4p .v4-thumb--fan .v4-thumb-out-1 { left: 50%; z-index: 3; }
body.v4p .v4-thumb--fan .v4-thumb-out-2 { left: 63%; top: 18%; z-index: 2; }
body.v4p .v4-thumb--fan .v4-thumb-out-3 { left: 74%; top: 24%; z-index: 1; }
body.v4p .v4-thumb--grid .v4-thumb-out { width: 20%; aspect-ratio: 1; }
body.v4p .v4-thumb--grid .v4-thumb-out-1 { left: 50%; top: 8%; }
body.v4p .v4-thumb--grid .v4-thumb-out-2 { left: 73%; top: 8%; }
body.v4p .v4-thumb--grid .v4-thumb-out-3 { left: 50%; top: 52%; }
body.v4p .v4-thumb--grid .v4-thumb-out-4 { left: 73%; top: 52%; }
body.v4p .v4-thumb--stack .v4-thumb-out { left: 54%; width: 34%; aspect-ratio: 4 / 3; }
body.v4p .v4-thumb--stack .v4-thumb-out-1 { top: 30%; z-index: 3; }
body.v4p .v4-thumb--stack .v4-thumb-out-2 { top: 22%; left: 58%; z-index: 2; }
body.v4p .v4-thumb--stack .v4-thumb-out-3 { top: 14%; left: 62%; z-index: 1; }
body.v4p .v4-thumb--phone .v4-thumb-out { left: 58%; top: 8%; width: 22%; aspect-ratio: 9 / 16; }
body.v4p .v4-thumb--phone .v4-thumb-out-2, body.v4p .v4-thumb--phone .v4-thumb-out-3 { display: none; }
body.v4p .v4-thumb--video .v4-thumb-out { left: 50%; top: 12%; width: 44%; aspect-ratio: 16 / 9; }
body.v4p .v4-thumb--video .v4-thumb-out-2, body.v4p .v4-thumb--video .v4-thumb-out-3 { display: none; }
/* A card with no source photo (an app that starts from text) centres its results. */
body.v4p .v4-thumb:not(:has(.v4-thumb-input)) .v4-thumb-out-1 { left: 22%; }
body.v4p .v4-thumb:not(:has(.v4-thumb-input)) .v4-thumb-out-2 { left: 40%; }
body.v4p .v4-thumb:not(:has(.v4-thumb-input)) .v4-thumb-out-3 { left: 58%; }
/* One render alone, centred: the app's wordmark cards (v4-roster decorateThumb). */
body.v4p .v4-thumb.v4-thumb--solo .v4-thumb-out.v4-thumb-out-1 { left: 38%; top: 21%; width: 24%; aspect-ratio: 3 / 4; transform: rotate(-3deg); }

/* ---- Detail page: media beside the facts --------------------------------- */
body.v4p .v4p-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 8px; }
body.v4p .v4p-detail-info { position: sticky; top: 104px; }
body.v4p .v4p-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 12px; }
body.v4p .v4p-strip img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; border: 1px solid #E6E4E1; background: #ECEBE9; }
body.v4p .v4p-facts { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid #E6E4E1; }
body.v4p .v4p-facts li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #E6E4E1; font-size: 14px; line-height: 1.5; }
body.v4p .v4p-facts-k { color: #6F6D6A; }
body.v4p .v4p-facts-v { color: #121212; font-weight: 500; text-align: right; }
body.v4p .v4p-note { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #6F6D6A; }
/* On a phone the text comes first and the media stacks under it. With the
   thumbnail on top the H1 sat 556px below the top of main at 390; the kit
   allows 130px there (audit-align.js herotop). */
@media (max-width: 860px) {
    body.v4p .v4p-detail { grid-template-columns: 1fr; gap: 28px; }
    body.v4p .v4p-detail-info { position: static; order: -1; }
}

/* ---- Steps: kit cards with a 12px numeral --------------------------------- */
body.v4p .v4p-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
body.v4p .v4p-steps li { display: flex; flex-direction: column; gap: 12px; }
body.v4p .v4p-steps li p { margin: 0; font-size: 16px; line-height: 1.6; color: #3D3D3C; }
/* auto-fit gives five columns at 1440, so six steps left one card alone on a
   row (eight apps have six). Even rows for six to nine steps. */
@media (min-width: 1024px) {
    body.v4p .v4p-steps:has(> li:nth-child(6):last-child),
    body.v4p .v4p-steps:has(> li:nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.v4p .v4p-steps:has(> li:nth-child(7):last-child),
    body.v4p .v4p-steps:has(> li:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body.v4p .v4p-step-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 10px; background: #F6F5F4; color: #121212; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---- Two-column prose blocks for the surface pages ----------------------- */
body.v4p .v4p-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { body.v4p .v4p-two { grid-template-columns: 1fr; } }
body.v4p .v4p-prose p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: #3D3D3C; max-width: 60ch; }
body.v4p .v4p-prose p:last-child { margin-bottom: 0; }

/* ---- Reference table (steps page) ---------------------------------------- */
body.v4p .v4p-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
body.v4p .v4p-table th { text-align: left; padding: 12px 16px; background: #F6F5F4; color: #3D3D3C; font-size: 13px; font-weight: 500; }
body.v4p .v4p-table td { padding: 16px; border-bottom: 1px solid #E6E4E1; color: #3D3D3C; vertical-align: top; }
body.v4p .v4p-table td:first-child { color: #121212; font-weight: 500; white-space: nowrap; }
body.v4p .v4p-table-wrap { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
    body.v4p .v4p-crumbs a, body.v4p .v4p-rail-item { transition: none; }
}

/* An app with no result images (the wordmark cards): one column, centred per
   the kit's one-column hero rule; the facts list keeps its left-aligned rows
   inside a narrower centred block. */
body.v4p .v4p-detail--solo { grid-template-columns: 1fr; }
body.v4p .v4p-detail--solo .v4p-detail-info { position: static; }
body.v4p .v4p-detail--solo .v4p-facts { max-width: 480px; margin-inline: auto; text-align: left; }

/* =============================================================================
   The product surfaces (2026-09-18): /workflows, /batch, /brand, /assets,
   /image-editor, /video-editor, /how-it-works on one shape (v4/_surface.pug,
   config/v4/surfaces.js). The transformation patterns themselves are in
   v4-transform.css (v4x-*); below are only the section grids these pages need
   and the compositions drawn from real renders where a live capture does not
   exist yet (the workflow canvas, the batch sheet, the brand record, the
   Assets library, the edit sequence, the editor lanes, the map tile pictures).
   Values: white mounts with the hairline, radius 16 on a mount and 10 inside
   it (under the card rule's floor), dotted paper only on the panel, nothing
   moves on hover, no gradient, no glow.
   ============================================================================= */

/* ---- The story section: the transformation sits right under the hero ------ */
body.v4p .v4p-hero + .v4p-story { padding-top: 0; }
body.v4p .v4p-story .v4x-fig { width: 100%; box-sizing: border-box; }
body.v4p .v4p-story-second { margin-top: 24px; }
body.v4p .v4p-story-link { margin-top: 24px; max-width: none; }
/* Hero size (/how-it-works): a larger source tile beside the twelve results. */
@media (min-width: 561px) { body.v4p .v4p-xf--hero .v4x-in { max-width: 320px; } }
/* Two results only (/assets): the pair does not fill the whole column. */
body.v4p .v4p-xf--two .v4x-grid--2 { max-width: 520px; margin-inline: auto; }
/* Five results in one row (/brand). Three wide on a phone, like the 4x3 grid. */
body.v4p .v4x-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---- "Does that sound like you?": the paragraph, then the checklist -------- */
html body.v4p .v4-card.v4p-buyer { padding: 32px; }
body.v4p .v4p-buyer { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 48px; align-items: start; }
body.v4p .v4p-buyer-text .v4x-p { max-width: 56ch; font-size: 16px; line-height: 1.6; }
body.v4p .v4p-buyer-checks .v4x-checks-wrap { margin-top: 0; }
body.v4p .v4p-buyer-checks .v4x-checks-label { margin-bottom: 14px; }
body.v4p .v4p-buyer-checks .v4x-checks { gap: 12px; }

/* ---- The four ways to run it (/how-it-works) ------------------------------ */
body.v4p .v4p-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body.v4p .v4p-flow-card { gap: 0; }
body.v4p .v4p-flow-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 12px 12px; }
body.v4p .v4p-flow-body .v4x-p { margin: 0; }
body.v4p .v4p-flow-body .v4-link { margin-top: 6px; }

/* ---- The compositions ------------------------------------------------------ */
/* The paper panel of a composed figure, and the white mount on it. */
body.v4p .v4p-comp { display: flex; align-items: center; justify-content: center; padding: 20px; }
body.v4p .v4p-mp {
    width: 100%; box-sizing: border-box; padding: 16px; overflow: hidden;
    border: 1px solid #E6E4E1; border-radius: 16px; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(18, 18, 18, 0.10);
}
/* One picture cell inside a mount: paper-grey ground, radius 10, the image
   covering it. */
body.v4p .v4p-mp-cell { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 10px; background-color: #F6F5F4; min-width: 0; }
html body.v4p .v4p-mp-cell img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
body.v4p .v4p-mp-cell--tall { aspect-ratio: 4 / 5; }
body.v4p .v4p-mp-cell--xs { flex: none; width: 40px; height: 40px; aspect-ratio: auto; border-radius: 8px; }
body.v4p .v4p-mp-cell--sm { flex: none; width: 56px; height: 56px; aspect-ratio: auto; border-radius: 8px; }
body.v4p .v4p-mp-cell--clip { aspect-ratio: 16 / 9; border-radius: 8px; }
html body.v4p .v4p-mp-cell--clip img { object-position: center 22%; }
/* A composition with a clip beside it (/video-editor). */
body.v4p .v4p-comp-pair { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 24px; align-items: center; width: 100%; }

/* The workflow canvas: the photo in, step boxes joined by wires, the end. */
body.v4p .v4p-canvas { display: flex; align-items: center; }
body.v4p .v4p-node { flex: 1 1 0; min-width: 0; box-sizing: border-box; padding: 8px; border: 1px solid #E6E4E1; border-radius: 10px; background-color: #FFFFFF; }
body.v4p .v4p-node--in { flex-basis: 0; }
body.v4p .v4p-node-t { display: block; margin: 0 2px 6px; font-size: 12px; font-weight: 500; line-height: 1.5; color: #3D3D3C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v4p .v4p-wire { flex: 0 0 28px; height: 1px; background-color: #D7D4CF; }
body.v4p .v4p-node--end { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
body.v4p .v4p-node--end .v4p-node-t { margin-right: 0; margin-left: 0; }
body.v4p .v4p-node-end { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 10px; background-color: #F6F5F4; color: #121212; }
/* A map tile shows the three step boxes only: the source and the end would
   leave five boxes at 60px each. */
body.v4p .v4p-canvas--mini .v4p-node--in, body.v4p .v4p-canvas--mini .v4p-node--end, body.v4p .v4p-canvas--mini .v4p-node--in + .v4p-wire, body.v4p .v4p-canvas--mini .v4p-wire:last-of-type { display: none; }
body.v4p .v4p-canvas--mini .v4p-node { padding: 5px; }
body.v4p .v4p-canvas--mini .v4p-node-t { margin: 0 1px 4px; font-size: 10px; }
body.v4p .v4p-canvas--mini .v4p-wire { flex-basis: 10px; }
body.v4p .v4p-canvas--mini .v4p-mp-cell { border-radius: 6px; }

/* The batch sheet: a row per product, its result, a status. */
body.v4p .v4p-sheet { display: flex; flex-direction: column; padding: 8px 16px; }
body.v4p .v4p-sheet--full { max-width: 960px; }
body.v4p .v4p-sheet-row { display: grid; grid-template-columns: 44px minmax(0, 5fr) minmax(0, 4fr) 72px 92px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #E6E4E1; font-size: 14px; line-height: 1.5; color: #121212; }
body.v4p .v4p-sheet-tpl { color: #3D3D3C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v4p .v4p-sheet--full .v4p-mp-cell--xs { width: 56px; height: 56px; }
body.v4p .v4p-sheet-row:last-child { border-bottom: 0; }
body.v4p .v4p-sheet-row--head { padding: 6px 0; color: #6F6D6A; font-size: 12px; font-weight: 500; letter-spacing: 0.025em; text-transform: uppercase; }
body.v4p .v4p-sheet-n { color: #6F6D6A; font-variant-numeric: tabular-nums; }
body.v4p .v4p-sheet-prod { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.v4p .v4p-sheet-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v4p .v4p-sheet-res { display: flex; }
body.v4p .v4p-status { display: inline-flex; align-items: center; justify-self: start; height: 22px; padding: 0 8px; border-radius: 9999px; font-size: 11px; font-weight: 500; line-height: 1; color: #3D3D3C; background-color: #ECEBE9; }
body.v4p .v4p-status--kept { background-color: #E6FFC8; color: #121212; }
body.v4p .v4p-status--review { background-color: #F6EFE4; color: #8A6A3D; }
body.v4p .v4p-sheet--mini { padding: 4px 10px; }
body.v4p .v4p-sheet--mini .v4p-sheet-row { grid-template-columns: 18px minmax(0, 1fr) 30px 54px; gap: 8px; padding: 5px 0; font-size: 11px; }
body.v4p .v4p-sheet--mini .v4p-sheet-tpl { display: none; }
body.v4p .v4p-sheet--mini .v4p-mp-cell--xs { width: 30px; height: 30px; border-radius: 6px; }
body.v4p .v4p-sheet--mini .v4p-sheet-prod { gap: 8px; }
body.v4p .v4p-sheet--mini .v4p-status { height: 18px; padding: 0 6px; font-size: 10px; }

/* The brand record: the name, then colours, fonts, rules; products and
   references beside them at section size. */
body.v4p .v4p-record { display: flex; flex-direction: column; gap: 12px; }
body.v4p .v4p-record-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #E6E4E1; }
body.v4p .v4p-record-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background-color: #121212; color: #FFFFFF; font-size: 14px; font-weight: 600; }
body.v4p .v4p-record-name { font-size: 14px; font-weight: 500; color: #121212; }
body.v4p .v4p-record-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 32px; }
body.v4p .v4p-record-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
body.v4p .v4p-record-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
body.v4p .v4p-record-k { padding-top: 2px; font-size: 12px; font-weight: 500; line-height: 1.5; color: #6F6D6A; }
body.v4p .v4p-swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
body.v4p .v4p-swatches li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.5; color: #3D3D3C; }
body.v4p .v4p-swatch { flex: none; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid rgba(18, 18, 18, 0.08); border-radius: 9999px; }
body.v4p .v4p-record-fonts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; line-height: 1.5; color: #3D3D3C; }
body.v4p .v4p-record-font--head { font-weight: 600; color: #121212; }
body.v4p .v4p-record-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; color: #3D3D3C; }
body.v4p .v4p-record-rules li { display: flex; gap: 8px; }
body.v4p .v4p-record-rules li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 9999px; background-color: #D7D4CF; }
body.v4p .v4p-record-pics { display: flex; flex-wrap: wrap; gap: 8px; }
body.v4p .v4p-record--full { max-width: 960px; }
body.v4p .v4p-record--full .v4p-record-pics .v4p-mp-cell { width: 104px; height: 104px; border-radius: 10px; }
body.v4p .v4p-record--mini { gap: 6px; }
body.v4p .v4p-record--mini .v4p-record-head { gap: 8px; padding-bottom: 6px; }
body.v4p .v4p-record--mini .v4p-record-mark { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }
body.v4p .v4p-record--mini .v4p-record-name { font-size: 12px; }
body.v4p .v4p-record--mini .v4p-record-row { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
body.v4p .v4p-record--mini .v4p-record-k { font-size: 10px; padding-top: 0; }
body.v4p .v4p-record--mini .v4p-swatches { gap: 6px; }
body.v4p .v4p-record--mini .v4p-swatch { width: 16px; height: 16px; }
body.v4p .v4p-record--mini .v4p-record-fonts, body.v4p .v4p-record--mini .v4p-record-rules { font-size: 11px; }
body.v4p .v4p-record--mini .v4p-record-rules { gap: 2px; }
body.v4p .v4p-record--mini .v4p-record-rules li::before { width: 4px; height: 4px; margin-top: 6px; }
body.v4p .v4p-record--mini .v4p-record-pics { gap: 4px; }
body.v4p .v4p-record--mini .v4p-record-pics .v4p-mp-cell { width: 44px; height: 44px; border-radius: 6px; }

/* The Assets library: folders and filters, a day group, a 4x2 grid. */
body.v4p .v4p-library { display: flex; flex-direction: column; gap: 12px; }
body.v4p .v4p-library-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
body.v4p .v4p-library-folders, body.v4p .v4p-library-filters { display: flex; flex-wrap: wrap; gap: 6px; }
body.v4p .v4p-folder { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #E6E4E1; border-radius: 8px; background-color: #FFFFFF; color: #3D3D3C; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
body.v4p .v4p-folder .ph { flex: none; width: 14px; height: 14px; }
body.v4p .v4p-folder.is-active { border-color: #121212; background-color: #121212; color: #FFFFFF; }
body.v4p .v4p-library-day { font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.025em; text-transform: uppercase; color: #6F6D6A; }
body.v4p .v4p-library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
body.v4p .v4p-tag { position: absolute; left: 8px; bottom: 8px; z-index: 2; height: 22px; padding: 0 8px; border-radius: 9999px; background-color: #FFFFFF; color: #121212; font-size: 11px; font-weight: 500; line-height: 22px; white-space: nowrap; }
body.v4p .v4p-library--mini { gap: 0; height: 100%; }
body.v4p .v4p-library--mini .v4p-library-grid { height: 100%; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; }
body.v4p .v4p-library--mini .v4p-mp-cell { aspect-ratio: auto; height: 100%; min-height: 0; border-radius: 6px; }

/* The image editor: one picture through its edits, the pixel size under each. */
body.v4p .v4p-seq { display: flex; align-items: center; justify-content: center; gap: 16px; }
body.v4p .v4p-seq-v { flex: 0 1 272px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
body.v4p .v4p-seq-v .v4p-mp-cell { width: 100%; margin-bottom: 6px; }
body.v4p .v4p-seq-l { font-size: 13px; font-weight: 500; line-height: 1.5; color: #121212; }
body.v4p .v4p-seq-e { font-size: 13px; line-height: 1.5; color: #3D3D3C; }
body.v4p .v4p-seq-px { font-size: 12px; line-height: 1.5; color: #6F6D6A; font-variant-numeric: tabular-nums; }
body.v4p .v4p-seq-arrow { display: block; flex: none; width: 40px; height: auto; color: #121212; }
body.v4p .v4p-seq--mini { gap: 6px; height: 100%; }
body.v4p .v4p-seq--mini .v4p-seq-v { flex: 1 1 0; gap: 2px; height: 100%; }
body.v4p .v4p-seq--mini .v4p-seq-v .v4p-mp-cell { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; width: 100%; margin-bottom: 2px; border-radius: 6px; }
body.v4p .v4p-seq--mini .v4p-seq-l { font-size: 10px; }
body.v4p .v4p-seq--mini .v4p-seq-arrow { width: 20px; }

/* The video editor: the player, then the clips, words and sound lanes. */
body.v4p .v4p-editor { display: flex; flex-direction: column; gap: 12px; }
body.v4p .v4p-player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-height: 320px; border-radius: 10px; background-color: #ECEBE9; }
html body.v4p .v4p-player img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 32%; }
body.v4p .v4p-lanes { display: flex; flex-direction: column; gap: 8px; }
body.v4p .v4p-lane { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; }
body.v4p .v4p-lane-l { font-size: 12px; font-weight: 500; line-height: 1.5; color: #6F6D6A; }
body.v4p .v4p-lane-clips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
body.v4p .v4p-lane-track { position: relative; height: 26px; border: 1px solid #E6E4E1; border-radius: 6px; background-color: #FFFFFF; }
body.v4p .v4p-word { position: absolute; top: 7px; height: 10px; border-radius: 5px; background-color: #D7D4CF; }
body.v4p .v4p-wave { display: block; width: 100%; height: 100%; color: #6F6D6A; }
body.v4p .v4p-editor--mini { gap: 6px; height: 100%; justify-content: center; }
body.v4p .v4p-editor--mini .v4p-player { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; border-radius: 6px; }
body.v4p .v4p-editor--mini .v4p-player .v4x-play-disc { width: 28px; height: 28px; }
body.v4p .v4p-editor--mini .v4p-lanes { flex: none; }
body.v4p .v4p-editor--mini .v4p-lanes { gap: 5px; }
body.v4p .v4p-editor--mini .v4p-lane { grid-template-columns: 34px minmax(0, 1fr); gap: 6px; }
body.v4p .v4p-editor--mini .v4p-lane-l { font-size: 10px; }
body.v4p .v4p-editor--mini .v4p-lane-clips { gap: 4px; }
body.v4p .v4p-editor--mini .v4p-lane-clips .v4p-mp-cell { border-radius: 5px; }
body.v4p .v4p-editor--mini .v4p-lane-track { height: 18px; border-radius: 5px; }
body.v4p .v4p-editor--mini .v4p-word { top: 5px; height: 6px; }

/* ---- The map tile pictures (/how-it-works) ---------------------------------- */
/* The mount fills the 16:10 slot; each composition sets its own display. */
body.v4p .v4x-map-pic > .v4p-mp { height: 100%; min-height: 0; padding: 10px; }
body.v4p .v4x-map-pic .v4p-canvas, body.v4p .v4x-map-pic .v4p-sheet, body.v4p .v4x-map-pic .v4p-record { height: 100%; justify-content: center; }
body.v4p .v4p-mp--grid2 { display: grid; height: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; }
body.v4p .v4p-mp--grid2 .v4p-mp-cell { aspect-ratio: auto; height: 100%; min-height: 0; border-radius: 6px; }
body.v4p .v4p-mp--app { display: grid; height: 100%; grid-template-columns: minmax(0, 1fr) 42%; gap: 10px; align-items: stretch; }
body.v4p .v4p-mp--app .v4p-mp-cell--tall { aspect-ratio: auto; height: 100%; border-radius: 8px; }
body.v4p .v4p-form, body.v4p .v4p-panel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.v4p .v4p-form-t, body.v4p .v4p-panel-t { font-size: 12px; font-weight: 500; line-height: 1.5; color: #121212; }
body.v4p .v4p-field { display: flex; flex-direction: column; gap: 2px; }
body.v4p .v4p-field-l { font-size: 10px; line-height: 1.4; color: #6F6D6A; }
body.v4p .v4p-field-i { display: block; height: 20px; border: 1px solid #E6E4E1; border-radius: 6px; background-color: #FBFBFA; }
body.v4p .v4p-run { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; height: 26px; padding: 0 12px; margin-top: 4px; border-radius: 8px; background-color: #121212; color: #FFFFFF; font-size: 11px; font-weight: 500; line-height: 1; }
body.v4p .v4p-mp--chat { display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 10px; }
body.v4p .v4p-chips { display: flex; flex-wrap: wrap; gap: 4px; }
body.v4p .v4p-msg { display: flex; flex-direction: column; gap: 6px; }
body.v4p .v4p-msg-you { align-self: flex-end; max-width: 78%; padding: 6px 10px; border-radius: 10px; background-color: #F6F5F4; font-size: 11px; line-height: 1.4; color: #121212; }
body.v4p .v4p-msg-row { display: flex; align-items: center; gap: 10px; }
body.v4p .v4p-msg-row .v4p-mp-cell--sm { width: 84px; height: 84px; }
body.v4p .v4p-msg-db { font-size: 11px; line-height: 1.4; color: #3D3D3C; }
body.v4p .v4p-mp--figma { display: grid; height: 100%; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; padding: 0; overflow: hidden; }
body.v4p .v4x-map-pic > .v4p-mp--figma, body.v4p .v4x-map-pic > .v4p-mp--chrome { padding: 0; }
body.v4p .v4p-figma-canvas { position: relative; display: flex; align-items: center; justify-content: center; padding: 12px; background-color: #F6F5F4; background-position: -1px -1px; background-size: 12px 12px; background-image: radial-gradient(circle, rgba(18, 18, 18, 0.07) 1px, transparent 1px); }
body.v4p .v4p-figma-frame { position: relative; width: 62%; padding: 3px; border-radius: 6px; background-color: #FFFFFF; box-shadow: 0 1px 3px rgba(18, 18, 18, 0.10); }
html body.v4p .v4p-figma-frame img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
body.v4p .v4p-figma-l { position: absolute; left: 0; top: -16px; font-size: 10px; line-height: 1.4; color: #6F6D6A; white-space: nowrap; }
body.v4p .v4p-mp--figma .v4p-panel { padding: 10px 10px 10px 0; }
body.v4p .v4p-mp--chrome { display: flex; flex-direction: column; height: 100%; gap: 0; padding: 0; overflow: hidden; }
body.v4p .v4p-browser-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid #E6E4E1; background-color: #F6F5F4; }
body.v4p .v4p-dot { width: 8px; height: 8px; border-radius: 9999px; background-color: #D7D4CF; }
body.v4p .v4p-url { flex: 1 1 auto; margin-left: 6px; height: 18px; padding: 0 8px; border-radius: 6px; background-color: #FFFFFF; font-size: 10px; line-height: 18px; color: #6F6D6A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v4p .v4p-browser-body { display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: 10px; flex: 1 1 auto; min-height: 0; padding: 10px; }
body.v4p .v4p-page-lines { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
body.v4p .v4p-page-lines span { display: block; height: 8px; border-radius: 4px; background-color: #ECEBE9; }
body.v4p .v4p-page-lines span:nth-child(1) { width: 60%; height: 14px; }
body.v4p .v4p-page-lines span:nth-child(3) { width: 84%; }
body.v4p .v4p-page-lines span:nth-child(4) { width: 48%; }
body.v4p .v4p-browser-body .v4p-panel { padding: 8px; border: 1px solid #E6E4E1; border-radius: 8px; }
body.v4p .v4p-browser-body .v4p-mp-cell { aspect-ratio: 4 / 5; border-radius: 6px; }
body.v4p .v4p-mp--phone { display: flex; align-items: center; justify-content: center; height: 100%; padding: 10px; }
body.v4p .v4p-phone { box-sizing: border-box; height: 100%; aspect-ratio: 553 / 1200; padding: 3px; border-radius: 16px; background-color: #000000; box-shadow: 0 2px 10px rgba(18, 18, 18, 0.10); }
html body.v4p .v4p-phone img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 13px; }

/* ---- Breakpoints ----------------------------------------------------------- */
@media (max-width: 1024px) {
    body.v4p .v4p-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    body.v4p .v4p-buyer { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    body.v4p .v4p-record-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    html body.v4p .v4-card.v4p-buyer { padding: 20px; }
    body.v4p .v4p-comp-pair { grid-template-columns: minmax(0, 1fr); }
    body.v4p .v4p-comp-pair .v4x-video-frame { max-width: 200px; margin-inline: auto; }
    body.v4p .v4p-canvas { flex-wrap: wrap; justify-content: center; gap: 8px; }
    body.v4p .v4p-canvas--full .v4p-node { flex: 0 0 calc(50% - 4px); }
    body.v4p .v4p-canvas--full .v4p-wire { display: none; }
    body.v4p .v4p-seq { flex-wrap: wrap; }
    body.v4p .v4p-seq-arrow { width: 24px; transform: rotate(90deg); }
    body.v4p .v4p-sheet-row { grid-template-columns: 28px minmax(0, 1fr) 44px 72px; gap: 8px; }
    body.v4p .v4p-sheet-tpl { display: none; }
    body.v4p .v4p-sheet--full .v4p-mp-cell--xs { width: 40px; height: 40px; }
    body.v4p .v4p-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 560px) {
    body.v4p .v4p-flow { grid-template-columns: minmax(0, 1fr); }
    body.v4p .v4x-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.v4p .v4p-comp { padding: 12px; }
    body.v4p .v4p-mp { padding: 10px; border-radius: 10px; }
    body.v4p .v4p-story-second { margin-top: 16px; }
    body.v4p .v4p-canvas--full .v4p-node-t { font-size: 11px; }
    body.v4p .v4p-sheet { padding: 4px 8px; }
    body.v4p .v4p-sheet-row { font-size: 12px; }
    body.v4p .v4p-mp-cell--xs { width: 32px; height: 32px; }
    body.v4p .v4p-record-row { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
    body.v4p .v4p-record--full .v4p-record-pics .v4p-mp-cell { width: 64px; height: 64px; }
    body.v4p .v4p-library-grid { gap: 4px; }
    body.v4p .v4p-tag { display: none; }
    body.v4p .v4p-seq { gap: 8px; }
    body.v4p .v4p-seq-v { flex: 0 1 220px; }
    body.v4p .v4p-lane { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
}

/* =============================================================================
   The directory tree at a hard 390 (the template library, the nine job hubs,
   one template, the app library, one app). Added 2026-09-18.

   Vytas, the same day: "a block shows the input and at most four results in a
   2x2, no tile under 120px wide, no text under 14px". The kit folds a four-wide
   result grid to three columns on a phone, which lands at 99px inside a card on
   a 390 screen, and the source tile's 40% lands at 119px. The homepage solved
   the same thing under body.hv; this is the same fix for the `v4t-fig` figures
   these five views draw (app/server/views/frontend/v4/_library.pug libStory).
   ============================================================================= */
@media (max-width: 560px) {
    body.v4p .v4t-fig .v4x-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.v4p .v4t-fig .v4x-cell:nth-child(n+5) { display: none; }
    body.v4p .v4t-fig .v4x-in { max-width: 44%; }
}